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*/