- CSS 简介
- CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
- 多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
- 层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部，最高的优先权）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
- CSS 基础语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：
p {
text-align: center;
color: black;
font-family: arial;
}
CSS三大特性— 继承、 优先级和层叠。
继承：即子类元素继承父类的样式;
优先级：是指不同类别样式的权重比较;
层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。
- 继承及其问题
根据 CSS，子元素从父元素继承属性（CSS分：可以和不可以继承的属性）
https://www.cnblogs.com/thislbq/p/5882105.html
一、无继承性的属性
1、display：规定元素应该生成的框的类型
2、文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
3、盒子模型的属性：width、height、margin 、margin-top
4、背景属性：background
5、定位属性：float、clear、position、top等
二、有继承性的属性
1、字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
3、元素可见性：visibility
4、表格布局属性： border-collapse、border-spacing、empty-cells等
- css优先级
当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
①同一级别中后写的会覆盖先写的样式
内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
!important的优先级是最高的
②、优先级相同时，则采用就近原则，选择最后出现的样式;
③、继承得来的属性，其优先级最低;
*css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化。
- CSS选择器的解析原则
选择器定位DOM元素是从右往左的方向，这样的好处是尽早的过滤掉一些无关的样式规则和元素
https://blog.csdn.net/jinboker/article/details/52126021
- 简洁、高效的css
所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素。
1.不要再ID选择器前使用标签名
解释：ID选择是唯一的，加上标签名相当于画蛇添足了，没必要。
2.不要在类选择器前使用标签名
解释：如果没有相同的名字出现就是没必要，但是如果存在多个相同名字的类选择器则有必要添加标签名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}
3.尽量少使用层级关系；
#divclass p.colclass{color:red;}改为 .colclass{color:red;}
4.使用类选择器代替层级关系（如上）
- CSS 样式
- css背景
background(简写属性)
background-color background-image background-position background-repeat
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
- CSS文本属性
color direction(设置文本方向) line-height(行高) letter-spacing(设置字符间距)
text-align（对齐元素中的文本）text-decoration（向文本添加修饰）
text-indent（首行缩进） text-shadow（设置文本阴影）
- CSS字体属性
font font-family font-size font-style font-weight
- 设置a链接的样式
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
当为链接的不同状态设置样式时，请按照以下次序规则：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
- CSS 列表属性(list)
list-style-image 将图象设置为列表项标志
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
- CSS 表格
表格文本对齐
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：
CSS Table 属性
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
- CSS 轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
CSS 边框属性
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
- CSS 框模型概述
1) CSS 框模型概述
- w3c标准盒模型
- width和height不包括padding和border
- ie盒模型
- width和height包含padding和border
- ie8以上都是w3c标准盒模型 ie5极其以下都是ie盒子模型，ie6、ie7、ie8在混杂模式下ie盒模型，在标准模式下是w3c标准盒模型
(注意：ie6在混杂模式下一定是Ie盒模型，而ie7、ie8在混杂模式下不一定是ie盒模型)
- css3中的box-sizing
- content-box w3c标准盒模型
- boder-box IE盒模型 / 怪异盒模型
2) 外边距合并
外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
几种解决办法：
1：父容器：border：1px solid;（不能是0px）
2：父容器：overflow: hidden;（或auto）
3：父容器：padding：1px；（不能是0或auto，其他的任意数值都可以）
4：父容器或子容器： float：left；（不能是auto）
5：父容器或子容器：position：absolute；
6：子容器：display：inline-block;(或是inline-table)
7：相邻元素：任意一个添加float：left（不能是auto）等
- CSS 定位
定位：它允许你定义元素框相对于其正常位置应该出现的位置
1）CSS 相对定位
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
2）CSS 绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
（简单理解，就是子元素设置绝对定位，父盒子需要设置相对定位）
3）CSS 浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
注意：子元素浮动会导致父元素没有高度，需要清除浮动
浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。
解决方法：
1.父元素设置 overflow：hidden
2.使用:after伪元素
需要注意的是 :after是伪元素（Pseudo-Element）， 不是伪类
等
.clearfix:after {
content:".";
display:block; height:0; visibility:hidden; clear:both;
}
.clearfix { *zoom:1; }
- CSS 选择器
基础选择器
-
- CSS 标签选择器
h1 {color:blue;}
h2 {color:silver;}
-
- CSS 属性选择器
对有 href 属性的锚（a 元素）应用样式
a[href] {color:red;}
-
- CSS 通配符选择器
* {margin:0; padding:0;}
-
- CSS 类选择器
类命名规范：字母开头，字母/数字/下划线/ -
.important {color:red;}
-
- CSS id选择器
不能重复，id名是唯一的
#intro {font-weight:bold;}
复合选择器
1）CSS 后代选择器
h1 em {color:red;}
后代选择器：即两个元素之间的层次间隔可以是无限的。
2）CSS 子元素选择器
h1 > strong {color:red;}
只选择某个元素的子元素
3）CSS 相邻兄弟选择器
h1 + p {margin-top:50px;}
可选择紧接在另一元素后的元素，且二者有相同父元素。
4）CSS 伪类
锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
伪类与 CSS 类
伪类可以与 CSS 类配合使用：
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
CSS2 - :first-child 伪类
您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解，所以有必要举例来说明。考虑以下标记：
p:first-child {font-weight: bold;}
- CSS 高级
- CSS中的显示模式及模式之间的互相转换
块级元素：
- 独占一行；
- 如果没有设置宽度，那么默认和父元素一样宽；
- 如果设置了宽度，那么就根据设置的来显示；
常见的块级元素：
div、p、h1...h6、ol、ul、dl、table、address、blockquote 、form
行内元素：
- 不会独占一行；
- 如果没有设置宽度，那么默认和内容一样宽；
- 行内元素是不可以设置宽度和高度的。
strong em del ins b I s u span a…
行内块级元素：
1.为了能够让元素既能够不独占一行，又可以设置宽度和高度，那么就出现了行内块级元素。例如 img
img input textarea select
模式之间的互相转换
display的常用取值：
block 块级
inline 行内
inline-block 行内块级
-
- CSS 水平对齐
1. 块元素对齐
1.使用 margin 属性来水平对齐(margin:0 auto;水平居中)
2.使用 position 属性进行左和右对齐
3.使用 float 属性来进行左和右对齐
2.文本元素的对齐：
1. Text-align:center;
-
- 标签语义化
语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字，起到了强调的作用。语义化的网页的好处，最主要的就是对搜索引擎友好。
根据使用场景选择正确的 HTML 元素（有时被错误的称为“标签”）。
例如，使用 h1 元素创建标题，p 元素创建段落，a 元素创建链接等等。正确的使用 HTML 元素对于可访问性、可重用性以及编码效率都很重要。
- CSS 规范
- 属性编写的顺序
1.显示属性：display/list-style/position/float/clear …
2.自身属性（盒模型）：width/height/margin/padding/border
3.背景：background
4.行高：line-height
5.文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
6.其他：cursor/z-index/zoom/overflow
7.CSS3属性：transform/transition/animation/box-shadow/border-radius
8.如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后。
9.链接的样式请严格按照如下顺序添加： a:link -> a:visited -> a:hover -> a:active
-
- 代码性能优化
1.合并margin、padding、border的-left/-top/-right/-bottom的设置，尽量使用短名称。
2.选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式设置。
3.注意选择器的性能，不要使用低性能的选择器。
4.禁止在css中使用*选择符。
5.除非必须，否则，一般有class或id的，不需要再写上元素对应的tag。
6.0后面不需要单位，比如0px可以省略成0，0.8px可以省略成.8px。
7.如果是16进制表示颜色，则颜色取值应该大写。
8.如果可以，颜色尽量用三位字符表示，例如#AABBCC写成#ABC 。
9.如果没有边框时，不要写成border:0，应该写成border:none 。
10.尽量避免使用AlphaImageLoader 。
11.在保持代码解耦的前提下，尽量合并重复的样式。
12.background、font等可以缩写的属性，尽量使用缩写形式 。
3）字体规则
1.为了防止文件合并及编码转换时造成问题，建议将样式中文字体名字改成对应的英文名字，如：黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei，几个单词中间有空格组成的必须加引号)
2.字体粗细采用具体数值，粗体bold写为700，正常normal写为400
3.font-size必须以px或pt为单位，推荐用px（注：pt为打印版字体大小设置），不允许使用xx-small/x-small/small/medium/large/x-large/xx-large等值
4.为了对font-family取值进行统一，更好的支持各个操作系统上各个浏览器的兼容性，font-family不允许在业务代码中随意设置
4）其他规范
1.不要轻易改动全站级CSS和通用CSS库。改动后，要经过全面测试。
2.避免过小的背景图片平铺。
3.尽量不要在CSS中使用!important
4.绝对不要在CSS中使用”*”选择符
5.层级(z-index)必须清晰明确，页面弹窗、气泡为最高级（最高级为999），不同弹窗气泡之间可在三位数之间调整；普通区块为10-90内10的倍数；区块展开、弹出为当前父层级上个位增加，禁止层级间盲目攀比。
6.背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按照模块、业务、页面来划分均可。
5）通用格式规范
1.缩进，一次缩进2个空格，不要使用 tab 或者混合 tab 和空格的缩进。
扫一扫
688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
