CSS入门学习

---

前言

HTML 标签的初衷是用于定义文档的内容，而不用关注文档的布局，布局交由浏览器来完成。然而，当时的两大主流浏览器（Netscape和IE）不断地将新的 HTML 标签和属性（如字体标签和颜色属性等）添加到 HTML规范中。使文档的内容和表现（布局、字体、颜色、背景等）完全耦合在一起，对网页表现的任何修改，都必须修改网页的内容，造成站点的维护越来越困难。

为了解决此问题，万维网联盟（W3C）肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出CSS，让CSS来控制网页的外观，让HTML继续回到最拿手的老本行——为内容提供结构。

有了CSS，你再也不必担心HTML中的 h1 的字体是否过大，也不必担心无序列表的间隔是否合适，因为这些都可以在稍后用CSS进行调整。你只需集中精力用HTML来组织网页的内容，而如何使内容看起来更美观，就完全交给CSS来完成。

---

一、CSS是什么？

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

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

二、外观调整

1.文本外观

2.字体外观

三、选择器

1.基础选择器

2.复合选择器

 

 3.新增属性选择器

 4.新增伪类选择器

 5.新增结构伪类选择器

6.新增选择器nth-type-of.html 

四、样式

 五、元素显示模式转换

六、背景

1.背景图片

 

 

2、背景位置

七、阴影

 

八、浮动 

 1.设置浮动 float 的元素

 

2. 浮动方向

 3.防止父级塌陷方法

 

 4.处理溢出的多种方式

九、盒子模型 

 1.边框

2. 边框影响盒子的实际大小

3.内边距

 

4.外边距 

5.水平居中对齐 

 6.清除内外边距

十、圆角边框

十一、定位

 1.定位会完全压住据对定位的内容 

2.粘性定位

 3.相对定位

4.绝对定位 

5.固定定位

6.绝对定位水平垂直居中 

 7.定位的堆叠顺序

十二、图片模糊处理

---