一、CSS
- 1.1 CSS概述
- - 1.1.1 定义
  - 1.1.2 特征
  - 1.1.3 组织网页的两种常用方式
- 1.2 引入CSS的四种方式
- - 1.2.1 Style属性方式（内联样式）
  - 1.2.2 Style标签方式（选择器）
  - - 1.2.2.1 在head标签中加入style标签，对多个标签进行统一修改。
    - 1.2.2.2 导入方式
  - 1.2.3 链接方式（外联样式）
- 1.3 CSS优先级
- 1.4 CSS代码格式
- 1.5 CSS属性
- - 1.5.1 display属性：设置元素的显示方式。
  - 1.5.2 对齐方式
  - 1.5.3 列表属性
  - 1.5.4 文本设置
  - 1.5.5 背景设置
二、CSS选择器
- 2.2.3 群组选择器
- 2.2.4 属性选择器
- 2.2.5 相邻兄弟选择器
- 2.2.6 伪元素选择器
三、样式设置
- 3.1 尺寸单位
- 3.2 颜色单位
- 3.3 背景样式设置
- - 3.3.1 优先集中设置:background:color image:url("") repeat position
  - 3.3.2 单独设置
  - - 3.3.2.1 背景颜色与透明度
    - 3.3.2.2 背景图片
    - 3.3.2.3 背景图片的重复方式
    - 3.3.2.4 设置背景图片的显示位置
    - 3.3.2.5 设置背景图片的尺寸
- 3.4 文本样式设置
- - 3.4.1 字体集中设置顺序:
  - 3.4.2 字体单独设置
  - - 3.4.2.1 设置斜体
    - 3.4.2.2 设置字体粗细程度
    - 3.4.2.3 设置字体大小
    - 3.4.2.4 设置字体名称
  - 3.4.3 文本样式设置
  - - 3.4.3.1 文本颜色
    - 3.4.3.2 文本装饰线
    - 3.4.3.3 文本内容的水平对齐方式
    - 3.4.3.4 行高
  - 3.4.4 自定义字体

一、CSS

1.1 CSS概述

1.1.1 定义

CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
意为层叠样式表，与HTML相辅相成，实现网页的排版布局与样式美化

1.1.2 特征

层叠性：多组CSS样式共同作用于一个元素
继承性：后代元素可以继承祖先元素中的某些样式
例 : 大部分的文本属性都可以被继承

1.1.3 组织网页的两种常用方式

组织网页结构主要有两种方式：
表格嵌套表格
DIV+CSS
早期的网页都是表格套表格的方式实现的，这种方式对于比较简单的页面效果尚可，一旦页面稍微复杂一些，使用起来就十分的麻烦，现阶段的大部分网页都主要使用DIV+CSS的方式，只在局部使用表格嵌套方式

1.2 引入CSS的四种方式

1.2.1 Style属性方式（内联样式）

利用标签中style属性来改变每个标签的显示样式。
例：

<p style="background-color:#FF0000; color:#FFFFFF">p标签段落内容。
</p>

该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

1.2.2 Style标签方式（选择器）

1.2.2.1 在head标签中加入style标签，对多个标签进行统一修改。

~~~html
<head>
<style type=”text/css”>
p { color:#FF0000;}
</style>
</head>
~~~

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

1.2.2.2 导入方式

前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。
例：
```
<style type="text/css">@import url(div.css);div { color:#FF0000;}
</style>
```
注：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。

1.2.3 链接方式（外联样式）

通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。
例：
<link rel="stylesheet"type="text/css" href="css_3.css" media="screen" />
注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。

1.3 CSS优先级

三大原则：就近、具体、重要!important):
内联样式(标签内属性style,1000)->
选择器(匹配文档标签，然后为标签添加样式，在头部style标签中设置)->
外联样式(链接到外部css文件，样式表文件中借助选择器匹配元素应用样式,在头部link标签中设置，如link rel=“stylesheet” href=“demo.css” type=“text/css”,)

1.4 CSS代码格式

选择器名称 { 属性名：属性值1 ; 属性值2 属性值3 ；属性名：属性值；…….}
- 属性与属性之间用分号隔开
- 属性与属性值直接按用冒号连接
- 如果一个属性有多个值的话，那么多个值用空格隔开。

