這幾天補了一下css的知識,然後想起自己前端時間的學習,真的是囫圇吞棗,也許有和我一樣的人,所以手碼了一點書上個人覺得有用的知識,從CSS選擇器開始 到僞類 版式 顏色 背景屬性 文本屬性 盒子屬性 列表樣式 CSS定位 其他css屬性 今天到背景屬性 餘下的明天會更 知識來源於《HTML5和樣式應用指南》這本很棒的書 學校圖書館借到的 網上可能也有電子版吧=-= 建議看一看
然後 希望有初學者/自學者啥的看見的話 與君共勉 希望你們也能堅持下去
css選擇器:
*{ } 全局設置;#{ }id選擇器(唯一性)
.{ }class選擇器(可重用)
任意多個選擇器表達式可以組合到一個單個表達式裏 用逗號隔開:
h1,h2,h3,h4,h5,h6{ font-family: verdana;}
可以根據一個元素是另一個元素的子孫的狀態來選擇它,只需空格分隔開2個元素名即可:
blockqute a{ color: red;}/*將一個塊引用中的所有鏈接的顏色都設置爲紅色*/
要選擇一個父元素的第一代孩子,使用如下語法:
body > div { margin-top: 0px;margin-bottom:36px;}/*這隻會對頁面的主體中的頂級div應用邊距設置,而不會對嵌套在其他元素中的div應用*/
可以根據文檔元素是否擁有一個特定的屬性來選擇它,或者根據該元素是否帶有一個特定值的屬性來選擇它:
a[name] {color:cyan;}
要通過一個屬性值來選擇一個HTML元素 在屬性名稱後面跟着一個等號和值:
input[type="text"] {background-color:black;}
僞類和僞元素:
僞類最常見的應用是檢測和樣式化錨點元素所創建的鏈接的各種狀態.
a:link { color:blue;}根據鏈接是否處於常規狀態來設置超鏈接文本的顏色;
a:hover { color:blue;}根據鼠標是否懸停在鏈接上來設置超鏈接文本的顏色;
a:active {color:blue;}根據鏈接是否是激活的來設置超鏈接文本的顏色;
a:visited {color:blue;}根據鏈接是否處於已訪問狀態來設置超鏈接文本的顏色;
所有元素都可以擁有hover狀態,理論上別的元素也可以擁有其他三個狀態,但是css中未定義.
當元素獲得焦點時,focus僞類以類似的方式來選擇元素.這句話通常適用於input和其他表單元素:
input[type="text"]:focus {background-color: #ffff99;}
如果一個元素是其父元素的第一個孩子,first-child僞類用來選擇該元素:
li:first-child { background-color:blue;}
<ul>
<li></li>/*這行變色*/
<li></li>
</ul>
僞元素類似於僞類,但是它是選擇元素的一部分而不是整個元素.
div p:first-child:first-letter {font-size: 300%; color:red}/*div中的第一段的第一個字符放大3倍*/
before和after僞元素僅僅分別選擇元素的前面和後面,允許編寫者在這些位置插入內容:
p.joke:after { content:url(../images/luoma.jpg);}
縮寫表示法:
font: <font-style><font-variant><font-weight><font-size><font-family> 前三可選後兩必須
或者font:<keyword> 可接受關鍵字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