选择器

选择器由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成，用来指定要为哪个 HTML 元素定义样式。选择器是 CSS 样式规则中重要的组成部分，我们可以将选择器看作是 CSS 样式与 HTML 元素之间的匹配模式，与选择器关联的样式规则会应用于选择器所指定的 HTML 元素上。CSS 中提供了多种不同类型的选择器，您可以根据自己的喜好来选择使用。

选择器	例子	例子描述
.class	.intro	选择 class=”intro” 的所有元素。
.class1.class2	.name1.name2	选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2	.name1 .name2	选择作为类名 name1 元素后代的所有类名 name2 元素。
#id	#firstname	选择 id=”firstname” 的元素。
*	*	选择所有元素。
element	p	选择所有 <p> 元素。
element.class	p.intro	选择 class=”intro” 的所有<p> 元素。
element,element	div, p	选择所有 <div> 元素和所有 <p> 元素。
element element	div p	选择 <div> 元素内的所有 <p> 元素。
element>element	div > p	选择父元素是 <div> 的所有 <p> 元素。
element+element	div + p	选择紧跟 <div> 元素的首个 <p> 元素。
element1~element2	p ~ ul	选择前面有 <p> 元素的每个 <ul> 元素。
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target=”_blank” 属性的所有元素。
[[attribute~=value]]	[title~=flower]	选择 title 属性包含单词 “flower” 的所有元素。
[attribute^=value]	a[href^=”https”]	选择其 src 属性值以 “https” 开头的每个 <a> 元素。
[attribute$=value]	a[href$=”.pdf”]	选择其 src 属性以 “.pdf” 结尾的所有 <a> 元素。
[attribute**=value*]	a[href*=”w3schools”]	选择其 href 属性值中包含 “abc” 子串的每个 <a> 元素。
:active	a:active	选择活动链接。
::after	p::after	在每个 <p> 的内容之后插入内容。
::before	p::before	在每个 <p> 的内容之前插入内容。
:checked	input:checked	选择每个被选中的 <input> 元素。
:default	input:default	选择默认的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）。
:enabled	input:enabled	选择每个启用的 <input> 元素。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 元素。
::first-letter	p::first-letter	选择每个 元素的首字母。
::first-line	p::first-line	选择每个 元素的首行。
:first-of-type	p:first-of-type	选择属于其父元素的首个 元素的每个 元素。
:focus	input:focus	选择获得焦点的 input 元素。
:fullscreen	:fullscreen	选择处于全屏模式的元素。
:hover	a:hover	选择鼠标指针位于其上的链接。
:in-range	input:in-range	选择其值在指定范围内的 input 元素。
:indeterminate	input:indeterminate	选择处于不确定状态的 input 元素。
:invalid	input:invalid	选择具有无效值的所有 input 元素。
:lang(language)	p:lang(it)	选择 lang 属性等于 “it”（意大利）的每个 <p> 元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:link	a:link	选择所有未访问过的链接。
:not(selector)	:not(p)	选择非 <p> 元素的每个元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:only-of-type	p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 <p> 元素。
:optional	input:optional	选择不带 “required” 属性的 input 元素。
:out-of-range	input:out-of-range	选择值超出指定范围的 input 元素。
::placeholder	input::placeholder	选择已规定 “placeholder” 属性的 input 元素。
:read-only	input:read-only	选择已规定 “readonly” 属性的 input 元素。
:read-write	input:read-write	选择未规定 “readonly” 属性的 input 元素。
:required	input:required	选择已规定 “required” 属性的 input 元素。
:root	:root	选择文档的根元素。
::selection	::selection	选择用户已选取的元素部分。
:target	#news:target	选择当前活动的 #news 元素。
:valid	input:valid	选择带有有效值的所有 input 元素。
:visited	a:visited	选择所有已访问的链接。

CSS颜色设置

我们在显示屏上看到的各种颜色都是通过红（red）、绿（green）、蓝（blue）三原色组合而成的，按不同的比例混合这三种颜色就可以得到其它颜色，通过调整红、绿、蓝三种颜色的数值可以最大限度的控制颜色

