css學習筆記

css總結：

link標記是rel=」stylesheet」 href=」」

注釋：/**/

替換元素與非替換元素

替換元素由其他位置的內容，經過引用替換到當前檔案下如：img

塊級元素和行內元素

塊級元素居中用padding和margin

行內元素用line-height=height，行內元素沒有margin-top和margin-bottom

@import：引入外部檔案，但是要放在所有css規則之前，否則不起作用。

與link 不同，link中的樣式可以根據title選擇，而import的都會使用。

選擇器：

選擇器分組：h2, p {}

萬用字元選擇器：*{}

類選擇器：.classname{} 同時包含兩個類的元素才被選中 .class1 .class2{}

id選擇器：#idname

屬性選擇器：h1[class]{}選擇有class屬性的所有h1， h1[class][href]{}同時具有兩個屬性，h1[class=「a」]{}具體屬性值選擇；

部分屬性值選擇：p[class~="classname"]{} 只要屬性中出現類名，並且是以空格分割的，那麼就選中。class^="classname"開頭出現類名，class$="classname"結尾出現類名，class*="classname"包含類名的所有元素。

後代選擇器：h1 strong{} h1.siderbar a:link{}

子選擇器：h1>strong{}

區別：後代選擇器可以選擇所有後代，而子選擇器僅能選擇第一代子元素。

兄弟選擇器：li+li{} 乙個結合符僅能選擇兄弟元素的第二個元素，所有第乙個li不會被選中

1.list

2.list

3.list

偽類和偽元素：a:link a:visited a:hover a:active a:focus （l-v-f-h-a）

第乙個子元素:first-child

p:first-child li:first-child

these are the necessary steps:

donotpush the brake at the same time as the accelerator.

效果：

將作為某元素第乙個子元素的所有元素設為粗體

將作為某元素第乙個子元素的所有元素變成大寫

a:link:hover:lang(de)

a:visited:hover:lang(de)

:first-letter padding border text-decoration vertical-align(float=none) text-transform line-height float letter-spacing word-spacing text-shadow(css2)

:first-line letter-spacing text-decoration vertical-align text-transform line-height text-shadow(css2)

:before

:after

所有偽元素都必須放在選擇器的最後面

選擇器的特殊性：

id：0,1,0,0

類屬性，屬性，偽類：0,0,1,0

元素，偽元素：0,0,0,1

萬用字元：0,0,0,0

結合符,繼承：無

內聯樣式：1,0,0,0

元素實現哪個屬性，按照加和。

0,0,1,0>0,0,1,7

div p /0,0,0,2/

重要性：

div p

繼承：應用到body元素的背景樣式可以傳遞到html元素中

用了萬用字元之後就不能繼承了

宣告權重：1.讀者的重要宣告，2.創作人員的重要宣告，3.創作人員的正常宣告，4.讀者的正常宣告，5.使用者**宣告

字型相對長度：1ex=0.5em （ex為不同字型x的高度）

inherit是所有屬性共有的

字型：font-style：italic oblique normal inherit

font-variant：small-caps

vertical-align:middle 應用於影象還可以使用百分數（line-height的百分數）

文字轉換：text-transform uppercase lowercase capitalize none inherit

css學習筆記

CSS學習 CSS學習筆記

CSS學習 CSS學習筆記

CSS 學習筆記

css學習筆記

CSS學習 CSS學習筆記

CSS學習 CSS學習筆記

CSS 學習筆記

相關推薦