百度前端学院第四天
任务
熟悉CSS属性的基本使用方法
CSS 背景
background
background-color
设置背景颜色
以下方法都可以定义背景颜色为白色
background: black;
background: #000000;
background: #000;
两个hao
background-image
使用图片作为背景,需要为属性设置一个url值
background-image: url(/i/eg_bg_04.gif);
background-repeat
背景重复，可设置在水平或垂直方向平铺
background-repeat: repeat-x;
background-repeat: repeat-y;
background-position
背景定位，可以改变图像在背景中的位置
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
CSS 边框
border
元素外边距内就是元素的边框（border）,围绕在padding之外，每个边框有三个方面：宽度、样式和颜色。
border-color
边框颜色
border-style
边框样式
- none: 默认无边框
- dotted: 定义一个点线边框
- dashed: 定义一个虚线边框
- solid: 定义实线边框
- double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
- groove: 定义3D沟槽边框。效果取决于边框的颜色值
- ridge: 定义3D脊边框。效果取决于边框的颜色值
- inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
- outset: 定义一个3D突出边框。 效果取决于边框的颜色值
border-width
边框宽度，可通过以下两个方法指定边框宽度：
p.one{
border-width: 5px;
}
p.two{
border-width: medium;
}
border的上下左右
可以为边框四条边设置不同的格式，包括style,color等，顺序为上、右、底、左
CSS 列表
list-style
list-style-type
列表类型，可更改用于列表项的标志类型，常用列表样式，依次为圆、方形、：
ul.circle {list-style-type:circle;}
ul.square {list-style-type:square;}
ol.upper-roman {list-style-type:upper-roman;}
ol.lower-alpha {list-style-type:lower-alpha;}
list-style-image
列表图片
CSS链接
a:link
a:link - 正常，未访问过的链接
a:visited
a:visited - 用户已访问过的链接
a:hover
a:hover - 当用户鼠标放在链接上时
a:active
a:active - 链接被点击的那一刻
- 当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面 - 可对各个样式设置属性，如
text-decoration background-color color
CSS 各种选择器的概念，使用方法及使用场景
- 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
- 常用css选择器包含通用元素选择器、标签选择器、id选择器、class选择器
通用元素选择器
- CSS 中 通用元素选择器以 “*” 来定义。
- 匹配任何元素
标签选择器
- 用于匹配所有使用该标签的标元素
id选择器
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
- HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
class选择器
- class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
- class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
CSS 选择器的优先级
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
- 作为style属性写在元素内的样式
- id选择器
- 类选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义或继承
总结排序：
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性