本文详细介绍了CSS层叠样式表的基础知识，包括W3C标准、样式引入方式（内嵌、行内、外链、嵌入）、选择符的类型（标签、ID、类等）、字体控制、文本样式、伪类、盒子模型、布局方法（浮动、定位）以及背景控制。重点讲解了CSS的特点如继承和层叠，并提供了实际代码示例，帮助理解各种CSS属性的使用。
css 层叠样式表思维导图
W3C标准或者web标准
1.什么是W3C
其实就是World Wide Web Consortium的缩写，中文是W3C组织或者万维网联盟，W3C这个组织是做什么的呢？简单的说，就是出网页标准的。那么又W3C组织推出的标准就被称为W3C标准或web标准
大家所看到的W3C的文档，其实就是万维网联盟提出的标准
W3C标准或者叫web标准 web标准是一系列的标准
结构层： HTML 用于描述网页的展示结构
表现层： CSS 用于修饰装饰网页的美观度
行为层: JavaScript 用于完成页面的组件
（按钮，动画 事件 或者窗口等一些动态效果
2 .css层叠样式表
英文（Cascading Style Sheets）
主要用于修饰 html xhtml html5 xml 让网页有这种千变万化的形式
语法：选择符{属性：值}
body{font-size:12px;}
1.内嵌式引入
把style标签嵌套在head标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{font-size:36px;}
</style>
</head>
<body>
<p>一些老的<b>浏览器不支持 iframe。</b></p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>
2.行内样式
<b style="font-size:56px;">浏览器不支持 iframe。</b>
3.外链样式
把css当成是一个文件，通过link标签引入到html中
<link rel="stylesheet" type="text/css" href="css/main.css">
4.嵌入样式
内嵌和外链一种综合性的使用，不太常用 了解即可
<style type="text/css">
@import url("css/style.css");
</style>
以上4种引入方式，哪种优先级高？
会显示哪种样式 取决于哪种样式离修饰的目标越近
行内样式>剩下的其它三种形式，样式的显示取决于距离
2 .选择符
1.标签选择符：通过标签的名字来命名的
body{color:red;} p{color:red}
对html中的所有该标签都起作用
2.id选择器： 当标签中出现id属性的 那么可以使用id选择器
Id选择器 通常应用于某些标签中独有的样式
Id选择器的标识 是#
#one{
color:gold;
}
3.类选择器：当标签中出现class属性的时候 那么可以使用类选择器
类选择器 通常应用于某几个标签具有相同的样式
类选择器的标识：
.pink{
color:pink;
}
<p class="pink">如果得不到支持，iframe 是不可见的。</p>
4.全选择器 使用*号来表示 对整个html中的所有标签都起作用
*{font-size:36px;color:black;}
适用场景： 每种浏览器的默认属性的相关值都不一样，一般情况在网页开发的初始阶段，需要把所有浏览器的默认值 都归到一个统一的默认值下。然后再进行具体其他操作。
包含选择符：嵌套 中间用空格间隔 包含选择符的标识是空格
#content p{
color:red;
}
5.分组选择符 多个选择符同时具备同一种样式 使用分组选择符 标志 ,(逗号)
body,h1,div,p{
margin:0;
padding:0;
}
6.标签指定式选择符： 中间不会存在任何符号
h1#content{
color:blue;
}
7.组合选择符： 把前面7种选择符 综合的使用在一起
3. 控制字体
设置字号 font-size:12px
设置字色 color:#000000
设置字体 font-family:Arial,'宋体'
设置行高 line-height：150% line-height：1.5em
设置字体的粗细 font-weight：normal[正常]bold[粗体]
单位： px 和em 比较常用 建议大家经常使用百分比,适合做屏幕适配\
4. css特点
1、继承：
网页中子元素，将继承父元素的样式
例如：要控制段落p中的文字大小，可以直接给body标记加样式。
2、层叠：
网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式
后面定义的样式，会覆盖前面定义的样式
5. 控制文本
设置对象中文本缩进 text-indent：2em 可以为负值
文本水平对齐方式 text-align：left[左]center[中]right[右]
对象中空白处理 white-space：normal[自动换行] pre[换行和空白受保护]
nowrap[强制在同一行显示]
文本大小写控制 text-transform：none[正常大小]
capitalize[每个单词的第一个字母转换成大写]
uppercase[转换成大写]
lowercase[转换成小写]
元素的垂直对齐方式 vertical-align：
sub[设置文字为下标]
` super[设置文字为上标]
top[把元素的顶端与行中最高元素的顶端对齐]
text-botton[把元素的低端与父元素字体的低端对齐]
Text-align 它只能控制文本是否居中 不能控制div是否居中
如果想让div居中 要通过盒子模型中margin:0 auto;
所有的网页都要有hn标签 利于搜索引擎搜索
text-indent：-9999em；去隐藏页面的标题。
Text-transform 用于大小写字母转换
6. 伪类
未访问的链接 a:link{color:#ff0000}
已访问的链接 a:visited{color:#00ff00}
鼠标移动到链接上 a:hover{color:#ff00ff}
鼠标按下到链接上 a:active{color:#0000ff}
顺序: L -V-H -A
text-decoration: none;
8. 盒子模型
内边距 padding 用于填充内容内部
外边距 margin 用于描述浏览器边缘到内容的之间的距离
边框 border： 1px solid black
像素值 实线 颜色
Margin：100px 上下左右都是100px的距离
Margin：100px 200px； 上下100px、左右 200px
Margin：100px 200px 300px 上100px 左右 200px 下300px
Margin：100px 200px 300px 400px 上、右、下、左
Margin-top margin-left margin-right margin-bottom
边框也适用于4个方向
9 .块状元素和内联元素
1.块状元素 具有高度和宽度的属性，但是它不允许其他元素和它同行显示
代表标签 div p 等等
块状元素的默认属性： display:block;
2.内联元素 不具有宽度和高度的属性 允许其他元素与其同行显示
代表标签 a span
内联元素的默认属性 display:inline;
块状元素和内联元素之间可以进行转换
Display：none 可以隐藏元素
10. 控制背景
Html中 使用Img标签
Css中 使用background-image url();
背景 background:颜色 图片 平铺方式 固定方式 位置
背景颜色 background-color：#ccc；
背景图像 background-image：url（背景图像的位置及全称）
背景图像的重复方式 background-repeat:[repeat、no-repeat、repeat-x、repeat-y]
背景图像的位置 background-position：top[left center right]
center[left center right] bottom[left center right],坐标 y坐标[第一个值是水平位置，第二个值是垂 直位置。左上角是0 0.单位是像素（0px 0px）]
背景图像的依附方式 background-attachment;[scroll、fixed]
11 .布局
表格布局 table 淘汰掉了
浮动布局 float 属性
什么是浮动
浮动是css实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。
值:
none：不浮动
left：对象向左浮动，而后面的内容流向对象的右侧
right：对象向右浮动，而后面的内容流向对象的左侧
Left：
前面的元素浮动效果后，会对后面的元素产生影响
1.清除浮动
当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过消除浮动的方法来解决，浮动元素的影响
浮动的清理(clear)
值：
none：默认值。允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：左右两侧不允许有浮动对象
2.定位布局
属性：positon
描述：设置对象的定位方式
值：
static 静态定位：页面中的每一个对象的默认值。
absolute 绝对定位：将对象从文档流分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象。
relative 相对定位：对象不从文档中分离，通过设置left，right，top。bottom四个方向相对于自身位置进行相对定位
12 .overflow
visible[默认值。不剪切内容也不添加滚动条]，
auto[在必需时对象内容才会被裁切或者显示滚动条]，
hidden[ 不显示超过对象的尺寸的内容]，
scroll[总是显示滚动条]
3种隐藏元素的方法：
1.display：none
2.width：0 height0
3.overflow:hidden
4.<!DOCTYPE html>
5.<html lang="en">
6.<head>
7. <meta charset="UTF-8">
8. <title>Document</title>
9. <style type="text/css">
10. #box{
11. width: 300px;
12. height:300px;
13. overflow: hidden;
14. border: 1px solid black;
15. }
16.
17.
18.
19. </style>
20.</head>
21.<body>
22. <div id="box">
23. <img src="image/1.png"/>
24. </div>
25.</body>
26.</html>
13.zoom
缩放：
normal：默认值。使用对象的实际尺寸
number：百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值
zoom:1 解决ie6高度自适应问题
1965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
