1、 簡述css常用選擇器及格式,css樣式表項(xiàng)的組成為?
css是英文Cascading Style Sheets的縮寫。
它是一種用來表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集)等文件樣式的計(jì)算機(jī)語言。
CSS格式設(shè)置規(guī)則由選擇器和聲明兩部分組成,其中選擇器是標(biāo)識格式元素的術(shù)語(如p、h1、類名或id),聲明用于定義元素樣式。
CSS的主要優(yōu)點(diǎn)是提供了便利的更新功能。設(shè)計(jì)網(wǎng)站時,可以創(chuàng)建一個CSS樣式表文件,然后將網(wǎng)站中的所有網(wǎng)頁都連接到該樣式表文件,這樣很容易為Web站點(diǎn)內(nèi)的所有網(wǎng)頁提供一致的外觀和風(fēng)格。當(dāng)更新某一樣式屬性時,使用該樣式的所有網(wǎng)頁的格式都會自動更新為新樣式,而不必逐頁進(jìn)行修改。
2、 css3新增功能?
1、css3新增的超級選擇器:屬性選擇器、結(jié)構(gòu)性偽類選擇器、UI元素狀態(tài)偽類選擇器、通用兄弟元素選擇器
2、使用選擇器在頁面中插入文字、圖片、項(xiàng)目編號等內(nèi)容
3、文字陰影與自動換行
4、各類盒模型:總體分為block類型和in line類型,在細(xì)分為inline-block類型、inline-table類型、list-item類型、run-in類型、compact類型、表格相關(guān)類型、none類型
5、盒模型相關(guān)的屬性:overflow屬性(內(nèi)容溢出)、box-shadow屬性(盒陰影)、box-sizing屬性(寬高計(jì)算)
6、新增的背景樣式backround-clip屬性、backround-origin屬性、backround-size屬性、backround-break屬性
7、新增的邊框樣式:border-radius屬性(圓角邊框)、border-image屬性(圖片邊框)
8、新增的 transform變形功能:rotate(旋轉(zhuǎn))、scale(縮放)、skew(傾斜)、translate(移動)
9、新增的動畫功能:transition(平滑過渡)、animation(關(guān)鍵幀)
10、布局相關(guān)樣式:多欄布局、盒布局、彈性盒布局
11、兼容性問題
3、 css規(guī)則定義?
基本語法
規(guī)則
選擇符
任何HTML元素都可以是一個CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如,
P { text-indent: 3em }
當(dāng)中的選擇符是P。
類選擇符
單一個選擇符能有不同的CLASS(類),因而允許同一元素有不同樣式。例如,一個網(wǎng)頁制作者也許希望視其語言而定,用不同的顏色顯示代碼 :
code.html { color: #191970 }
code.css { color: #4b0082 }
以上的例子建立了兩個類,CSS和html,供HTML的CODE元素使用。CLASS屬性是用于在HTML中以指明元素的類,例如,
<P CLASS=warning>每個選擇符只允許有一個類。
例如,code.html.proprietary是無效的。</p>
類的聲明也可以無須相關(guān)的元素:
.note { font-size: small }
在這個例子,名為note的類可以被用于任何元素。
一個良好的習(xí)慣是在命名類的時候,根據(jù)它們的功能而不是根據(jù)它們的外觀。上述例子中的note類也可以命名為small,但如果網(wǎng)頁制作者決定改變這個類的樣式,使得它不再是小字體的話,那么這個名字就變得毫無意義了。
ID 選擇符
ID 選擇符個別地定義每個元素的成分。這種選擇符應(yīng)該盡量少用,因?yàn)樗哂幸欢ǖ木窒蕖R粋€ID選擇符的指定要有指示符"#"在名字前面。例如,ID選擇符可以指定如下:
#svp94O { text-indent: 3em }
這點(diǎn)可以參考HTML中的ID屬性:
<P ID=svp94O>文本縮進(jìn)3em</P>
關(guān)聯(lián)選擇符
關(guān)聯(lián)選擇符只不過是一個用空格隔開的兩個或更多的單一選擇符組成的字符串。這些選擇符可以指定一般屬性,而且因?yàn)閷盈B順序的規(guī)則,它們的優(yōu)先權(quán)比單一的選擇符大。例如, 以下的上下文選擇符
P EM { background: yellow }
是P EM。這個值表示段落中的強(qiáng)調(diào)文本會是黃色背景;而標(biāo)題的強(qiáng)調(diào)文本則不受影響。
聲明
屬性
一個屬性被指定到選擇符是為了使用它的樣式。屬性的例子包括顏色、邊界和字體。
值
聲明的值是一個屬性接受的指定。例如,屬性顏色能接受值red。
組合
為了減少樣式表的重復(fù)聲明,組合的選擇符聲明是允許的。例如,文檔中所有的標(biāo)題可以通過組合給出相同的聲明:
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }
繼承
實(shí)際上,所有在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值,除非另外更改。例如,一個BODY定義了的顏色>值也會應(yīng)用到段落的文本中。
有些情況是內(nèi)部選擇符不繼承周圍的選擇符的值,但理論上這些都是特殊的。例如,上邊界屬性是不會繼承的;直覺上,一個段落不會有同文檔BODY一樣的上邊界值。
注解
樣式表里面的注解使用C語言編程中一樣的約定方法去指定。CSS1注解的例子如以下格式:
/* COMMENTS CANNOT BE NESTED */
偽類和偽元素
偽類和偽元素是特殊的類和元素,能自動地被支持CSS的瀏覽器所識別。偽類區(qū)別開不同種類的元素(例如,visited links(已訪問的連接)和active links(可激活連接)描述了兩個定位錨(anchors)的類型)。偽元素指元素的一部分,例如段落的第一個字母。
偽類或偽元素規(guī)則的形式如
選擇符:偽類 { 屬性: 值 }
或
選擇符:偽元素 { 屬性: 值 }
偽類和偽元素不應(yīng)用HTML的CLASS屬性來指定。一般的類可以與偽類和偽元素一起使用,如下:
選擇符.類: 偽類 { 屬性: 值 }
或
選擇符.類: 偽元素 { 屬性: 值 }
定位錨偽類
偽類可以指定A元素以不同的方式顯示連接(links)、已訪問連接(visited links)和可激活連接(active links)。定位錨元素可給出偽類link、visited或active。一個已訪問連接可以定義為不同顏色的顯示,甚至不同字體大小和風(fēng)格。
一個有趣的效果是使當(dāng)前(或“可激活”)連接以不同顏色、更大的字體顯示。然后,當(dāng)網(wǎng)頁的已訪問連接被重選時,又以不同顏色、更小字體顯示。這個樣式表的示例如下:
A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
首行偽元素
通常在報(bào)紙上的文章,例如Wall Street Journal中的,文本的首行都會以粗印體而且全部大寫地展示。CSS1包括了這個功能,將其作為一個偽元素。首行偽元素可以用于任何塊級元素(例如P、H1等等)。以下是一個首行偽元素的例子:
P:first-line {
font-variant: small-caps;
font-weight: bold }
4、 css選擇器包括class選擇器嗎?
不包括
?一:css基本選擇器有哪些
1.css屬性選擇器
2.css標(biāo)簽選擇器
3.cssID選擇器
4.css的通配符
二:css有哪些高級選擇器
1.css標(biāo)簽選擇器
css標(biāo)簽選擇器其實(shí)就是頁面上的所有類型的標(biāo)簽,我們對經(jīng)常描述稱為共性,對無法描述的稱為個性。我們在頁面上看到input,div和ul都有可能是選擇器,無論這個標(biāo)簽藏得多深,都可能被選擇上,并且選擇的是所有標(biāo)簽,并不是單單指一個。
2.cssID選擇器
css中我們使用#來對名字進(jìn)行自定義,#是指對一個特殊的標(biāo)簽來使用,并且只能用一次,在任何html標(biāo)簽中,都可以有id屬性,但是前提要按照字母開頭,更不能用字母去開頭,或者和標(biāo)簽同名。還有一些高手建議在css層面上盡量不要使用id。
3.css類選擇器
css中類選擇器,我們使用.來表示,我們使用類來表示,其實(shí)就是比較靈活。class和id是十分相似的,并且同一個標(biāo)簽可以使用很多個類選擇器,也可以多種標(biāo)簽使用。
4.css的通配符,可以替換任何標(biāo)簽,目前有些瀏覽器是不支持使用。