[TOC] CSS樣式操作 給字體設置長寬 只有塊級標簽才可以設置長寬 行內標簽設置了沒有任何作用(僅僅只取決於內部文本值) 字體顏色 後面可以跟多種顏色數據 顏色英文： (1,1,1)：可以利用截圖軟體獲取三基色數字,數字範圍只能是0~255 直接使用 pycharm 提供的取色器 (128,12 ...
目錄
CSS樣式操作
給字體設置長寬
只有塊級標簽才可以設置長寬
行內標簽設置了沒有任何作用(僅僅只取決於內部文本值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Yeah</title>
<style>
div {
width: 200px;
height: 100px;
}
span {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div>
div
</div>
<span>span</span>
</body>
</html>字體顏色
color後面可以跟多種顏色數據
- 顏色英文：
red rgb(1,1,1)：可以利用截圖軟體獲取三基色數字,數字範圍只能是0~255- 直接使用 pycharm 提供的取色器
rgba(128,128,128,0.4)：最後一個數字可以調節顏色的透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YEAH</title>
<style>
p {
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif;
font-size: 48px;
font-weight: lighter;
/*color: red;*/
/*color: rgb(156,59,24);*/
/*color: #c3ff69;*/
color: rgba(61,94,86,0.7);
}
</style>
</head>
<body>
<p>
鵝鵝鵝，曲項向天歌。
</p>
</body>
</html>語義
a {
text-decoration: none;
}
取消a標簽預設的下劃線
背景圖片
預設是鋪滿整個區域
通常一個頁面上的一個個小圖標，並不是單獨的，而是通過一個非常大的圖片，該圖片上有網址所用到所有的小圖標。
通過控制背景圖片的位置，來顯示不同的圖標樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YEAH</title>
<style>
#d1 {
height: 800px;
background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573737709470&di=3763ef1067405bd66e3c372343454bc6&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201608%2F24%2F20160824232248_PdVQU.jpeg");
background-attachment: fixed;
}
</style>
</head>
<body>
<div style="height: 600px;background-color: red"></div>
<div style="height: 600px;background-color: blue"></div>
<div id="d1"></div>
<div style="height: 600px;background-color: greenyellow"></div>
</body>
</html>邊框
後面跟三個參數
顏色，字體，樣式
可以單獨設置：樣式，顏色，粗細
border-top-style:dotted;
border-top-color:red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
可以單獨設置某一邊的樣式
border-top: 3px solid red;
border-left: 1px dotted green;
border-right: 5px dashed blue;
border-bottom: 10px solid pink;
也可以簡寫統一設置
display
inline 將塊級標簽變成行內標簽
block 能夠將行內標簽設置成長寬和獨占一行
inline-block 即可以設置長度，也可以在一行展示
display:none 隱藏標簽，並且標簽原來占的位置也消失了
visibility:hidden 隱藏標簽，但是標簽原來的位置還在
盒子模型
以快遞盒為例
1.兩個快遞盒之間的距離(標簽與標簽之間的距離)
2.快遞盒盒子的厚度(邊框border)
3.快遞盒中的物品距離內邊框的距離(內部文本與內邊框之間的距離)
4.物品的大小(文本大小)
margin: 10px; 只寫一個參數，上下左右全是
margin: 10px 20px; 第一個控制的是上下，第二個則是左右
margin: 10px 20px 30px; 第一個控制的是上，第二個是左右。第三個是下
margin: 10px 20px 30px 40px; 第一個控制的是上，第二個是右，第三個是下，第四個是左
margin:0 auto; 左右居中，不能上下居中
浮動(**************)
float
在CSS中，任何元素都可以浮動。
浮動的元素，是脫離正常的文檔流(原來的位置會空出來)
瀏覽器會優先展示文本內容(**********)
浮動帶來的影響
會造成父標簽塌陷
clear
可清除浮動帶來的影響
.clearfix:after {
content: '';
clear: both; /*左右兩邊都不能有浮動的元素*/
display: block;
}
哪一個父標簽塌陷了，就給它加clearfix這個類屬性值overflow溢出屬性
visible 預設值。內容不會被修改，會呈現在元素框之外
hidden 內容會被修剪，並且其餘內容是不可見的
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容
inherit 規定應該從父元素繼承 overflow屬性的值
定位
所有的標簽預設都是靜態的，無法改變位置
position: static;
必須將靜態的狀態修改成定位之後
相對定位(瞭解) relative
相對於標簽原來的位置，移動
絕對定位(購物車) absolute
相對於已經定位過(只要不是static都可以 relative)的父標簽，再做定位(**************)
固定定位(回到頂部) fixed
相對於瀏覽器視窗，固定在某個位置不動
位置的辯護是否脫離文檔流
1.不脫離文檔流
相對定位
2.脫離文檔流
浮動的元素
絕對定位
opacity
既可以調顏色，也可以調字體
