CSS簡介
CSS(Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。
嗯，簡單的說，就是用來美化網頁的。
使用方法
有三種方法可以在站點網頁上使用樣式表：
- 外聯式Linking（也叫外部樣式）：將網頁鏈接到外部樣式表。
- 嵌入式Embedding（也叫內頁樣式）：在網頁上創建嵌入的樣式表。
- 內聯式Inline（也叫行內樣式）：應用內嵌樣式到各個網頁元素。
外部樣式表
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
內部樣式表
當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過 <style> 標簽定義內部樣式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
內聯樣式
當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
基本形式
那我們看到CSS選擇器的基本形式是這樣的
selector(選擇器){
property1:value;(屬性聲明)
property2:value;
}
由一個選擇器表達式和括號內的屬性字典組成
兼容模式
目前的主流瀏覽器有很多種，那么我們為了兼容不同的瀏覽器，就要知道瀏覽器的私有屬性
- Chrome,Safari
-webkit - Firebox
-moz - IE
-ms - Opera
-o
例子
.pic{
-webkit-transform:rotate(-3deg);
-otransform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
transform:rotate(-3deg);
}
語法
屬性值語法
margin:[<length>|<percentage>|auto]{1,4}
上面這個表達式由基本元素、組合符號、數量符號三部分組成。下面我們將逐步對這三個部分進行詳解。基本元素組成
1.關鍵字 auto solid bold
2.基本類型 length percentage color
3.其他類型 'padding-width' color-stop組合符號
1.空格
<‘font-size’> <font-family>
必須按順序輸入相對屬性值
E.g
-12px arial
2.&& 與空格相似 不過可以無序
3.|| 分割的基本屬性至少出現一個
4.| 分割的屬性只能出現一個
5.[] 屬性分組-
數量符號
1.默認只能出現一次
2.+ 1次或多次
3.？ 表示屬性可選
4.{int,int} 第一個數字表示最少出現次數 第二個數字表示最多出現次數
5.* 可以出現 0次1次或者多次
6.# 出現一次或者多次 中間要用逗號隔開
E.g
1
padding-top:<length>|<percentage>true padding-top:1px false padding-top:1em 5% 2 border-width:[<length>|thick|medium|thin]{1,4} true border-width:2px; false border-width:2px small; 3 box-shadow:[inset?&&[<length>{2,4}&& <color>?]]#|none true box-shadow:3px 3px rgb(50%,50%,50%),red 0 0 4px inset; false box-shadow:inset 2px 4px,2px blue; @規則語法
@標識符 xxx:
@標識符 xxx{}
常用@規則
@media 響應式布局
@keyframes 用來描述css動畫中間步驟
@font-face 引入外部字體
不常用
@import
@charset
@namespace
@page
@supports
@document
選擇器
選擇器主要分
- 簡單選擇器
- 偽元素選擇器
- 組合選擇器
簡單選擇器
- 標簽選擇器
基本形式
tag{color:bule;} - 類選擇器
基本形式
.className{}
選擇器特點
- 由字母，數字，-，_組成
- 必須以字母開頭
- 區分大小寫
- 可以出現多次
e.g
<p chass = "special">
<p class = “special stress”>
如果想讓special類為紅色
.special{color:red;}
屬性可以疊加
.stress{font-weight:bold;}
這樣第二個p標簽同時會擁有兩個屬性
- id選擇器
基本形式
#idName{}
選擇器特點
- 由字母，數字，-，_組成
- 必須以#開頭
- 區分大小寫
- 只能出現一次
- 通配符選擇器
基本形式
*{}
作用:會選擇頁面內所有元素 - 屬性選擇器
基本形式
[]{}
e.g
不可用狀態樣式
[disabled]{background:#eee}
類型是button的樣式
[type=button]{color:blue;}
類包含XXX
[class~=xxxx]{color:blue;}
鏈接中以#開頭
[href^=“#”]{color:red;};
鏈接中以某形式結尾比如.pdf
[herf$=pdf]{color:red;};
鏈接中包含某些值
[href*=“xxxx.xxx.com”]
- 偽類選擇器
基本形式
tag:statement{}
e.g
所有鏈接字體顏色 只能選擇herf有值的
a:link{}
表示訪問過的
a:visited{}
懸停
a:hover{}
點擊上去
a:active{}
input標簽的三種狀態
input:enabled/disabled/checked{}
列表行li標簽
第一行或最后一行
li:first-child/last-child{}
偶數行
li:nth-child(even){}
表達式
li:nth-child(3n+1){}
倒數
li:nth-last-child(3n+1){}
標簽下只有一個子元素的
tag:only-child{}
選擇某標簽類型的
表示選擇第一個dd類型的
dd:first-of-type{}
簡單選擇器還可以進行組合
e.g
如果我們想選擇img標簽 jpg結尾的元素
img[src$=jpg]{}
id是banner hover狀態的元素
#banner:hover{}
偽元素選擇器
選擇頁面所有元素第一個字母
::first-letter{}
第一行
::first-line{}
在內容包含XX之前
::before{content:”XX”;};
之后
::after{content:”XX”}；
內容被用戶選中樣式
::selection{}
組合選擇器
- 后代選擇器
e.g
class="main" 所有是h2標簽的元素
.main h2 {}
- 子選擇器
class="main" 第一個標簽h2的元素
.main>h2 {} - 相鄰兄弟選擇器
選中h2后相鄰的p元素
h2+p{} - 通用兄弟選擇器
h2后所有的p節點
h2~p{} - 選擇器分組
h1,h2,h3{}
如有不足，請各位大大進行批評指正。謝謝
