javascript進階篇2CSSXML學習_基礎知識
來源:懂視網
責編:小采
時間:2020-11-27 21:02:38
javascript進階篇2CSSXML學習_基礎知識
javascript進階篇2CSSXML學習_基礎知識:CSS全稱是cascading style sheets,中文名字叫級聯樣式單,也叫層疊樣式表。它的好處就是能讓代碼整齊,并且可以批量處理一些樣式。 基本語法: 注釋符:/* */ 選擇符:selector {attribute:value} 同一個屬性的值用空格符號隔開,不同屬性用分號隔開。 區
導讀javascript進階篇2CSSXML學習_基礎知識:CSS全稱是cascading style sheets,中文名字叫級聯樣式單,也叫層疊樣式表。它的好處就是能讓代碼整齊,并且可以批量處理一些樣式。 基本語法: 注釋符:/* */ 選擇符:selector {attribute:value} 同一個屬性的值用空格符號隔開,不同屬性用分號隔開。 區

CSS全稱是cascading style sheets,中文名字叫級聯樣式單,也叫層疊樣式表。它的好處就是能讓代碼整齊,并且可以批量處理一些樣式。
基本語法:
注釋符:/* */
選擇符:selector {attribute:value} 同一個屬性的值用空格符號隔開,不同屬性用分號隔開。 區分大小寫。
比如要給頁面中的table定制樣式,則寫table {.....;.....;}
選擇符的使用方法有很多種,于是我又一次懶得打,從網上抄來的:
選擇符模式 |
說明 |
* |
匹配任意元素。(通用選擇器) |
E |
匹配任意元素 E (例如一個類型為 E 的元素)。(類型選擇器) |
E F |
匹配元素 E 的任意后代元素 F 。(后代選擇器) |
E > F |
匹配元素 E 的任意子元素 F 。(子選擇器) |
E:first-child |
當元素 E 是它的父元素中的第一個子元素時,匹配元素 E 。(:first-child 偽類) |
E:link E:visited |
如果 E 是一個目標還沒有訪問過(:link)或者已經訪問過(:visited)的超鏈接的源錨點時匹配元素 E 。(link 偽類) |
E:active E:hover E:focus |
在確定的用戶動作中匹配 E 。(動態偽類) |
E:lang(c) |
如果類型為 E 的元素使用了(人類)語言 c (文檔語言確定語言是如何被確定的),則匹配該元素。(:lang() 偽類) |
E + F |
如果一個元素 E 直接在元素 F 之前,則匹配元素 F 。(臨近選擇器) |
E[attr] |
匹配具有”attr”屬性集(不考慮它的值)的任意元素 E 。(屬性選擇器) |
E[attr="warning"] |
匹配其“attr”屬性值嚴格等于“warning”的任意元素 E 。(屬性選擇器) |
E[attr~="warning"] |
匹配其“attr”屬性值為空格分隔的值列表,并且其中一個嚴格等于“warning”的任意元素 E 。(屬性選擇器) |
E[lang|="en"] |
匹配其“lang”屬性具有以“en”開頭(從左邊)的值的列表的任意元素 E 。(屬性選擇器) |
DIV.warning |
僅 HTML。用法同 DIV[class~="warning"]。(類選擇器) |
E#myid |
匹配 ID 等于“myid”的任意元素 E 。(ID 選擇器) |
用到的時候再詳細解釋吧。
CSS優先級:同一個頁面或者css文件里,有時候會對同一個元素有多個定義,這就需要根據優先級來渲染了。優先級分為 外部定義樣式的優先級與其他樣式的優先級。
外部定義樣式的優先級:具體怎么算法就不說了,這里單純說結果:id選擇符>類選擇符>屬性選擇符>偽類選擇符>元素選擇符>偽元素選擇符>全局選擇符>其他
其他樣式定義的優先級:文內樣式,也就是在元素里面的style=...,這個是最最高級的,優先于所有的外部定義樣式。"!important" 這個在不同版本用法有偏差,也就不具體說了,需要的時候查吧。通過繼承得到的樣式:這個是優先級最低的樣式。
CSS屬性:請參考http://www.gxlcms.com/w3school/css/css_reference.htm (喂這也太不負責了吧!摔)
CSS單位: http://www.gxlcms.com/w3school/css/css_units.htm (博主你簡直就是個廢柴啊!摔!)
(假裝沒聽見)
下面來進入應用環節 ( ̄︶ ̄)
1.當前頁面嵌入css樣式:
代碼如下:
css test 2.嵌入css樣式文件:
我們在工程下新建一個css文件夾,然后新建一個css文件,取名為style.css。這樣做是為了代碼能整齊,當然因為這里只是個例子于是里面的內容我只寫了剛才例子里的東西。

代碼如下:
.tableStyle{
background:yellow;
font-size:14px;
font-weight:bold;
border:1px solid #000000
引用的時候也很容易,只需要加一行:
rel指定加入的是css樣式表文件,type指定文件類型,href則是文件的物理地址。
3 動態修改css樣式。
終于,跟js扯上關系了。
這個修改的方法無外乎取到元素然后修改屬性。要提的一點是,link的屬性也可以修改。
比如:寫一個link的id是myStyle,然后修改它的導入文件,方法是這樣的:
代碼如下:
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
javascript進階篇2CSSXML學習_基礎知識
javascript進階篇2CSSXML學習_基礎知識:CSS全稱是cascading style sheets,中文名字叫級聯樣式單,也叫層疊樣式表。它的好處就是能讓代碼整齊,并且可以批量處理一些樣式。 基本語法: 注釋符:/* */ 選擇符:selector {attribute:value} 同一個屬性的值用空格符號隔開,不同屬性用分號隔開。 區