CSS—Cascade Style Sheet层叠样式表
CSS是用来装修标签的。
1、CSS添加到HTML中
内联样式- 在HTML元素中使用"style" 属性。
如<div style=”color:#000000”>xxxxx</div>
- 内部样式表 -在HTML文档头部 区域使用
<head>
<title>初步认识CSS</title>
<style type="text/css">
h1{ font-size:20px;color:red }
h2{ font-size:20pt;color:green }
</style>
</head>
注：px是像素单位，pt是印刷单位
- 外部引用 - 使用外部 CSS 文件。如：
<style type="text/css">
@import url()
</style>
• 外部引用 - 使用外部 CSS 文件。如：
<head>
<title>外联CSS文件</title>
<link rel=stylesheet href="03.css" type="text/css">
</head>
最好的方式是通过外部引用CSS文件。
对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。.
注意：当多种修饰方式重复在同一标签时，采用就近原则
关于link标签的解析：
<link>标签定义文档与外部资源的关系，最常见的用途是链接样式表。
属性：
- rel: 必需。定义当前文档与被链接文档之间的关系。
- href：定义被链接文档的位置。（url地址）
- type：规定被链接文档的 MIME 类型。
2、选择符
选择符：选择要修饰哪些标签 、给哪些标签指定什么样的装修风格，选择哪些属性值/名
- 基本选择器：
-
标签名：通过标签名来直接指定修饰风格。 h1{ font-size:20px;color:red }
-
Class选择器（类选择符）：通过“.”来指定对应的修饰风格，class可以重复
p.code{font-size:25pt;color:green}//“.”前面指定标签名，匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配。
.code{font-size:25pt;color:green}//只要标签的class=code，就采用指定风格装修。 -
ID选择器：通过“#id”来指定装修风格。ID不能重复，独一无二，js中会使用到。
#code{font-size:20pt;color:red}
注意：选择器优先级 标签内的style > id > class > 标签名
- 扩展选择器
一次定义多个选择符的样式：
- 组合选择器(同级选择器)，逗号隔开：
h1，p{font-size:25pt;color:green} //p和h1的装修风格 - 关联选择器(嵌套选择器)，空格隔开：
p a{font-size:20pt;color:yellow} //p标签下的a标签装修风格 - 伪类选择器：用于装饰超链接，如下表：
| Pseudo-Classes伪类 | Description简介 | 备注 |
| :link | 设置a对象在未被访问前的样式表属性--- 原始状态 | 对于无href属性（特性）的a对象，此伪类不发生作用 |
| :hover | 设置对象在其鼠标悬停时的样式表属性---悬停状态 | |
| :active | 设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性---点击状态 | |
| :visited | 设置a对象在其链接地址已被访问过时的样式表属性 | |
| :focus | 设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式表属性 | |
| :first-child | 设置对象（Selector1）的第一个子对象（Selector2）的样式表属性 | |
| :first | 设置页面容器第一页使用的样式表属性。仅用于@page规则 | |
| :left | 设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则 | |
| :right | 设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则 | |
| :lang | 设置对象使用特殊语言的内容样式表属性 |
3、属性设置：
-
边距属性：margin-[top/left/buttom/right] xx em 外部边框距离
-
颜色与背景属性：background-xx
-
填充属性：padding-[top/left/buttom/right] xx em 内部填充的距离
内部填充的内容距离边框的距离。 -
边框属性：border-
border-xx-width n em | thin | medium | thick
border-style: Dotted | dash | solid | double | groove | ridge | inset | outset
border-color:xxx
border-xx: 边框xx的所有属性 (top/buttom/left/right)
统一设定 border:边框线条粗细 线条类型 颜色 -
图文混排：width、height、float(文字环绕)、clear(去除环绕)
将img进行float‘
-
列表属性：display(显示与否)、whitespace(空白部分)、list-style-type(编号类型)、list-style-image(编号图案)、list-style-position(编号类型)、etc
-
鼠标属性：设置鼠标形状（hand、wait等等）。Style=”cursor:move”
-
定位属性：
position：【位置】Absolute | relative | static- absolute：将对象从文档流中拖出，后面的内容会补齐在它的原本位置，但是该对象会漂浮在上层。然后可以通过Left/right/width/height来进行绝对定位。
- relative：对象不可层叠，不会将对象从文档流中拖出，同样可以使用left/right/width/height来进行定位
left/right/width/height：横纵位置/宽高位置
clip：【剪切】shape/auto
overflow：【内容超出时】visible/hidden/scroll/auto
z-index：【Z轴效果：立体效果】
visibility：【可见性】visible/hidden/inherit
-
滤镜属性：了解
4、CSS的盒子模型
使用div+css来布局，划分模块，可以自由组合移动。
- 边框(border)：
- 内边距(padding)
- 外边距(margin)
CSS的布局的漂浮
Float：属性值(left/right)
Position :absolute
图像签名：将文字显示在图像上面
可以通过position：absolute将其从文本流中拖出，然后设置相应的定位，再者可以通过设置z-index来调整设置层叠覆盖。
总结
1， css与HTML的四种结合方式
2， css的基本选择器：标签名 / class / ID
3， css的扩展选择器：嵌套，组合，伪类元素(超链接状态)
4， 盒子模型：
- 边框 border: 2px solid red
<border-top/bottom/left/right> - 内边距 padding:20px
<padding-top/bottom/left/right> - 外边距 margin:20px
<margin-top/bottom/left/right> - 对数据进行操作，需要把数据放到一个区域里面
<div>，模块化
5， 布局的漂浮 float: left/right
6， 布局的定位 position: absolute/relative/static
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
