文章目录

1. CSS复合选择器1.1 后代选择器（重点）1.2 子元素选择器1.3 交集选择器1.4 并集选择器（重点）测试题1.5 链接伪类选择器（重点）1.6 复合选择器总结2. 标签显示模式（display）重点2.1 什么是标签显示模式2.2 块级元素(block-level)2.3 行内元素(inline-level)2.4 行内块元素（inline-block）2.5 三种模式总结区别2.6 标签显示模式转换 display3. 行高那些事（line-height）3.1 行高测量3.2 单行文本垂直居中4. CSS 背景(background)4.1 背景颜色(color)4.2 背景图片(image)4.3 背景平铺（repeat）4.4 背景位置(position) 重点4.5 背景附着4.6 背景简写4.7 背景透明(CSS3)4.8 背景总结5. CSS 三大特性5.1 CSS层叠性5.2 CSS继承性5.3 CSS优先级（重点）1). 权重计算公式2). 权重叠加3). 继承的权重是06. CSS注释7.盒子模型（CSS重点）1.看透网页布局的本质2. 盒子模型（Box Model）3. 盒子边框（border）3.1 边框综合设置3.2 盒子边框写法总结表3.3 表格的细线边框4. 内边距（padding）4.1 内边距：4.2 设置4.3 课堂案例： 新浪导航4.4 内盒尺寸计算（元素实际大小）4.5 内边距产生的问题4.6 padding不影响盒子大小情况5. 外边距（margin）5.1 外边距5.2 设置：5.3 块级盒子水平居中5.4 文字居中和盒子居中区别5.5 插入图片和背景图片区别5.6 清除元素的默认内外边距(重要)5.7 外边距合并(1). 相邻块元素垂直外边距的合并(2). 嵌套块元素垂直外边距的合并（塌陷）6. 盒子模型布局稳定性7. ps基本操作以及常用快捷键：8. 综合案例去掉列表默认的样式9. 今日总结拓展@1.圆角边框(CSS3)2. 盒子阴影(CSS3)CSS书写规范空格规范选择器规范属性规范

1. CSS复合选择器

目标

理解

理解css复合选择器分别的应用场景

应用

使用后代选择器给元素添加样式使用并集选择器给元素添加样式使用伪类选择器

为什么要学习css复合选择器

CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。

目的是为了可以选择更准确更精细的目标元素标签。复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

1.1 后代选择器（重点）

概念：

后代选择器又称为包含选择器

作用：

用来选择元素或元素组的子孙后代

其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。

父级 子级{属性:属性值;属性:属性值;}

语法：

.class h3{color:red;font-size:16px;}

当标签发生嵌套时，内层标签就成为外层标签的后代。子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。

1.2 子元素选择器

作用：

子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接

语法：

.class>h3{color:red;font-size:14px;}

pink老师一句话说出他们

这里的子 指的是 亲儿子 不包含孙子 重孙子之类。

白话：

比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。

1.3 交集选择器

条件

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

记忆技巧：

交集选择器 是 并且的意思。 即…又…的意思

比如： p.one 选择的是： 类名为 .one 的 段落标签。

用的相对来说比较少，不太建议使用。

1.4 并集选择器（重点）

应用：

如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。

并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

语法：

任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

记忆技巧：

并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思。

比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。

测试题

<!-- 主导航栏 --><div class="nav"> <ul><li><a href="#">公司首页</a></li><li><a href="#">公司简介</a></li><li><a href="#">公司产品</a></li><li><a href="#">联系我们</a></li></ul></div><!-- 侧导航栏 --><div class="sitenav"> <div class="site-l">左侧侧导航栏</div><div class="site-r"><a href="#">登录</a></div></div>

在不修改以上结构代码的前提下，完成以下任务：

链接 登录 的颜色为红色主导航栏里面的所有的链接改为橙色主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。

1.5 链接伪类选择器（重点）

伪类选择器：

为了和我们刚才学的类选择器相区别

类选择器是一个点 比如 .demo {}

而我们的伪类 用 2个点 就是 冒号 比如 :link{} 伪娘

作用：

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。

因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。

a:link /* 未访问的链接 */

a:visited /* 已访问的链接 */

a:hover /* 鼠标移动到链接上 */

a:active /* 选定的链接 */

注意

