CSS简介

css规则由选择器和n条声明组成。选择器是用于指定css样式的html标签，花括号内是对该对象设置的具体样式。声明由属性和属性值组成，属性和属性值以键值对的形式出现，之间用英文“:”分开，键值对之间用英文“;”区分。
网页布局过程：准备好相关网页元素（盒子）→利用CSS设置好盒子样式、位置→往盒子里装内容

CSS引入方式

按照CSS样式书写的位置，CSS样式表可分为行内样式表、内部样式表、外部样式表。

样式表	解释	特点
内部样式表	写到html页面内部，单独放在style标签内，style标签一般放在head标签内	控制一个页面
行内样式表	在元素标签内部的style属性中设定CSS样式	适用于简单修改样式
外部样式表	将样式单独写到CSS文件中（不需要style标签了），之后把CSS文件引入到html页面中使用	控制多个页面

> 行内样式表  <div style="color: red;font-size: 12px;" >公猪是猪</div>

外部样式表

CSS三大特性

CSS三大特性：层叠性、继承性、优先级。

层叠性

相同选择器设置相同的样式，其中一个样式会被覆盖掉，层叠性解决这一问题。
原则：样式冲突遵循就近原则，执行离结构近的样式（后来者居上）。

继承性

定义：子标签会继承父标签的某些样式（text-、font-、line-以及color属性）

案例（红框展现层叠性，蓝线体现标签的继承性，子标签继承父标签的行高模式，行高随文字大小变化而变化）：

优先级

• note：
  • 选择器相同，执行层叠性；选择器不同，根据选择器权重执行，复合选择器会权重叠加
  • 权重由四位数字组成，不会进位
  • 等级判断从左到右，某位相同看后一位数值
  • 如果子元素自己显式设置了 color，就会覆盖继承的值，即使父元素用了 !important

选择器	选择器权重
继承 或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=“”	1,0,0,0
!important 重要的	∞ 无穷大

CSS属性

CSS字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）。

• 字体系列tips：
  • 各种字体之间使用英文逗号隔开
  • 一般情况下，有空格隔开的多个单词组成的字体加引号

• 字体复合属性
  • 属性必须按照以下顺序，且各属性之间以空格隔开
  • 不需要的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性不起作用
    body {
    font: font-style font-weight font-dize/line-height font-family;
    }

CSS文本属性

CSS Text(文本)属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距、文字阴影等。

文字阴影： text-shadow: 5px 5px 6px blue;

值	描述
h-shadow	必需，水平阴影的位置，允许负值。
v-shadow	必需，垂直阴影的位置，允许负值。
blur	可选，模糊的距离。
color	可选，阴影的颜色，参阅 CSS 颜色值。

CSS背景属性

背景属性可以设置背景颜色、背景图片、背景平铺、背景图像固定、背景图片位置等。

背景颜色：background-color，默认透明transparent
background: rgba(0,0,0,.3);最后一个参数是alpha透明度，范围区间0~1，个位零可省略；

背景图片：background-image，默认五背景图none，url指定背景图像

背景平铺：background-repeat，repeat(默认)、no-repeat（不平铺）、repeat-x（横向平铺）、repeat-y（纵向平铺）

背景图像固定：
background-attachment:scroll |fixed，背景图像随对象内容滚动scroll 背景图像固定fixed

背景图片位置：

参数为方位名词：background-position: top center;
参数为精确单位：background-position: 20px 50px;
方位名词note：
1.方位名词： top、center、bottom、left、right
2.如果两个参数都为方位名词，前后顺序可调换；
3.只指定第一个方位名词，另一个值默认居中对齐；
精确单位note：
1.第一个参数为x坐标，第二个参数为y坐标；
2.只指定第一个数值，该数值为x坐标，另一个值默认居中对齐；
参数混用：
如果精确单位和方位名词混用，则第一个参数为x坐标，第二个参数为y坐标；

背景复合写法：
background: transparent url(image.jpg) repeat-y fixed top;

归纳总结：

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x 和 y坐标
background-attachment	背景附着	scroll (背景滚动) /fixed (背景固定)
背景简写	书写更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
背景色半透明	背景颜色半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值

盒子模型

盒子模型的组成：边框border、内容content、内边距padding、外边距margin；
补充：盒子的圆角边框、盒子阴影

• 边框

边框组成：宽度border-width、样式border-style、颜色border-color
简写：border: 5px solid red;（没有顺序）
边框分开写法：border-top: 1px solid red;（只设置上边框，其余同理）
表格的细线边框:

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框
border-collapse:collapse;（合并相邻边框）

• 内边距

内边距：边框和内容之间的距离。
左右上下：padding-left、padding-right、padding-top、padding-bottom
组合写法：

padding:5px; 上下左右都是5px
padding:5px 10px; 上下5px 左右10px
padding:5px 10px 20px; 上5 左右10 下20
padding:5px 10px 20px 30px; 顺时针上右下左

问题：padding影响盒子实际大小。→解决方法：width/height减去多出的内边距大小；
注意：如果盒子本身没有指定width/height属性，padding不会撑开盒子；

• 外边距

margin-left、margin-right、margin-top、margin-bottom,简写形式与padding一样。
利用外边距让盒子水平居中：div {width：960px；margin：0 auto；}
margin：0 auto；
等效于margin： auto；
等效于margin-left： auto；margin-right： auto；

