CSS簡(jiǎn)介
CSS(Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言走越。
嗯泛粹，簡(jiǎn)單的說(shuō)丸逸，就是用來(lái)美化網(wǎng)頁(yè)的扭屁。
使用方法
有三種方法可以在站點(diǎn)網(wǎng)頁(yè)上使用樣式表：
- 外聯(lián)式Linking（也叫外部樣式）：將網(wǎng)頁(yè)鏈接到外部樣式表需曾。
- 嵌入式Embedding（也叫內(nèi)頁(yè)樣式）：在網(wǎng)頁(yè)上創(chuàng)建嵌入的樣式表够傍。
- 內(nèi)聯(lián)式Inline（也叫行內(nèi)樣式）：應(yīng)用內(nèi)嵌樣式到各個(gè)網(wǎng)頁(yè)元素形娇。
外部樣式表
當(dāng)樣式需要被應(yīng)用到很多頁(yè)面的時(shí)候男图，外部樣式表將是理想的選擇示姿。使用外部樣式表，你就可以通過(guò)更改一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀逊笆。
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
內(nèi)部樣式表
當(dāng)單個(gè)文件需要特別樣式時(shí)栈戳，就可以使用內(nèi)部樣式表。你可以在 head 部分通過(guò) <style> 標(biāo)簽定義內(nèi)部樣式表难裆。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
內(nèi)聯(lián)樣式
當(dāng)特殊的樣式需要應(yīng)用到個(gè)別元素時(shí)子檀，就可以使用內(nèi)聯(lián)樣式。 使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性乃戈。樣式屬性可以包含任何 CSS 屬性褂痰。以下實(shí)例顯示出如何改變段落的顏色和左外邊距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
基本形式
那我們看到CSS選擇器的基本形式是這樣的
selector(選擇器){
property1:value;(屬性聲明)
property2:value;
}
由一個(gè)選擇器表達(dá)式和括號(hào)內(nèi)的屬性字典組成
兼容模式
目前的主流瀏覽器有很多種偏化，那么我們?yōu)榱思嫒莶煌臑g覽器脐恩，就要知道瀏覽器的私有屬性
- 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);
}
語(yǔ)法
屬性值語(yǔ)法
margin:[<length>|<percentage>|auto]{1,4}
上面這個(gè)表達(dá)式由基本元素、組合符號(hào)侦讨、數(shù)量符號(hào)三部分組成驶冒。下面我們將逐步對(duì)這三個(gè)部分進(jìn)行詳解。基本元素組成
1.關(guān)鍵字 auto solid bold
2.基本類型 length percentage color
3.其他類型 'padding-width' color-stop組合符號(hào)
1.空格
<‘font-size’> <font-family>
必須按順序輸入相對(duì)屬性值
E.g
-12px arial
2.&& 與空格相似 不過(guò)可以無(wú)序
3.|| 分割的基本屬性至少出現(xiàn)一個(gè)
4.| 分割的屬性只能出現(xiàn)一個(gè)
5.[] 屬性分組-
數(shù)量符號(hào)
1.默認(rèn)只能出現(xiàn)一次
2.+ 1次或多次
3.韵卤？ 表示屬性可選
4.{int,int} 第一個(gè)數(shù)字表示最少出現(xiàn)次數(shù) 第二個(gè)數(shù)字表示最多出現(xiàn)次數(shù)
5.* 可以出現(xiàn) 0次1次或者多次
6.# 出現(xiàn)一次或者多次 中間要用逗號(hào)隔開(kāi)
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; @規(guī)則語(yǔ)法
@標(biāo)識(shí)符 xxx:
@標(biāo)識(shí)符 xxx{}
常用@規(guī)則
@media 響應(yīng)式布局
@keyframes 用來(lái)描述css動(dòng)畫(huà)中間步驟
@font-face 引入外部字體
不常用
@import
@charset
@namespace
@page
@supports
@document
選擇器
選擇器主要分
- 簡(jiǎn)單選擇器
- 偽元素選擇器
- 組合選擇器
簡(jiǎn)單選擇器
- 標(biāo)簽選擇器
基本形式
tag{color:bule;} - 類選擇器
基本形式
.className{}
選擇器特點(diǎn)
- 由字母骗污，數(shù)字，-沈条，_組成
- 必須以字母開(kāi)頭
- 區(qū)分大小寫(xiě)
- 可以出現(xiàn)多次
e.g
<p chass = "special">
<p class = “special stress”>
如果想讓special類為紅色
.special{color:red;}
屬性可以疊加
.stress{font-weight:bold;}
這樣第二個(gè)p標(biāo)簽同時(shí)會(huì)擁有兩個(gè)屬性
- id選擇器
基本形式
#idName{}
選擇器特點(diǎn)
- 由字母需忿，數(shù)字，-，_組成
- 必須以#開(kāi)頭
- 區(qū)分大小寫(xiě)
- 只能出現(xiàn)一次
- 通配符選擇器
基本形式
*{}
作用:會(huì)選擇頁(yè)面內(nèi)所有元素 - 屬性選擇器
基本形式
[]{}
e.g
不可用狀態(tài)樣式
[disabled]{background:#eee}
類型是button的樣式
[type=button]{color:blue;}
類包含XXX
[class~=xxxx]{color:blue;}
鏈接中以#開(kāi)頭
[href^=“#”]{color:red;};
鏈接中以某形式結(jié)尾比如.pdf
[herf$=pdf]{color:red;};
鏈接中包含某些值
[href*=“xxxx.xxx.com”]
- 偽類選擇器
基本形式
tag:statement{}
e.g
所有鏈接字體顏色 只能選擇herf有值的
a:link{}
表示訪問(wèn)過(guò)的
a:visited{}
懸停
a:hover{}
點(diǎn)擊上去
a:active{}
input標(biāo)簽的三種狀態(tài)
input:enabled/disabled/checked{}
列表行l(wèi)i標(biāo)簽
第一行或最后一行
li:first-child/last-child{}
偶數(shù)行
li:nth-child(even){}
表達(dá)式
li:nth-child(3n+1){}
倒數(shù)
li:nth-last-child(3n+1){}
標(biāo)簽下只有一個(gè)子元素的
tag:only-child{}
選擇某標(biāo)簽類型的
表示選擇第一個(gè)dd類型的
dd:first-of-type{}
簡(jiǎn)單選擇器還可以進(jìn)行組合
e.g
如果我們想選擇img標(biāo)簽 jpg結(jié)尾的元素
img[src$=jpg]{}
id是banner hover狀態(tài)的元素
#banner:hover{}
偽元素選擇器
選擇頁(yè)面所有元素第一個(gè)字母
::first-letter{}
第一行
::first-line{}
在內(nèi)容包含XX之前
::before{content:”XX”;};
之后
::after{content:”XX”}屋厘；
內(nèi)容被用戶選中樣式
::selection{}
組合選擇器
- 后代選擇器
e.g
class="main" 所有是h2標(biāo)簽的元素
.main h2 {}
- 子選擇器
class="main" 第一個(gè)標(biāo)簽h2的元素
.main>h2 {} - 相鄰兄弟選擇器
選中h2后相鄰的p元素
h2+p{} - 通用兄弟選擇器
h2后所有的p節(jié)點(diǎn)
h2~p{} - 選擇器分組
h1,h2,h3{}
如有不足涕烧，請(qǐng)各位大大進(jìn)行批評(píng)指正。謝謝
