百度前端技术学院--零基础--第四天：背景边框列表链接和更复杂的选择器

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

课程目标
掌握CSS稍微复杂的一些选择器，还有背景，边框等一些CSS样式属性
课程描述
复习
CSS的基本概念，基本的选择器，以及关于字体的一些样式设置。
阅读一

W3School-背景
MDN-什么是背景
阅读笔记

1.CSS 背景

背景色

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

这条规则把元素的背景设置为灰色：

p {background-color: gray;}

如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：

p {background-color: gray; padding: 20px;}

可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。

background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意

背景图像
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

大多数背景都应用到 body 元素，不过并不仅限于此。

下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：

p.flower {background-image: url(/i/eg_bg_03.gif);}

您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：

a.radio {background-image: url(/i/eg_bg_07.gif);}

背景重复

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
可用值为：
no-repeat —停止完全重复背景。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat—默认值；双向重复。
默认地，背景图像将从一个元素的左上角开始。请看下面的例子：

body{ background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-y;}

调整背景图片的大小
背景定位

可以利用 background-position 属性改变图像在背景中的位置。

下面的例子在 body 元素中将一个背景图像居中放置：

body{ background-image:url('/i/eg_bg_03.gif');background-repeat:no-repeat;background-position:center;}

为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
1.关键字
图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。

根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。

如果只出现一个关键字，则认为另一个关键字是 center。

所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：

p{ background-image:url('bgimg.gif');background-repeat:no-repeat;background-position:top;}

2.百分数值
假设你希望用百分数值将图像在其元素中居中，这很容易：

body{ background-image:url('/i/eg_bg_03.gif');background-repeat:no-repeat;background-position:50% 50%;}

这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。

如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：

body{ background-image:url('/i/eg_bg_03.gif');background-repeat:no-repeat;background-position:66% 33%;}

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。

background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

body{ background-image:url('/i/eg_bg_03.gif');background-repeat:no-repeat;background-position:50px 100px;}

注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body {background-image:url(/i/eg_bg_02.gif);background-repeat:no-repeat;background-attachment:fixed}

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

边框
我们可以使用以下命令为框的所有四个边设置边框border：
它设置的值border-width，border-style和border-color。

.box { border: 1px solid black;
}

圆角
盒子上的圆角是通过使用border-radius属性和与盒子每个角相关的相关长手来实现的。可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径。在很多情况下，您只会传入一个值，这两个值都将被使用。
例如，使一个框的所有四个角的半径为10px：

.box { border-radius: 10px;
}

或使右上角的水平半径为1em，垂直半径为10％：

.box { border-top-right-radius: 1em 10%;
}

阅读二

W3School 边框
MDN 边框

MDN 边框
阅读笔记
1.边框的样式
样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。

CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。

例如，您可以为把一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”：

a:link img {border-style: outset;}

值	描述
none	定义无边框
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

定义多种样式

您可以为一个边框定义多个样式，例如：

p.aside {border-style: solid dotted dashed double;}

上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。

我们又看到了这里的值采用了 top-right-bottom-left 的顺序，讨论用多个值设置不同内边距时也见过这个顺序。

定义单边样式
如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：

border-top-style
border-right-style
border-bottom-style
border-left-style
因此这两种方法是等价的：

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

2.边框的宽度
您可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值）和 thick。
所以，我们可以这样设置边框的宽度：

p {border-style: solid; border-width: 5px;}

或者：

p {border-style: solid; border-width: thick;}

定义单边宽度
您可以按照 top-right-bottom-left 的顺序设置元素的各边边框：

p {border-style: solid; border-width: 15px 5px 15px 5px;}

上面的例子也可以简写为（这样写法称为值复制）：

p {border-style: solid; border-width: 15px 5px;}

也可以通过下列属性分别设置边框各边的宽度：

border-top-width
border-right-width
border-bottom-width
border-left-width

没有边框
由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。
边框的颜色
设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性，它一次可以接受最多 4 个颜色值。

可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：