写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误。记忆法lovehate 爱上了讨厌**lv **包包 非常hao 因为叫链接伪类，所以都是 利用交集选择器 a:link a:hover因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。实际工作开发中，我们很少写全四个状态，一般我们写法如下：

a {/* a是标签选择器 所有的链接 */font-weight: 700;font-size: 16px;color: gray;}a:hover {/* :hover 是链接伪类选择器 鼠标经过 */color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */}

1.6 复合选择器总结

2. 标签显示模式（display）重点

目标：

理解 标签的三种显示模式三种显示模式的特点以及区别理解三种显示模式的相互转化 应用 实现三种显示模式的相互转化

2.1 什么是标签显示模式

什么是标签的显示模式？

标签以什么方式进行显示，比如div 自己占一行， 比如span 一行可以放很多个

作用：

我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。

标签的类型(分类)

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

2.2 块级元素(block-level)

例：

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点

（1）比较霸道，自己独占一行

（2）高度，宽度、外边距以及内边距都可以控制。

（3）宽度默认是容器（父级宽度）的100%

（4）是一个容器及盒子，里面可以放行内或者块级元素。

注意： 只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

2.3 行内元素(inline-level)

例：

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

行内元素的特点：

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。

注意：

链接里面不能再放链接。特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

2.4 行内块元素（inline-block）

例：

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个

（2）默认宽度就是它本身内容的宽度。

（3）高度，行高、外边距以及内边距都可以控制。

​

2.5 三种模式总结区别

2.6 标签显示模式转换 display

块转行内：display:inline;行内转块：display:block;块、行内元素转换为行内块： display: inline-block;

此阶段，我们只需关心这三个，其他的是我们后面的工作。

3. 行高那些事（line-height）

目标

理解 能说出 行高 和 高度 三种关系能简单理解为什么行高等于高度单行文字会垂直居中 应用 使用行高实现单行文字垂直居中能会测量行高

3.1 行高测量

3.2 单行文本垂直居中

行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐。

文字的行高等于盒子的高度。

这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。

行高 = 上距离 + 内容高度 + 下距离

上距离和下距离总是相等的，因此文字看上去是垂直居中的。

行高和高度的三种关系

如果 行高 等 高度 文字会 垂直居中如果行高 大于 高度 文字会 偏下如果行高小于高度 文字会 偏上

4. CSS 背景(background)

目标

理解 背景的作用css背景图片和插入图片的区别 应用 通过css背景属性，给页面元素添加背景样式能设置不同的背景图片位置

4.1 背景颜色(color)

语法：

background-color:颜色值; 默认的值是 transparent 透明的

4.2 背景图片(image)

语法：

background-image : none | url (url)

background-image : url(images/demo.png);

小技巧： 我们提倡 背景图片后面的地址，url不要加引号。

4.3 背景平铺（repeat）

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

4.4 背景位置(position) 重点

语法：

background-position : length || lengthbackground-position : position || position

注意： 必须先指定background-image属性position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致如果只指定了一个方位名词，另一个值默认居中对齐。如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

实际工作用的最多的，就是背景图片居中对齐了。

练习1：

背景大图

练习2：

小图片在盒子左侧垂直居中

4.5 背景附着

背景附着就是解释背景是滚动的还是固定的

语法：

background-attachment : scroll | fixed

4.6 背景简写

background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;语法：

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

案例：

导航栏案例

4.7 背景透明(CSS3)

语法：

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

最后一个参数是alpha 透明度 取值范围 0~1之间我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响因为是CSS3 ，所以 低于 ie9 的版本是不支持的。

4.8 背景总结

5. CSS 三大特性

目标：

理解 能说出css样式冲突采取的原则能说出那些常见的样式会有继承 应用 能写出CSS优先级的算法能会计算常见选择器的叠加值

5.1 CSS层叠性

概念：

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

原则：

样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。样式不冲突，不会层叠

CSS层叠性最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。

5.2 CSS继承性

概念：

子标签会继承父标签的某些样式，如文本颜色和字号。

想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是： 子承父业。

注意： 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

CSS继承性口诀： 龙生龙，凤生凤，老鼠生的孩子会打洞。

5.3 CSS优先级（重点）

概念：

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

选择器相同，则执行层叠性选择器不同，就会出现优先级的问题。

