百度前端技术学院 零基础学院 Day4

第四天，背景边框列表链接和更复杂的选择器

课程目标

掌握 CSS 稍微复杂的一些选择器，还有背景，边框等一些 CSS 样式属性

课程描述

复习

昨天我们学习了CSS的基本概念，基本的选择器，以及关于字体的一些样式设置，今天我们会进一步学习CSS的其它知识，但在开始之前，推荐你把昨天的阅读材料和自己写的代码花上半小时时间，回顾一下。

阅读

在学习枯燥难懂的盒模型之前，我们先学习一些简单的

• W3School-背景
• MDN-什么是背景

编码

打开你的简历代码，练习背景样式设置，比如把“简历”这两个大字标题加上一个背景色吧。多多实践，尽量把以下样式都实践一遍：

• background
• background-color
• background-image
• background-repeat
• background-position

阅读

• W3School 边框
• MDN 边框

编码

在你的简历代码中，尝试实践以下边框相关属性的CSS代码编写

• border
• border-color
• border-style
• border-width
• border的上下左右

阅读

接下来我们看看列表相关的样式设计

• W3SChool 列表
• MDN 列表

编码

不知道你在你的简历里是否使用了列表元素，如果没有的话，不妨看看哪里适合改造为列表，或者增加一些列表。然后在这些列表上尝试使用各种列表相关的样式：

• list-style
• list-style-type
• list-style-image

阅读

最后一个简单的内容是链接的样式设置

• W3School 链接
• MDN 链接

编码

我估计你的简历里暂时没有用到链接元素，但你肯定留下了一个电子邮箱或者是个人主页之类的内容，没有的话，不妨加上这两个内容。然后给这两个链接设置样式，来练习链接四种状态的样式设置方法：

• a:link
• a:visited
• a:hover
• a:active

阅读

接下来，我们暂时不学习新的属性设置，我们回头来看看选择器的问题，昨天我们学习了简单选择器和属性选择器，我们今天学习剩余的其他选择器及相关语法

• 选择器的分组与继承
• 派生选择器
• 伪类选择器
• 组合
• 选择器的优先级

编码

对目前简历的 CSS 代码进行审视，优化选择器的应用

验证

今天代码部分其实比较简单，主要是多尝试，学习之后，回顾以下自己是否已经掌握以下概念：

1、背景，边框，列表，链接相关属性。

背景 background

属性	描述	值
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。	scroll、fixed、
background-color	设置元素的背景颜色。	transparent（默认透明） 、red、#ff0000、rgb(255,0,0)
background-image	把图像设置为背景。	none（默认）、url('URL')
background-position	设置背景图像的起始位置。	关键字、百分数值、长度值
background-repeat	设置背景图像是否及如何重复。	repeat(默认)、repeat-x、repeat-y、no-repeat

边框border

属性	描述	值
border	用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。	none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset、inherit 样式
border-width	用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。	thin、medium、thick、length
border-color	设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。	transparent（默认透明） 、red、#ff0000、rgb(255,0,0)

列表list

属性	描述	值
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。	Text
list-style-image	将图象设置为列表项标志。	none、URL
list-style-position	设置列表中列表项标志的位置。	inside(文本内文本环绕)、outside(默认)
list-style-type	设置列表项标志的类型。	值

链接a

a:link {color:#FF0000;}        /* 未被访问的链接 */
a:visited {color:#00FF00;}    /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}    /* 正在被点击的链接 */

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

2、CSS 各种选择器的概念，使用方法及使用场景。

派生选择器：允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

li strong {
    font-style: italic;
    font-weight: normal;
  }

伪类选择器
一个 CSS 伪类（pseudo-class） 是一个以冒号(:)作为前缀的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个 checkbox 被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个孩子元素时。

3、CSS 选择器的优先级。

第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖{margin:10px；}
第六优先级：通配选择器，如{marigin:6px;}