cascading style sheets 層疊樣式表，多個樣式可以作用在同乙個html的元素上，同時生效
功能強大
將內容展示和樣式控制分離
style
="color
:red;
">
hello cssdiv
>
>
divstyle
>
>
hello cssdiv
>
在head標籤內，定義link標籤，引入外部的資源檔案，如* a.css檔案：
div
rel=
"stylesheet"
href
="css/a.css"
>
>
hello cssdiv
>
>
hello cssdiv
>
>
@import
"css/a.css";
style
>
選擇器元素選擇器：選擇具有相同標籤名稱的元素
類選擇器：選擇具有相同的class屬性值的元素。
lang
="en"
>
>
charset
="utf-8"
>
>
基礎選擇器title
>
>
.cls1
#div1
pstyle
>
head
>
>
"div1"
>
id選擇器div
>
class
="cls1"
>
類選擇器div
>
class
="cls1"
>
元素選擇器p
>
body
>
html
>
並集選擇器：
子選擇器：篩選選擇器1元素下的選擇器2元素
父選擇器：篩選選擇器2的父元素選擇器1
屬性選擇器：選擇元素名稱，屬性名=屬性值的元素
偽類選擇器：選擇一些元素具有的狀態
狀態標籤
表示狀態
link
初始化的狀態
visited
被訪問過的狀態
active
正在訪問狀態
hover
滑鼠懸浮狀態
lang
="en"
>
>
charset
="utf-8"
>
>
擴充套件選擇器title
>
>
div p
div > p
input[type='text']
a:link
a:hover
a:active
a:visited
style
>
head
>
>
>
>
擴充套件選擇器1p
>
div>
>
擴充套件選擇器2p
>
>
擴充套件選擇器3div
>
type
="text"
>
>
type
="password"
>
>
href
="#"
>
我是超連結a
>
body
>
html
>
背景 邊框
尺寸
lang
="en"
>
>
charset
="utf-8"
>
>
css屬性title
>
>
pdiv
style
>
head
>
>
>
css屬性設定p
>
>
主要內容
div>
body
>
html
>
float：浮動
lang
="en"
>
>
charset
="utf-8"
>
>
css屬性title
>
>
div.div1
.div2
.div3
.div4
.div5
style
>
head
>
>
class
="div2"
>
class
="div1"
>
div>
div>
class
="div3"
>
div3div
>
class
="div4"
>
div4div
>
class
="div5"
>
div5div
>
body
>
html
>
···
CSS學習總結
1.使用外部 extenal 樣式表，相對於內嵌 inline 和內部式 internal 的，有以下優點 樣式 可以復用。乙個外部css檔案，可以被很多網頁共用。便於修改。如果要修改樣式，只需要修改css檔案，而不需要修改每個網頁。提高網頁顯示的速度。如果樣式寫在網頁裡，會降低網頁顯示的速度，如果...
CSS學習總結
選擇器的優先順序 乙個標籤作用於多個樣式層疊時，這些層疊樣式說明都不一樣，那麼標籤上樣式所有層疊樣式的總和。如果這些層疊樣式有相同的宣告時，樣式的優先順序如下 內聯 內部 外部 必須選擇器型別相同 id的優先順序大於類大於元素。id不管在內部還是外部優先順序都是最高的。important 內聯 id...
CSS學習總結
ios不支援background attachment屬性 需要用以下hack方式，body before超出寬度的文字自動省略 效果圖 需要同時加上 overflow hidden 和 white space nowrap text overflow ellipsis 才會起作用。span標籤設定...