前端-css总结
二.CSS
1.概述
1.样式包含
- 选择器
- 声明：（属性名：属性值;）
2.CSS基本格式
选择器{属性名：属性值;}
2.CSS样式的三种格式
优先级：内嵌式>内部式>外部式
-
内嵌式：在html标签的style中编写样式
<div style="color: red;">div> -
内部式：在该html页面的style编写样式
<style type="text/css"> .myclass{ color: red; } style> -
外部式：引入外部的css文件
用户浏览网页时，CSS样式文件会被暂时缓存；继续浏览其他页面时，会优先使用缓存中的CSS文件，避免重复从服务器中下载，从而提高网页的加载速度。外部样式表又分两种：链接外部样式表和导入外部样式表。
<link rel="stylesheet" href="my.css" />- rel属性用于设置链接目标文件与当前文档的关系，stylesheet表示外部文件的类型是CSS文件
@import 样式文件的引用地址; @import url("样式文件的引用地址"); @import css/style.css; /*此种方式仅IE支持，Firefox与Opera不支持*/ @import url("css/style.css"); /*此种方式IE、Firefox和Opera均支持，推荐使用*/两种外部样式表的区别在于：
- 隶属关系不同：
标签属于HTML标签，而@import是CSS提供的载入方式 - 加载时间及顺序不同：使用链接的CSS样式文件时，浏览器先将外部的CSS文件加载到网页当中，然后再进行编译显示；而@import导入CSS文件时，浏览器先将HTML结构呈现出来，再把外部的CSS文件加载到网页中，当网速较慢时会先显示没有CSS时的效果，加载完毕后再渲染页面。
- 兼容性不同：由于@import是CSS 2.1提出的，只有在IE 5以上的版本才能识别，而标签无此问题
- DOM模型控制样式：使用JavaScript控制DOM改变样式时，只能使用标签，而@import不受DOM模型控制
3.CSS选择器
- 基本选择器
- 通用选择器 * （权值0）
- 标签选择器 （权值1）
- 类选择器 （权值10）
- ID选择器（权值100）
- 组合选择器（通配符、子选择器、相邻选择器等的。如*、>、+,权值为0）
- 多元素选择器(,)
- 后代选择器( )
- 子选择器(>)
- 相邻兄弟选择器(+)
- 普通兄弟选择器(~)
- 属性选择器（权值10）
4.属性
文本属性
字体属性
| 属性名 | 描述 | |
|---|---|---|
| 文本颜色 | color | 设置文本的颜色 |
| 字体类型 | font-family | 设置文本的字体 |
| 字体风格 | font-style | 设置字体样式，取值normal（正常）、italic（斜体）、oblique（倾斜） |
| 字体变形 | font-variant | 设定小型大写字母，取值normal（正常）、small-caps（小型大写字母） |
| 字体加粗 | font-weight | 设置字体的粗细，取值可以是bolder（特粗体）、bold（粗体）、normal（正常）、lighter（细体）或100~900之间的9个等级 |
| 字体大小 | font-size | 设置文本的大小，值可以是绝对或相对值，其中绝对值从小到大依次xx-small、x-small、small、medium（默认）、large、x-large、xx-large；单位可以是pt或em，也可以采用百分比（%）的形式 |
| 行 间 距 | line-height | 设置文本的行高，即两行文本基线之间的距离 |
| 字体简写 | font | 属性的简写可用于一次设置元素字体的两个或更多方面，书写顺序font-style、font-variant、font-weight、font-size/line-height、font-family |
背景属性
| 功能 | 属性名 | 描述 |
|---|---|---|
| 背景颜色 | background-color | 设置元素的背景色 |
| 背景图像 | background-image | 设置背景图像 |
| 背景重复 | background-repeat | 设置背景平铺的方式，取值no-repeat（不平铺）、repeat-x（横向平铺）、repeat-y（纵向平铺）、repeat（x/y双向平铺） |
| 背景定位 | background-position | 设置图像在背景中的位置，取值：top、bottom、left、right、center或具体值、百分比 |
| 背景关联 | background-attachment | 设置背景图像是否随页面内容一起滚动，取值scroll（滚动）、fixed（固定） |
| 背景尺寸 | background-size | 用来设置背景图片的尺寸 |
| 填充区域 | background-origin | 规定background-position属性相对于什么位置来定位 |
| 绘制区域 | background-clip | 规定背景的绘制区域 |
| 背景简写 | background | 在一个声明中设置所有的背景属性 |
表格属性
表格和单元格都有独立的边框，使得表格具有双线条边框，通过border-collapse属性设置表格是单边框还是双边框
| 功能 | 属性名 | 描述 |
|---|---|---|
| 边框 | border | 设置表格边框的宽度 |
| 折叠边框 | border-collapse | 设置是否将表格边框折叠为单一边框，取值separate(双边框，默认)、collapse（单边框） |
| 宽度 | width | 设置表格宽度，可以是像素或百分比 |
| 高度 | height | 设置表格高度，可以是像素或百分比 |
| 水平对齐 | text-align | 设置水平对齐方式，比如左对齐、右对齐或者居中 |
| 垂直对齐 | vertical-align | 垂直对齐方式，比如顶部对齐、底部对齐或居中对齐 |
| 内边距 | padding | 设置表格中内容与边框的距离 |
| 单元格间距 | border-spacing | 设置相邻单元格的边框间的距离，仅用于双边框模式 |
| 标题位置 | caption-side | 设置表格标题的位置，取值top、bottom |
列表属性
列表属性用于改变列表项的图形符号
| 功 能 | 属性名 | 描述 |
|---|---|---|
| 列表类型 | list-style-type | 设置列表的图形符号，取值none、disc、circle、square、decimal、lower-roman、upper-roman、lower-latin、upper-latin等 |
| 列表项图像 | list-style-image | 将图形符号设为指定的图像，如list-style-image:url(xxx.gif) |
| 符号位置 | list-style-position | 设置列表图形符号的位置，取值inside、outside |
| 列表简写 | list-style | 一个声明中设置所有的列表属性，可以按顺序设置如下属性：list-style-type、list-style-position、list-style-image |
分类属性
如：cursor、display(将页面元素隐藏或显示)、visibility(隐藏，占文档流)、position、float和clear（清除浮动）等属性
1.cursor属性
鼠标样式
2.position属性
页面元素在页面流中的位置
| 属性值 | 描 述 |
|---|---|
| static | 正常流（默认值）。元素在页面流中正常出现，并作为页面流的一部分 |
| relative | 相对定位，相对于其正常位置进行定位，并保持其未定位前的形状及所占的空间 |
| absolute | 绝对定位，相对于浏览器窗口进行定位，将元素框从页面流中完全删除后，重新定位。当拖拽页面滚动条时，该元素随其一起滚动 |
| fixed | 固定定位，相对于浏览器窗口进行定位，将元素框从页面流中完全删除后，重新定位。当拖拽页面滚动条时，该元素不会随之滚动 |
（1）当position的属性值为relative、absolute或fixed时，可以使用元素的偏移属性left、top、right和bottom进行重新定位
（2）当position属性为static时，会忽略left、top、right、bottom和z-index等相关属性的设置
3.clear和float
float：float属性可以将元素从正常的页面流中浮动出来
| 属性值 | 描述 |
|---|---|
| left | 元素浮动到左边界 |
| right | 元素浮动到右边界 |
| none | 默认值，元素不浮动 |
clear
| 属性值 | 描述 |
|---|---|
| left | 清除左侧浮动产生的影响 |
| right | 清除右侧浮动产生的影响 |
| both | 清除两侧浮动产生的影响 |
| none | 默认值，允许浮动元素出现在两侧 |
5伪类和伪元素
-
伪类和伪元素是预先定义的、独立于文档元素的，能够被浏览器自动识别
-
处于特殊状态的元素称为伪类，而伪元素是指元素中特别的内容（元素的一部分）
-
伪元素权值1，伪类权值10
| 伪类名 | 描述 |
|---|---|
| :active | 向被激活的元素添加样式 |
| :focus | 向拥有键盘输入焦点的元素添加样式 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| :link | 向未被访问的链接添加样式，目前仅适用于超链接 |
| :visited | 向已被访问的链接添加样式，目前仅适用于超链接 |
| :readonly | 向只读元素添加样式 |
| :checked | 向被选中的元素添加样式 |
| :disabled | 向被禁用的元素添加样式 |
| :enabled | 向可用的元素添加样式 |
伪元素表示某元素的部分内容，虽然在逻辑上存在，但在文档树（又称DOM模型）中不存在与之对应的部分。
| 伪元素 | 描述 |
|---|---|
| :first-line | 向文本的首行添加特殊样式 |
| :first-letter | 向文本的第一个字母或汉字添加特殊样式 |
| :before | 在元素之前添加内容 |
| :after | 在元素之后添加内容 |
6.css页面布局
盒子模型是由内容（content）、边框（border）、内边距(padding)和外边距(margin)四部分组成。
1.内容
内容区拥有width、height和overflow三个属性
-
overflow属性用于当content中的信息太多，并超出内容区所占的范围时，通过该属性来指定溢出内容的处理方式，具体如下表所示。
值 描 述 visible 默认值，溢出的内容不会被修剪，会呈现在元素框之外 hidden 溢出的内容将不可见 scroll 溢出的内容会被修剪，但是可以通过滚动条查看隐藏部分 auto 由浏览器决定如何处理溢出部分
2.边框
通过border-top-style、border-right-style、border-bottom-style和border-left-style四个属性对“上右下左”
| 值 | 描 述 |
|---|---|
| border-top-width | 设置元素的上边框的宽度 |
| border-top-style | 设置元素的上边框的样式 |
| border-top-color | 设置元素的上边框的颜色 |
| border-top | 上边框的简写形式，用于把上边框的所有属性设置到一个声明中；可以按如下顺序设置属性：border-top-width、border-top-style、border-top-color |
| border-width | 边框宽度的简写形式，用于设置元素所有边框的宽度，或者单独地为各边框设置宽度 |
| border-style | 边框样式的简写形式，用于设置元素所有边框的样式，或者单独地为各边设置边框样式 |
| border-color | 设置元素的所有边框中可见部分的颜色，或者单独地为各边设置边框颜色 |
| border | 边框的简写形式，用于把针对四个边的属性设置在一个声明 |
| border-radius | 圆角边框的简写形式，用于设置四个border-*-radius属性，CSS 3新增 |
| box-shadow | 向框添加一个或多个阴影，CSS 3新增 |
-
div { border-width:10px 20px 30px 40px; }
当边框宽度有4个参数时，将按“上、右、下、左”的顺序作用到边框上
当边框宽度有2个参数时，将按“上+下、左+右”的顺序作用到边框上
当边框宽度有1个参数时，四个方向的边框宽度取值相同
边框宽度的取值也可以使用关键字进行设置
-
border-style
值 描 述 none 无边框 hidden 隐藏边框 dotted 定义点状边框，在大多数浏览器中呈现为实线 dashed 定义虚线，在大多数浏览器中呈现为实线 solid 定义实线 double 定义双线，双线的宽度等于border-width的值 groove 定义3D凹槽边框。其效果取决于border-color的值 ridge 定义3D菱形边框。其效果取决于border-color的值 inset 定义3D凹边，其效果取决于border-color的值 outset 定义3D凸边，其效果取决于border-color的值
3.内边距padding&外边距margin
-
内边距（padding）是指内容区与边框之间的距离，通过padding-top、padding-right、padding-bottom和padding-left属性对元素的“上右下左”四个方向
的内边距进行设置
-
外边距(margin) 是指元素与元素之间的距离，即围绕在元素边框之外的空白区域，通过外边距可以为元素创建额外的"空间”。外边距与内边距相似，
可以对“上下左右”四个外边距分别进行设定，也可以统一进行设定。
外边距合并（叠加）：
- 外边距合并(叠加)是指当两个垂直外边距相遇时，将形成一个外边距。合并后的外边距的高度，等于合并前的两个外边距中的较大者。
- 外边距合并时，只有普通的页面流中块级元素的垂直外边距会发生外边距的合并。行内元素、浮动元素和绝对定位元素之间的外边距不会进行合并。
-
上下元素间的外边距合并
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距将发生合并
- 包含元素间的外边距合并
当一个元素包含在另一个元素中，父元素没有内边距和边框，且子元素没有外边距时，父元素与子元素的上边距(或下外边距)也会发生合并。
-
空元素的外边距合并
空元素只包含外边距而无边框和填充时，上外边距与下外边距就会碰到了一起，元素的 上下外边距也会产生合并。当合并后的外边距再次遇到其他元素的外边距时，还会发生合并操作
7.div和css布局优点
页面布局的核心目标是实现页面的结构与外观相分离，常见的布局方式有三种：表格布局、框架布局和DIV+CSS布局。
表格布局不足：
- 当页面布局需要调整时，往往需要重新制作表格。
- 而多重表格的嵌套时，由于标签的层次过深，页面不利于搜索引擎的抓取。
框架布局不足：
- 一个页面会依赖多个页面，不方便进行管理
- 搜索引擎对框架中的内容检索时存在困难，有些搜索引擎只会检索框架集页面，导致页面检索不完整
- 框架对打印支持效果不够好，只能实现分框架页面的打印
- 在HTML 5中不再支持
标签。
DIV+CSS布局优点：
- 可以简化页面的代码量，提高页面的浏览速度
- 其结构清晰，代码嵌套层次少，容易被搜索引擎检索
- 页面结构与表现相分离，便于维护与扩展。
总结：
- 样式是CSS的基本单元，每个样式包含选择器和声明两部分内容
- 内嵌样式是将CSS样式嵌入到HTML标签中混合使用，可以对某个标签单独定义样式
- 内部样式表将CSS样式与HTML标签分离，使得HTML更加整洁
- 外部样式表是将样式表以单独的文件进行存放，然后将该文件引导网页中的方式
- 通常情况下，样式的优先级由高到低的顺序是“内嵌>内部>外部>浏览器缺省默认”
- CSS基本选择器包括通用选择器、标签选择器、类选择器和ID选择器
- CSS组合选择器包括元素选择器、后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器
- 属性选择器可以根据元素的属性及属性值来选择元素
- 常见的样式属性包括文本属性、字体属性、背景属性、列表属性、表格属性、列表属性和分类属性
- 伪类是指处于特殊状态的元素，而伪元素是指元素中特别的内容
- 盒子模型是由content、border、padding和margin四部分组成
- 内容区（content）是盒子模型的中心，也是盒子模型必不可缺少的部分
- 元素的边框（border）就是围绕元素内容和内边距的一条或多条线
- 边框圆角由两个圆弧共同构成，HR代表圆角的水平半径，VR代表圆角的垂直半径
- 内边距（padding）是指内容区与边框之间的距离，可以对“上右下左”四个方向的进行设置
- 外边距（margin）是指元素与元素之间的距离
- 外边距合并（叠加）是指当两个垂直外边距相遇时，将形成一个外边距
- DIV+CSS布局