CSS基礎語法

CSS基礎語法

選擇器

標籤選擇器

p{
  color:red;
} /*選擇所有<p>標籤，字體設置爲紅色*/

類選擇器

.red{
  color:red;
} /*選擇所有class="red"的標籤，字體設置爲紅色*/

id選擇器

#red{
  color:red;
} /*選擇id="red"的標籤，字體設置爲紅色*/

屬性選擇器

div[id^=div]{
  color:red;
}/*選擇id屬性以div開頭的div標籤，字體設置爲紅色*/
/*
=  等於
^= 以開頭
$= 以結尾
*= 包含
*/
div[class]{
  color:red;
}/*選擇包含class屬性的div標籤，字體設置爲紅色*/

通配符選擇器

*{
  color:red;
} /*選擇所有元素，字體設置爲紅色*/

後代選擇器

h1 strong{
  color:red;
} /*h1的所有strong子元素字體設置爲紅色*/

子代選擇器

h1 > strong{
  color:red;
} /*h1的strong直接子元素字體設置爲紅色*/

同代選擇器

h1 + p{
  color:red;
} /*與h1同級，緊跟h1後面的第一個p元素字體設置爲紅色*/
h1 ~ p{
  color:red;
}/*與h1同級，在h1後面的所有p元素字體設置爲紅色*/

僞類選擇器

p:last-child{
  color:red;
} /*最後一個p元素字體設置爲紅色*/
:first-child /*第一個元素*/
:nth-child(2n-1) /*所有滿足2n-1(n爲整數)的元素（1,3,5,7...）*/
:nth-child(odd) /*第奇數個元素（2n-1）*/
:nth-child(even) /*第偶數個元素（2n）*/

:hover /*鼠標移到的元素*/
:link /*未訪問的*/
:active /*活動的*/
:visited /*已訪問的*/
:focus /*獲取光標的*/
:enabled /*可用的*/
:disabled /*不可用的*/

屬性

文本

color: red; /*文字顏色:紅*/
font-weight: bold; /*文字寬度:粗*/
font-size: 50px; /*文字大小:50px*/
font-style: italic; /*文字樣式:斜體*/
text-shadow: 2px 2px 2px yellow;/*文字陰影:水平偏移2px,垂直偏移2px,模糊距離2px,黃色*/
-webkit-text-stroke: 1px black; /*文字描邊: 1px黑色*/

背景

background-color /*背景色*/
background-image /*背景圖url('')*/
background-repeat /*背景圖重複方式 repeat-x,repeat-y,norepeat*/
background-position /*位置座標，偏移量*/
background-clip /*圖片裁剪位置*/
background-origin /*圖片原點位置 border-box,padding-box,content-box*/
background-size /*背景圖大小
  x% y% 按容器比例縮放圖片
  cover 等比例縮放至填滿容器尺寸
  contain 等比例縮放至最大可完整顯示圖片尺寸
*/

列表

list-style /*列表樣式 none,disc,circle,square,decimal*/