css3結構性偽類選擇器匯總,css規則定義?
基本語法
規則
選擇符
任何HTML元素都可以是一個CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如,
P { text-indent: 3em }
當中的選擇符是P。
類選擇符
單一個選擇符能有不同的CLASS(類),因而允許同一元素有不同樣式。例如,一個網頁制作者也許希望視其語言而定,用不同的顏色顯示代碼 :
code.html { color: #191970 }
code.css { color: #4b0082 }
以上的例子建立了兩個類,CSS和html,供HTML的CODE元素使用。CLASS屬性是用于在HTML中以指明元素的類,例如,
<P CLASS=warning>每個選擇符只允許有一個類。
例如,code.html.proprietary是無效的。</p>
類的聲明也可以無須相關的元素:
.note { font-size: small }
在這個例子,名為note的類可以被用于任何元素。
一個良好的習慣是在命名類的時候,根據它們的功能而不是根據它們的外觀。上述例子中的note類也可以命名為small,但如果網頁制作者決定改變這個類的樣式,使得它不再是小字體的話,那么這個名字就變得毫無意義了。
ID 選擇符
ID 選擇符個別地定義每個元素的成分。這種選擇符應該盡量少用,因為他具有一定的局限。一個ID選擇符的指定要有指示符"#"在名字前面。例如,ID選擇符可以指定如下:
#svp94O { text-indent: 3em }
這點可以參考HTML中的ID屬性:
<P ID=svp94O>文本縮進3em</P>
關聯選擇符
關聯選擇符只不過是一個用空格隔開的兩個或更多的單一選擇符組成的字符串。這些選擇符可以指定一般屬性,而且因為層疊順序的規則,它們的優先權比單一的選擇符大。例如, 以下的上下文選擇符
P EM { background: yellow }
是P EM。這個值表示段落中的強調文本會是黃色背景;而標題的強調文本則不受影響。
聲明
屬性
一個屬性被指定到選擇符是為了使用它的樣式。屬性的例子包括顏色、邊界和字體。
值
聲明的值是一個屬性接受的指定。例如,屬性顏色能接受值red。
組合
為了減少樣式表的重復聲明,組合的選擇符聲明是允許的。例如,文檔中所有的標題可以通過組合給出相同的聲明:
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }
繼承
實際上,所有在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值,除非另外更改。例如,一個BODY定義了的顏色>值也會應用到段落的文本中。
有些情況是內部選擇符不繼承周圍的選擇符的值,但理論上這些都是特殊的。例如,上邊界屬性是不會繼承的;直覺上,一個段落不會有同文檔BODY一樣的上邊界值。
注解
樣式表里面的注解使用C語言編程中一樣的約定方法去指定。CSS1注解的例子如以下格式:
/* COMMENTS CANNOT BE NESTED */
偽類和偽元素
偽類和偽元素是特殊的類和元素,能自動地被支持CSS的瀏覽器所識別。偽類區別開不同種類的元素(例如,visited links(已訪問的連接)和active links(可激活連接)描述了兩個定位錨(anchors)的類型)。偽元素指元素的一部分,例如段落的第一個字母。
偽類或偽元素規則的形式如
選擇符:偽類 { 屬性: 值 }
或
選擇符:偽元素 { 屬性: 值 }
偽類和偽元素不應用HTML的CLASS屬性來指定。一般的類可以與偽類和偽元素一起使用,如下:
選擇符.類: 偽類 { 屬性: 值 }
或
選擇符.類: 偽元素 { 屬性: 值 }
定位錨偽類
偽類可以指定A元素以不同的方式顯示連接(links)、已訪問連接(visited links)和可激活連接(active links)。定位錨元素可給出偽類link、visited或active。一個已訪問連接可以定義為不同顏色的顯示,甚至不同字體大小和風格。
一個有趣的效果是使當前(或“可激活”)連接以不同顏色、更大的字體顯示。然后,當網頁的已訪問連接被重選時,又以不同顏色、更小字體顯示。這個樣式表的示例如下:
A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
首行偽元素
通常在報紙上的文章,例如Wall Street Journal中的,文本的首行都會以粗印體而且全部大寫地展示。CSS1包括了這個功能,將其作為一個偽元素。首行偽元素可以用于任何塊級元素(例如P、H1等等)。以下是一個首行偽元素的例子:
P:first-line {
font-variant: small-caps;
font-weight: bold }
css幾年一次大更新?
按照歷史大事記給大家評估下應該是2-3年左右有大更新。
CSS 歷史大事記1994 年,H?kon Wium Lie 最初提出了 CSS 的想法,聯合當時正在設計 Argo 的瀏覽器的Bert Bos,他們決定一起合作設計 CSS,于是創造了 CSS 的最初版本。緊接著,他們在芝加哥的Mosaic and the Web 大會上第一次正式提出了 CSS 的建議
1995 年他們一起再次展示了這個建議。當時 W3C 剛剛建立,W3C 對 CSS 很感興趣,為此專門組織了一次討論會。
1996 年 12 月,W3C 推出了 CSS 規范的第一版本。1997 年,W3C 頒布 CSS1.0 版本 ,CSS1.0 較全面地規定了文檔的顯示樣式,可分為選擇器、樣式屬性、偽類 / 對象幾個部分。這一規范立即引起了各方的關注,隨即微軟和網景公司的瀏覽器均能支持 CSS1.0,這為 CSS 的發展奠定了基礎。
1998 年,W3C 發布了 CSS 的第二個版本,目前的主流瀏覽器都采用這標準。CSS2 的規范是基于 CSS1 設計的,包含了 CSS1 所有的功能,并擴充和改進了很多更加強大的屬性。包括選擇器、位置模型、布局、表格樣式、媒體類型、偽類、光標樣式。
偽類和偽元素的區別在哪?
前端er們大都或多或少地接觸過CSS偽類和偽元素,比如最常見的:focus,:hover以及<a>標簽的:link、visited等,偽元素較常見的比如:before、:after等。
其實上面提到的這些偽類和偽元素都是CSS1和CSS2中的概念,CSS1和CSS2中對偽類的偽元素的區別比較模糊,甚至經常有同行將:before、:after稱為偽類
熟練掌握并默寫標記選擇器的基本語法?
1.標記選擇器主要應用在HTML頁中的標記樣式選擇。如P選擇器就用于聲明網頁中有P標記的文本內容,同理,H1選擇器則可以標記頁面中H1的樣式。例如: H1 { font-size:14px; font-weight:bold; color:#ccc;}以上代碼表示在所有應用H1選擇器的地方,將文字的大小設為14像素并加粗,同時將顏色設為灰色,如果要改變H1的顏色,只需將color屬性更改就可以了,比如將color設為#e7eefe來與網頁的其他地方協調。 2.類別選擇器 這是一類最常用的選擇器,用它來定義網頁中需要特殊表現的樣式,類別選擇器的名稱可以由作者自由定義,一般來講類別選擇器的命名最好有一定的意義,使CSS代碼更易維護和閱讀。例如定義導航就可以使用.daohang{}或者是.nav{},不要使用簡略或者特殊的字符串,否則可能三天后當你再讀你的CSS代碼時,就連你自己都搞不清一個樣式到底是做什么用的! 類別選擇器就是CSS類,在HTML表現為調用的class。例如: (1)style.css文件中定義 .title { margin:10px; padding:2px 5px;}(2)HTML文件中
在上述定義中,p標簽將引用CSS文件中的title樣式應用到整個p覆蓋的范圍。p將顯示為一個上下左右margin各為10px,上下padding為2px,左右padding為5px的矩形。 請注意類別選擇器CSS定義和標記選擇器的區別:在CSS文件中,標記選擇器前邊沒有"."號,下面我們還會講到ID選擇器,它的定義也不一樣,每個ID選擇器樣式前有一個"#"號,以確定其為ID選擇器,而在HTML中則用ID="style"引用。值得注意的是,一個標簽可以同時應用多個class選擇器,如,具體大家可以在下邊思考并做下實驗,筆者在這就不舉例了。3.ID選擇器(1)ID選擇器用法和class基本沒有區別,他們的不同之處就在于ID選擇器只能在HTML頁中使用一次,而class則可以任意多次調用,在CSS文件中,ID 選擇器一般寫成 #idname { bgcolor:#339; font-size:16px;}如果一個ID應用于多個HTML標記,則有可能造成IE編譯錯誤,并且由于ID選擇器可以被JAVASCRIPT等調用,所以多個ID會導致JAVA編譯錯誤并崩潰! (2)HTML的引用 在HTML中引用ID選擇器的代碼如下所示: 并且ID選擇器不能像類別選擇器那樣同時被一個標簽調用。這也是完全錯誤的語法。 復合選擇器就是基本選擇器通過不同的鏈接方式構成的。 復合選擇器就是兩個或多個基本選擇器,通過不同方式鏈接而成的選擇器。