CSS（Cascading Style Sheet，“级联样式表”/“层叠样式表”）
模盒型：（元素实际占用尺寸：width+padding+border+margin）
选择器：
布局：
浮动、定位（static、relative、absolute、fixed）、层级（z-index）：定位（position）：fixed、absolute
块元素（block）/行内元素（inline）；
代码风格：单行横向、多留空白；
书写顺序：显示属性、自身属性和文本属性；
选择器优化：
从右到左的解析顺序
选择器的效率
属性继承（选择器的减少）
简化选择器
属性继承：
文本相关的样式会继承
列表相关的样式会继承
颜色属性会继承
属性简写：字体、边框、背景、内边距、外边距、
CSS reset:
布局：隐藏和显示（display：null和visibility：hidden）：
CSS W3C标准学习：
1. 功能：样式定义/存储，提高工作效率；
CSS：样式；HTML：内容；
2. CSS语法：
（选择器+声明(属性+值)）
h1 {
text-align: center;
color: red;
font-size: 14px;
}
3. 选择器：
(1) 元素选择器（分组）
(2) 派生选择器：
h1 strong {
...
}
(3) id选择器（可做派生选择器）：前面有个#
HTML中的定义 ---> CSS中的定义
<p id=”red”></p> ---> #red {color: red;}
(4) 类选择器（以一种独立于文档元素的方式来指定样式）
（可做派生选择器）：前面有个.
HTML中的定义 ---> CSS中的定义
<h1 class=”center”></h1> ---> .center {text-align: center}
<td class=”fancy”></td> ---> td.fancy { ; ;}
(5) 属性选择器：前面有个[]
[属性] {声明} ---> [属性=值] {声明}
[attribute]/[attribute（=、~=、|=、^=、$=、*=）value]
(6) 类还是id选择器的区别：
id选择器只能在文档中用一次；
不能使用id词列表；
id能包含更多含义。
(7) 后代/子元素/相邻兄弟选择器：
(8) 伪类（用于向某些选择器添加特殊的效果）：
:active / :focus / :hover / :link / :visited / :first-child / :lang
(9) 伪元素：
:fist-letter / :first-line / :before / :after
4. CSS创建（插入样式表的三种方式）：
(1) 外部样式表（多个页面，单独保存，link链接）：
<head>
<link rel=”stylesheet” type=”text/css” href=”mysheet”>
“样式mysheet中单独保存”
</head>
(2) 内部样式表（针对某个文档需要的特殊样式）：
<head>
<style type=”text/css”>
...样式
</style>
</head>
(3) 内联样式（表现和内容混杂，慎用）：
(4) 多重样式（外部和内部多重作用）
5. CSS背景
(1) 背景色：background-color属性；
(2) 背景图像：background-image属性；
(3) 背景重复：background-repeat属性；
(4) 背景定位：background-position属性；
(5) 背景关联：background-attachment属性；
6. CSS文本
(1) 缩进文本：text-indent属性；
(2) 水平对齐：text-align属性；
(3) 字间隔：word-spacing属性；
(4) 字母间隔：letter-spacing属性；
(5) 字符转换：text-transform属性；
(6) 文本装饰：text-decoration属性；
(7) 处理空白页：white-space属性；
(8) 文本方向：direction属性；
7. CSS字体：
(1) 指定字体系列：font-family属性；
(2) 字体风格：font-style属性；
(3) 字体加粗：font-weight属性；
(4) 字体大小：font-size属性；
(5) ...
8. CSS链接a：
(1) 四种状态：
1) a:link（普通的、未被访问的链接）
2) a:visited（已访问）
3) a:hover（鼠标指针位于链接上方）
4) a:active（链接被点击的时刻）
(2) 链接样式：
9. CSS列表（允许放置、改变列表项标志）：
ul {...}，list-style-type / list-style-image / list-style-position；list-style /
10. CSS表格（改善表格外观）：
边框、宽高度、文本对齐、内边距...
11. CSS轮廓（样式、颜色和宽度）
outline / outline-color / outline-style / outline-width
12. CSS框模型：
(1) 边框（border）：
1) 样式：border-style属性（四个边都可定义）；
2) 宽度：border-width；
3) 颜色：border-color；
(2) 内边距（padding）：
1) 单边距：top/left/right/bottom；
2) 百分比数值；
(3) 外边距（margin）：可值复制。
(4) 外边距合并（组合）：
13. CSS定位（允许对元素操作）
(1) 思想：一切皆为框；
(2) 定位属性：static（正常）/ relative（偏离）/ absolute（删除）/ fixed
(3) 相对定位：#box_relative{position: relative; ; ;}
(4) 绝对定位：#box_rtive{position: absolute; ; ;}
(5) 浮动：float属性和clear属性；
14. CSS高级：
(1) 文本对齐：
1) margin属性（设置为“auto”）
2) positon属性（absolute）
3) float属性
(2) 尺寸
（height/line-height/max-height/max-width/min-height/min-width/width）：
(3) 分类：
（clear/cursor/display/float/position/visibility）
(4) 导航=链接列表（<ul>和<li>）：
横起来：li{float:left;}
display: inline（行内元素）
display: block（区域可点）
(5) 图片库：
(6) 媒介类型：
17. CSS3（最新标准）:
(1) CSS3边框：
1) 圆角边框：border-radius属性；
2) 边框阴影：box-shadow属性；
3) 边框图片：border-image属性；
(2) CSS3 背景：
① 背景图片尺寸：background-size；
② 北京图片定位区域：background-origin；
③ 绘制区域：background-clip；
(3) CSS3文本效果：
① 文本阴影：text-shadow；
② 自动换行：word-wrap；
③ ...
(4) CSS3字体：@font-face规则；
(5) CSS3 2D转换：
① 位置移动：translate()方法；
② 顺时针给定角度：rotate()方法；
③ 尺寸增加减少：scale()方法；
④ 翻转：skew()方法；
⑤ 组合：matrix()方法；
(6) CSS3 3D转换：
① x轴：rotateX()方法；
② y轴：rotateY()方法；
(7) 过渡：transition；
(8) 动画：@keyframes规则；（animation属性）
(9) 多列：
① 创建多列：column-count；
② 规定列之间间隔：column-gap；
③ 列之间属性：column-rule；
(10) 用户界面：
① Resize;
② Box-sizing;
③ Outline-offset;
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
