2022-04-17 1 180 web前端社区
选择器由 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 | 选择所有已访问的链接。 |
我们在显示屏上看到的各种颜色都是通过红(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); |
CSS 中定义了一些表示颜色的关键字。
颜色名 | 颜色 | 颜色名 | 颜色 |
---|---|---|---|
aqua | 天蓝 | black | 黑色 |
blue | 蓝色 | fuchsia | 品红 |
gray | 灰色 | green | 绿色 |
lime | 浅绿 | maroon | 紫红色 |
navy | 深蓝 | olive | 橄榄色 |
orange | 橙色 | purple | 紫色 |
red | 红色 | silver | 浅灰色 |
teal | 蓝绿色 | white | 白色 |
yellow | 黄色 |
您可以使用 background-color 属性为元素设置一个背景颜色,该属性支持以下几种属性值:
值 | 描述 |
---|---|
color_name | 使用具体颜色名称为元素设置背景颜色(例如 red) |
hex_number | 使用十六进制码为元素设置背景颜色(例如 #ff0000) |
rgb_number | 使用 rgb() 函数为元素设置背景颜色(例如 rgb(255,0,0)) |
transparent | 默认值,设置背景颜色为透明,大多数情况下我们并不会用到它。但如果您不希望某个元素拥有背景颜色,或者不希望用户对浏览器的设置(比如开启夜间模式、护眼模式)影响到您的设计,那么就可以使用 transparent 来将颜色设置为透明的 |
inherit | 从父元素继承对背景颜色的设置 |
background-image 用来为某个元素设置背景图像,默认情况下浏览器会从元素内容的左上角开始(若有内边距则从元素内边距区域的左上角开始),在水平和垂直方向上重复背景图像,以填充整个元素区域,您可以使用 background-repeat 属性来控制背景图像是否重复或如何重复。
值 | 描述 |
---|---|
url(‘URL’) | 指向图像的路径,可以将 url() 看作是一个函数,括号中的 URL 为图像的具体路径 |
none | 默认值,不显示背景图像 |
inherit | 从父元素继承背景图像的设置 |
背景图像的覆盖区域与背景颜色相同,同样会填充元素的内容、内边距以及边框区域,对于元素边框以外的区域(外边距)则没有影响。
默认情况下背景图像会从元素内容的左上角开始(若有内边距则从元素内边距区域的左上角开始),在水平和垂直方向上重复背景图像以填充整个元素区域(不包括元素的外边距区域),您可以使用 background-repeat 属性用来设置背景图像是否重复或如何重复:
值 | 描述 |
---|---|
repeat | 默认值,背景图像将在垂直方向和水平方向上重复 |
repeat-x | 背景图像仅在水平方向上重复 |
repeat-y | 背景图像仅在垂直方向上重复 |
no-repeat | 背景图像仅显示一次,不在任何方向上重复 |
inherit | 从父元素继承 background-repeat 属性的设置 |
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% |
background-attachment 属性用来设置背景图像是固定在某个位置还是跟随页面一起滚动,该属性的可选值如下:
值 | 描述 |
---|---|
scroll | 默认值,背景图像随着页面元素的滚动而移动 |
fixed | 当页面的其余部分滚动时,背景图像固定不动 |
inherit | 从父元素继承 background-attachment 属性的设置 |
background-size 属性用来设置背景图像的尺寸,该属性的可选值如下:
值 | 描述 |
---|---|
xpos ypos | 使用像素(px)或其它 CSS 单位来设置背景图像的高度和宽度,xpos 表示宽度,ypos 表示高度,如果只设置第一个值,那么第二个值将被设置为默认值 auto(自动) |
x% y% | 使用百分比表示背景图像相对于所在元素宽度与高度的百分比,x% 表示宽度,y% 表示高度,如果只设置第一个值,那么第二个值将被设置为默认值 auto(自动) |
cover | 保持背景图像的横纵比例并将图像缩放至足够大,使背景图像可以完全覆盖元素所在的区域,这么做可能会导致背景图像的某些部分超出元素区域而无法显示 |
contain | 保持背景图像的横纵比例并将图像缩放至足够大,使背景图像可以完整的显示在元素所在区域,背景图像可能无法完全覆盖整个元素区域 |
background-origin 是 CSS3 中新增的属性。在使用 background-position 属性来设置背景图像的位置时,默认是以元素左上角的位置来计算的。您还可以使用 background-origin 属性来设置 background-position 属性相对哪个位置来定位背景图像,background-origin 属性的可选值如下:
值 | 描述 |
---|---|
padding-box | 相对于元素的内边距区域来定位背景图像 |
border-box | 相对于元素的边框区域来定位背景图像 |
content-box | 相对于元素的内容区域来定位背景图像 |
background-clip 是 CSS3 中新增的属性,通过它可以设置背景图像的显示区域。background-clip 属性的可选值如下:
值 | 说明 |
---|---|
border-box | 默认值,在元素边框及以内的区域显示背景图像 |
padding-box | 在元素内边距及以内的区域显示背景图像 |
content-box | 在元素内容区域显示背景图像 |
background 是背景属性的简写形式,通过它不仅可以为元素设置某个背景属性,还可以同时设置多个或者所有的背景属性。在设置多个背景属性时并没有固定的顺序,但推荐使用如下顺序进行设置:
background-color || background-image || background-position [/ background-size]? || background-repeat || background-attachment || background-origin || background-clip
在设置多个背景属性时,有以下几点需要注意:
/
分隔,并且需要遵循 background-position 属性在前 background-size 属性在后的顺序;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)。可以把布局元素看成是一个盒子模型。
一个盒子模型:
内容区是整个盒子模型的中心,其中存放了盒子的主要内容,这些内容可以是文本、图像等资源。内容区有 width、height、overflow 三个属性,其中 width 和 height 属性用来指定盒子内容区域的宽度和高度,当内容信息过多,超出内容区所设置的范围时,则可以使用 overflow 属性设置溢出内容的处理方式,overflow 属性有四个可选值:
内边距是内容区和边框之间的空间,可以通过 padding-top、padding-right、padding-bottom、padding-left 以及它们的简写属性 padding 来设置内容区各个方向上与边框之间的距离。在为盒子模型设置背景属性时,背景属性可以覆盖到内边距区域。
内边距(padding)是指元素内容区与边框之间的区域,与外边距不同,内边距会受到背景属性的影响
边框是环绕内容区和内边距的边界,可以使用 border-style、border-width 和 border-color 以及它们的简写属性 border 来设置边框的样式。其中 border-style 属性为边框中最主要的属性,如果没有设置该属性的话,其它的边框属性也会被忽略。
在 IE 浏览器中背景属性不会覆盖到边框区域,但是在其它主流浏览器中,背景属性则可以覆盖到边框区域,当将边框设置为虚线时就可以透过虚线看到后面的背景。
外边距位于盒子模型的最外围,是边框之外的空间,通过外边距可以使盒子与盒子之间不会紧凑的连接在一起,是 CSS 布局中的一种重要手段。您可以使用 margin-top、margin-bottom、margin-left、margin-right 以及它们的简写属性 margin 来设置各个方向上外边距的宽度。
对于两个相邻的(水平或垂直方向 )且都设置有外边距的盒子,它们之间的距离并不是两者外边距相加的和,而是它们之中较大的那个值。另外,也可以将外边距的值设置为负值,当外边距的值为负时整个盒子将向反方向移动,当到达一定程度时盒子之间会产生重叠效果。
默认情况下如果不设置外边距属性,HTML 元素就是不会有外边距,但也有例外的情况,因为浏览器会为一些 HTML 元素设置默认的外边距
上述外边距属性的可选值如下表所示:
值 | 描述 |
---|---|
auto | 由浏览器计算外边距的尺寸 |
length | 使用具体数值配合 px、cm 等单位来定义元素外边距的尺寸,可以为负值,默认值为 0px |
% | 定义基于父元素的宽度百分比的外边距,可以为负值 |
inherit | 从父元素继承外边距属性的值 |
这里需要特别说明一下 margin 属性,与其它几个属性不同,margin 属性可以接受 1~4 个参数(参数之间使用空格分隔):
CSS 中的 width 和 height 属性设置元素的宽度和高度时,实际上设置的只是元素内容区域的宽度和高度,元素的实际宽度和高度还取决于一些其它因素:
通过 width 属性可以设置元素内容区的宽度,属性的可选值如下:
值 | 描述 |
---|---|
auto | 默认值,浏览器自动计算元素的实际宽度 |
length | 使用具体数值配合 px、cm 等单位来定义宽度 |
% | 定义基于父元素宽度百分比的宽度 |
inherit | 从父元素继承 width 属性的值 |
对于
<img>
标签来说,若仅指定 width 属性,那么它的 height 属性将根据原图片尺寸进行等比例缩放。
一般情况下 width 属性需要与 height 属性配合使用来同时定义元素的宽度和高度,因为某些元素没有默认的宽度或高度(或者宽度与高度默认为 0px),若不定义宽度或高度而且元素中又没有内容(子元素、文本等)时,这个元素的宽度或高度就会被设置为 0px,从外表看起来就像被压缩成了一条线。
height 属性用来定义元素内容区的高度,属性的可选值如下:
值 | 描述 |
---|---|
auto | 默认值,浏览器自动计算元素的实际高度 |
length | 使用具体数值配合 px、cm 等单位来定义高度 |
% | 定义基于父元素高度百分比的高度 |
inherit | 从父元素继承 width 属性的值 |
无论是 width 属性还是 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 属性的特性与之相似)
默认情况下,网页中元素的实际宽度或高度取决于元素内容区的宽度或高度、内边距以及边框属性的大小,因此我们在为元素布局时还需要考虑元素的内边距和边框属性所占的页面空间,正是由于上述原因,当您为页面元素设置宽度和高度时,元素的实际大小往往比您设置的要大。为此 CSS3 中添加了 box-sizing 属性来改变默认的盒子模型,通过 box-sizing 属性可以将元素的内边距和外边距在元素内容区内绘制,以使元素呈现的宽度和高度与设置的宽度和高度相同。
box-sizing 属性的可选值如下:
值 | 描述 |
---|---|
content-box | 默认值,元素的实际宽度或高度等于元素内容区的宽度或高度、内边距和边框的和 |
border-box | 在元素的内容区内绘制内边距或边框,内边距或边框不会影响元素的实际宽度或高度 |
inherit | 从父元素继承 box-sizing 属性的值。 |
当为元素定义 box-sizing: border-box; 属性时,元素内容区的实际宽度和高度是 width 和 height 属性中减去各边的边框和内边距的宽度。
浮动可以使一个元素脱离自己原本的位置,并在父元素的内容区中向左或向右移动,直到碰到父元素内容区的边界或者其它浮动元素为止。另外,在浮动元素之后定义的文本或者行内元素都将环绕在浮动元素的一侧,从而可以实现文字环绕的效果,类似于 Word 中图文混排。
浮动(float)属性仅对非绝对定位的元素有效,跟随浮动元素的文本或行内元素将围绕在浮动元素的另一侧,例如向左浮动的话其它元素将围绕在浮动元素的右侧。
float 属性有三个可选值,如下表所示:
值 | 描述 |
---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 默认值,元素不浮动 |
inherit | 从父元素继承 float 属性的值 |
另外,在使用 float 属性时还需要注意以下几点:
元素浮动之后,会对周围的元素造成一定的影响,为了消除这种影响您可以使用 clear 属性来清除浮动,属性如下:
值 | 描述 |
---|---|
left | 左侧不允许浮动元素 |
right | 右侧不允许浮动元素 |
both | 左右两侧均不允许浮动元素 |
none | 默认值,允许浮动元素出现在左右两侧 |
inherit | 从父元素继承 clear 属性的值 |
所有元素可继承: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。
Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3