p {border-style: solid;border-color: blue rgb(25%,35%,45%) #909090 red;}

如果颜色值小于 4 个，值复制就会起作用。例如下面的规则声明了段落的上下边框是蓝色，左右边框是红色：

p {border-style: solid;border-color: blue red;}

定义单边颜色

还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：

border-top-color
border-right-color
border-bottom-color
border-left-color

要为 h1 元素指定实线黑色边框，而右边框为实线红色，可以这样指定：

h1 {border-style: solid;border-color: black;border-right-color: red;}

透明边框
如果边框没有样式，就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。

CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子：

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

我们为上面的链接定义了如下样式：

a:link, a:visited {border-style: solid;border-width: 5px;border-color: transparent;}
a:hover {border-color: gray;}

从某种意义上说，利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。

3.调整背景图片的大小
在上面的示例中，我们放大了一个大图像，因为它大于背景元素。在这种情况下，我们可以使用background-size可以采用长度或百分比值的属性来调整图像大小以适合背景。
您还可以使用关键字：

cover—浏览器将使图像足够大，使其完全覆盖方框区域，同时仍保留其宽高比。在这种情况下，部分图像可能会出现在盒子外面。
contain—浏览器将使图像大小合适以适合框内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则最终可能会在图像的两侧或顶部和底部出现间隙。

4.背景附件
我们可用于背景的另一个选项是指定背景在内容滚动时如何滚动。这是使用background-attachment属性控制的，该属性可以采用以下值：

scroll：滚动页面时，它将导致元素的背景滚动。如果滚动元素内容，则背景不会移动。实际上，背景固定在页面上的相同位置，因此背景随着页面滚动而滚动。
fixed：它将元素的背景固定到视口，以便在滚动页面或元素内容时不会滚动。它将始终保持在屏幕上的相同位置。
local：此值是后来添加的（仅Internet Explorer 9+支持此值，而IE4
+支持其他scroll值），因为该值很混乱，在许多情况下并不能真正满足您的要求。该local值将背景固定为其所设置的元素，因此，滚动元素时，背景将随之滚动。

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

W3SChool 列表
MDN 列表

阅读笔记
1.CSS 列表

列表类型

要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。

例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

要修改用于列表项的标志类型，可以使用属性 list-style-type：

ul {list-style-type : square}

上面的声明把无序列表中的列表项标志设置为方块。
设置不同的列表样式：

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 属性做到：

ul li {list-style-image : url(xxx.gif)}

只需要简单地使用一个 url() 值，就可以使用图像作为标志。
实例
把图像设置为列表中的项目标记：

ul{list-style-image:url("/i/arrow.gif");list-style-type:square;}

列表标志位置
CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。
实例
规定列表中列表项目标记的位置：

ul{list-style-position:inside;}

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

简写列表样式
为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样：

li {list-style : url(example.gif) square inside}

2.管理列表计数

start
start 属性允许你从1 以外的数字开始计数。示例如下：

<ol start="4"><li>Toast pitta, leave to cool, then slice down the edge.</li><li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li><li>Wash and chop the salad.</li><li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

reversed

reversed 属性将启动列表倒计数。示例如下：

<ol start="4" reversed><li>Toast pitta, leave to cool, then slice down the edge.</li><li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li><li>Wash and chop the salad.</li><li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

value
value 属性允许设置列表项指定数值，示例如下:

<ol><li value="2">Toast pitta, leave to cool, then slice down the edge.</li><li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li><li value="6">Wash and chop the salad.</li><li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

阅读四
链接的样式设置

W3School 链接
MDN 链接

阅读笔记
1.设置链接的样式
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
实例

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

2.常见的链接样式

文本修饰

text-decoration 属性大多用于去掉链接中的下划线：

实例

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景色

background-color 属性规定链接的背景色：

实例

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

阅读五
昨天学习了简单选择器和属性选择器，今天学习剩余的其他选择器及相关语法

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

阅读笔记
1.CSS 高级语法

选择器的分组
可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。

h1,h2,h3,h4,h5,h6 {color: green;}

2.继承及其问题
根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：

body {font-family: Verdana, sans-serif;}

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

比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

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

请注意标记为 的蓝色代码的上下文关系：

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p><ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

4.什么是伪类？
伪类是选择器，用于选择处于特定状态的元素，例如，它们是其类型的第一个元素，或者它们被鼠标指针悬停。它们的行为就像您在文档的某个部分上应用了一个类，通常可以帮助您减少标记中多余的类，并为您提供更加灵活，可维护的代码。

伪类是以冒号开头的关键字：

:pseudo-class-name

实例：

article p:first-child {font-size: 120%;font-weight: bold;
}

 <article><p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillomelon azuki bean garlic.</p><p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collardgreens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

用户操作伪类
某些伪类仅在用户以某种方式与文档交互时适用。这些用户操作伪类（有时称为动态伪类）的行为就像当用户与元素进行交互时已将其添加到元素中一样。示例包括：

a:link,
a:visited {color: rebeccapurple;font-weight: bold;
}a:hover {color:hotpink;
}

<p><a href="">Hover over me</a></p>

6.什么是伪元素？
伪元素的行为类似，但是它们的行为就像您在标记中添加了一个全新的HTML元素一样，而不是将类应用于现有元素。伪元素以双冒号开头::。

::pseudo-element-name

该::first-line伪元素选择器会为您提供可靠的做到这一点-如果词次数的增加和减少它仍然只能选择第一行。

article p::first-line {font-size: 120%;font-weight: bold;
}

<article><p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillomelon azuki bean garlic.</p><p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collardgreens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

7.结合伪类和伪元素
如果要使第一段的第一行为粗体，可以将:first-child和::first-line选择器链接在一起。尝试编辑前面的实时示例，以便它使用以下CSS。我们要说的是，选择<p>元素内部的第一个元素的第一行<article>。

article p:first-child::first-line { font-size: 120%; font-weight: bold;
}

8.后代组合器
它的后代组合子 -通常是通过一个单一的空间（表示）字符-结合了两个选择器，使得由所述第二选择器匹配的元素，如果他们有一个祖先（父，母的父，母的父的父等）元件的第一选择器的匹配被选择。利用后代组合器的选择器称为后代选择器。

body article p

在下面的示例中，我们仅匹配

类别为的元素内部的元素.box。

.box p {color: red;
}

<div class="box"><p>Text in .box</p></div>
<p>Text not in .box</p>

9.儿童组合器
该子组合子（>）被放置在两个CSS选择器之间。它仅匹配第二个选择器匹配的那些元素，它们是第一个选择器匹配的元素的直接子元素。层次结构后面的后代元素不匹配。例如，仅选择作为<p>元素直接子<article>元素的元素：

article > p

在下一个示例中，有一个无序列表，嵌套在其中的是一个有序列表。使用子组合器来选择仅<li>是的直接子元素的元素，并为其<ul>赋予了顶部边框。

ul > li {border-top: 5px solid red;
}

<ul><li>Unordered item</li><li>Unordered item<ol><li>Item 1</li><li>Item 2</li></ol></li>
</ul>

10.相邻的同级组合器
相邻的同级选择器（+）用于选择与层次结构中同一级别的另一个元素相邻的对象。例如，要选择紧随<img>元素之后的所有<p>元素：

p + img

11.通用同级组合器
如果要选择元素的同级结构，即使它们不直接相邻，也可以使用常规的同级组合器（~）。要选择所有<img>而来元素随时随地之后<p>的元素，我们可以这样做：

p ~ img

12.使用组合器
您可以将上一课中发现的所有选择器与组合器结合使用，以挑选出文档的一部分。例如，如果我们要选择类别为“ a”的列表项，它们是a的直接子代<ul>，则可以使用以下内容。

ul > li[class="a"]  {  }

13.级联
样式表级联 -在非常简单的级别上，这意味着CSS规则的顺序很重要；当应用两个具有相同特异性的规则时，CSS中最后一个将被使用。
14.特异性
如果多个规则具有不同的选择器，但浏览器如何确定哪个规则适用，但是仍然可以应用于同一元素，则是特殊性。基本上，这是对选择器选择的具体程度的一种度量：

元素选择器不太具体-它会选择页面上显示的该类型的所有元素-因此得分会降低。
类选择器更为具体-它只会选择页面上具有特定class属性值的元素-因此得分会更高。
15.遗产
在这种情况下，也需要了解继承-在父元素上设置的某些CSS属性值是由其子元素继承的，而有些则不是。

例如，如果在元素上设置color和font-family，则其中的每个元素也将使用该颜色和字体设置样式，除非您直接对它们应用了不同的颜色和字体值。
15.控制继承
CSS提供了四个特殊的通用属性值来控制继承。每个CSS属性都接受这些值。

inherit
将应用于选定元素的属性值设置为其父元素的属性值。实际上，这“继承”。
initial
将应用于选定元素的属性值设置为该属性的初始值。
unset
将属性重置为其自然值，这意味着，如果该属性是自然继承的，则其行为类似于inherit，否则，其行为类似于initial。
注意：还有一个新值 revert，它对浏览器的支持有限。
16.重置所有属性值
CSS速记属性all可用于一次将这些继承值之一应用于（几乎）所有属性。其值可以是继承值中的任何一个（inherit，initial，unset，或revert）。这是撤消对样式所做的更改的便捷方法，以便您可以在开始新的更改之前回到已知的起点。