CSS3

一、CSS的介绍

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、CSS的使用方式

1.内嵌式的CSS样式表

<element style=”样式属性1:值1;样式属性2:值2....”/>

简单的解决样式的问题，常用于微调，但是存在样式冗余，开发的时候不建议使用。

<h1 style="color: red;background-color: blue;">我是渣渣辉</h1>
<h1 style="font-size: 20;color: yellow;">我是贪玩蓝月</h1>

2.内部CSS样式表

标签选择器：
直接写标签名字即可，注意对所有**同名标签**都有作用。

<style type="text/css">
   h1{
    color: red;
    font-size: 20;
    background-color: black;
   }
  </style>

id选择器：
以#加id值选取元素，注意对所有**同名id的标签**都有作用。

<style type="text/css">
   #aaa{
    color: red;
    font-size: 20;
    background-color: black;
   }
</style>
<h1 id="aaa">我是渣渣辉</h1>

类选择器：
以.加class值选取元素，注意对所有**同名class的标签**都有作用。

<style type="text/css">
   .aaa{
    color: red;
    font-size: 20;
    background-color: black;
   }
</style>
<h1 class="aaa">我是渣渣辉</h1>

组合选择器：
不同选择器组合使用，以逗号隔开。注意标签选择器不能多个组合选择器共同作用，只对第一个有效。

<style type="text/css">
   .bbb,#ccc{
    color: red;
    font-size: 20;
    background-color: black;
   }
   h3,.eee{
    background-color: #00FFFF;
   }
  </style>
  <h1 id="bbb" class="bbb">我是渣渣辉</h1>
  <h2 id="ccc" class="ccc">我是贪玩蓝月</h2>
  <h3 id="ddd" class="ddd">是兄弟就来砍我</h3>
  <h4 id="eee" class="eee">今晚八点，船新版本</h4>

属性选择器：
元素名[属性名]或*[属性名]或[属性名]

<style type="text/css">
   [href]{
    color: red;
   }
   a[id]{
    background-color: black;
   }
  </style>
  <a href="index.html">我是超链接1</a>
  <a href="index.html" id="aid">我是超链接2</a>-->

后代选择器：
父元素+空格+子元素，注意父类的子类的子类也可选择，这是与子元素选择器的区别。

<style type="text/css">
   h1 p{
    color: red;
    font-size: 20;
    background-color: black;
   }
  </style>
  <h1><p>我是渣渣辉</p></h1>
  <h1>我是贪玩蓝月</h1>

子元素选择器：
父类元素+大于号+子类元素，注意只能选择子元素，比较精确，不能选择子元素的子元素，这是与后代选择器的区别。

<style type="text/css">
   h1 p{
    color: red;
    font-size: 20;
    background-color: black;
   }
  </style>
  <h1><p>我是渣渣辉</p></h1>

相邻兄弟选择器：
元素1+加号+元素2，可选择紧接在另一元素后的元素，且二者有相同父元素。注意：用一个结合符只能选择两个相邻兄弟中的第二个元素。

<style type="text/css">
   ul + ol{
    color: red;
    font-size: 20;
    background-color: black;
   }
  </style>
  <div>
   <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
   </ul>
   <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
   </ol>
  </div>

3.外部CSS样式表

3.1.定义.css的样式文件
3.2.引入CSS文件

<link rel="stylesheet" type="text/css" href="css/test.css" />

4.伪类

锚伪类：
在支持CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

注意：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

<style type="text/css">
   a:link {color: #FF0000}  /* 未访问的链接 */
   a:visited {color: #00FF00} /* 已访问的链接 */
   a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
   a:active {color: #0000FF} /* 选定的链接 */
  </style>
  <a href="/index.html">这是一个链接。</a>

三、CSS的常用属性

1.基本属性

color:值//主要代表内容的前景色，常用做字体颜色。

font-size:值//设置文字大小

font-family:值//设置字体，注意浏览器兼容问题。

text-decoration:值//设置字体线，通常取值：underline，overline，line-through。

text-align:值//对齐方式。通常取值：left，right，center。

width:值//设置宽度。

height:值//设置高度。

margin:上,右,下,左//设置上下左右距离浏览器距离，值还可以为上，左右，下, 或者上下，左右。

cursor:值//鼠标的位置。通常取值：pointer（手），wait（等待）。

display:值//设置元素的隐藏或显示。通常取值：none（隐藏，不占用页面流），block（块级元素的显示），inline（行内元素的显示）。

visibility:hidden//设置元素的隐藏，占用页面流

2.背景相关

background-color:值//设置背景颜色。
background-image:url("")//设置背景为图片。

四、盒子模型

1.边框相关的样式：border

2.内边距，元素与边框的距离：padding

3.外边距，边框与浏览器的距离（注意与其他元素的排列）：margin

4.标签分类：

块标签（block）：div，p，ul，li，h1……
1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占区域是一个矩形

内联标签（inline）：span，a，strong，img……
1.挨在一起的
2.有些样式不支持，例如：width、height、margin、padding
3.不写宽的时候，宽度由内容决定
4.所占的区域不一定是矩形
5.内联标签之间会有空隙，原因：换行产生的

内联块标签（inline-block）：input，select……
1.挨在一起，但是支持宽高。
2.基本上是结合了前两者的特点。
注：布局一般用块标签，修饰文本一般用内联标签。

5.标签嵌套规范

5.1.块标签可以嵌套内联标签。

5.2.块标签不一定能嵌套块标签。（**P标签**中不能嵌套其它块标签）

5.3.内联标签不能嵌套块标签。（**a标签**是一个例外）

五、布局

1.table布局（过时），Div+CSS布局（主流）

2.CSS定位

概念：改变元素在页面上的位置。
定位机制：普通流、浮动、绝对布局（绝对定位）

3.position特性

position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。
position取值static（默认）、relative、absolute、fixed、sticky。

4.relative相对定位：

如果没有定位偏移量，对元素本身没有任何影响。
不使元素脱离文档流。
不影响其他元素布局。
1eft、top、right、bottom是相对于当前元素自身进行偏移的。

5.absolute绝对定位：

使元素完全脱离文档流。
使内联元素支持宽高（让内联具备块特性）。
使块元素默认宽根据内容决定（让块具备内联的特性）。
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）。

6.fixed固定定位：

使元素完全脱离文档流。
使内联元素支持宽高（让内联具备块特性）。
使块元素默认宽根据内容决定（让块具备内联的特性）。
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响（弹窗广告）

7.sticky黏性定位：

在指定的位置，进行黏性操作。

8.浮动（float）：

float特性：加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
float取值：left，right，none（默认）
float注意点：
1.只会影响后面的元素。
2.内容默认提升半层。默认宽根据内容决定。
3.换行排列只会影响后面的元素。内容默认提升半层。默认宽根据内容决定。
换行排列。
4.主要给块元素添加，但也可以给内联元素添加。
5.主要给块元素添加，但也可以给内联元素添加。

浮动的清除：
上下排列：不想被浮动影响可以添加clear属性，值设置为left，right，both。
嵌套排列：
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
overflow:hidden（BFC规范），如果有子元素想溢出，那么会受到影响。
display:inline-block（BFC规范），不推荐，父容器会影响到后面的元素。
设置空标签：不推荐，会多添加一个标签。
after伪类：推荐，是空标签的加强版，目前各大公司的做法。（clear属性只会操作块标签，对内联标签不起作用）

z-index:浮层：
注意：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于浏览器。absolute定位的元素和其他元素重叠时，可以使用浮层调整上下层关系。