文章目录
CSS基础
简介
- CSS指层级样式表(
Cascading Style Sheets) - 样式定义
如何显示在HTML元素 - 样式通常储存在
样式表中 - 把样式添加到HTML4.0中，是为了
解决内容和表现分离的问题 外部样式表可以极大提高工作效率- 外部样式表通常储存在
CSS文件中 - 多个样式定义可
层叠为一
提示
- 所有的主流浏览器均支持层叠样式表
- 层叠次序，
优先级依次增高- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于head标签内部)
- 内联样式(位于Html元素内)
语法
selector {declaration1;declaration2;… }
- selector 选择器
- declaration 声明，如color：red
提示
- 颜色值有
单词、十六进制、RGB值 - 如果值为若干单词，要给值
添加引号 - 定义不止一个声明，需要用
分号将每个声明分开 空格对CSS无影响- CSS对
大小写不敏感，但Class和id名称对大小写是敏感
高级语法
分组
- 被分组的选择器可以
分享相同的声明 - 用
逗号将需要分组的选择器分开
继承及其问题
- 子元素从父元素
继承属性 - 4.0浏览器无法理解继承，但是可以理解组选择器
- 子元素创建特殊规则，
摆脱继承父元素
派生选择器
派生选择器
- 通过依据元素在其位置的
上下文关系来定义样式。 - Css1中，通过上下文关系应用规则的选择器被称为
上下文选择器
-Css2中，称为派生选择器
ID选择器
- Id选择器为标有
特定id的html选择器指定特定元素 - id选择器以
“#”定义 - id属性只能在每个Html文档中
出现一次 - 在现代布局中，id选择器常常用于
建立派生选择器 - id选择器
作为派生选择器可以被多次使用 - id选择器也可以单独使用
- 在老版本windows/ie下，特别定义选择器所属元素，如
div#id
类选择器
- 类选择器以一个
点号表示 - 类名的
第一个字符不能使用数字！因为无法在Mozilla或FireFox中起作用
属性选择器
注意
只有规定了！DOCTYPE，IE7和IE8才支持属性选择器，在IE6及更低版本，不支持属性选择
- [attribute] 用于选取带有指定属性的元素
- [attribute=value] 用于选取带有指定属性和值的元素
- [attribute~=value] 用于选取属性值中包含指定词汇的元素
- [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
- [attribute^=value] 匹配属性值以指定值开头的每个元素
- [attribute$=value] 匹配属性值以指定值结尾的每个元素
- [attribute*=value] 匹配属性值中包含指定值的每个元素
创建CSS
注意
- 不要在
属性值和单位之间留有空格。留有空格尽在IE6有效，其他无法正常工作。 - 如果某些属性在
不同的样式表中被同样的选择器定义，属性将从更具体的样式表中被继承。
插入样式表的方法有
三种
外部样式表
当样式应用到多页面时，外部样式表是理想的选择内联样式表
当单个文档有特殊的样式时，应该使用内部样式表。内联样式
将变现和内容混合在一起，内联样式会损失掉样式表的许多优势
CSS样式
背景
注意
- background-color不能继承，默认值是
transparent - background-image不能被继承，所有
背景属性都不能被继承
文本
注意
- 可以为所有块级元素应用text-indent,但
无法将该属性应用于行内元素，图像之类的替换元素上也无法应用text-indent属性 - 如果一个块级元素的首行中有一个图像，它会随该行的其余文本
移动 - 可以通过
左内边距或者外边距使块内元素首行缩进 - 将块级元素
居中，通过在元素上设置左右边距实现 - 显示用文本装饰去除链接下划线，那么锚与正常文本之间在视觉上的唯一差别是
颜色。 - IE 7以及更早版本的浏览器
不支持white-space pre属性 - IE7和FireFox2.0浏览器中不是很好的支持
pre-wrap、pre-line属性
字体
字体系列名称
通用字体系列-拥有相似外观的字体系统组合(比如“Serf”或“Monospace”)特定字体系列-具体的字体系列(比如“Times”或“Courier”)
5种通用字体系列
Serif字体Sans-serif字体Monospace字体Curisive字体Fanatasy字体
Font Size设置文本大小
绝对值- 将文本设置为指定的大小
- 不允许用户在所有浏览器中改变文本大小
- 绝对大小在确定了输出的物理尺寸时很有用
相对大小- 相对于周围的元素设置大小
- 允许用户在浏览器中改变文本大小
注意
- 普通文本默认大小是
16像素 - 在所有浏览器均有效的是
body元素以百分比形式设置默认font-size值
链接
链接四种状态
a:link-普通的、未被访问的链接a:visited-用户已访问的链接a:hover-鼠标指针位于链接的上方a:active-鼠标被点击的时刻
状态次序规则
a:hover必须位于a:link和a:visited之后a:active必须位于a:hober之后
常见链接样式
text-decoration去除下划线background-color规定链接背景色
列表
- 有序列表
ol、无序列表ul
表格
注意
- table、th、td元素都有
独立的边框 - 表格显示为单边框，使用
border-collapse属性
轮廓
- 绘制于
元素周围的一条线，位于边框边缘的外围，起到突出元素的作用
CSS 框模型
框架概述
CSS框模型(Box Model)规定了元素框处理元素内容，内边距、边框和外边距的方式- 元素框
最内部分是实际的内容，直接包围内容的是内边距，内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的。 - 增加内边距、边框、外边距
不会影响内容区域的尺寸，会增加元素狂的总尺寸 - 内边距、边框、外边距可以应用于一个元素的
所有边，也可以应用于单独的边 - 外边距可以是
负值，在很多情况下都要使用负值的外边距 - 为了避免浏览器width兼容性，将
内边距或外边距添加到元素的父元素和子元素 - 术语翻译
element元素padding内边距，也有资料称为填充border边框margin外边距，也有资料称为空白或空白边
内边距
- 接受长度值或百分比值，
不允许负值 - 百分数值是相对于其父元素的width、height计算的
边框
- 边框绘制在元素的
背景之上 CSS2指出背景只延伸到内边距，CSS2.1更改为元素的背景是内容、内边距和边框区的背景- 单边属性要写在简写属性
之后 - 边框出现，必须声明一个边框样式
- 默认边框颜色为元素本身前景色，没有声明边框颜色，与
文本颜色或继承父元素颜色 - 在
IE7之前，IE/WIN没有提供对transparent的支持。根据元素color值设置边框颜色
外边距
- Netscape和IE对body标签定义的默认边距值是8px，Opera不是
- Opera 将内边距默认是定义为8px。为了兼容，在body中设置默认值
###外边距合并
概念
- 当两个
垂直外边距相遇时，形成一个外边距 - 合并后的外边距的高度等于两个发生合并的外边距的高度中的
较大者 - 只有在
普通文档流中块框的垂直外边距才会发生外边距冲突。行内框、浮动框或者绝对定位之间的外边距不会合并。
定位
三种基本定位机制
- 普通流
- 浮动
- 绝对定位
相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于他在普通流中的位置
相对定位
- 使用相对定位时，无论是否移动，元素仍
占据原来的空间，移动元素会导致它覆盖其他框
绝对定位
- 绝对定位使元素的位置与文档流无关，不占据空间
- 绝对定位的元素的位置相对于最近的已定位祖先元素，如果没有，相对于最初的包含块
- 根据用户代理的不同，最初的包含块可能是
画布或html元素 - 绝对定位的框与
文档流无关，所以会覆盖其他元素，可通过设置z-index控制堆放顺序
浮动
脱离文档流移动，直至碰到包含框边缘或者上一个浮动元素的边缘
元素选择器
元素选择器
- 最
常见的css选择器是元素选择器 - 元素选择器又称为
类型选择器
分组
- 选择器分组
- 用
逗号分离，定义一个规则 - 通过分组，将某些类型的样式"压缩"在一起，得到更
简洁的样式表
- 用
- 通配符选择器
- 显示为一个
*号
- 显示为一个
- 声明分组
- 在各个声明的最后使用
分号。 - 在规则最后一个声明加上
分号是一个好习惯
- 在各个声明的最后使用
- 结合
选择器和声明的分组
类选择器
- 类选择器以一种
独立于文档元素的方式指定样式 - 可以
单独使用，也可以和其他元素结合使用 - 只有在
标记文档后，才能使用类选择器 - 结合元素选择器
- 一个class值中可能包含一个
词列表，各个词之间用空格分隔 - 将两个类选择器链接在一起，仅可以选择
同时包含这些类名的元素(类名的顺序不限) - 在
IE7之前版本，不同平台IE都不能正确处理多类选择器
ID选择器
- ID选择器前面有一个
“#”号-也称为棋盘或井号 - ID选择器中可
忽略通配选择器 - 引用
id属性中的值 - 类选择器还是ID选择器
- 在一个Html中，ID选择器
仅会使用一次 - ID属性
不允许有以空格间隔的此列表 - 可以
独立于元素先择ID
- 在一个Html中，ID选择器
- 区分大小写
- 类选择器和ID选择器都
区分大小写
- 类选择器和ID选择器都
属性选择器
- 简单属性选择器
- 选择有某个属性的值，不论属性值是什么
- 根据具体属性值选择
- 只选择特定属性的元素
- 属性和属性值完全匹配
- 属性与属性值完全匹配，包括空格
- 根据部分属性值选择
- 等号前使用~
- 部分属性选择器和点号类名记法的区别
- 当属性为class时，完全等价
- ~= 适用于任何属性，不仅仅是class
- 字串匹配属性选择器
后代选择器
- 容易被
忽略的地方，两个元素之间的层次间隔是无限的。
子元素选择器
只选择某个元素的子元素，使用>号链接
相邻兄弟选择器
- 选择
紧接在另一个元素后的元素，二者有相同的父元素 - 使用
+号，称为相邻兄弟结合符
伪类
- 语法
- selector ： pseudo-class{property： value}
- 锚伪类
- 伪类和css类
- CSS2-：first-child伪类
- 选择父元素中第一个子元素中的所有指定元素
- 错误认为:first-child选择器是选择元素的第一个子元素
- 必须声明<!DOCTYPE>才能在IE中生效
- CSS2-：lang伪类
- 为不同的语言定义特殊的规则
###w 伪元素
- 为不同的语言定义特殊的规则
- 语法
- selector：pseudo-element{property：value；}
- :first-line
- 向文本首行设置特殊样式
- :first-letter
- 向文本的首字母设置特殊样式
- 伪元素和css类
- 多重为元素
- CSS2:before
- 在元素的内容前面插入新内容
- CSS2:after
- 在元素内容之后插入新内容
CSS高级
对齐
- 两种方式
margin:auto- 绝对定位
position - 使用
float属性
- 通过左右外边距设置为
margin：auto，对其块元素 - 除非已经声明<!DOCTYPE>，否则margin：auto在IE8及更早版本
无效 - 如果宽度是
100%，margin：auto对齐方式无效果 - 绝对定位元素会从
正常流中删除，并且能够交替元素 - IE8及更早的版本存在一个问题：如果容器元素设置
指定宽度，并省略了<!DOCTYPE>,会在右侧增加17px的外边距。所以当使用position|float属性时，始终设置！DOCTYPE属性
导航条
- 导航栏 = 链接列表
媒介
- @media
- 在相同的样式表中，使用不同的规则针对不同的媒介
- @media screen{ }
- 媒介类型
all所有的媒介设备aural语音和音频合成器braille盲人用点字法触觉回馈设备embossed用于分页的盲人用点字法打印机handheld小的手持设备print打印机projection方案提示，比如幻灯片screen电脑显示器tty使用固定密度字母栅格的媒介。比如电传打印机和终端tv电视机类型的设备
注意事项
- Internet Explorer Behaviors
- behaviors 是一种通过css像html元素添加行为的方法
- 只有Internet Explorer支持bahaviors属性
- 使用js或html dom 替代
CSS属性整理
背景
background简写属性，将背景属性设置在一个声明中background-attachment背景图像是否固定或者随着页面的其余部分滚动background-color设置元素的背景颜色background-image把图像设置为背景background-position设置图像的起始位置background-repeat设置背景图像是否及如何重复
文本
color设置文本颜色direcation设置文本方向line-height设置行高letter-spacing设置字符间距text-align对其元素中的文本text-decoration向文本添加修饰text-indext缩进元素中文本的首行text-shadow设置文本阴影，Css2包含该属性，但Css2.1没有保留该属性text-transform控制元素中的字母unicode-bidi设置文本方向white-space设置元素中空白的处理方式word-spacing设置字间距
字体
font简写属性。把所有针对字体的属性设置在一个声明中font-family设置字体系列font-size设置字体尺寸font-size-adjust当首选字体不可用时，对替换字体进行智能缩放(Css2.1已删除该属性)font-stretch对字体进行水平拉伸。(Css2.1中已删除该属性)font-style设置字体风格font-variant以小型大写字体或者正常字体显示文本font-weight设置字体粗细
列表
list-style简写属性list-style-image将图像设置为列表项标志list-style-position设置列表中列表项标志的位置list-style-type设置列表项标志的类型
表格
border-collapse设置是否把表格边框合并为单一的边框border-spacing设置分割单元格边框的距离caption-side设置表格标题的位置empty-cells设置是否显示表格中的空单元格table-layout设置显示单元、行、列的算法
轮廓
outline在一个声明中设置所有的轮廓属性outline-color设置轮廓的颜色outline-style设置轮廓的样式outline-width设置轮廓的宽度
内边距
padding简写属性padding-bottom设置元素的下边间距padding-left设置元素左边间距padding-right设置元素右边间距padding-top设置元素上边间距
边框
border简写属性border-style设置元素所有边框的样式，或者单独为各边设置边框样式border-width简写属性，用于所有或单边设置边框宽度border-color简写属性，用于所有或单边设置边框颜色
外边距
margin简写属性margin-top|left|right|bottom单边边距
定位
position元素放置到一个静态的、相对的、绝对的或固定的位置top|right|bottom|left定位元素与其包含块边界之间的偏移overflow设置当前元素内容一处区域时发生的事情clip设置元素的形状。元素被剪如这个形状之中，然后显示出来vertical-align设置元素的垂直对齐方式z-index设置元素的堆叠顺序
选择器操作手册
[attribute]选取带有指定属性的元素[attribute=value]选取带有指定属性和值的元素[attribute~=value]选取属性值中包含指定词汇的元素[attribute|=value]选取带有以指定值开头的属性值的元素，该值必须是整个单词[abbribute^=value]匹配属性值以指定值开头的每个元素[attribute$=value]匹配属性值以指定值结尾的每个元素[attribute*=value]匹配属性值中包含特定值的每个元素
伪类
:active向被激活的元素添加样式:focus向拥有键盘输入焦点的 元素添加样式:hover当鼠标悬浮在元素上方时，向元素添加样式:link向未被访问的链接添加样式:visited向已被访问的链接添加样式:first-child向元素的第一个子元素添加样式:lang向带有指定lang属性的元素添加样式
伪元素
:first-letter文本的第一个字母添加特殊样式:first-line文本的首行添加特殊样式:before元素内容之前添加内容:after元素之后添加内容
尺寸
height设置元素高度line-height设置行高max-height设置元素最大高度max-width设置元素最大宽度min-height设置元素最小高度min-width设置元素最小宽度width设置元素宽度
分类属性
clear设置元素的侧面是否允许其他浮动元素cursor规定当指向某元素之上显示的指针类型display设置是否及如何显示元素float定义元素在哪个方向浮动position把元素放置到一个静态的、相对的、绝对的或固定的位置中visibility设置元素是否可见或不可见
透明度
filter：alpha(opacity=40)forIE8opacity:0.6 CSS3 standard
媒介类型
all所有的媒介设备aural语音和音频合成器braille盲人用点字法触觉回馈设备embossed用于分页的盲人用点字法打印机handheld小的手持设备print打印机projection方案提示，比如幻灯片screen电脑显示器tty使用固定密度字母栅格的媒介。比如电传打印机和终端tv电视机类型的设备
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
