這幾天補了一下css的知識,然後想起自己前端時間的學習,真的是囫圇吞棗,也許有和我一樣的人,所以手碼了一點書上個人覺得有用的知識,從css選擇器開始 到偽類 版式 顏色 背景屬性 文字屬性 盒子屬性 列表樣式 css定位 其他css屬性 今天到背景屬性 餘下的明天會更 知識**於《html5和樣式應用指南》這本很棒的書 學校圖書館借到的 網上可能也有電子版吧=-= 建議看一看
然後 希望有初學者/自學者啥的看見的話 與君共勉 希望你們也能堅持下去
css選擇器:
* 全域性設定;
#id選擇器(唯一性)
.class選擇器(可重用)
任意多個選擇器表示式可以組合到乙個單個表示式裡 用逗號隔開:
h1,h2,h3,h4,h5,h6
可以根據乙個元素是另乙個元素的子孫的狀態來選擇它,只需空格分隔開2個元素名即可:
blockqute a/*將乙個塊引用中的所有鏈結的顏色都設定為紅色*/
要選擇乙個父元素的第一代孩子,使用如下語法:
body > div /*這只會對頁面的主體中的頂級div應用邊距設定,而不會對巢狀在其他元素中的div應用*/
可以根據文件元素是否擁有乙個特定的屬性來選擇它,或者根據該元素是否帶有乙個特定值的屬性來選擇它:
a[name]
要通過乙個屬性值來選擇乙個html元素 在屬性名稱後面跟著乙個等號和值:
input[type="text"]
偽類和偽元素:
偽類最常見的應用是檢測和樣式化錨點元素所建立的鏈結的各種狀態.
a:link 根據鏈結是否處於常規狀態來設定超連結文字的顏色;
a:hover 根據滑鼠是否懸停在鏈結上來設定超連結文字的顏色;
a:active 根據鏈結是否是啟用的來設定超連結文字的顏色;
a:visited 根據鏈結是否處於已訪問狀態來設定超連結文字的顏色;
所有元素都可以擁有hover狀態,理論上別的元素也可以擁有其他三個狀態,但是css中未定義.
當元素獲得焦點時,focus偽類以類似的方式來選擇元素.這句話通常適用於input和其他表單元素:
input[type="text"]:focus
如果乙個元素是其父元素的第乙個孩子,first-child偽類用來選擇該元素:
li:first-child
偽元素類似於偽類,但是它是選擇元素的一部分而不是整個元素.
div p:first-child:first-letter /*div中的第一段的第乙個字元放大3倍*/
before和after偽元素僅僅分別選擇元素的前面和後面,允許編寫者在這些位置插入內容:
p.joke:after
縮寫表示法:
font: 前三可選後兩必須
或者font:可接受關鍵字caption small-caption icon menu message-box.
background-color屬性負責控制背景色,它使用與前景color屬性相同的顏色表示法.
背景顏色填充了元素所占用的所有區域,包括補白和擴充套件到邊框的外圍邊緣.可以使用關鍵字transparent(取消該元素所擁有的任何背景顏色並允許父元素的背景顏色透過它顯示過來)和inherit(使用與元素的父元素相同的背景顏色)作為值.
css中的url沒有使用引號表示,它是相對於樣式表的位置,而不是html檔案的位置.background-image屬性可以使用關鍵字值none,從之前的設定中刪除背景影象.
background-position屬性控制背景影象最初相對於元素定位在**.用關鍵字left center right top bottom,來相對於元素的左右上下邊界來定位背景影象.相對於容器的中心來定位背景影象,以便讓背景影象的中心固定在容器的中心,即便當包含元素動態調整大小的時候也是如此.
background-attachment:控制背景影象如何移動來響應前景內容的滾動,預設值為scroll,背景圖會隨著前景內容而滾動.fixed值意味著影象處於相對文件的視窗的固定位置,針對所有滾動的元素保持對齊,而不只是針對文件主體.
縮寫表示法:background:color image repeat attachment position
控制項 應用css樣式
html view plain copy print?asp menu id mnutopmenu runat server dynamicenabledefaultpopoutimage false dynamichorizontaloffset 1 font bold false orienta...
CSS的樣式結合應用
list style type none list style image url 1.png border bottom 0c0 double 6px 虛實線 border left 0c0 solid 6px 實線 border right 0c0 solid 6px border top 0c...
css樣式層疊的應用
今天做了乙個專題頁，應用到了css的特殊性和繼承。其實疊層樣式就是通過繼承和特殊性來實現的。邏輯結構如下 div.content div.bgb.con1 div.bgb.con2 解釋 1.設計圖是乙個年貨專場，分為自提商品和快遞商品兩塊。中用con1和con2來表示。自提商品和快遞商品塊中都有背...