1). 权重计算公式

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）div {

color: pink!important;

}

2). 权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算

div ul li ------> 0,0,0,3.nav ul li ------> 0,0,1,2a:hover -----—> 0,0,1,1.nav a ------> 0,0,1,1

注意：

数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

3). 继承的权重是0

这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。

1） 如果选中了，那么以上面的公式来计权重。谁大听谁的。

2） 如果没有选中，那么权重是0，因为继承的权重为0.

6. CSS注释

CSS注释规则：

/* 需要注释的内容 */ 进行注释的，即在需要注释的内容前使用 "/*" 标记开始注释，在内容的结尾使用 "*/"结束。

例如：

p {/* 所有的字体是14像素大小*/font-size: 14px; }

7.盒子模型（CSS重点）

css学习三大重点： css 盒子模型 、 浮动 、 定位

主题思路：

目标：

理解： 能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法 应用： 能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例

1.看透网页布局的本质

网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？

看透网页布局的本质： 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。最后把网页元素比如文字图片等等，放入盒子里面。以上两步 就是网页布局的本质

我们明白了，盒子是网页布局的关键点，所以我们更应该弄明白 这个盒子有什么特点。

2. 盒子模型（Box Model）

所谓盒子模型：

就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

pink老师总结：

盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。盒子里面的文字和图片等元素是 内容区域盒子的厚度 我们成为 盒子的边框盒子内容与边框的距离是内边距（类似单元格的 cellpadding)盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

3. 盒子边框（border）

语法：

border : border-width || border-style || border-color

边框的样式： none：没有边框即忽略所有边框的宽度（默认值）solid：边框为单实线(最为常用的)dashed：边框为虚线dotted：边框为点线

3.1 边框综合设置

border : border-width || border-style || border-color

例如：

border: 1px solid red; 没有顺序

3.2 盒子边框写法总结表

很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。

3.3 表格的细线边框

通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，

但是两个单元格之间的边框会出现重叠，从而使边框变粗

通过css属性：

table{ border-collapse:collapse; }

collapse 单词是合并的意思border-collapse:collapse; 表示相邻边框合并在一起。

<style>table {width: 500px;height: 300px;border: 1px solid red;}td {border: 1px solid red;text-align: center;}table, td {border-collapse: collapse; /*合并相邻边框*/}</style>

4. 内边距（padding）

4.1 内边距：

​ padding属性用于设置内边距。是指 边框与内容之间的距离。

4.2 设置

当我们给盒子指定padding值之后， 发生了2件事情：

内容和边框 有了距离，添加了内边距。盒子会变大了。

注意： 后面跟几个数值表示的意思是不一样的。

我们分开写有点麻烦，我们可以不可以简写呢？

课堂一练：

请写出如下内边距：

要求盒子有一个左边内边距是 5像素要求简写的形式写出 一个盒子上下是 25像素 左右是15像素。要求简写的形式写出 一个盒子 上内边距是 12像素 下内边距是 0 左内边距是 25像素 右内边距是 10像素

4.3 课堂案例： 新浪导航

新浪导航栏的核心就是因为里面的字数不一样多，所以我们不方便给宽度，还是给padding ，撑开盒子的。

4.4 内盒尺寸计算（元素实际大小）

宽度

Element Height = content height + padding + border （Height为内容高度）

高度

Element Width = content width + padding + border （Width为内容宽度）

盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

4.5 内边距产生的问题

问题

会撑大原来的盒子

解决：

通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小

课堂一练

一个盒子宽度为100， padding为 10， 边框为5像素，问这个盒子实际的宽度的是（）

(A) 130

(B) 135

© 125

(D) 115

100 + 20 + 10

关于根据下列代码计算 盒子宽高下列说法正确的是（）