值	描述	实例
颜色名称	使用颜色名称来设置具体的颜色，比如 red、blue、brown、lightseagreen 等，颜色名称不区分大小写	color: red;
十六进制码	使用十六进制码以 #RRGGBB 或 #RGB（比如 #ff0000）的形式设置具体颜色，”#” 后跟 6 位或 3 位十六进制字符（0-9, A-F）	color: #f03;
RGB	通过 rgb() 函数对 red、green、blue 三原色的强度进行控制，从而实现不同的颜色	color: rgb(255,0,51);
RGBA	RGBA 扩展了 RGB，在 RGB 的基础上增加了 alpha 通道来设置颜色的透明度，需要使用 rgba() 函数实现	color: rgba(255,0,0,0.1);
HSL	通过 hsl() 函数对颜色的色调、饱和度、亮度进行调节，从而实现不同的颜色	color: hsl(120,100%,25%);
HSLA	HSLA 扩展了 HSL，在 HSL 的基础上增加了 alpha 通道来设置颜色的透明度，需要使用 hsla() 函数实现	color: hsla(240,100%,50%,0.5);

1. 常用颜色名称

CSS 中定义了一些表示颜色的关键字。

颜色名	颜色	颜色名	颜色
aqua	天蓝	black	黑色
blue	蓝色	fuchsia	品红
gray	灰色	green	绿色
lime	浅绿	maroon	紫红色
navy	深蓝	olive	橄榄色
orange	橙色	purple	紫色
red	红色	silver	浅灰色
teal	蓝绿色	white	白色
yellow	黄色

背景background

1. background-color

您可以使用 background-color 属性为元素设置一个背景颜色，该属性支持以下几种属性值：

值	描述
color_name	使用具体颜色名称为元素设置背景颜色（例如 red）
hex_number	使用十六进制码为元素设置背景颜色（例如 #ff0000）
rgb_number	使用 rgb() 函数为元素设置背景颜色（例如 rgb(255,0,0)）
transparent	默认值，设置背景颜色为透明，大多数情况下我们并不会用到它。但如果您不希望某个元素拥有背景颜色，或者不希望用户对浏览器的设置（比如开启夜间模式、护眼模式）影响到您的设计，那么就可以使用 transparent 来将颜色设置为透明的
inherit	从父元素继承对背景颜色的设置

2. background-image

background-image 用来为某个元素设置背景图像，默认情况下浏览器会从元素内容的左上角开始（若有内边距则从元素内边距区域的左上角开始），在水平和垂直方向上重复背景图像，以填充整个元素区域，您可以使用 background-repeat 属性来控制背景图像是否重复或如何重复。

值	描述
url(‘URL’)	指向图像的路径，可以将 url() 看作是一个函数，括号中的 URL 为图像的具体路径
none	默认值，不显示背景图像
inherit	从父元素继承背景图像的设置

背景图像的覆盖区域与背景颜色相同，同样会填充元素的内容、内边距以及边框区域，对于元素边框以外的区域（外边距）则没有影响。

3. background-repeat

默认情况下背景图像会从元素内容的左上角开始（若有内边距则从元素内边距区域的左上角开始），在水平和垂直方向上重复背景图像以填充整个元素区域（不包括元素的外边距区域），您可以使用 background-repeat 属性用来设置背景图像是否重复或如何重复：

值	描述
repeat	默认值，背景图像将在垂直方向和水平方向上重复
repeat-x	背景图像仅在水平方向上重复
repeat-y	背景图像仅在垂直方向上重复
no-repeat	背景图像仅显示一次，不在任何方向上重复
inherit	从父元素继承 background-repeat 属性的设置

4. background-position

background-position 属性用来设置背景图像的起始位置：

值	描述
left top（左上）、 left center（左中）、 left bottom（左下）、 right top（右上）、 right center（右中）、 right bottom（右下）、 center top（中上）、 center center（居中）、 center bottom（中下）	使用一些关键词表示背景图像的位置，如果您仅设置第一个关键词，那么第二个将默认为 center
x% y%	使用百分比表示背景图像距离元素左上角的距离，x% 为水平方向，y% 为垂直方向，左上角为 0% 0%，右下角是 100% 100%，如果您仅设置第一个值，那么另一个值将是 50%，默认值为 0% 0%
xpos ypos	使用像素（px）或者其它 CSS 单位表示背景图像距离元素左上角的距离，xpos 为水平方向，ypos 为垂直方向，左上角为 0px 0px，右下角视元素的尺寸而定，百分比和单位的形式可以混用，如果您仅设置第一个值，那么另一个值将默认为 50%

