1、选择器
1)选择器类型
2)选择器优先级
2、CSS2八大类样式
字体样式
区块样式
背景样式
background
background-image: url(images/searchBtn.gif); /* 背景图像 */
background-repeat: no-repeat; /* 背景图像重复的设置;no-repeat不重复 */
background-position: top right; /* 背景图像的位置 */
方框样式
padding 填充
简写:
padding: 5px; /* 四周填充 */
padding: 5px 5px; /* 上下左右 */
padding: 5px 5px 5px; /* 上 左右 下 */
padding: 5px 5px 5px 5px; /* 上 右 下 左 */
padding-top
padding-right
padding-bottom
padding-left
margin 边界
简写:
同上
margin-top
margin-right
margin-bottom
margin-left
float 浮动——自动填充父级容器的空白处;浮动元素不会撑开父级容器。
none
left 向左浮动
right 向右浮动
clear 清除浮动
left 清除左边浮动
right 清除右边浮动
both 清除两边浮动
边框样式
border 边框
border: 样式 尺寸 颜色;
border-style
border-width
border-color
border-top
border-right
border-bottom
border-left
border-top-style
border-top-width
border-top-color
..........
列表样式
list-style-type
list-style-position
list-style-image
定位样式
position
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right
或者 z-index 声明)。
overflow 内容超出容器范围如何处理
hidden 内容超出后隐藏
scroll 无论内容超出,始终存在滚动条
auto 内容超出后,出现滚动条
visible 内容超出后,仍然显示,没有滚动条;默认的
扩展样式
3、样式表的分类
1)外部样式表 方便与替换网页的主题
2)文档样式表
3)嵌入样式表(行内样式表)
1)选择器类型
2)选择器优先级
2、CSS2八大类样式
字体样式
区块样式
背景样式
background
background-image: url(images/searchBtn.gif); /* 背景图像 */
background-repeat: no-repeat; /* 背景图像重复的设置;no-repeat不重复 */
background-position: top right; /* 背景图像的位置 */
方框样式
padding 填充
简写:
padding: 5px; /* 四周填充 */
padding: 5px 5px; /* 上下左右 */
padding: 5px 5px 5px; /* 上 左右 下 */
padding: 5px 5px 5px 5px; /* 上 右 下 左 */
padding-top
padding-right
padding-bottom
padding-left
margin 边界
简写:
同上
margin-top
margin-right
margin-bottom
margin-left
float 浮动——自动填充父级容器的空白处;浮动元素不会撑开父级容器。
none
left 向左浮动
right 向右浮动
clear 清除浮动
left 清除左边浮动
right 清除右边浮动
both 清除两边浮动
边框样式
border 边框
border: 样式 尺寸 颜色;
border-style
border-width
border-color
border-top
border-right
border-bottom
border-left
border-top-style
border-top-width
border-top-color
..........
列表样式
list-style-type
list-style-position
list-style-image
定位样式
position
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right
或者 z-index 声明)。
overflow 内容超出容器范围如何处理
hidden 内容超出后隐藏
scroll 无论内容超出,始终存在滚动条
auto 内容超出后,出现滚动条
visible 内容超出后,仍然显示,没有滚动条;默认的
扩展样式
3、样式表的分类
1)外部样式表 方便与替换网页的主题
2)文档样式表
3)嵌入样式表(行内样式表)