1.5 CSS属性

1.5.1 display属性：设置元素的显示方式。

我们知道元素分为行内元素和块级元素，而display属性可以修改元素的显示方式。
如图-1所示：

*visibility也可以实现隐藏，不同的是display不显示，也不占用空间，而visibility隐藏，但是空间仍然占用。

1.5.2 对齐方式

属性	含义
vertical-align	设置或检索对象内容的垂直对其方式。
text-align	设置或检索对象中文本的对齐方式。

1.5.3 列表属性

属性	含义
list-style	设置列表项目相关样式
list-style-position	设置或检索作为对象的列表项标记如何根据文本排列。
list-style-type	设置或检索对象的列表项所使用的预设标记。

1.5.4 文本设置

属性	含义
Font	字体设置
Color	字体颜色
Font-family	字体设置
Font-size	字体大小
Font-style	斜体设置
font-weight	字体粗细
text-decoration	字体下划线
text-underline-position	下划线位置
line-height	行高。即字体最底端与字体内部顶端之间的距离。
Height	高度
Width	宽度

1.5.5 背景设置

属性	含义
Background	背景设置
background-color	背景色设置
background-image	背景图片设置
background-position	设置或检索对象的背景图像位置
background-repeat	设置或检索对象的背景图像是否及如何铺排

二、CSS选择器

作用：匹配文档中的某些元素为其应用样式

选择器
基本选择器	标签选择器	通过tag_name进行匹配；a中常设置装饰线text-decoration: none;
	class选择器	通过"."进行匹配
	id选择器	通过"#"进行匹配
扩展选择器	后代选择器	通过" "进行匹配
	子代选择器	通过">"进行匹配
	群组选择器	通过","连接
	属性选择器	通过"tag_name[attr=value] "进行匹配
	兄弟选择器	通过"~"进行匹配
	相邻选择器	通过"+"进行匹配
	伪类选择器	通过":"匹配
		超链接:":link" 未访问的状态; ":visited" 访问后的状态
		动态伪类:":hover" 鼠标停留在元素上面的状态 ":active" 元素被激活的装填 ":focus" 元素获取焦点的状态

## 2.1 基本选择器 ### 2.1.1 html标签名选择器 - html标签名选择器。使用的就是html的标签名 ~~~css div｛ color:red; ｝ *{ Color:red; } ~~~ ### 2.1.2 class选择器 - class选择器。其实使用的标签中的class属性。格式为 .class名 ~~~css .aaa{ color:red; }

hahahaha

~~~ ### 2.1.3 id选择器 - id选择器。其实使用的是标签的中的id属性。格式为#id名 ~~~css #bbb{ color:red; }

hehehe

~~~ ## 2.2 CSS扩展选择器 ### 2.2.1 后代选择器 - 选择父选择器选中的元素中符合子选择器的子孙元素，可以用此选择器。例： ~~~css p { color:#00FF00;} p b { color:#FF000;}

P标签刘德华段落样式

P标签段落

~~~ ### 2.2.2 子元素选择器 - 选择父选择器选中的元素中符合子选择器的子元素，可以用此选择器。与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。 ~~~css h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>
This is <em>really <strong>very</strong></em> important.
</h1>
~~~

2.2.3 群组选择器

对多个不同选择器进行相同样式设置的时候应用此选择器。
例：

p,div { color:#FF0000;}
<p>P标签显示段落。</p>
<div>DIV标签显示段落</div>
注：多个不同选择器要用逗号分隔开。

2.2.4 属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

如果您希望把包含属性（title）的所有元素变为红色，可以写作：
*[title] {color:red;}
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}
为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
假设只希望选择 moons 属性值为 1 的那些 planet 元素：
planet[moons="1"] {color: red;}
上面的代码会把以下标记中的第二个元素变成红色，但第一个和第三个元素不受影响：
```
<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>
```

2.2.5 相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
h1 + p {margin-top:50px;}

2.2.6 伪元素选择器

其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
格式：标签名：伪元素;类名：伪元素。类名标签名都可以。
```
a:link  超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
```

三、样式设置

3.1 尺寸单位