5. background-attachment

background-attachment 属性用来设置背景图像是固定在某个位置还是跟随页面一起滚动，该属性的可选值如下：

值	描述
scroll	默认值，背景图像随着页面元素的滚动而移动
fixed	当页面的其余部分滚动时，背景图像固定不动
inherit	从父元素继承 background-attachment 属性的设置

6. background-size

background-size 属性用来设置背景图像的尺寸，该属性的可选值如下：

值	描述
xpos ypos	使用像素（px）或其它 CSS 单位来设置背景图像的高度和宽度，xpos 表示宽度，ypos 表示高度，如果只设置第一个值，那么第二个值将被设置为默认值 auto（自动）
x% y%	使用百分比表示背景图像相对于所在元素宽度与高度的百分比，x% 表示宽度，y% 表示高度，如果只设置第一个值，那么第二个值将被设置为默认值 auto（自动）
cover	保持背景图像的横纵比例并将图像缩放至足够大，使背景图像可以完全覆盖元素所在的区域，这么做可能会导致背景图像的某些部分超出元素区域而无法显示
contain	保持背景图像的横纵比例并将图像缩放至足够大，使背景图像可以完整的显示在元素所在区域，背景图像可能无法完全覆盖整个元素区域

7. background-origin

background-origin 是 CSS3 中新增的属性。在使用 background-position 属性来设置背景图像的位置时，默认是以元素左上角的位置来计算的。您还可以使用 background-origin 属性来设置 background-position 属性相对哪个位置来定位背景图像，background-origin 属性的可选值如下：

值	描述
padding-box	相对于元素的内边距区域来定位背景图像
border-box	相对于元素的边框区域来定位背景图像
content-box	相对于元素的内容区域来定位背景图像

8. background-clip

background-clip 是 CSS3 中新增的属性，通过它可以设置背景图像的显示区域。background-clip 属性的可选值如下：

值	说明
border-box	默认值，在元素边框及以内的区域显示背景图像
padding-box	在元素内边距及以内的区域显示背景图像
content-box	在元素内容区域显示背景图像

9. background

background 是背景属性的简写形式，通过它不仅可以为元素设置某个背景属性，还可以同时设置多个或者所有的背景属性。在设置多个背景属性时并没有固定的顺序，但推荐使用如下顺序进行设置：

background-color || background-image || background-position [/ background-size]? || background-repeat || background-attachment || background-origin || background-clip

在设置多个背景属性时，有以下几点需要注意：

• 每个属性之间使用空格进行分隔；
• 如果同时设置 background-position 和 background-size 属性，这两个属性之间需要使用斜线/分隔，并且需要遵循 background-position 属性在前 background-size 属性在后的顺序；
• 如果同时设置 background-origin 和 background-clip 属性，需要遵循 background-origin 属性在前 background-clip 属性在后的顺序。如果 background-origin 与 background-clip 属性的值相同，则可以只设置一个值。

background 属性还支持设置多组属性值，每组属性值之间使用逗号,分隔。但需要注意的是 background-color 属性不能设置多个，并且只能在最后一组属性值中设置。

如果设置的多组属性中，背景图像之间存在重叠，那么前面设置的背景图像会覆盖在后面的背景图像之上。如：

 body {
 background: url("./css.png") 10px 10px/60px 60px no-repeat padding-box,                              url("./css.png") 50px 30px/120px 120px no-repeat content-box,                               url("./css.png") 140px 40px/200px 100px no-repeat content-box #58a;   
 }

盒子模型

盒子模型是网页设计中经常用到的一种思维模型，由四个部分构成，从内到外分别为内容区（content）、内边距（padding）、边框（border）和外边距（margin）。可以把布局元素看成是一个盒子模型。

一个盒子模型：

内容区（content）

内容区是整个盒子模型的中心，其中存放了盒子的主要内容，这些内容可以是文本、图像等资源。内容区有 width、height、overflow 三个属性，其中 width 和 height 属性用来指定盒子内容区域的宽度和高度，当内容信息过多，超出内容区所设置的范围时，则可以使用 overflow 属性设置溢出内容的处理方式，overflow 属性有四个可选值：

