(一)語法格式
(二)選擇器
(三)屬性
格式:
選擇器
選擇器:篩選具有相似特徵的元素
注意: 每一對屬性需要使用;隔開,最後一對屬性可以不加;
分類:
1. 基礎選擇器
1. id選擇器:選擇具體的id屬性值的元素.建議在乙個html頁面中id值唯一
語法:#id屬性值{}
2. 元素選擇器:選擇具有相同標籤名稱的元素
語法: 標籤名稱{}
注意:id選擇器優先順序高於元素選擇器
3. 類選擇器:選擇具有相同的class屬性值的元素。
語法:.class屬性值{}
注意:類選擇器選擇器優先順序高於元素選擇器
2. 擴充套件選擇器:
1. 選擇所有元素:
語法: *{}
2. 並集選擇器:
選擇器1,選擇器2{}
3. 子選擇器:篩選選擇器1元素下的選擇器2元素
語法: 選擇器1 選擇器2{}
4. 父選擇器:篩選選擇器2的父元素選擇器1
語法: 選擇器1 > 選擇器2{}
5. 屬性選擇器:選擇元素名稱,屬性名=屬性值的元素
語法: 元素名稱[屬性名="屬性值"]{}
6. 偽類選擇器:選擇一些元素具有的狀態
語法: 元素:狀態{}
如: 狀態:
link:初始化的狀態
visited:被訪問過的狀態
active:正在訪問狀態
hover:滑鼠懸浮狀態
1. 字型、文字
font-size:字型大小
color:文字顏色
text-align:對其方式
line-height:行高
2. 背景
background:
3. 邊框
border:設定邊框,符合屬性
4. 尺寸
width:寬度
height:高度
5. 盒子模型:控制布局
margin:外邊距
padding:內邊距
預設情況下內邊距會影響整個盒子的大小
box-sizing: border-box; 設定盒子的屬性,讓width和height就是最終盒子的大小
float:浮動
left
right
html 選擇器之屬性選擇器
屬性選擇器的主要作用個人的理解就是對帶有指定屬性的元素設定css樣式。使用css3的屬性選擇器,可以指定元素的某個屬性,也可以指定某個屬性和這個屬性所對應的值。css3的屬性選擇器主要包括下面幾種 e attr 只使用屬性名,但沒有確定任何屬性值 e attr value 指定屬性名,並指定了該屬性...
CSS選擇器之屬性選擇器 關係選擇器
e代表標籤名,如p,div等等 att表示該標籤定義了的乙個屬性名,如class id等,value為該屬性的屬性值,該屬性值為包含字首 value的子字串。若去掉e,則表示匹配滿足條件的任意元素 基本原理同上,不過value表示該屬性值應包含以value為字尾的子字串 基本原理同上,但value表...
HTML css樣式選擇器
style簡介 這篇介紹style,style有三種方式 1 在head中加style標籤,在標籤中寫css樣式 2 在body的標籤中新增style屬性,在屬性中增加css樣式 3 在link標籤中引入寫好的css樣式表 一 在head中新增style標籤 1 id選擇器 在乙個html頁面中,不...