CSS组成
CSS=选择器+声明(属性:属性值)
选择器
1. 简单选择器
- 标签选择器
- 写法
标签名 {
/* CSS属性 */
}
- ID选择器
- 写法
ID {
/* CSS属性 */
}
- class选择器
- 写法
class名 {
/* CSS属性 */
}
- 属性选择器
- 写法
[HTML属性] {
/* CSS属性 */
}
2. 复合选择器
是简单选择器按照一定规则组合而成。
- 组合选择器
- 写法
简单选择器1,简单选择器2 {
/* CSS属性 */
}
- 作用
多个选择器使用同一套属性。 - 子选择器
- 写法
简单选择器1>简单选择器2 {
/* CSS属性 */
}
- 后代选择器
- 写法
简单选择器1 简单选择器2 {
/* CSS属性 */
}
注意:选择器中间必须有空格。
伪类
-
:hover
选择器
当鼠标放到元素上面样式会发生改变。 - 超链接的伪类
a:link{color:#ff0000;} /* 未访问的链接 */
a:visited{color:#00CC00;}/* 已访问的链接 */
a:hover{color:#000FF;} /* 鼠标指针移动到链接上 */
a:active{color:#FF00FF;} /* 选定的链接 */
属性
- 字体
font
- 大小
font-size
- 风格
font-style
- 粗细
font-weight
- 字体
font-family
- 颜色
color
- 大小
- 文本
text
- 对齐
text-align
- 修饰
text-decoration
- 对齐
- 边框
border
- 颜色
border-color
- 粗细
border-width
- 风格
border-style
- 简写
border : border-width border-style border-color;
- 上边框
border-top
- 下边框
border-bottom
- 左边框
border-left
- 右边框
border-right
- 背景
background
- 颜色
background-color
- 图片
background-image
- 重复
background-repeat
- 位置
background-position
- 关联
background-attachment
- 内边距
padding
- 外边距
margin
- 显示
display
- 内联标签的
display
是inline
- 块级标签的
display
是block
- 内联标签的
在HTML4中,内联标签可以嵌套于块级标签中,块标签不可以嵌套于内联标签中。HTML5规则有些不同。