CSS介绍

###实体引用（特殊字符）

空格：空格折叠现象（连续出现多个空格只能识别1个空格）&nbsp；

小于：< 大于：>

###分区标签

作用：将多个相关标签添加到一个分区标签中，便于统一管理，可以理解成是一个容器

div:独占一行

span:共占一行

一般页面至少分为三大区：

<div>头</div>

<div>正文内容</div>

<div>脚</div>

html5中新增分区标签:（目的：为了代码可能性高）

1、header头

2、article文章

3、section（块、区域）

4、footer脚

5、nav导航

h5页面区域

<header>头</header>

<article>正文文章</article>或<section></section>

###CSS

Casecading层叠Style样式Sheet表

作用：用于美化页面

###CSS的引入方式

1、内联样式：在标签中的Style属性里面添加样式代码，存在一个弊端，不能复用

2、内部样式：在head标签中添加style标签，在标签体内写样式代码，好处：可以

当前页面复用，弊端：只能当前页面复用不能多页面复用

3、外部样式：在单独的css文件写样式代码，通过link标签引入到html页面中，

好处：可以多页面复用，并且可以将html代码和css代码分离

###选择器

1、标签名选择器

格式：标签名{样式代码}

场景：需要给页面中所有某一种标签天剑样式时使用

2、id选择器：

页面中任何标签都可以添加一个id属性，页面中的标签尽量不要重复

格式：#id{样式代码}

场景：需要给页面中某一个标签添加样式时使用

3、类选择器

格式：.class{样式代码}

4、分组选择器

将多个选择器合并成一个选择器

格式：h3,#abc,.c1{样式代码}

5、子孙后代选择器

通过元素之间的关系选择器

6、子元素选择器

通过元素之间的关系选择器

格式：div>div>span{样式代码}

7、属性选择器

通过元素的属性选择

格式：标签名[属性名=‘值’]{样式代码}

8、伪类选择器

选择的是元素的状态

未访问状态、访问过的状态 悬停状态 点击状态

a:link/visited/hover/active{}

9、任意元素选择器

选择页面中所有的标签

格式：*{样式代码}

###各种常见样式

####颜色赋值

三原色：红绿蓝 每种颜色取值范围0-255

1、颜色单词赋值 red/green/blue

2、6位16进制赋值 红：ff0000 绿：00ff00 蓝：0000ff

3、3位16进制赋值 红：f00 绿：0f0 蓝：00f

4、三位十进制rgb(0-255,0-255,0-255);

5、4位10进制赋值：rgba(0-255,0-255,0-255,0-1) a=alpha透明度

####背景图片 background-image

   width:611px;
   height: 376px;
   background-color: #E8E8E8;
   background-image: url("http://doc.tedu.cn/tstore_v1/images/itemCat/study_computer_img1.png");
   background-size: 318px 319px;
   background-repeat: no-repeat;
   background-position: 95% 80%

####显示方式：display

1、block：块级元素的默认值，可以修改宽高，独占一行

块级元素：独占一行 包括h1-h6,div,p

2、inline:行内元素的默认值，不能修改宽高，共占一行

行内元素：共占一行，包括：span，b,i

3、inline-block:行内块，可以修改宽高，也可以共占一行

###盒子模型

宽高+外边距+边框+内边距=盒子模型

####之宽高

width、height:赋值方式有两种：1、像素 2、上级元素的百分比

行内元素不能修改宽高，宽高由内容决定

####之外边距

元素距上级元素或相邻兄弟元素的距离称为外边距

行内元素上下外边距无效

粘连问题：当元素的上边缘和上级元素的上级边缘重叠时，给元素添加上外边距，

会出现粘连问题，给上级元素添加overflow：hidden解决

赋值方式：

margin-left/right/top/bottom:10px;
margin:20px; 四个方向全部20个像素
margin:20px 40px; 上下20px 左右40px
margin:0 auto; 居中
margin:10px 20px 30px 40px; 上右下左 顺时针

####之边框

赋值方式： border:边框粗细 边框粗细 边框样式 边框颜色

圆角设置：border-radius: 20px; 值越大越圆

####之内边距

什么是内边距：元素边框内容的距离

赋值方式和外边距类似，

​ padding-left/right/top/bottom:20px;

padding:10px;四个方向10

padding：10px 20px; 上下10；左右20；

padding：10px 20px 30px 40px

###文本相关样式

1、文本修饰：text-decoration:overline 上划线

underline 下划线

line-through 删除线

2、水平对齐方式：text-align:

text-align:left/right/center;

3、文本颜色 color

4、行高 line-height

可以实现文本上下居中

####字体相关

1、字体大小

2、字体加粗

3、斜体

4、字体设置

###css的三大特性

1、继承性

​ 标签可以继承上级标签的部分样式（文本和字体相关样式）部分标签自带效果不受继承影响，比如超链接a标签,

自带字体颜色不受影响，h1-h6自带字体大小不受继承影响

2、层叠性

​ 不同的选择器有可能选择到同一个标签，如果作用的样式不同则样式层叠到一起 全部生效，如果作用的样式相同，则由优先级决定哪个生效。

3、优先级

​ 作用范围越小，优先级越高，id>类选择器>标签名选择器>继承（属于间接选中）

###定位方式 4+1种定位方式

####position定位 4种

1、文档流定位（静态定位），默认的定位方式

position：static

特点：行内元素从左到右排列，块级元素从上到下排列

如何控制元素的位置：通过外边距margin控制

2、相对定位

格式：position:relative

特点：元素不脱离文档流，通过left/right/top/bottom 让元素从当前位置做位置偏移

3、绝对定位

特点：元素脱离文档流（不占原来的位置），通过left/right/top/bottom

让元素相对于窗口或某一个上级元素（需要在上级元素中添加相对定位）做位置偏移

4、固定定位

格式：position：fixed

特点：元素脱离文档流，通过left/right/top/bottom让元素相对于窗口做位置偏移

####浮动定位