外边距合并：
上下相邻盒子相遇，取上盒子的margin-bottom和下盒子的margin-top中较大的一方。
父子盒子，父元素和子元素都有上外边距，此时父元素会塌陷一定外边距值。→解决方法：为父元素定义上边框/内边距；为父元素添加overflow：hidden;

补充：行内元素或者行内块元素水平居中：在其父元素添加text-align:center

补充：
隐藏溢出内容：overflow：hidden;
清除内外边距：* {padding: 0; margin: 0; }

• 圆角边框：参数可以为数值和百分比形式，正方形变圆，百分比换为50%或者把数值改为高度的一半，若为矩形，把数值改为高度的一半。

• 盒子阴影：box-shadow: 10px 10px 10px -4px blue;

值	描述
h-shadow	必需，水平阴影的位置，允许负值。
v-shadow	必需，垂直阴影的位置，允许负值。
blur	可选，模糊距离。
spread	可选，阴影的尺寸。
color	可选，阴影的颜色，请参阅 CSS 颜色值。
inset	可选，将外部阴影 (outset) 改为内部阴影。

注意：默认外阴影（outset），但不可以写这个单词，否则阴影失效；盒子阴影不占空间，不会影响其他盒子排序；

CSS选择器

选择器（选择符）用于选择标签。分为基础选择器和复合选择器两类，基础选择器包括标签选择器、id选择器、类选择器、通配符选择器。

基础选择器

标签选择器

标签选择器是指用html标签作为选择器，按标签名称分类，为页面某一类标签指定统一的CSS样式。

类选择器

类选择器实现差异化选择不同标签。一个标签可以有多个类名，类名之间用空格隔开。使用英文“.”进行标识，后面紧跟类名，长类名或词组可以使用中横线来命名，尽量使用英文表示类名。

id选择器

id选择器和类选择器的区别：相当于人的身份证号和姓名的区别，一个元素的id选择器是唯一的，而类选择器可以重复多个。

通配符选择器

通配符选择器不需要调用，自动给所有元素使用样式；

基础选择器总结

选择器类型	作用	特点	使用情况	用法
标签选择器	选出所有相同的标签	不能差异化选择	较多	p { color: red; }
类选择器	选出1个或多个标签	可根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择1个标签	每个HTML文档中ID唯一	一般搭配JS	#nav {color: red;}
通配符选择器	选择所有标签	选择范围过大	特殊情况使用	* {color: red;}

复合选择器

复合选择器是由多个基础选择器由不同方式组成的，常用复合选择器包括后代选择器、子选择器、并集选择器、伪类选择器等。

后代选择器

后代选择器又称包含选择器，其用法是把外层标签写在前面。内层标签写在后面，中间用空格隔开。注意，内层标签可以是外层标签的儿子孙子，只要是后代即可。

.disorder a {
            color: rgb(10, 228, 64);
        }

子选择器

子选择器的外层标签和内层标签是父子关系，中间用>隔开。

 .disorder>li>a {
            text-decoration: underline;
        }

并集选择器

并集选择器可以选择多组标签，选择器之间用英文逗号隔开。

.disorder a,
        .order>li {
            font-style: italic;
        }

伪类选择器

伪类选择器用于向某些选择器添加特殊效果，比如给链接添加特殊效果。其中focus伪类选择器用于选取获取焦点（光标）的表单元素。注意，为确保生效，请按照link、visited、hover、active顺序声明。

总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于 .nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号 .nav,.header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住 a{} 和 a:hover 实际开发的写法
focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus 记住这个写法

CSS的元素显示模式

元素显示模式就是元素（标签）以什么方式显示，比如div单独占一行，比如一行可以放多个span。HTML元素一般分为块元素和行内元素两个类型。

块元素

常见块元素：h1~h6、p、div、ul、ol、li

块元素特点：

独占一行；
高height、宽width、外边距margin、内边距padding可控；
内可放行内或块级元素（特殊：文字类元素不能放块级元素，例如p）；

行内元素

常见行内元素：a、strong、b、em、i、del、s、ins、u、span

行内元素特点：

一行可多个；
高宽设置无效，默认宽度为内容宽度；
只能容纳文本或者其他行内元素（特殊：链接内不能套链接，链接a内可以套块级元素）；

行内块元素

常见行内块元素：img、input、td

行内块元素特点：

一行可多个；
默认宽度为内容宽度；
高height、宽width、外边距margin、内边距padding可控；

元素显示模式转换

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

Chrome调试工具

打开Chrome，右键点击检查或者按F12进行调试。分为HTML结构和CSS样式，CSS样式可改动数值和查看颜色，黄色叹号提示表示样式属性书写错误。

缩放：ctrl+滚轮
复原浏览器大小：ctrl+0

Emmet语法

• 快速生成HTML结构语法
  1.生成标签：输入标签名按tab键，比如输入div，按tab键，就可以生成 <div></div>。（补充：我发现按回车键也可以）
  2.生成多个相同标签：比如div*3可快速生成3个div。
  3.父子级关系的标签：>，比如ul > li。
  4.兄弟关系的标签：+，比如 div+p。
  5.生成带有类名或者id名字：直接写.demo或者#two，按tab键。
  6.生成的div类名是有顺序：用自增符号$。
  7.在生成的标签内部写内容：用{}表示。

混合用法案例：

.demo&*5
div{美羊羊回做饭}*5
div{$}*5

• 快速生成CSS样式语法
  采用简写形式，比如w200，按tab键，生成width:200px;lh26，按tab键，生成line-height:26px。（补充：按回车键也可以）