樣式寫法;鍵:值;
css的引入方式:1.行內樣式、內聯樣式 通過style樣式來引入,在標記內增加style屬性,在值中寫樣式。缺點:只能修改所在標記,不能批量修飾。
2.頁內樣式 使用style標記一般寫在head裡,優點可以使用*{}批量選擇符
3.引入外部樣式表:使用link標記,引入外部樣式表檔案,可以修飾多個頁面,只需要引入樣式表即可,無缺點。
基礎選擇器:
1.#{} id選擇器:根據元素的id來選擇
2.{}選擇器:全選,選中所以元素
3…{}類選擇器:根據元素的class名稱來進行選擇,使用頻率最高
4.標記選擇器:使用元素標記來選擇,選擇同型別的標記
高階選擇器;
1.子代選擇器:a>b,選中a選擇器所選中的元素子代(滿足b選擇器)
2.後代選擇器:a b,選中a選擇器所選中的元素子代(滿足b選擇器)
3.並集選擇器:a,b選中a和b選擇器選中的元素的和
4.交集選擇器:ab 取a選擇器和b選擇器選中的元素的交集,
5.兄弟選擇器:a+b a-b選中緊鄰弟 a~b選中所以弟,使用頻率較低。
borther-collapse:取消邊框重疊
偽類選擇器:不是自定義的類名稱,有特殊含義的
1.frist-child:選中所以作為其父元素的第乙個子元素
2.last-child:選中所以作為其父元素的最後乙個子元素
3.nth-child(n)選中所有作為其父元素的指定的第幾個子元素
4.選擇器:hover:適用所有元素,定義滑鼠劃過的樣式,選擇器可以是任意元素
5.a:active:僅適用於超連結,按下即啟用
6.a:link:僅適用於超連結,預設時的樣式
7.a: visited:僅適用於超連結,點開則訪問過後。
愛恨法則:love hate
偽元素選擇器
1.::before:通過content指定元素內容,作為子元素新增在某乙個元素的前面2.::after:通過content指定元素內容,作為子元素新增在某乙個元素的後面常用樣式:
1.width
2.height
3.background-color:背景色
4.font-size:用於指定字型大小,單位px
5.color:前景色,文字顏色
6.font-wight:字重,普通顯示normal,加粗使用bold
7.font-style:italic字型斜體
8.text-decoration:underline,下劃線修飾
9.text-algin:center、left、right文字對齊方式
10.border:1px solid#ccc;線寬、線型、線色
11.border-collapse:collapse 給**設定取消邊框重疊
12.border-radius:邊框圓角。單位px或者百分比
13.vertical-align:top、bottom ,left,right 內聯元素垂直方式對齊如果你在border-radius 屬性中只指定乙個值,那麼將生成 4 個 圓角。但是,如果你要在四個角上一一指定,可以使用以下規則:四個值: 第乙個值為左上角,第二個值為右上角,第三個值為右下角,第四個值為左下角。三個值: 第乙個值為左上角, 第二個值為右上角和左下角,第三個值為右下角兩個值: 第乙個值為左上角與右下角,第二個值為右上角與左下角乙個值: 四個圓角值相同
優先順序順序
下列是乙份優先順序逐級增加的選擇器列表
:通用選擇器()
元素(型別)選擇器
類選擇器
屬性選擇器
偽類id 選擇器
內聯樣式
8 27筆記選擇器
元素選擇器 用標籤名作為選擇器,選中所有相應的元素 類選擇器 根據class的屬性來選擇元素,樣式定義為 classname id選擇器 根據id名來選擇元素,樣式定義為 idname 屬性選擇器 選擇器 描述 attribute 選取帶有指定屬性的元素。12456 attribute value ...
CSS的一點筆記 選擇器 基本概念
本文所有例子均摘自 www.w3school.org css是為了能夠防止對html元素進行重複定義。比如說,我們希望所有的標題都是黑色粗體,那麼只需要統一定義 黑色粗體 的型別叫做a,然後指定所有的標題的 型別 都是a,就達到了目的。這樣 量較小。同時也可以統一進行修改。有以下幾種情況可能會導致重...
屬性選擇器,子元素選擇器,偽元素選擇器筆記
屬性選擇器 屬性名稱 屬性名稱 屬性值 子元素選擇器 第n個子元素 元素 nth child 1 最後乙個子元素 元素 last child 全部子元素 test test2 直接子元素 test test2 選擇後面的乙個元素 test div 選擇後面的多個元素 test div偽元素 通過cs...