• hidden：表示隐藏溢出的部分；
• visible：表示显示溢出的部分（溢出的部分将显示在盒子外部）；
• scroll：表示为内容区添加一个滚动条，您可以通过滑动这个滚动条来查看内容区的全部内容；
• auto：表示由浏览器决定如何处理溢出部分。

内边距（padding）

内边距是内容区和边框之间的空间，可以通过 padding-top、padding-right、padding-bottom、padding-left 以及它们的简写属性 padding 来设置内容区各个方向上与边框之间的距离。在为盒子模型设置背景属性时，背景属性可以覆盖到内边距区域。
内边距（padding）是指元素内容区与边框之间的区域，与外边距不同，内边距会受到背景属性的影响

• padding-top：设置元素内容区上方的内边距；
• padding-right：设置元素内容区右侧的内边距；
• padding-bottom：设置元素内容区下方的内边距；
• padding-left：设置元素内容区左侧的内边距；
• padding：内边距属性的缩写形式，可以同时设置上下左右四个方向上的内边距。

边框（border）

边框是环绕内容区和内边距的边界，可以使用 border-style、border-width 和 border-color 以及它们的简写属性 border 来设置边框的样式。其中 border-style 属性为边框中最主要的属性，如果没有设置该属性的话，其它的边框属性也会被忽略。

在 IE 浏览器中背景属性不会覆盖到边框区域，但是在其它主流浏览器中，背景属性则可以覆盖到边框区域，当将边框设置为虚线时就可以透过虚线看到后面的背景。

外边距（margin）

外边距位于盒子模型的最外围，是边框之外的空间，通过外边距可以使盒子与盒子之间不会紧凑的连接在一起，是 CSS 布局中的一种重要手段。您可以使用 margin-top、margin-bottom、margin-left、margin-right 以及它们的简写属性 margin 来设置各个方向上外边距的宽度。

对于两个相邻的（水平或垂直方向 ）且都设置有外边距的盒子，它们之间的距离并不是两者外边距相加的和，而是它们之中较大的那个值。另外，也可以将外边距的值设置为负值，当外边距的值为负时整个盒子将向反方向移动，当到达一定程度时盒子之间会产生重叠效果。
默认情况下如果不设置外边距属性，HTML 元素就是不会有外边距，但也有例外的情况，因为浏览器会为一些 HTML 元素设置默认的外边距

• margin-top：设置元素上方的外边距；
• margin-bottom：设置元素下方的外边距；
• margin-right：设置元素右侧的外边距；
• margin-left：设置元素左侧的外边距；
• margin：外边距的简写属性，可以同时设置元素四个方向（上下左右）的外边距。

上述外边距属性的可选值如下表所示：

值	描述
auto	由浏览器计算外边距的尺寸
length	使用具体数值配合 px、cm 等单位来定义元素外边距的尺寸，可以为负值，默认值为 0px
%	定义基于父元素的宽度百分比的外边距，可以为负值
inherit	从父元素继承外边距属性的值

这里需要特别说明一下 margin 属性，与其它几个属性不同，margin 属性可以接受 1~4 个参数（参数之间使用空格分隔）：

• 如果提供四个参数，那么将按照上、右、下、左的顺序分别作用于元素四个方向的外边距；
• 如果提供三个参数，那么第一个参数会作用在元素上方的外边距，第二个参数会作用在元素左右两侧的外边距，第三个参数则作用在元素下方的外边距；
• 如果提供两个参数，那么第一个参数会作用在元素上方和下方的外边距，第二个参数会作用在元素的左右两侧的外边距；
• 如果只提供一个参数，那么这个值将同时作用于元素上下左右四个方向的外边距。

元素的宽度和高度

CSS 中的 width 和 height 属性设置元素的宽度和高度时，实际上设置的只是元素内容区域的宽度和高度，元素的实际宽度和高度还取决于一些其它因素：

• 总宽度：width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
• 总高度：height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

1. width

通过 width 属性可以设置元素内容区的宽度，属性的可选值如下：

值	描述
auto	默认值，浏览器自动计算元素的实际宽度
length	使用具体数值配合 px、cm 等单位来定义宽度
%	定义基于父元素宽度百分比的宽度
inherit	从父元素继承 width 属性的值

对于<img>标签来说，若仅指定 width 属性，那么它的 height 属性将根据原图片尺寸进行等比例缩放。