div {width: 200px;height: 200px;border: 1px solid #000000;border-top: 5px solid blue;padding: 50px;padding-left: 100px;}

(A) 宽度为200px 高度为200px(B) 宽度为352px 高度为306px© 宽度为302px 高度为307px(D) 宽度为302px 高度为252px

w 200 + 150 + 2 = 352

h 200 + 100 + 6 = 306

4.6 padding不影响盒子大小情况

如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。

5. 外边距（margin）

5.1 外边距

​ margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离

5.2 设置：

margin值的简写 （复合写法）代表意思 跟 padding 完全相同。

5.3 块级盒子水平居中

可以让一个块级盒子实现水平居中必须： 盒子必须指定了宽度（width）然后就给左右的外边距都设置为auto，

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{width:960px; margin:0 auto;}

常见的写法，以下下三种都可以。

margin-left: auto; margin-right: auto;margin: auto;margin: 0 auto;

5.4 文字居中和盒子居中区别

盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐块级盒子水平居中 左右margin 改为 auto

text-align: center; /* 文字 行内元素 行内块元素水平居中 */margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */

5.5 插入图片和背景图片区别

插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

img {width: 200px;/* 插入图片更改大小 width 和 height */height: 210px;margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */margin-left: 50px; /* 插入当图片也是一个盒子 */}div {width: 400px;height: 400px;border: 1px solid purple;background: #fff url(images/sun.jpg) no-repeat;background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */}

5.6 清除元素的默认内外边距(重要)

为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除

代码：

* {padding:0; /* 清除内边距 */margin:0;/* 清除外边距 */}

注意：

行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。

5.7 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

(1). 相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：尽量给只给一个盒子添加margin值。

(2). 嵌套块元素垂直外边距的合并（塌陷）

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框父元素的上外边距会与子元素的上外边距发生合并合并后的外边距为两者中的较大者

解决方案：

可以为父元素定义上边框。可以为父元素定义上内边距可以为父元素添加overflow:hidden。

还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。

6. 盒子模型布局稳定性

学习完盒子模型，内边距和外边距，什么情况下用内边距，什么情况下用外边距？

大部分情况下是可以混用的。 就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。

我们根据稳定性来分，建议如下：

按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。

width > padding > margin

原因： margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。

7. ps基本操作以及常用快捷键：

因为网页美工大部分效果图都是利用ps 来做的，所以，以后我们大部分切图工作都是在ps里面完成。

文件–打开 – 可以打开 我们要测量的图片ctrl+r 可以打开标尺 或者 视图 – 标尺右击标尺， 把里面的单位改为 像素ctrl+ 加号 键 可以 放大 视图 ctrl+ 减号 缩小视图按住空格键， 鼠标可以 变成小手 ，拖动 ps 视图用选区 拖动 可以 测量 大小ctrl+ d 可以取消选区 或者旁边空白处点击一下也可以取消选区

8. 综合案例

去掉列表默认的样式

无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。 代码如下

li {list-style: none; }

9. 今日总结

拓展@

以下我们讲的CSS3部分新属性， 但是我们遵循的原则是，以下内容，不会影响我们页面布局， 只是样式更好看了而已。

1.圆角边框(CSS3)

语法：

border-radius:length;

其中每一个值可以为 数值或百分比的形式。

技巧： 让一个正方形 变成圆圈

border-radius: 50%;

2. 盒子阴影(CSS3)

语法:

box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；

(media/1498467567011.png)]

前两个属性是必须写的。其余的可以省略。外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset

div {width: 200px;height: 200px;border: 10px solid red;/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); *//* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； */box-shadow: 0 15px 30px rgba(0, 0, 0, .4);}

CSS书写规范

开始就形成良好的书写规范，是你专业的开始。

空格规范

【强制】 选择器 与 { 之间必须包含空格。

示例：

.selector {}

【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。

示例：

font-size: 12px;

选择器规范

【强制】 并集选择器，每个选择器声明必须独占一行。

示例：

/* good */.post,.page,.comment {line-height: 1.5;}/* bad */.post, .page, .comment {line-height: 1.5;}

【建议】 一般情况情况下，选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

示例：

/* good */#username input {}.comment .avatar {}/* bad */.page .header .login input {}.comment div * {}

属性规范

【强制】 属性定义必须另起一行。

示例：

/* good */.selector {margin: 0;padding: 0;}/* bad */.selector {margin: 0; padding: 0; }

【强制】 属性定义后必须以分号结尾。

示例：

/* good */.selector {margin: 0;}/* bad */.selector {margin: 0}

💗💗💗

print("如果文章对你有用，请点个赞呗O(∩_∩)O~")

System.out.println("如果文章对你有用，请点个赞呗O(∩_∩)O~");

cout<<"如果文章对你有用，请点个赞呗O(∩_∩)O~"<<endl;

💗💗💗