）

行元素（一行可以显示多个， 设置宽高无效， 默认宽度为内容宽度，只能容纳文本或行内元素）： 常见的行内元素有 、、、、、、、、、等，其中 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。（注意链接内不能再放链接， 内可以放块元素）

行内快元素（一行可以有多个并且可以设置宽高） : 在行内元素中有几个特殊的标签 —— 、、

7.2 元素模式转换

主要有以下三种转换方式
display:block;转换为块元素
diplay:inline;转换为行内元素
display:inline-block：转换为行内快元素

7.3 单行文字垂直居中

解决方案: 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中

      div{
              width: 200px;
              height: 40px
              
              line-height: 40px
           }

八、 CSS的背景

8.1 背景颜色

background-color 属性定义了元素的背景颜色。一般情况下元素背景颜色默认值是 transparent(透明)，我们也可以手动指定背景颜色为透明色。

background-color:颜色值;
background-color:transparent;

8.2 背景图片

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

## none为无背景图， url为图片地址（不加引号）
background-image : none | url (url）
background-image: url("test.jpg")

8.3 背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。（背景图片会压住背景颜色）
repeat 背景图像在纵向和横向上平铺（默认）
no-repeat 背景图像不平铺
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向平铺
``

8.4 背景图片位置

利用 background-position属性可以改变图片在背景中的位置。
关于其属性值如下解释：
length: 百分数｜由浮点数字和单位标识符组成的长度值， 100%则和父亲大小一样款
position top|center|bottom|left|center|right 方向词

background-position: x y
background-postion: 12 32
background-postion: center 0
background-position:right center

参数代表的意思是:x 坐标和 y 坐标。 可以使用方位名词或者精确单位
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

8.5 背景图片图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment : scroll | fixed

scroll 背景图下时随着对象内容滚动的
fixed 背景图下固定

8.6 背景图像复合写法

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

background: transparent url(image.jpg) repeat-y fixed top ;

8.7 背景颜色半透明

background: rgba(0, 0, 0, 0.3)

十 总结

10.1 基础选择器

10.2 字体属性

10.3 文本属性

10.4 CSS引入方式

10.5 CSS复合选择器

10.6 元素显示模式

10.7 CSS背景

{"dataManager":"[]","props":{"isServer":true,"initialState":{"global":{"done":false,"artFromType":null,"fontType":"black","$modal":{"ContributeModal":false,"RewardListModal":false,"PayModal":false,"CollectionModal":false,"LikeListModal":false,"ReportModal":false,"QRCodeShareModal":false,"BookCatalogModal":false,"RewardModal":false},"$ua":{"value":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36","isIE11":false,"earlyIE":null,"chrome":"58.0","firefox":null,"safari":null,"isMac":false},"$diamondRate":{"displayable":false,"rate":0},"readMode":"day","locale":"zh-CN","seoList":[{"comments_count":0,"public_abbr":"一、引入CSS样式与CSS选择器 1.css入门： （1）什么CSS？ 1）CSS 指层叠样式表 (Cascadi...","share_image_url":"https://upload-images.jianshu.io/upload_images/18633299-33622552e5356c16.png","slug":"132d27431a2a","user":{"id":18633299,"nickname":"开源oo柒","slug":"8bad059112c7","avatar":"https://upload.jianshu.io/users/upload_avatars/18633299/6978619e-dec5-44ec-b6e4-16bcfea15252.jpg"},"likes_count":0,"title":"网页编程day-39:CSS","id":53538836,"views_count":30},{"comments_count":0,"public_abbr":"HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的，因此网页是网络信息传递的载体。网页文件是用...","share_image_url":"http://upload-images.jianshu.io/upload_images/1783296-3293d924409e297a.png","slug":"15c75821c385","user":{"id":1783296,"nickname":"阿啊阿吖丁","slug":"6deb978686b8","avatar":"https://upload.jianshu.io/users/upload_avatars/1783296/ba1eeead-3337-4a81-a436-7f68333782a8.jpg"},"likes_count":0,"title":"网络技术与应用","id":24561081,"views_count":1545},{"comments_count":0,"public_abbr":"译自《Type-Safe CSS》 类型安全CSS 虽然您可以在JavaFX中创建纯文本的CSS样式表，但Torn...","share_image_url":"","slug":"0cdd53c61e4d","user":{"id":3764796,"nickname":"公子小水","slug":"5d207022e1f1","avatar":"https://cdn2.jianshu.io/assets/default_avatar/5-33d2da32c552b8be9a0548c7a4576607.jpg"},"likes_count":2,"title":"TornadoFX编程指南，第6章，类型安全CSS","id":15472017,"views_count":995},{"comments_count":0,"public_abbr":"这段时间学习了网页的基础知识，考虑到知识点内容比较多，为了方便记忆，我还是记下来，方便日后总结。这里我学习的方式通...","share_image_url":"https://upload-images.jianshu.io/upload_images/5356150-a8624da992b5223c.png","slug":"7db0d8e9f629","user":{"id":5356150,"nickname":"blackmanba_084b","slug":"7c635bf0a9a0","avatar":"https://upload.jianshu.io/users/upload_avatars/5356150/d867d04e-3d0f-4ab1-9245-663c6039e753.jpg"},"likes_count":2,"title":"网络编程（一）之HTML","id":87906857,"views_count":44},{"comments_count":2,"public_abbr":"简介网络浏览器很可能是使用最广的软件。在这篇入门文章中，我将会介绍它们的幕后工作原理。我们会了解到，从您在地址栏输...","share_image_url":"","slug":"b07f7309a361","user":{"id":3789399,"nickname":"wengjq","slug":"5f07cc1d485c","avatar":"https://cdn2.jianshu.io/assets/default_avatar/8-a356878e44b45ab268a3b0bbaaadeeb7.jpg"},"likes_count":14,"title":"浏览器的工作原理：新式网络浏览器幕后揭秘","id":15591022,"views_count":1314}]},"note":{"data":{"is_author":false,"last_updated_at":1621500702,"public_title":"网络编程（二）之 CSS（1）","purchased":false,"liked_note":false,"comments_count":2,"free_content":"u003cpu003e花了1周的时间也学完了CSS, 在这里我也讲黑马博客中pink老师的讲解内容记录一下。u003c/pu003enu003cpu003eu003ccodeu003eCSSu003c/codeu003e 是层叠样式表 (u003ccodeu003eCascading Style Sheetsu003c/codeu003e) 的简称.u003cbru003en有时我们也会称之为 u003ccodeu003eCSS 样式表u003c/codeu003e或u003ccodeu003e级联样式表u003c/codeu003e。CSS 是也是一种标记语言CSS 主要用于设置 HTML 页面中的u003ccodeu003e文本内容u003c/codeu003e(字体、大小、对齐方式等)、u003ccodeu003e图片的外形u003c/codeu003e(宽高、边框样式、 边距等)以及u003ccodeu003e版面的布局和外观显示样式u003c/codeu003e。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解:CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。u003cbru003enu003ccodeu003eCSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离。u003c/codeu003eu003c/pu003enu003ch3u003e一、 CSS语法规范u003c/h3u003enu003cdiv class="image-package"u003enu003cdiv class="image-container" style="max-width: 700px; max-height: 518px;"u003enu003cdiv class="image-container-fill" style="padding-bottom: 45.12%;"u003eu003c/divu003enu003cdiv class="image-view" data-width="1148" data-height="518"u003eu003cimg data-original-src="//upload-images.jianshu.io/upload_images/5356150-1a1935d5c9f83556.png" data-original-width="1148" data-original-height="518" data-original-format="image/png" data-original-filesize="141833"u003eu003c/divu003enu003c/divu003enu003cdiv class="image-caption"u003eu003c/divu003enu003c/divu003enu003colu003enu003cliu003e展开格式书写u003c/liu003enu003c/olu003enu003cpreu003eu003ccodeu003eh3 {ncolor: pink; font-size: 20px;n}nu003c/codeu003eu003c/preu003enu003col start="2"u003enu003cliu003e样式大小写(强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外)u003c/liu003enu003c/olu003enu003cpreu003eu003ccodeu003eh3 {n color: pink;n}nu003c/codeu003eu003c/preu003enu003col start="3"u003enu003cliu003e空格规范u003c/liu003enu003c/olu003enu003cpreu003eu003ccodeu003eh3 {n color: pink;n}nu003c/codeu003eu003c/preu003enu003culu003enu003cliu003e属性值签名，冒号后面，保留一个空格u003c/liu003enu003cliu003e选择器（标签）和大括号中间保留空格u003c/liu003enu003c/ulu003enu003ch3u003e二、CSS选择器u003c/h3u003enu003cpu003e选择器简单来说就是选择标签用的。这里选择其可以分为两个大类分别是u003cstrongu003e基础选择器u003c/strongu003e以及u003cstrongu003e复合选择器u003c/strongu003e。u003c/pu003enu003cpu003eu003cstrongu003e基础选择器u003c/strongu003e 是由u003ccodeu003e单个选择器u003c/codeu003e组成的, 基础选择器又包括：u003ccodeu003e标签选择器u003c/codeu003e， u003ccodeu003e类选择器u003c/codeu003e， u003ccodeu003eid选择器u003c/codeu003e和u003ccodeu003e通配符选择器u003c/codeu003eu003c/pu003enu003ch5u003e2.1 标签选择器u003c/h5u003enu003cpreu003eu003ccodeu003e标签名{n属性1: 属性值1; n属性2: 属性值2; n属性3: 属性值3;n ...n}nu003c/codeu003eu003c/preu003enu003cpu003e标签选择器可以把某一类标签全部选择出来，能快速为页面中同类型的标签统一设置样式,不能设计差异化样式，只能选择全部的当前标签。u003ccodeu003e简单理解就是把所有的div或span标签全部选出来， 即我们按照标签名称进行选择u003c/codeu003e。u003c/pu003enu003ch5u003e2.2 类选择器u003c/h5u003enu003cpu003e如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用u003ccodeu003e类选择器u003c/codeu003e, 在类签名用u003ccodeu003e.u003c/codeu003e表示u003c/pu003enu003cpreu003eu003ccodeu003e.red {n color: red;n}nu003c/codeu003eu003c/preu003enu003cpreu003eu003ccodeu003eu0026lt;div class=‘red’u0026gt; 变红色 u0026lt;/divu0026gt;nu003c/codeu003eu003c/preu003enu003cpu003e咱们也可以使用多类名进行选择， 如下所示。u003c/pu003enu003cpreu003eu003ccodeu003eu0026lt;!--比如第一个类名表示颜色， 第二个类名表示字体--u0026gt;nu0026lt;div class=‘class1 class2 class3'u0026gt; 变红色 u0026lt;/divu0026gt;nu003c/codeu003eu003c/preu003enu003ch5u003e2.3 id选择器u003c/h5u003enu003cpu003eHTML 元素以 u003ccodeu003eidu003c/codeu003e 属性来设置 id 选择器，CSS 中 id 选择器以“u003ccodeu003e#u003c/codeu003e" 来定义。u003cbru003enu003ccodeu003e注意:id 属性只能在每个 HTML 文档中出现一次。口诀: 样式#定义,结构id调用, 只能调用一次, 别人切勿使用u003c/codeu003eu003c/pu003enu003cpreu003eu003ccodeu003e#nav {n color:red;n}nu003c/codeu003eu003c/preu003enu003cpreu003eu003ccodeu003eu0026lt;div id="nav"u0026gt;testu0026lt;/divu0026gt;nu003c/codeu003eu003c/preu003enu003ch5u003e2.4 通配符选择器u003c/h5u003enu003cpu003e在 CSS 中，通配符选择器使用“u003ccodeu003e*u003c/codeu003e”定义，它表示选取页面中所有元素(标签)。u003c/pu003enu003cpreu003eu003ccodeu003e*{nmargin: 0;npadding: 0; n}nu003c/codeu003eu003c/preu003enu003ch3u003e三、字体选择u003c/h3u003enu003ch6u003e3.1 字体u003c/h6u003enu003cpu003eCSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)， CSS 使用 u003ccodeu003efont-familyu003c/codeu003e 属性定义文本的字体系列。写多个就是为了防止某种字体不支持，则选择下一个字体。u003c/pu003enu003cpreu003eu003ccodeu003ep { font-family:"微软雅黑";}ndiv {font-family: Arial,"Microsoft Yahei", "微软雅黑";}nu003c/codeu003eu003c/preu003enu003ch6u003e3.2 字体大小u003c/h6u003enu003cpu003eCSS 使用u003ccodeu003efont-sizeu003c/codeu003e属性定义字体大小。(u003ccodeu003e谷歌浏览器默认的文字大小为16pxu003c/codeu003e)u003c/pu003enu003cpreu003eu003ccodeu003ep{nfont-size: 20px;n}nu003c/codeu003eu003c/preu003enu003ch6u003e3.3 字体粗细u003c/h6u003enu003cpu003eCSS 使用 u003ccodeu003efont-weightu003c/codeu003e 属性设置文本字体的粗细。下面不同的粗细代表不同的属性作用u003cbru003enu003ccodeu003enormalu003c/codeu003e 默认值不加粗u003cbru003enu003ccodeu003eboldu003c/codeu003e 定义粗体u003cbru003enu003ccodeu003e100-900u003c/codeu003e u003ccodeu003e400u003c/codeu003e等同于normal， 700等同于bold， 注意不加单位u003c/pu003enu003cpreu003eu003ccodeu003ep{nfont-weight: bold;n}nu003c/codeu003eu003c/preu003enu003ch6u003e3.4 文字样式u003c/h6u003enu003cpu003eCSS 使用 u003ccodeu003efont-styleu003c/codeu003e 属性设置文本的风格。下面不同的属性值代表不同的样式：u003cbru003enu003ccodeu003enormalu003c/codeu003e 默认值，浏览器会显示标准的字体样式u003ccodeu003efont-style：normalu003c/codeu003eu003cbru003enu003ccodeu003eitalicu003c/codeu003e 浏览器回显示斜体的字体样式u003c/pu003enu003cpreu003eu003ccodeu003ep{nfont-style: normal;n}nu003c/codeu003eu003c/preu003enu003ch6u003e3.5 字体复合属性u003c/h6u003enu003cpu003eu003ccodeu003e必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略(取默认值)，但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用u003c/codeu003eu003c/pu003enu003cpreu003eu003ccodeu003ebody {nfont: font-style font-weight font-size/line-height font-family;n}nu003c/codeu003eu003c/preu003enu003ch3u003e四、文字属性u003c/h3u003enu003cpu003eCSS Text(文本)属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等u003c/pu003enu003ch6u003e4.1 文本颜色u003c/h6u003enu003cpu003eu003ccodeu003ecoloru003c/codeu003e 属性用于定义文本的颜色。一下不同的属性值代表不同的含义，u003cbru003en【1】这里u003ccodeu003ecoloru003c/codeu003e可以使用预设定的颜色值，如u003ccodeu003epinku003c/codeu003e, u003ccodeu003eredu003c/codeu003e等u003cbru003en【2】或十六进制，如u003ccodeu003e##FF0000u003c/codeu003eu003cbru003en【3】或RGB代码u003ccodeu003ergb(255, 0, 0)u003c/codeu003e或u003ccodeu003ergb(100%, 0%, 0%)u003c/codeu003eu003c/pu003enu003cpreu003eu003ccodeu003ediv {n color: red;n}nu003c/codeu003eu003c/preu003enu003ch6u003e4.2 文本对齐u003c/h6u003enu003cpu003eu003ccodeu003etext-alignu003c/codeu003e 属性用于设置元素内文本内容的水平对齐方式。u003ccodeu003etext-alignu003c/codeu003e有三个属性分别是u003ccodeu003eleftu003c/codeu003e（左对齐）, u003ccodeu003erightu003c/codeu003e（右对齐）, u003ccodeu003ecenteru003c/codeu003e（居中对齐）u003c/pu003enu003cpreu003eu003ccodeu003ediv {ntext-align: center;n}nu003c/codeu003eu003c/preu003enu003ch6u003e4.3 文本装饰u003c/h6u003enu003cpu003eu003ccodeu003etext-decorationu003c/codeu003e 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。该属性还有其他的属性值如下：u003cbru003enu003ccodeu003enoneu003c/codeu003e 默认，没有装饰性(如果想消去链接下划线可以用)u003cbru003enu003ccodeu003eunderlineu003c/codeu003e 下划线u003cbru003enu003ccodeu003eoverlineu003c/codeu003e 上划线u003cbru003enu003ccodeu003eline-throughu003c/codeu003e 删除线u003c/pu003enu003cpreu003eu003ccodeu003ediv { text-decoration:underline;n}nu003c/codeu003eu003c/preu003enu003ch6u003e4.4 文本缩进u003c/h6u003enu003cpu003eu003ccodeu003etext-indentu003c/codeu003e 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。u003c/pu003enu003cpreu003eu003ccodeu003endiv {ntext-indent: 10px;n}nu003c/codeu003eu003c/preu003enu003cpreu003eu003ccodeu003eu0026lt;!--em 是一个相对单位，就是当前元素(font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元 素的 1 个文字大小。--u0026gt;np{ntext-indent: 2em;n}nu003c/codeu003eu003c/preu003enu003ch6u003e4.5 行间距u003c/h6u003enu003cpu003eu003ccodeu003eline-heightu003c/codeu003e 属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离（u003ccodeu003e如果想让文字垂直居中，则字体大小等于行间距， 这样上间距及下间距都为0u003c/codeu003e）u003c/pu003enu003cpreu003eu003ccodeu003ep{nline-height: 26px;n}nu003c/codeu003eu003c/preu003enu003cdiv class="image-package"u003enu003cdiv class="image-container" style="max-width: 700px; max-height: 286px;"u003enu003cdiv class="image-container-fill" style="padding-bottom: 31.22%;"u003eu003c/divu003enu003cdiv class="image-view" data-width="916" data-height="286"u003eu003cimg data-original-src="//upload-images.jianshu.io/upload_images/5356150-9ffca8f4e68a5397.png" data-original-width="916" data-original-height="286" data-original-format="image/png" data-original-filesize="47099"u003eu003c/divu003enu003c/divu003enu003cdiv class="image-caption"u003eu003c/divu003enu003c/divu003enu003ch3u003e五、CSS引入方式u003c/h3u003enu003cpu003eCSS引入方式主要分为三种样式表分别为：u003c/pu003enu003culu003enu003cliu003enu003ccodeu003e行内样式表u003c/codeu003e（行内式）u003c/liu003enu003cliu003enu003ccodeu003e内部样式表u003c/codeu003e（嵌入式）u003c/liu003enu003cliu003enu003ccodeu003e外部样式表u003c/codeu003e（链接式）u003c/liu003enu003c/ulu003enu003ch5u003e5.1 行内样式表u003c/h5u003enu003cpu003e内部样式表(内嵌样式表)是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 u0026lt;styleu0026gt; 标签中。u0026lt;styleu0026gt; 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的u0026lt;headu0026gt;标签中。使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们u003ccodeu003e练习时u003c/codeu003e常用的方式u003c/pu003enu003cpreu003eu003ccodeu003eu0026lt;styleu0026gt; ndiv {ncolor: red;nfont-size: 12px; n}nu0026lt;/styleu0026gt;nu003c/codeu003eu003c/preu003enu003ch5u003e5.2 行内样式表u003c/h5u003enu003cpu003e行内样式表(内联样式表)是在u003ccodeu003e元素标签内部的 style 属性中设定 CSS 样式u003c/codeu003e。适合于修改简单样式.u003c/pu003enu003cpreu003eu003ccodeu003eu0026lt;div style="color: red; font-size: 12px;"u0026gt;青春不常在，抓紧谈恋爱u0026lt;/divu0026gt;nu003c/codeu003eu003c/preu003enu003ch5u003e5.3 外部样式表u003c/h5u003enu003cpu003e实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入 到 HTML 页面中使用.u003c/pu003enu003colu003enu003cliu003e新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。u003c/liu003enu003cliu003e在 HTML 页面中，使用u0026lt;linku0026gt; 标签引入这个文件。u003cbru003enu003ccodeu003erefu003c/codeu003e 定义当前文档与被链接文档之间的关系，在这里需要制定为u003ccodeu003estylesheetu003c/codeu003e，表示被链接的文档是一个样式表文件。u003cbru003enu003ccodeu003ehrefu003c/codeu003e 定义所链接外部样式表文件的URL，可以是相对路径也可以是绝对路经。u003c/liu003enu003c/olu003enu003ch3u003e六、 CSS的复合选择器u003c/h3u003enu003cpu003e上面第二个部分已经介绍了CSS基础选择器，这里我们说的复合选择器则是建立在基础选择器之上，对基础选择器进行合成的。这里的复合选择器分为以下几个部分，分别是：u003ccodeu003e后代选择器u003c/codeu003e, u003ccodeu003e子选择器u003c/codeu003e, u003ccodeu003e并集选择器u003c/codeu003e以及u003ccodeu003e伪类选择器u003c/codeu003e。u003c/pu003enu003ch6u003e6.1后代选择器u003c/h6u003enu003cpreu003eu003ccodeu003e/*元素1 是父级，元素2 是儿子级，也可以是孙子级*/nul li{样式声明} /* 选择ul里面所有的li标签元素 */nu003c/codeu003eu003c/preu003enu003ch6u003e6.2 子选择器 (重要)u003c/h6u003enu003cpu003eu003ccodeu003e必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器u003c/codeu003eu003c/pu003enu003cpreu003eu003ccodeu003edivu0026gt;p{样式声明} /* 选择div里面所有最近一级p标签元素 */nu003c/codeu003eu003c/preu003enu003ch6u003e6.3 并集选择器u003c/h6u003enu003cpu003eu003ccodeu003e并集选择器u003c/codeu003e是各选择器通过u003ccodeu003e英文逗号(,)连接而成u003c/codeu003e，任何形式的选择器都可以作为并集选择器的一部分。u003ccodeu003e逗号可以理解为和的意思u003c/codeu003eu003c/pu003enu003cpreu003eu003ccodeu003eul,div { 样式声明 } n/* 选择 ul 和 div标签元素 */nnu003c/codeu003eu003c/preu003enu003ch6u003e6.4 伪类选择器u003c/h6u003enu003cpu003eu003ccodeu003e伪类选择器u003c/codeu003e用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。 伪类选择器书写最大的特点是用u003ccodeu003e冒号(:)u003c/codeu003e表示，比如 :hover 、 :first-child 。u003c/pu003enu003cpu003e因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。u003cbru003en具体属性如下所示：u003cbru003enu003ccodeu003ea:linku003c/codeu003e 选择所有未被访问的链接u003cbru003enu003ccodeu003ea:visitedu003c/codeu003e 选择所有已经访问过的链接u003cbru003enu003ccodeu003ea:hoveru003c/codeu003e 选择鼠标位于其上的链接（如果是a的子类b 则是u003ccodeu003ea:hover .b{...}u003c/codeu003e）u003cbru003enu003ccodeu003ea:activeu003c/codeu003e 选择活动链接（鼠标按下未弹起的链接）u003cbru003enu003ccodeu003e为了确保生效，请按照 LVHA 的循顺序声明:link-:visited-:hover-:active。u003c/codeu003eu003c/pu003enu003cpreu003eu003ccodeu003e/* a 是标签选择器 所有的链接 */ na{ncolor: gray; n}n/* :hover 是链接伪类选择器 鼠标经过 */ a:hover {ncolor: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */ n}nu003c/codeu003eu003c/preu003enu003culu003enu003cliu003enu003ccodeu003e:focusu003c/codeu003e伪类选择器用于选取获得焦点的表单元素u003c/liu003enu003c/ulu003enu003cpreu003eu003ccodeu003einput:focus { nbackground-color:pink;n}nu003c/codeu003eu003c/preu003enu003cpu003e效果如下所示，输入框颜色会变成粉红色。u003c/pu003enu003cbru003enu003cdiv class="image-package"u003enu003cdiv class="image-container" style="max-width: 504px; max-height: 30px;"u003enu003cdiv class="image-container-fill" style="padding-bottom: 5.949999999999999%;"u003eu003c/divu003enu003cdiv class="image-view" data-width="504" data-height="30"u003eu003cimg data-original-src="//upload-images.jianshu.io/upload_images/5356150-6d451e7e6d26c46b.png" data-original-width="504" data-original-height="30" data-original-format="image/png" data-original-filesize="4424"u003eu003c/divu003enu003c/divu003enu003cdiv class="image-caption"u003eu003c/divu003enu003c/divu003enu003ch3u003e七、 CSS的显示元素u003c/h3u003enu003ch6u003e7.1 块元素， 行内元素以及行内块元素u003c/h6u003enu003cpu003eHTML 元素一般分为u003ccodeu003e块元素u003c/codeu003e和u003ccodeu003e行内元素u003c/codeu003e以及u003ccodeu003e行内块u003c/codeu003e类型。u003c/pu003enu003cpu003eu003ccodeu003e块元素（自己独占一行， 有宽高， 宽度未容器宽度（父亲宽度），内部可以放行内或块级元素）u003c/codeu003e： 常见的块元素有u0026lt;h1u0026gt;~u0026lt;h6u0026gt;、u0026lt;pu0026gt;、u0026lt;divu0026gt;、u0026lt;ulu0026gt;、u0026lt;olu0026gt;、u0026lt;liu0026gt;等，其中 u0026lt;divu0026gt; 标签是最典型的块元素。（u003ccodeu003e注意元素内不能放块元素例如 h1～h7或者u0026lt;p)等u003c/codeu003e）u003c/pu003enu003cpu003eu003ccodeu003e行元素（一行可以显示多个， 设置宽高无效， 默认宽度为内容宽度，只能容纳文本或行内元素）u003c/codeu003e： 常见的行内元素有 u0026lt;au0026gt;、u0026lt;strongu0026gt;、u0026lt;bu0026gt;、u0026lt;emu0026gt;、u0026lt;iu0026gt;、u0026lt;delu0026gt;、u0026lt;su0026gt;、u0026lt;insu0026gt;、u0026lt;uu0026gt;、u0026lt;spanu0026gt;等，其中 u0026lt;spanu0026gt; 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。（u003ccodeu003e注意链接内不能再放链接， u0026lt;au0026gt;内可以放块元素u003c/codeu003e）u003c/pu003enu003cpu003eu003ccodeu003e行内快元素（一行可以有多个并且可以设置宽高）u003c/codeu003e : 在行内元素中有几个特殊的标签 —— u0026lt;img /u0026gt;、u0026lt;input /u0026gt;、u0026lt;tdu0026gt;，它们同时具有块元素和行内元素的特点。 有些资料称它们为行内块元素u003c/pu003enu003ch6u003e7.2 元素模式转换u003c/h6u003enu003cpu003e主要有以下三种转换方式u003cbru003enu003ccodeu003edisplay:block;u003c/codeu003e转换为块元素u003cbru003enu003ccodeu003ediplay:inline;u003c/codeu003e转换为行内元素u003cbru003enu003ccodeu003edisplay:inline-blocku003c/codeu003e：转换为行内快元素u003c/pu003enu003ch6u003e7.3 单行文字垂直居中u003c/h6u003enu003cpu003e解决方案: 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中u003c/pu003enu003cpreu003eu003ccodeu003eu0026lt;styleu0026gt;n div{n width: 200px;n height: 40pxn u0026lt;!--行高等于盒子的高度--u0026gt;n line-height: 40pxn }nu0026lt;/styleu0026gt;nu003c/codeu003eu003c/preu003enu003ch3u003e八、 CSS的背景u003c/h3u003enu003ch5u003e8.1 背景颜色u003c/h5u003enu003cpu003eu003ccodeu003ebackground-coloru003c/codeu003e 属性定义了元素的背景颜色。一般情况下元素背景颜色默认值是 u003ccodeu003etransparent(透明)u003c/codeu003e，我们也可以手动指定背景颜色为透明色。u003c/pu003enu003cpreu003eu003ccodeu003ebackground-color:颜色值;nbackground-color:transparent;nu003c/codeu003eu003c/preu003enu003ch5u003e8.2 背景图片u003c/h5u003enu003cpu003eu003ccodeu003ebackground-imageu003c/codeu003e 属性描述了元素的背景图像。实际开发常见于 u003ccodeu003elogou003c/codeu003e 或者一些装饰性的小图片或者是超大的u003ccodeu003e背景图片u003c/codeu003e, 优点是非常便于控制位置. (精灵图也是一种运用场景)u003c/pu003enu003cpreu003eu003ccodeu003e## none为无背景图， url为图片地址（不加引号）nbackground-image : none | url (url）nbackground-image: url("test.jpg")nu003c/codeu003eu003c/preu003enu003ch5u003e8.3 背景平铺u003c/h5u003enu003cpu003e如果需要在 HTML 页面上对背景图像进行平铺，可以使用 u003ccodeu003ebackground-repeatu003c/codeu003e 属性。（u003ccodeu003e背景图片会压住背景颜色u003c/codeu003e）u003cbru003enu003ccodeu003erepeatu003c/codeu003e 背景图像在纵向和横向上平铺（默认）u003cbru003enu003ccodeu003eno-repeatu003c/codeu003e 背景图像不平铺u003cbru003enu003ccodeu003erepeat-xu003c/codeu003e 背景图像在横向上平铺u003cbru003enu003ccodeu003erepeat-yu003c/codeu003e 背景图像在纵向平铺u003cbru003en``u003c/pu003enu003ch5u003e8.4 背景图片位置u003c/h5u003enu003cpu003e利用 u003ccodeu003ebackground-positionu003c/codeu003e属性可以改变图片在背景中的位置。u003cbru003en关于其属性值如下解释：u003cbru003enu003ccodeu003elengthu003c/codeu003e: 百分数｜由浮点数字和单位标识符组成的长度值， u003ccodeu003e100%u003c/codeu003e则和父亲大小一样款u003cbru003enu003ccodeu003epositionu003c/codeu003e top|center|bottom|left|center|right 方向词u003c/pu003enu003cpreu003eu003ccodeu003ebackground-position: x ynbackground-postion: 12 32nbackground-postion: center 0nbackground-position:right centernu003c/codeu003eu003c/preu003enu003cpu003e参数代表的意思是:x 坐标和 y 坐标。 可以使用u003ccodeu003e方位名词u003c/codeu003e或者u003ccodeu003e精确单位u003c/codeu003eu003cbru003enu003ccodeu003e如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐u003c/codeu003eu003c/pu003enu003ch5u003e8.5 背景图片图像固定u003c/h5u003enu003cpu003eu003ccodeu003ebackground-attachmentu003c/codeu003e属性设置背景图像是否固定或者随着页面的其余部分滚动。u003c/pu003enu003cpreu003eu003ccodeu003ebackground-attachment : scroll | fixednu003c/codeu003eu003c/preu003enu003cpu003eu003ccodeu003escrollu003c/codeu003e 背景图下时随着对象内容滚动的u003cbru003enu003ccodeu003efixedu003c/codeu003e 背景图下固定u003c/pu003enu003ch5u003e8.6 背景图像复合写法u003c/h5u003enu003cpu003eu003ccodeu003ebackground: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;u003c/codeu003eu003c/pu003enu003cpreu003eu003ccodeu003ebackground: transparent url(image.jpg) repeat-y fixed top ;nu003c/codeu003eu003c/preu003enu003ch5u003e8.7 背景颜色半透明u003c/h5u003enu003cpreu003eu003ccodeu003ebackground: rgba(0, 0, 0, 0.3)nu003c/codeu003eu003c/preu003enu003ch3u003e十 总结u003c/h3u003enu003ch6u003e10.1 基础选择器u003c/h6u003enu003cdiv class="image-package"u003enu003cdiv class="image-container" style="max-width: 700px; max-height: 346px;"u003enu003cdiv class="image-container-fill" style="padding-bottom: 36.97%;"u003eu003c/divu003enu003cdiv class="image-view" data-width="936" data-height="346"u003eu003cimg data-original-src="//upload-images.jianshu.io/upload_images/5356150-6623e07fb9371128.png" data-original-width="936" data-original-height="346" data-original-format="image/png" data-original-filesize="273845"u003eu003c/divu003enu003c/divu003enu003cdiv class="image-caption"u003eu003c/divu003enu003c/divu003enu003ch6u003e10.2 字体属性u003c/h6u003enu003cdiv class="image-package"u003enu003cdiv class="image-container" style="max-width: 700px; max-height: 272px;"u003enu003cdiv class="image-container-fill" style="padding-bottom: 28.999999999999996%;"u003eu003c/divu003enu003cdiv class="image-view" data-width="938" data-height="272"u003eu003cimg data-original-src="//upload-images.jianshu.io/upload_images/5356150-23a9027948b76354.png" data-original-width="938" data-original-height="272" data-original-format="image/png" data-original-filesize="124272"u003eu003c/divu003enu003c/divu003enu003cdiv class="image-caption"u003eu003c/divu003enu003c/divu003enu003ch6u003e10.3 文本属性u003c/h6u003enu003cdiv class="image-package"u003enu003cdiv class="image-container" style="max-width: 700px; max-height: 290px;"u003enu003cdiv class="image-container-fill" style="padding-bottom: 30.270000000000003%;"u003eu003c/divu003enu003cdiv class="image-view" data-width="958" data-height="290"u003eu003cimg data-original-src="//upload-images.jianshu.io/upload_images/5356150-cf0593819c17a232.png" data-original-width="958" data-original-height="290" data-original-format="image/png" data-original-filesize="111123"u003eu003c/divu003enu003c/divu003enu003cdiv class="image-caption"u003eu003c/divu003enu003c/divu003enu003ch6u003e10.4 CSS引入方式u003c/h6u003enu003cdiv class="image-package"u003enu003cdiv class="image-container" style="max-width: 700px; max-height: 180px;"u003enu003cdiv class="image-container-fill" style="padding-bottom: 18.52%;"u003eu003c/divu003enu003cdiv class="image-view" data-width="972" data-height="180"u003eu003cimg data-original-src="//upload-images.jianshu.io/upload_images/5356150-1b0a3f2d05812b4e.png" data-original-width="972" data-original-height="180" data-original-format="image/png" data-original-filesize="92040"u003eu003c/divu003enu003c/divu003enu003cdiv class="image-caption"u003eu003c/divu003enu003c/divu003enu003ch6u003e10.5 CSS复合选择器u003c/h6u003enu003cdiv class="image-package"u003enu003cdiv class="image-container" style="max-width: 700px; max-height: 402px;"u003enu003cdiv class="image-container-fill" style="padding-bottom: 45.07%;"u003eu003c/divu003enu003cdiv class="image-view" data-width="892" data-height="402"u003eu003cimg data-original-src="//upload-images.jianshu.io/upload_images/5356150-a51ea4847ab4b6aa.png" data-original-width="892" data-original-height="402" data-original-format="image/png" data-original-filesize="215229"u003eu003c/divu003enu003c/divu003enu003cdiv class="image-caption"u003eu003c/divu003enu003c/divu003enu003ch6u003e10.6 元素显示模式u003c/h6u003enu003cdiv class="image-package"u003enu003cdiv class="image-container" style="max-width: 700px; max-height: 378px;"u003enu003cdiv class="image-container-fill" style="padding-bottom: 28.939999999999998%;"u003eu003c/divu003enu003cdiv class="image-view" data-width="1306" data-height="378"u003eu003cimg data-original-src="//upload-images.jianshu.io/upload_images/5356150-2855e220fe3127d7.png" data-original-width="1306" data-original-height="378" data-original-format="image/png" data-original-filesize="211493"u003eu003c/divu003enu003c/divu003enu003cdiv class="image-caption"u003eu003c/divu003enu003c/divu003enu003ch6u003e10.7 CSS背景u003c/h6u003enu003cdiv class="image-package"u003enu003cdiv class="image-container" style="max-width: 700px; max-height: 402px;"u003enu003cdiv class="image-container-fill" style="padding-bottom: 38.0%;"u003eu003c/divu003enu003cdiv class="image-view" data-width="1058" data-height="402"u003eu003cimg data-original-src="//upload-images.jianshu.io/upload_images/5356150-1cdb605898901e4b.png" data-original-width="1058" data-original-height="402" data-original-format="image/png" data-original-filesize="183846"u003eu003c/divu003enu003c/divu003enu003cdiv class="image-caption"u003eu003c/divu003enu003c/divu003en","voted_down":false,"rewardable":true,"show_paid_comment_tips":false,"share_image_url":"https://upload-images.jianshu.io/upload_images/5356150-1a1935d5c9f83556.png","slug":"144016013502","user":{"liked_by_user":false,"following_count":107,"gender":0,"avatar_widget":null,"slug":"7c635bf0a9a0","intro":"想做咸鱼","likes_count":228,"nickname":"blackmanba_084b","badges":[],"total_fp_amount":"14259742843750047726","wordage":76977,"avatar":"https://upload.jianshu.io/users/upload_avatars/5356150/d867d04e-3d0f-4ab1-9245-663c6039e753.jpg","id":5356150,"liked_user":false},"likes_count":3,"paid_type":"free","show_ads":true,"paid_content_accessible":false,"hide_search_input":true,"total_fp_amount":"119000000000000000","trial_open":false,"reprintable":true,"bookmarked":false,"wordage":3253,"featured_comments_count":0,"downvotes_count":0,"wangxin_trial_open":null,"guideShow":{"audit_user_nickname_spliter":0,"pc_note_bottom_btn":1,"pc_like_author_guidance":1,"ban_some_labels":1,"h5_real_name_auth_link":1,"audit_user_background_image_spliter":0,"audit_note_spliter":0,"new_user_no_ads":1,"launch_tab":0,"include_post":0,"pc_login_guidance":1,"audit_comment_spliter":0,"pc_note_bottom_qrcode":1,"audit_user_avatar_spliter":0,"audit_collection_spliter":0,"pc_top_lottery_guidance":2,"subscription_guide_entry":1,"creation_muti_function_on":1,"explore_score_searcher":0,"audit_user_spliter":0,"h5_ab_test":1,"reason_text":1,"pc_note_popup":2},"commentable":true,"total_rewards_count":0,"id":87924399,"notebook":{"name":""},"activity_collection_slug":null,"description":"花了1周的时间也学完了CSS, 在这里我也讲黑马博客中pink老师的讲解内容记录一下。 CSS 是层叠样式表 (Cascading Style Sheets) 的简称.有时我...","first_shared_at":1621242704,"views_count":116,"notebook_id":50222431},"baseList":{"likeList":[],"rewardList":[]},"status":"success","statusCode":0},"user":{"isLogin":false,"userInfo":{}},"comments":{"list":[],"featuredList":[]}},"initialProps":{"pageProps":{"query":{"slug":"144016013502"}},"localeData":{"common":{"jianshu":"简书","diamond":"简书钻","totalAssets":"总资产{num}","diamondValue":" (约{num}元)","login":"登录","logout":"注销","register":"注册","on":"开","off":"关","follow":"关注","followBook":"关注连载","following":"已关注","cancelFollow":"取消关注","publish":"发布","wordage":"字数","audio":"音频","read":"阅读","reward":"赞赏","zan":"赞","comment":"评论","expand":"展开","prevPage":"上一页","nextPage":"下一页","floor":"楼","confirm":"确定","delete":"删除","report":"举报","fontSong":"宋体","fontBlack":"黑体","chs":"简体","cht":"繁体","jianChat":"简信","postRequest":"投稿请求","likeAndZan":"喜欢和赞","rewardAndPay":"赞赏和付费","home":"我的主页","markedNotes":"收藏的文章","likedNotes":"喜欢的文章","paidThings":"已购内容","wallet":"我的钱包","setting":"设置","feedback":"帮助与反馈","loading":"加载中...","needLogin":"请登录后进行操作","trialing":"文章正在审核中...","reprintTip":"禁止转载，如需转载请通过简信或评论联系作者。"},"error":{"rewardSelf":"无法打赏自己的文章哟~"},"message":{"paidNoteTip":"付费购买后才可以参与评论哦","CommentDisableTip":"作者关闭了评论功能","contentCanNotEmptyTip":"回复内容不能为空","addComment":"评论发布成功","deleteComment":"评论删除成功","likeComment":"评论点赞成功","setReadMode":"阅读模式设置成功","setFontType":"字体设置成功","setLocale":"显示语言设置成功","follow":"关注成功","cancelFollow":"取消关注成功","copySuccess":"复制代码成功"},"header":{"homePage":"首页","download":"下载APP","discover":"发现","message":"消息","reward":"赞赏支持","editNote":"编辑文章","writeNote":"写文章"},"note":{},"noteMeta":{"lastModified":"最后编辑于 ","wordage":"字数 {num}","viewsCount":"阅读 {num}"},"divider":{"selfText":"以下内容为付费内容，定价 ¥{price}","paidText":"已付费，可查看以下内容","notPaidText":"还有 {percent} 的精彩内容","modify":"点击修改"},"paidPanel":{"buyNote":"支付 ¥{price} 继续阅读","buyBook":"立即拿下 ¥{price}","freeTitle":"该作品为付费连载","freeText":"购买即可永久获取连载内的所有内容，包括将来更新的内容","paidTitle":"还没看够？拿下整部连载！","paidText":"永久获得连载内的所有内容, 包括将来更新的内容"},"book":{"last":"已是最后","lookCatalog":"查看连载目录","header":"文章来自以下连载"},"action":{"like":"{num}人点赞","collection":"收入专题","report":"举报文章"},"comment":{"allComments":"全部评论","featuredComments":"精彩评论","closed":"评论已关闭","close":"关闭评论","open":"打开评论","desc":"按时间倒序","asc":"按时间正序","disableText1":"用户已关闭评论，","disableText2":"与Ta简信交流","placeholder":"写下你的评论...","publish":"发表","create":" 添加新评论","reply":" 回复","restComments":"还有{num}条评论，","expandImage":"展开剩余{num}张图","deleteText":"确定要删除评论么？"},"collection":{"title":"被以下专题收入，发现更多相似内容","putToMyCollection":"收入我的专题"},"seoList":{"title":"推荐阅读","more":"更多精彩内容"},"sideList":{"title":"推荐阅读"},"wxShareModal":{"desc":"打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮"},"bookChapterModal":{"try":"试读","toggle":"切换顺序"},"collectionModal":{"title":"收入到我管理的专题","search":"搜索我管理的专题","newCollection":"新建专题","create":"创建","nothingFound":"未找到相关专题","loadMore":"展开查看更多"},"contributeModal":{"search":"搜索专题投稿","newCollection":"新建专题","addNewOne":"去新建一个","nothingFound":"未找到相关专题","loadMore":"展开查看更多","managed":"我管理的专题","recommend":"推荐专题"},"QRCodeShow":{"payTitle":"微信扫码支付","payText":"支付金额"},"rewardModal":{"title":"给作者送糖","custom":"自定义","placeholder":"给Ta留言...","choose":"选择支付方式","balance":"简书余额","tooltip":"网站该功能暂时下线，如需使用，请到简书App操作","confirm":"确认支付","success":"赞赏成功"},"payModal":{"payBook":"购买连载","payNote":"购买文章","promotion":"优惠券","promotionFetching":"优惠券获取中...","noPromotion":"无可用优惠券","promotionNum":"{num}张可用","noUsePromotion":"不使用优惠券","validPromotion":"可用优惠券","invalidPromotion":"不可用优惠券","total":"支付总额","tip1":"· 你将购买的商品为虚拟内容服务，购买后不支持退订、转让、退换，请斟酌确认。","tip2":"· 购买后可在“已购内容”中查看和使用。","success":"购买成功"},"reportModal":{"ad":"广告及垃圾信息","plagiarism":"抄袭或未授权转载","placeholder":"写下举报的详情情况（选填）","success":"举报成功"},"guidModal":{"modalAText":"相似文章推荐","subText":"下载简书APP，浏览更多相似文章","btnAText":"先不下载，下次再说","followOkText":"关注作者成功！","followTextTip":"下载简书APP，作者更多精彩内容更新及时提醒！","followBtn":"下次再说","downloadTipText":"更多精彩内容，就在简书APP","footerDownLoadText":"下载简书APP","modabTitle":"免费送你2次抽奖机会","modalbTip":"抽取10000收益加成卡，下载简书APP概率翻倍","modalbFooterTip":"下载简书APP，天天参与抽大奖","modalReward":"抽奖","scanQrtip":"扫码下载简书APP","downloadAppText":"下载简书APP，随时随地发现和创作内容","redText":"阅读","likesText":"赞","downLoadLeft":"更多好文","leftscanText":"把文字装进口袋"}},"currentLocale":"zh-CN","asPath":"/p/144016013502"}},"page":"/p/[slug]","query":{"slug":"144016013502"},"buildId":"lcwHSLQvYZGBn55hiTPfZ","assetPrefix":"https://cdn2.jianshu.io/shakespeare"}