css的修煉心得
學習css之前必須得對html有基礎的了解。
css即層疊樣式表(cascading style sheets),學習css是為了將內容與表現分離,實現更好的頁面布局,具有兩個特性:繼承性和層疊性。
一:css的使用方式:css有三種運用方式,可以單獨使用也可以一起使用。
1.行內樣式:直接在html的標籤中使用style屬性。如:
執行效果可以自己演示一下
2.類選擇器:class=」 名字」
使用類選擇器: 在要使用這個選擇器的網頁元素中使用class屬性 class=」類選擇器的名字」
影響的範圍:網頁中所有設定了class=」」的標籤,可以跨標籤
.名字如:
執行效果可以自己演示一下
3-id選擇器: #名字
使用id選擇器: 在要使用這個選擇器的網頁元素中設定id屬性: id=」 類選擇器的名字」
影響的範圍:網頁中設定了此id的標籤,通常只影響單個網頁元素
#one
語法與類選擇器一樣,只是將 「 . 」換成」 # 」;中class換成 id ;**就不演示了.
三:復合選擇器:
1-後代選擇器
語法:選擇器1空格選擇器2
影響範圍:
選擇器1
的後代(
包括直接後代和間接後代
)中所有符合選擇器
2的元素
其執行效果:
2-交集選擇器
以標籤選擇器開始,後面跟上類選擇器或者id
選擇器
例如: p.speical
影響到同時滿足
2種選擇器的元素
其效果如下:
3- 並集選擇器
樣式相同的多個選擇器的集體宣告,多個選擇器之間用逗號隔開
其執行效果:
4-子元素選擇器:
用法大概和後代選擇器一樣的用法.但是子元素的範圍更小,其只能影響元素的子元素. 不能用於間接元素.
如果您不希望選擇任意的後代元素,而是希望縮小範圍,只選擇某個元素的子元素,請使用子元素選擇器 (child selector)。
例如,如果您希望選擇只作為 h1 元素子元素的 strong 元素,可以這樣寫:
h1 > strong
如其執行效果:
如:
其效果如下:
5-相鄰兄弟選擇器:
如果需要選擇緊接在另乙個元素後的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器 (adjacent sibling selector)。
例如,如果要增加緊接在 h1 元素後出現的段落的上邊距,可以這樣寫:
h1 + p
如:this is paragraph.
this is paragraph.
this is paragraph.
this is paragraph.
this is paragraph.
其效果:
this is paragraph.
this is paragraph.
this is paragraph.
this is paragraph.
this is paragraph.
a:link 正常狀態下
a:visited 已被訪問過的
a:hover 懸停狀態下的
a:active 啟用狀態下的
上面的順序不能改變.
first-child 第乙個元素.
如下面的例子:
some text
some text
其執行效果:只有第乙個標籤有效果
some text
some text
7-偽元素
you can use the :first-line pseudo-element to add a special effect to the first
line of a text!
其效果如下:
選擇器大致就這幾種,許多都是相通的.根據情況選用適合的選擇器
css屬性選擇器 , , , , 的區別
value是完整單詞 型別的比較符號 拼接字串 型別的比較符號 1.attribute屬性中包含value attribute value 屬性中包含獨立的單詞為value e.g title flower attribute value 屬性中做字串拆分,只要能拆出來value這個詞就行 e.g ...
css後代選擇器和子選擇器的區別
點評 css後代選擇器和子選擇器的區別 用法不同,相容性,所達到的效果不同等等,需要了解的朋友可以參考下1.用法不同 比如要找div的class名為con中p標籤,子代選擇器用法 div.con p 後代選擇器 con p 2.相容性 ie6不支援子代選擇器 3.所達到的效果不同 看下圖用子代選擇器...
css選擇器 CSS選擇器總結
在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...