语法
CSS分两部分组成选择器selector
和属性属性值{}
selector {
attr: value;
attr2: value2;
}
选择器
1.元素选择器
语法 | 例子 | 描述 |
---|---|---|
element | p{} | 选择所有<p>元素 |
element,element | div,p{} | 选择所有
和
元素 |
element element | div p{} | 选择所有div内的p元素 |
element>element | div>p{} | 选择父元素为div的所有p元素,父节点 |
element+element | div+p{} | 选择紧跟着div的p元素,父节点 |
element1~element2 | p~ul{} | 选择前面有p元素的每个ul元素,兄弟节点 |
2.类选择器
语法 | 例子 | 描述 |
---|---|---|
.class | .intro{} | 选择 class=“intro” 的所有元素。 |
element.classp.intro{} | 选择p元素,class="intro"的元素 | |
element[attribute][target] | 选择所有带target属性的元素 | |
element[attribute=value] | 等于 注意value一定是字符串,在写程序时经常用嵌套引号,不然报错比如’name=“1”’ | |
element[attribute~=value] | 包含 | |
element[attribute|=value] | 以value开头 |
3.ID选择器
语法 | 例子 | 描述 |
---|---|---|
#id | #first | 选择id="first"的元素 |
4.其他
语法 | 例子 | 描述 |
---|---|---|
:not(selector) | :not§ | 选择非p标签的元素 |
属性和属性值
1.尺寸
width
height
2.背景
background-color:背景颜色
background-image:背景图像
background-position:背景图像起始位置
background-repeat:背景图像是否重复
3.文本
color:文本颜色
line-height:行高
text-align:对齐元素中的文本
4.字体
font-family:字体
font-size:尺寸
font-sytle:风格
font-weiht:粗细
5.边框
padding:内边距离
border:边框宽度
margin:外边距
6.定位
position:元素是静态的/相对的/绝对的,还是固定的
top:到上边界的距离
right:到右边界的距离
bottom:到下边界的距离
left:到左边界的距离
float:浮动
clear:清除浮动
参考文献:
http://www.w3school.com.cn/cssref/css_selectors.asp
http://www.runoob.com/cssref/css-selectors.html