CSS用于控制网页的样式和布局, 修饰页面效果，可以配合脚本语言动态的对网页各元素进行格式化，提升用户体验性，接下来让我们详细看看CSS是如何将网页美容的。

CSS规则主要由两个主要部分构成：选择器，以及一条或多条声明。

1. 选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2. 属性和属性值之间以“键值对”的形式出现。
3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4. 属性和属性值之间用英文“：”连接。
5. 多个键值对之间使用英文“；”区分。

p {  /*选择器*/
    color: red;	/*声明*/
    font-size: 14px;  /*声明*/
}

直接在标签的属性中使用style声明，在style属性中添加css声明即可。

这是一个行内样式表的css

定义在head或body标签中,使用style标签

定义在外部的css文件中，需要在head中引入相应的css文件
(1）html文件中：使用link来导入css文件

/*关联外部的css样式文件*/





/*type:定义链接文档的类型，在这里需要指定为"text/css",表示链接的外部文件为css样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
href：定义所链接外部样式表文件的url，可以是相对路径，也可以是绝对路径。*/

(2）css文件中：定义CSS样式

p {
        background-color: blue;
        color: red;
  }

3种样式表的优先级：

1、行内样式表 > 内部样式表 = 外部样式表

2、当内部样式表和外部样式表同时存在时，采用 就近原则 来使用样式

font-style 可用属性值如下：

• normal：默认值，浏览器会显示标准的字体样式。
• italic：浏览器会显示斜体的字体样式。
• oblique：浏览器会显示倾斜的字体样式。

font-variant 可用属性值如下：

• normal：默认值。浏览器会显示一个标准的字体。
• small-caps： 浏览器会显示小型大写字母的字体。
• inherit： 规定应该从父元素继承 font-variant 属性的值。

color属性有3种表现形式：

• color-name：使用颜色名称，如：red, transparent
• hex-number：使用十六进制数表示，取值是0~f，每个颜色使用两位表示，如：#ff0000表示红色 0-9 a:10 b:11 c:12 d:13 e:14 f:15
• rgb-number：使用rgb颜色值表示，取值0~255，如rgb(255,0,0)，rgba(100%, 0%, 0%, .5)
• rgba：在rgb上多了一给a，表示透明度，取值0~1完全透明完全不透明

标题1
标题2
标题3
标题3

text-align用于指定元素文本的水平对齐方式，取值有left、right、center、justify（两端对齐文本）

标题1
标题2
标题3

这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落

text-decoration用于对文本添加修饰，如下划线、删除线等。有如下取值：

• none：默认，定义标准的文本，没有任何修饰。
• underline：定义在文本下方的一条线
• overline：定义在文本上方的一条线
• line-through：定义穿过文本的一条线

text-transform用于转换文本的大小写（主要用于英文），其取值有：

• none：默认
• capitalize：文本中每个单词以大写字母开头
• uppercase：所有单词字母都大写
• lowercase：所有单词字母都小写

text-indent 属性规定文本块(块级中的文本)中首行文本的缩进。取值有：

• 数值：表示像素值
• 百分比：基于父元素宽度的百分比的缩进。

注意： 负值是允许的。如果值是负数，将第一行左缩进。
小技巧： 首行缩进2字符使用 2em

text-shadow用于设置文本的阴影效果。语法格式是

text-shadow: h-shadow v-shadow blur color;

text-shadow: h-shadow v-shadow blur color;

h-shadow：必需。水平阴影的位置。允许负值。horizontal， X轴往右是正值
v-shadow：必需。垂直阴影的位置。允许负值。 vertical，Y轴向下是正值
blur：可选。模糊的距离。
color：可选。阴影的颜色。

CSS中direction属性决定了HTML文字渲染方向

direction 用于指定文本的方向。取值如下：

• ltr：默认的，文本方向从左到右 left to right

• rtl：文本方向从右到左。right to left

letter-spacing 属性增加或减少字符间的空白（字符间距），使用数值表示，可以是负数。主要用于汉字

如果用于英文段落 增加/减少字母之间的空白

word-spacing属性增加或减少单词与单词之间的空白，允许使用负值。主要用于英文段落
如果作用于中文，挨在一起的中文会被识别为一个单词

line-height 用于设置文字行与文字行之间的距离。取值如下：

• number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

• length：设置固定的行间距 px em 。

• %：基于当前字体尺寸的百分比行间距。

使用技巧：在一行的盒子内，我们设定行高等于盒子的高度，就可以是文字垂直居中。只适用于单行文本

规定自动换行的处理方法。通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

keep-all: 所有“单词”一律不拆分换行可以理解为只有空格等可以触发自动换行
break-all：所有单词碰到边界一律拆分换行

设置元素对内容中的空格的处理方式

如果父元素宽高能够包含子元素 auto就不会出现滚动条 scroll 就会出现滚动条

用来控制超长溢出的文字内容的显示方式

单行文本溢出

    div{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        /* 强制一行显示*/
        white-space: nowrap;
        /* 超出部分隐藏 */
        overflow: hidden;
        /* 超出部分省略号 */
        text-overflow: ellipsis;
    }

多行文本溢出显示省略号，有较大的兼容性，适合用于webkit浏览器或移动端（移动端内核大部分是webkit内核）

1. -webkit-line-clamp：限制在一个块元素显示的文本的行数。为实现效果，它需要组合其他的WebKit属性。常见结合属性以下两点：
2. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

	 div{
        	width: 100px;
         	/* 不要设置高度 */
	        overflow: hidden;
            text-overflow: ellipsis;
            /* 1.必须结合的属性，将对象作为弹性伸缩盒子模型显示  */
            display: -webkit-box;
            /* 2.是一个 不规范的属性，它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性 */
            -webkit-line-clamp: 2;
            /* 3.必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical; 
       }

css规则是使用 /*需要注释的内容*/ 进行注释的。
快捷键 ctrl + / 或者ctrl + shift + /

标签选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
基本语法格式:

          标签名{属性1：属性值1; 属性2：属性值2; ...}

优点：能快速为页面中同类型的标签统一样式
缺点：不能设计差异化样式。

span {
   color: red;
}

div {
   background-color: red;
}

id选择器使用“#”进行标识，后面紧跟id名。

#id名{属性1：属性值1; 属性2：属性值2; ...}
<标签名 id="id值">

注意：元素的id值是唯一的，只能对应于文档中某一个具体的元素。

类选择器使用“.”（英文点）进行标识，后面紧跟类名。

.类名{属性1：属性值1; 属性2：属性值2; ...}

<标签名 class="类名">

相对于ID选择器，类选择器的类名可以是多个，并且一个类名可以对应多个元素，可以为元素对象定义单独或相同的样式。

可以给标签指定多个类名，类名之间用空格隔开。

红色
红色加粗

通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
基本语法格式:

* {属性1：属性值1; 属性2：属性值2; ...}

通常使用它来清楚HTML元素的默认边距。

* {
    margin: 0;	/*定义外边距*/
    padding: 0;	/*定义内边距*/
}

伪类选择器用于向某些选择器添加特殊的效果。
伪类选择器使用“:”冒号来表示

链接伪类选择器主要针对于a标签

a:link		/*未访问的链接*/
a:visited	/*已访问的链接*/
a:hover		/*鼠标移动到链接上*/
a:active	/*选定的链接*/

注意：

1. a:hover 必须在 a:link 和 a:visited 之后。
2. a:active 必须在 a:hover 之后，需要严格按顺序才能看到效果。
3. visited只能修改颜色，在未访问状态下设置了背景颜色的条件下 可以设置背景颜色 其他不能做改变

记忆方法：l o v e h a t e

• :first-child 获取第一个子元素

  ​ 在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。

• :last-child 获取最后一个子元素。注意：IE8不支持X:last-child。

• :nth-child(n) 选取某个元素的一个或者多个特定的子元素。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式<2n-1>（n从0开始，当表达式的值小于等于0时，将不选择任何子元素）。

• :nth-last-child(n) 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始获取。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式（n从0开始）。

• :first-of-type 选择特定元素的第一个子元素

• :last-of-type 选择特定元素的最后一个子元素

• :nth-of-type(n) 只计算父元素中指定的某种类型的子元素

• :nth-last-of-type(n) 只计算父元素中指定的某种类型的子元素，从这个元素的最后一个元素开始获取

• :only-child 匹配没有任何兄弟元素的元素

• :only-of-type 匹配所有元素 这个元素没有其他相同类型的兄弟元素

• :empty 选择的元素里面没有任何的内容或子节点

• :root 匹配文档的根节点 html

:target选择器用于选取页面中的某个target元素。该元素的id被当做页面的超链接来使用。

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或者id选择器，两个选择器之间不能有空格。

这是一个段落

p.blue {
           color: blue;
}

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器，都可以作为并集选择器的一部分，其中用并集选择器设置的样式是所有选择器会执行的样式

这是一个段落
这是一个段落

.p1,.p2,.p3{
           color: blue;
}

兄弟选择器是CSS3.0新增的一个选择器，语法格式： **A~B **或者 A+B

• ‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。
• ‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。

   
这是一个段落

我是相邻的兄弟元素
这是一个段落

后代选择器又称为包含选择器，用来选择元素或元素组的后代。其写法就是把外层标签写在前面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

   
red

这是一个段落
这是一个段落

子元素选择器只能选择作为其元素子元素的元素。其写法就是父亲标签写在前面，子级标签写在后面，中间跟一个“>”进行连接。
注意：这里的子元素表示亲儿子，不包含孙子、重孙子之类。

	
一级菜单
		
 
			

			  
 
			   
三级菜单
              
            
			
二级菜单
			
二级菜单
		
	

1. E::first-letter 块级文本的第一个单词或字
2. E::first-line 块级文本的第一行
3. E::selection 可改变选中文本的样式
4. E::before和E::after 在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须结合content属性使用。

注意：before与after表示在盒子内部的前端和后端插入内容。
::-webkit-input-placeholder表示选择到input中的placeholder，为其设置样式

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

含义：指我们设置上级(父级)的CSS样式，上级（父级）及以下的子级（下级）都具有此属性。
特殊性：

• 并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。

• 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 。

• a标签的颜色和下划线的设置不能继承，必须对a标签本身进行设置。

• h标签的字体大小/加粗效果不能修改，必须对h标签本身进行修改。(字体放大两倍)

含义：优先级表示当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

优先级权重
1.同类型选择器：就近原则
2.不同类型选择器：按照：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
3.多个选择器混合时：通过计算权重判断
权重计算规则
（1）内联样式，如: style=””，权值为1，0，0，0。

（2）ID选择器，如：#content，权值为0，1，0，0。

（3）类，伪类和属性选择器，如.content E:link E[attr]，权值为0，0，1，0。

（4）元素选择器和伪元素选择器，如div p ::before，权值为0，0，0，1。

（5）通配符、子选择器、兄弟选择器等的。如*、>、+,权值为0，0，0，0。

（6）继承的样式没有权值。!important的权重最高

注意：单独使用一个选择器的时候，不能跨等级使css规则生效，也就是权重是在双方处于同一等级的情况下，才开始对比。

HTML标签一般分为块标签和行内标签两种类型

每个块元素通常都会独自占据一整行或多整行，可以对其设置高度、宽度、对齐等属性。常见块元素有

~