HTML筆記——④css樣式表、選擇器、常用屬性
一 CSS
Style Sheet 層疊樣式表，用于修飾網頁信息的顯示樣式，目前推薦遵循的是W3C發布的CSS3.0.
CSS實現內容與樣式的分離，便于團隊開發、維護
1.1 CSS語法 每個CSS樣式由兩部分組成：選擇符和聲明，聲明又分為屬性和屬性值；屬性必須放在{}中，屬性與屬性值用:連接。每條聲明用;結束。當一個屬性有多個屬性值的時候，屬性值與屬性值不分先后順序，用空格隔開。在書寫樣式過程中，空格、換行等操作不影響屬性顯示。
選擇器 { 屬性1 : 值1 ; 屬性2 : 值2 }
1.2 CSS樣式表
CSS樣式表分為內部樣式表、外部樣式表、行內樣式表
同一標簽的同一屬性優先級是最近原則 可以添加! 改變優先級
1.2.1 內部樣式表 格式：一般放在中便于區分
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div{width:100px;height:100px;background-color: red;}
style>
head>
<body>
<div>區域塊div>
<span>內聯span>
body>
html>
1.2.2 外部樣式表 引入一個單獨的CSS文件，后綴是.css通過link標簽引入外部資源網頁添加css樣式表的方式，rel屬性指定資源跟頁面的關系，href屬性資源的地址。
或者通過@方式引入外部樣式 ( 這種方式有很多問題，不建議使用 )
<link rel="stylesheet" type="text/css" href="css/index.css" />
<style>
@import url(css/index.css);
style>
擴展知識點：link和之間的區別
本質的差別：link屬于XHTML標簽，而@完全是CSS提供的一種方式。加載順序的差別：當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯。兼容性的差別：@是CSS2.1提出的，所以老的瀏覽器不支持，@只有在IE5以上的才能識別，而link標簽無此問題。 1.2.3 行內樣式表
<h1 style="color:red;">11111111111111-aaah1>
1.3 CSS常用屬性 1.3.1 顏色 單詞表示法 : red blue green …
<style>
div{background-color:red;}
style>
十六進制表示法：# #
0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f
rgb三原色表示法：rgb(255,255,255);
取值范圍 0 ~ 255
獲取顏色的工具：
提取顏色的下載地址
工具
1.3.2 CSS背景樣式
-color 背景色
-image 背景圖
url(背景地址)
默認：會水平垂直都鋪滿背景圖
- 平鋪方式
-x x軸平鋪
-y y軸平鋪
( x , y 都進行平鋪，默認值 )
no- 都不平鋪
- : 背景位置
x y : (px、%) | 單詞
x : left、、right
y : top、、
- : 背景圖隨滾動條移動的方式
: 默認值 ( 背景位置是按照當前元素進行偏移的 )
fixed ( 背景位置是按照瀏覽器進行偏移的 )
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div{width:2000px;height:2000px;
background-image:url(./圖片合集/QQ截圖20221022195509.png);
background-repeat:repeat-x;
}
style>
head>
<body>
<div>div>
body>
html>
1.3.3CSS邊框樣式
-style : 邊框樣式
solid : 實線
: 虛線
: 點線
-width : 邊框大小
px …
-color : 邊框顏色
red #f00 …
邊框也可以針對某一天邊進行單獨設置 : -left-style : 中間是方向 left、right、top、
顏色：透明顏色 transparent
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
#div1{width:300px;height:300px;border-style: dotted;border-color: red;border-width: 20px;}
#div2{width:300px;height:300px;border-right-style: dotted;border-right-width: 10px;border-right-color: blue;}
style>
head>
<body>
<div id="div1">div>
<div id="div2">div>
body>
html>
1.3.4 CSS文字樣式
font- : 字體類型
英文、中文
襯線體、非襯線體
注意點：
1.多個字體類型的設置目的
2.引號的添加的目的
font-size : 字體大小
默認 : 16px
寫法 : (px) | 單詞 ( small large … 不推薦使用)
font- : 字體粗細
模式： 正常( ) 加粗 ( bold )
寫法：單詞(、bold) | ( 100 200 … 900 , 100到500都是正常的，600都900都是加粗的 )
font-style : 字體樣式
模式： 正常 ( ) 斜體 ( )
寫法：單詞 ( 、 )
注：也是表示斜體，用的比較少，一般了解即可。
區別：1. 帶有傾斜屬性的字體的才可以設置傾斜操作。
2. 沒有傾斜屬性的字體也可以設置傾斜操作。
1.3.5 CSS段落樣式
text-：文本裝飾
下劃線 :
刪除線 :line-
上劃線 :
不添加任何裝飾 : none
注：添加多個文本修飾：line-
text-：文本大小寫 （ 針對英文段落 ）
小寫：
大寫：
只針對首字母大寫：
text- : 文本縮進
首行縮進
em單位：相對單位，1em永遠都是跟字體大小相同
text-align : 文本對齊方式
對齊方式 : left 、right、、（兩端點對齊）
line- : 定義行高
什么是行高，一行文字的高度，上邊距和下邊距的等價關系。
默認行高：不是固定值，而是變化的。根據當前字體的大小再不斷的變化。
取值：1. ( px ) | scale ( 比例值 , 跟文字大小成比例的 )
etter- : 字之間的間距
word- : 詞之間的間距 ( 針對英文段落的 )
英文和數字不自動折行的問題：
1. word-break : break-all; (非常強烈的折行)
2. word-wrap : break-word;(不是那么強烈的折行 ，會產生一些空白區域)
<style>
p{width:300px;text-decoration: underline overline;}
style>
1.3.6 CSS復合樣式
復合的寫法，是通過空格的方式實現的。復合寫法有的是不需要關心順序，例如、；有的是需要關心順序，例如font。
1. : red url() 0 0;
2. : 1px red solid;
3. font :
注：最少要有兩個值 size
style size √
style size √
style size/line- √
注：如果非要混合去寫的話，那么要先寫復合樣式網頁添加css樣式表的方式，再寫單一樣式，這樣樣式才不會被覆蓋掉。
二 CSS選擇器
要使用CSS對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器
2.1 元素選擇符/類型選擇符(選擇器） 語法：元素名稱{屬性:屬性值;屬性:屬性值;}當統一文檔某個元素的顯示效果時，可以使用類型選擇符
（如：改變文檔所有p段落樣式） 2.2 class選擇器/類選擇器 語法:.
.class名{屬性:屬性值;}
class="class名"
用法：
class選擇器更適合定義一類樣式；
class選擇器是可以復用的。
可以添加多個class樣式。
多個樣式的時候，樣式的優先級根據CSS決定，而不是class屬性中的順序。
2.3 ID選擇器 格式：
#id名{} id="id名"
用法：
ID是唯一值，在一個頁面中只能出現一次，出現多次是不符合規范的。且不能多個使用
命名的規范：由字母、下劃線、中劃線、數字（并且第一個不能是數字）
2.4 通配符/通配選擇器 格式：
*{屬性：屬性值；}
*{
margin: 0;
padding: 0;
}
用法：去掉所有標簽的默認樣式時，主要用于外邊距（）、內邊距（）的設置；盡量避免使用通配選擇器，因為會給所有的標簽添加樣式。 2.5 群組選擇器 語法：可以通過逗號的方式，給多個不同的選擇器添加統一的CSS樣式
選擇符1,選擇符2,選擇符3……{屬性:屬性值;}
例:div, h1{width:960px;}
用途：當有多個選擇符應用相同的聲明時，可以將選擇符用,分隔的方式，合并為一組 2.6 層次選擇器——后代選擇器 語法：
選擇符1 選擇符2{屬性:屬性值;}
后代 M N { }
父子 M > N { }
兄弟 M ~ N { } 當前M下面的所有兄弟N標簽
相鄰 M + N { } 當前M下面相鄰的N標簽
用法：選擇符1中包含的所有選擇符2；
如:結構:
<ul class="list">
<li>li>
<li>li>
<li>li>
ul>
樣式:. list li{background:red;}
2.7 偽類選擇器 語法：
a:link{屬性：屬性值；}超鏈接的初始狀態；( 只能添加給a標簽 )
a:visited{屬性：屬性值；}超鏈接被訪問后的狀態；( 只能添加給a標簽 )
a:hover{屬性：屬性值；}鼠標懸停，即鼠標劃過超鏈接時的狀態；(可以添加給所有的標簽)
a:active{屬性：屬性值；}超鏈接被激活時的狀態，即鼠標按下時超鏈接的狀態；(可以添加給所有的標簽)
說明：應注意他們的順序，正常順序為：a:link、a:、a:hover、a:；為了簡化代碼，可以把偽類選擇符中相同的聲明提出來放在a選擇符中；
例如:a{color:red;}a:hover{color:green;}表示超鏈接的初始和訪問過后的狀態一樣,鼠標劃過的狀態和點擊時的狀態一樣。 2.8 選擇器的權重
當多個選擇器，選中的是同一個元素，且都為他們定義了樣式，如果屬性發生沖突了，會選擇權重高的來執行
CSS選擇器解析規則：當不同選擇符的樣式設置有沖突的時候，高權重選擇符的樣式會覆蓋低權重選擇符的樣式；相同權重的選擇符，樣式遵循就近原則：哪個選擇符最后定義，就采用哪個選擇符樣式。
三 CSS常用屬性 3.1 文本屬性 文本屬性
序號屬性名作用說明
1
font-size
字體大小
單位是px，瀏覽器默認是16px,設計圖常用字號是12px
2
font-
字體
當字體是中文字體、英文字體中有空格時，需加雙引號；多個字體中間用逗號鏈接,先解析第1個字體,如果沒有解析第2個字體,以此類推
3
color
顏色
color:red; color:#（6位16進制數，兩兩一組，相同數字可省略）; color:rgb(255,0,0); 0-255
4
font-
加粗
100 細體 400 正常 700 加粗 bold 900 更粗體
5
font-style
傾斜
font-style：(斜體字)/(傾斜的文字)/（常規顯示）;
6
text-align
文本水平對齊
text-align:left; 水平靠左 text-align：right；水平靠右 text-align：；水平居中 text-align:;水平2端對齊，但是只對多行起作用。
7
line-
行高
line-的數據=的數據，可以實現單行文本垂直居中
8
text-
首行縮進
text-可以取負值； text-屬性只對第一行起作用；px、em（一個字符的長度）
9
-/word-（中文、英文）
字間距
控制文字和文字之間的間距
10
text-
文字修飾
text-:none沒有/下劃線/上劃線/line-刪除線
11
font
文字簡寫
font是font-style font- font-size / line- font- 的簡寫。 font: 800 30px/80px "宋體"；順序不能改變 ,只能省略斜體和加粗
12
text-
大小寫轉換
單詞首字母大寫； 全部小寫； 全部大寫； none無屬性
常用字體
宋體 黑體
微軟雅黑 微軟正黑體
新宋體 新細明體
細明體 標楷體DFKai-SB
仿宋 楷體KaiTi
仿宋12 楷體
3.2 列表屬性 列表屬性
序號屬性名作用說明
1
list-style-type
定義列表符合樣式
list-style-type:disc(實心圓)/(空心圓)/(實心方塊)/none(去掉符號)
2
list-style-image
將圖片設置為列表符合樣式
list-style-image:url();
3
list-style-
設置列表項標記的放置位置
list-style-：；列表的外面 默認值 list-style-：；列表的里面
4
list-style
簡寫
list-style:none; 去除列表符號，順序不影響
3.3 背景屬性 背景屬性
序號屬性名作用說明
1
-color
背景顏色
-color:red;#;rgb(255,0,0);rgba(255,0,0,0)
2
-image
背景圖片
-image:url();
3
-
背景圖片的平鋪
-:no-/(默認)/-x/-y；
4
-
背景圖片的定位
-：水平位置 垂直位置；可以給負值，默認在中間；如果是%則從左上角開始；也可以用left、、right、top、
5
-
背景圖片的固定
- : (滾動)/ fixed（固定，固定在瀏覽器窗口里面，固定之后就相對于瀏覽器窗口了） ;
6
-size
背景圖片大小
px；%；cover放大填充，可能丟失；等比例放大填充，可能留白
7
簡寫
前五個屬性的綜合，無順序，省略的為默認值，會覆蓋
rgba(255,0,0,0)的a是透明效果，范圍是0~1
fix要注意始終相對瀏覽器頁面，要保證在盒子內，否則無法顯示
top和、left和right同時存在的時候，left、top優先級最高（無論class、style、）
3.4 浮動屬性 浮動屬性
序號屬性名說明
1
float:left;
元素靠左邊浮動
2
float:right;
元素靠右邊浮動
3
float:none;
元素不浮動
作用
定義網頁中其它文本如何環繞該元素顯示； 讓豎著的東西橫著來
清除浮動屬性
序號屬性名說明
1
clear:none;
允許有浮動對象
2
clear:right/left;
元素靠右邊/左邊浮動
3
clear:both;
元素不浮動
作用
解決高度塌陷問題，清除浮動只是改變元素的排列方式，該元素還是漂浮著，不占據文檔位置。
浮動屬性遵循見縫插針原則，文字會靠外顯示
解決高度塌陷問題也可以通過規定高度解決，: 200px;可以在下一個盒子上清除浮動也可以再設置一個清除浮動的空盒子 引發bfc，讓浮動元素計算高度，: 四 盒子模型 4.1 盒子模型例圖
4.2
是外邊距的意，
當一個元素樣式屬性里有:0 auto時，并且父元素的寬度是確定的，
意思是這個元素處于其父元素的居中位置，并且這個元素的上下外邊距為0
即:上下外邊距為0，左右自動，實際效果為左右居中
補充:
為外邊距，及邊框外到外部容器的距離，有四種參數設置方式：
:5px;/四邊外邊距都為5px/
:5px 10px;/上下外邊距5px，左右外邊距10px/
:5px 10px 15px;/上外邊距5px，左右外邊距10px，下外邊距15px/
:5px 10px 15px 20px;/順時針方向：上5px，右10px，下15px，左20px/
:0 auto;/上下外邊距為0，左右自動，實際效果為左右居中/