一般情况下 width 属性需要与 height 属性配合使用来同时定义元素的宽度和高度，因为某些元素没有默认的宽度或高度（或者宽度与高度默认为 0px），若不定义宽度或高度而且元素中又没有内容（子元素、文本等）时，这个元素的宽度或高度就会被设置为 0px，从外表看起来就像被压缩成了一条线。

2. height

height 属性用来定义元素内容区的高度，属性的可选值如下：

值	描述
auto	默认值，浏览器自动计算元素的实际高度
length	使用具体数值配合 px、cm 等单位来定义高度
%	定义基于父元素高度百分比的高度
inherit	从父元素继承 width 属性的值

无论是 width 属性还是 height 属性，它们的值都不能设置为负数。

3. max-width 和 max-height

max-width 和 max-height 属性分别用来设置元素内容区的最大宽度和最大高度。当定义了 max-width 和 max-height 属性时，不论 width 或 height 属性的实际值是多少，width 和 height 属性的实际值都会小于等于 max-width 和 max-height 属性的值。max-width 和 max-height 属性的可选值如下：

值	描述
none	默认值，表示对元素的最大宽度或高度没有限制
length	使用具体数值配合 px、cm 等单位来定义元素的最大宽度或高度
%	定义基于父元素宽度和高度百分比的最大宽度或高度
inherit	从父元素继承 max-width 或 max-height 属性的值

以 max-width 属性为例：（max-height 属性的特性与之相似）

• 当 max-width 属性的值小于 width 属性时，width 属性的值会被重新定义为与 max-width 属性相同的值；
• 当 max-width 属性的值大于 width 时，max-width 属性将会被忽略；
• 当 max-width 属性的值小于 min-width 时，max-width 属性将会被忽略。

改变盒子模型box-sizing

默认情况下，网页中元素的实际宽度或高度取决于元素内容区的宽度或高度、内边距以及边框属性的大小，因此我们在为元素布局时还需要考虑元素的内边距和边框属性所占的页面空间，正是由于上述原因，当您为页面元素设置宽度和高度时，元素的实际大小往往比您设置的要大。为此 CSS3 中添加了 box-sizing 属性来改变默认的盒子模型，通过 box-sizing 属性可以将元素的内边距和外边距在元素内容区内绘制，以使元素呈现的宽度和高度与设置的宽度和高度相同。

box-sizing 属性的可选值如下：

值	描述
content-box	默认值，元素的实际宽度或高度等于元素内容区的宽度或高度、内边距和边框的和
border-box	在元素的内容区内绘制内边距或边框，内边距或边框不会影响元素的实际宽度或高度
inherit	从父元素继承 box-sizing 属性的值。

当为元素定义 box-sizing: border-box; 属性时，元素内容区的实际宽度和高度是 width 和 height 属性中减去各边的边框和内边距的宽度。

浮动float

浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止。另外，在浮动元素之后定义的文本或者行内元素都将环绕在浮动元素的一侧，从而可以实现文字环绕的效果，类似于 Word 中图文混排。

浮动（float）属性仅对非绝对定位的元素有效，跟随浮动元素的文本或行内元素将围绕在浮动元素的另一侧，例如向左浮动的话其它元素将围绕在浮动元素的右侧。

float 属性有三个可选值，如下表所示：

值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值，元素不浮动
inherit	从父元素继承 float 属性的值

另外，在使用 float 属性时还需要注意以下几点：

• 如果设置了 float 属性且属性的值不为 none 时，若 display 属性的值为 inline-table，那么 display 实际会被设置为 table，若 display 的属性值为 inline、inline-block、run-in、table-* 等值，那么 display 实际会被设置为 block，其它情况则没有变化；
• 当元素设置了绝对定位或者 display 属性的值为 none 时，float 属性无效；
• 相邻的浮动元素，如果空间足够它们会紧挨在一起，排列成一行。

清除浮动clear

元素浮动之后，会对周围的元素造成一定的影响，为了消除这种影响您可以使用 clear 属性来清除浮动，属性如下:

值	描述
left	左侧不允许浮动元素
right	右侧不允许浮动元素
both	左右两侧均不允许浮动元素
none	默认值，允许浮动元素出现在左右两侧
inherit	从父元素继承 clear 属性的值

css样式继承

所有元素可继承：visibility、cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。