px 像素单位
% 百分比，参照父元素对应属性的值进行计算
绝对长度单位px；相对长度单位em：参照父元素的字体大小计算，1em=16px；
相对长度单位rem:参照根元素html的字体大小计算，1rem=16px rem
media-query:根据不同的尺寸查询根元素的font-size
window.screen.height:手机屏幕高度；
window.innerHeight 网页视口尺寸；
document.body.clientHeight

vh:网页视口高度的0.01；
vw:网页视口宽度的0.01；
vmax和vmin分别为vh和vw的最大值和最小值

3.2 颜色单位

英文单词：red，green，blue
rgb(r,g,b) 使用三原色表示，每种颜色取值0~255
rgba(r,g,b,alpha) 三原色每种取值0_{255，alpha取值0（透明）}1（不透明）
十六进制表示：以#为前缀，分为长十六进制和短十六进制。
- 长十六进制：每两位为一组，代表一种三原色；每位的取值范围0_9，af
  例：red rgb(255,0,0) #ff0000
- 短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十六进制解析
  例：#000 #fff #f00

3.3 背景样式设置

3.3.1 优先集中设置:background:color image:url("") repeat position

3.3.2 单独设置

3.3.2.1 背景颜色与透明度

background-color: red;
background-opacity: 设置透明度

3.3.2.2 背景图片

background-image : url("路径");

设置背景图片，指定图片路径，如果路径中出现中文或空格，需要加引号

3.3.2.3 背景图片的重复方式

默认背景图片从元素的左上角显示，如果图片尺寸与元素尺寸不匹配时，会出现以下情况：

如果元素尺寸大于图片尺寸，会自动重复平铺，直至铺满整个元素
如果元素尺寸小于图片尺寸，图片默认从元素左上角开始显示，超出部分不可见

background-repeat:repeat/repeat-x/repeat-y/no-repeat

取值：

 repeat  默认值，沿水平和垂直方向重复平铺repeat-x 沿X轴重复平铺repeat-y 沿Y轴重复平铺no-repeat 不重复平铺

3.3.2.4 设置背景图片的显示位置

默认显示在元素左上角

background-position:x y;

取值方式：

1. 像素值设置背景图片的在元素坐标系中的起点坐标
2. 方位值水平 ：left/center/right垂直 ：top/center/bottom注：如果只设置某一个方向的方位值，另外一个方向默认为center
3. 百分比类似于方位值，根据百分比计算背景图片的显示坐标。计算方式：横坐标 = (元素宽度 - 背景图片宽度）* x%纵坐标 = (元素高度 - 背景图片高度) * y %特殊值：0% 0%     左上角100% 100% 右下50% 50%   居中显示

精灵图技术：为了减少网络请求，可以将所有的小图标拼接在一张图片上，一次网络请求全部得到；借助于background-position进行背景图片位置的调整，实现显示不同的图标

3.3.2.5 设置背景图片的尺寸

background-size:width height;

取值方式：

1. 像素值1. 500px 500px; 同时指定宽高2. 500px;  指定宽度，高度自适应
2. 百分比百分比参照元素的尺寸进行计算1. 50% 50%; 根据元素宽高,分别计算图片的宽高2. 50%; 根据元素宽度计算图片宽高,图片高度等比例缩放

3.4 文本样式设置

3.4.1 字体集中设置顺序:

font : style(是否斜体italic) weight(粗细) size family

3.4.2 字体单独设置

3.4.2.1 设置斜体

font-style:italic;

3.4.2.2 设置字体粗细程度

font-weight:normal;

取值：

1. normal（默认值）等价于400
2. bold   (加粗) 等价于700

3.4.2.3 设置字体大小

font-size:20px;

3.4.2.4 设置字体名称

font-family:Arial,"黑体";

取值 :
1. 可以指定多个字体名称作为备选字体,使用逗号隔开
2. 如果字体名称为中文,或者名称中出现了空格,必须使用引号
例 :

font-family:Arial;
font-family:"黑体","Microsoft YaHei",Arial;

注意 :
1. 如果四个属性值都必须设置,严格按照顺序书写
2. size family 是必填项

3.4.3 文本样式设置

3.4.3.1 文本颜色

color:red;

3.4.3.2 文本装饰线

text-decoration:none;

取值 :

    underline        下划线overline     上划线line-through      删除线none            取消装饰线

3.4.3.3 文本内容的水平对齐方式

text-align:center;