本文全面介绍了CSS的使用方法，包括背景、字体、文本、链接、列表、表格、轮廓、框模型等样式属性，以及定位、选择器等核心概念，是前端开发者必备的CSS样式手册。
CSS
一、CSS简介
1.CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素，样式通常存储在样式表中
- 外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一
2.样式表优先权
所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中内联样式拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 < head> 标签内部）
- 内联样式（在 HTML 元素内部）
其他样式按照从上到下顺序覆盖
3.CSS语法
- CSS 规则由两个主要的部分构成：选择器，声明
- 选择器通常是您需要改变样式的 HTML 元素，每条声明由一个属性和一个值组成，每个属性有一个值
- 属性和值被冒号分开
- 如果值为若干单词，则要给值加引号
- 如果多重声明，则需要用分号将每个声明分开
- 选择器的分组用逗号分开，被分组的选择器就可以分享相同的声明
4.插入样式表
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
- 样式需要应用于很多页面时，应使用外部样式表
- 外部样式表可以在任何文本编辑器中进行编辑
- 文件不能包含任何的 html 标签
- 样式表以 .css 扩展名进行保存
- 属性值与单位之间不能留有空格
内部样式表
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
单个文档需要特殊的样式时，应使用内部样式表
内联样式
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
**提示：**如果要定义不止一个声明，则需要用分号将每个声明分开。
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势，慎用
二、CSS样式
1.CSS背景（Background）
| 属性 | 描述 |
|---|---|
| background | 在一个声明中设置所有的背景属性 |
| background-color | 设置元素的背景颜色 |
| background-image | 设置元素的背景图像 |
| background-repeat | 设置是否、如何重复背景图像 |
| background-position | 设置背景图像的开始位置 |
| background-attachment | 设置背景图像是否固定或者随着页面其余部分滚动 |
| background-clip | 规定背景图像的绘制区域 |
| background-origin | 规定背景图片的定位区域 |
| background-size | 规定背景图片的尺寸 |
background-color
| 值 | 描述 | 举例 |
|---|---|---|
| color_name | 规定颜色值为颜色名称的背景颜色 | red |
| hex_number | 规定颜色值为十六进制的背景颜色 | #ff0000 |
| rgb_numner | 规定颜色为rgb代码的背景颜色 | rgb(255,0,0) |
| transparent | 默认，背景颜色为透明 | transparent |
| inherit | 规定应从父元素继承此属性的设置 | inherit |
background-image
| 值 | 描述 | 举例 |
|---|---|---|
| url(URL) | 指向图像的路径 | url(/i/eg03.gif) |
| none | 默认值，不显示背景图像 | none |
| inherit | 规定应从父元素继承此属性的设置 | inherit |
background-repeat
| 值 | 描述 | 举例 |
|---|---|---|
| repeat | 默认，背景图像在垂直和水平方向重复 | repeat |
| repeat-x | 背景图像在水平方向重复 | repeat-x |
| repeat-y | 背景图像在垂直方向重复 | repeat-y |
| no-repeat | 背景图像只显示一次，不重复 | no-repeat |
| inherit | 规定应从父元素继承此属性的设置 | inherit |
background-position
| 值 | 描述 | 举例 |
|---|---|---|
| (top center bottom) (center left right) | (垂直方向位置)(水平方向位置) 如果仅规定了一个关键词，那么第二个值默认是"center" | top |
| x% y% | 默认值：0% 0%，左上角。第一个值水平位置，第二个值是垂直位置。如果仅规定一个值，另一个值默认为50% | 35% 40% |
| xpos ypos | 左上角：0 0。第一个值是水平位置，第二个值是垂直位置。如果只规定了一个值，另一个值将是50% | 5px 20px |
background-attachment
| 值 | 描述 | 举例 |
|---|---|---|
| scroll | 默认值。背景图像会跟随页面其余部分滚动而滚动 | scroll |
| fixed | 当页面的其余部位滚动时，背景图像不会移动 | fixed |
| inherit | 规定应从父元素继承此属性的设置 | inherit |
background-clip
| 值 | 描述 | 举例 |
|---|---|---|
| border-box | 背景被裁剪到边框盒 | border-box |
| padding-box | 背景被裁剪到内边距框 | padding-box |
| content-box | 背景被裁剪到内容框 | content-box |
background-origin
| 值 | 描述 | 举例 |
|---|---|---|
| border-box | 背景图像相对于边框盒来定位 | border-box |
| padding-box | 背景图像相对于内边距框来定位 | padding-box |
| content-box | 背景图像相对于内容来定位 | content-box |
background-size
| 值 | 描述 | 举例 |
|---|---|---|
| length | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值默认设置为 “auto” | 50px |
| percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值默认设置为 “auto” | 30% |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 | |
| contain | 把图像扩展至最大尺寸，以使宽度和高度完全适应内容区域 | contain |
注意
- background-position可以混合使用 % 和 position 值。
- 像素为0时，不写单位。
- IE浏览器不支持inherit，综合考虑拒绝用IE浏览器。
- 浏览器整个页面尺寸
2.CSS字体（Font）
| 属性 | 描述 |
|---|---|
| font | 在一个声明中设置所有字体属性 |
| font-family | 规定文本的字体系列 |
| font-style | 规定文本的字体样式 |
| font-weight | 规定字体的粗细 |
| font-size | 规定文本的字体尺寸 |
| font-size-adjust | 为元素规定aspect值 |
| font-stretch | 收缩或拉伸当前的字体系列 |
| font-variant | 规定是否以小型大写字母的字体显示文本 |
font-family
| 值 | 描述 | 举例 |
|---|---|---|
| family-name generic-family | 用于某个元素的字体族名称或/及类族名称的一个优先表。默认值：取决于浏览器。 | Times New Roman |
| inherit | 规定应该从父元素继承字体系列 | inherit |
font-style
| 值 | 描述 | 举例 |
|---|---|---|
| normal | 默认值。浏览器显示一个标准的字体样式 | normal |
| italic | 浏览器会显示一个斜体的字体样式 | italic |
| oblique | 浏览器会显示一个倾斜的字体样式 | oblique |
| inherit | 规定应该从父元素继承字体样式 | inherit |
font-weight
| 值 | 描述 | 举例 |
|---|---|---|
| normal | 默认值。定义标准的字符 | normol |
| bold | 定义粗体字符 | bold |
| bolder | 定义更粗的字符 | bolder |
| lighter | 定义更细的字符 | lighter |
| 100-900 | 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold | 200 |
| inherit | 规定应该从父元素继承字体的粗细 | inherit |
font-size
| 值 | 描述 | 举例 |
|---|---|---|
| xx-small x-small small medium large x-large xx-large | 把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium | small |
| smaller | 把字体尺寸设置为比父类更小的尺寸 | smaller |
| larger | 把字体尺寸设置为比父类更大的尺寸 | larger |
| length | 把字体尺寸设置为固定值 | 20px\2em |
| % | 把字体尺寸设置为父类的一个百分比值 | 50% |
| inherit | 规定应该从父元素继承字体尺寸 | inherit |
font-size-adjust
| 值 | 描述 | 举例 |
|---|---|---|
| none | 默认。如果此字体不可用，则不保持此字体的 x-height | none |
| number | 定义字体的 aspect 值比率 |
font-stretch
| 值 | 描述 | 举例 |
|---|---|---|
| normal | 默认值。把缩放比例设置为标准 | normol |
| wider | 把伸展比例设置为更进一步的伸展值 | wider |
| narrower | 把收缩比例设置为更进一步的收缩值 | narrower |
| ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded | 设置 font-family 的缩放比例。“ultra-condensed” 是最宽的值，而 “ultra-expanded” 是最窄的值 | expanded |
font-variant
| 值 | 描述 | 举例 |
|---|---|---|
| normal | 默认值。浏览器会显示一个标准的字体 | normal |
| small-caps | 浏览器会显示小型大写字母的字体 | small-caps |
| inherit | 规定应该从父元素继承此属性的值 | inherit |
注意
- 斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
- 字体默认为微软雅黑，可以同时设置多个字体，只要前面的字体浏览器不支持，就用它后面的字体。
- 字体大小单位
- px：谷歌浏览器默认字体大小为16px，最小是12px。
- rem：16px*n
- em：父级字体*n
- %：父级字体*%
- W3C 推荐文本使用 em 尺寸单位，1em 等于当前的字体尺寸。
3.CSS文本（Text）
| 属性 | 描述 |
|---|---|
| color | 设置文本的颜色 |
| direction | 规定文本的方向 / 书写方向 |
| line-height | 设置行高，文字位于中间 |
| text-align | 规定文本的水平对齐方式 |
| text-decoration | 规定添加到文本的装饰效果 |
| text-indent | 规定文本块首行的缩进 |
| text-transform | 控制文本的大小写 |
| white-space | 规定如何处理元素中的空白 |
| letter-spacing | 设置字符间距 |
| word-spacing | 设置单词间距 |
color
| 值 | 描述 | 举例 |
|---|---|---|
| color_name | 规定颜色值为颜色名称的颜色 | red |
| hex_number | 规定颜色值为十六进制的颜色 | #ff0000 |
| rgb_numner | 规定颜色为rgb代码的颜色 | rgb(255,0,0) |
| inherit | 规定应从父元素继承此属性的设置 | inherit |
direction
| 值 | 描述 | 举例 |
|---|---|---|
| ltr | 默认。文本方向从左到右 | ltr |
| rtl | 文本方向从右到左 | rtl |
| inherit | 规定应该从父元素继承此属性的值 | inherit |
line-height
| 值 | 描述 | 举例 |
|---|---|---|
| normal | 默认。设置合理的行间距 | normal |
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距 | 2 |
| length | 设置固定的行间距 | 20px/2em |
| % | 基于当前字体尺寸的百分比行间距 | 50% |
| inherit | 规定应该从父元素继承此属性的值。 | inherit |
text-align
| 值 | 描述 | 举例 |
|---|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定 | left |
| right | 把文本排列到右边 | right |
| center | 把文本排列到中间 | center |
| justify | 实现两端对齐文本效果 | justify |
| inherit | 规定应该从父元素继承 text-align 属性的值 | inherit |
text-decoration
| 值 | 描述 | 举例 |
|---|---|---|
| none | 默认。定义标准的文本 | none |
| underline | 定义文本下的一条线 | underline |
| overline | 定义文本上的一条线 | overline |
| line-through | 定义穿过文本下的一条线 | line-through |
| blink | 定义闪烁的文本 | blink |
| inherit | 规定应该从父元素继承此属性的值 | inherit |
text-indent
| 值 | 描述 | 举例 |
|---|---|---|
| length | 定义固定的缩进。默认值：0 | 2em\15px |
| % | 定义基于父元素宽度的百分比缩进 | %50 |
| inherit | 规定应该从父元素继承此属性的值 | inherit |
text-transform
| 值 | 描述 | 举例 |
|---|---|---|
| none | 默认。定义带有大写和小写字母的标准文本 | none |
| capitalize | 文本中的每个单词以大写字母开头 | capitalize |
| uppercase | 定义仅有大写字母 | uppercase |
| lowercase | 定义仅有小写字母 | lowercase |
| inherit | 规定应该从父元素继承此属性的值 | inherit |
white-space
| 值 | 描述 | 举例 |
|---|---|---|
| normal | 默认。空白会被浏览器忽略 | normal |
| pre | 空白会被浏览器保留 | pre |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 < br> 标签为止 | nowrap |
| pre-warp | 保留空白符序列，但是正常地进行换行 | pre-warp |
| pre-line | 合并空白符序列，但是保留换行符 | pre-line |
| inherit | 规定应该从父元素继承此属性的值 | inherit |
letter-spacing
| 值 | 描述 | 举例 |
|---|---|---|
| normal | 默认。规定字符间没有额外的空间 | normal |
| length | 定义字符间的固定空间（允许使用负值） | 10px\2em |
| inherit | 规定应该从父元素继承此属性的值 | inherit |
word-spacing
| 值 | 描述 | 举例 |
|---|---|---|
| normal | 默认。定义单词间的标准空间 | normal |
| length | 定义单词间的固定空间 | length |
| inherit | 规定应该从父元素继承此属性的值 | inherit |
注意
-
出现…省略号：
div{ white-space:nowrap; /*换行方式：不换行*/ overflow:hidden; /*超出部分隐藏*/ text-overflow:ellipsis; /*文字超出部分用...显示*/ }
4.CSS链接
| 链接的状态 | 描述 |
|---|---|
| a:link | 普通的、未被访问的链接 |
| a:visited | 用户已经访问的链接 |
| a:hover | 鼠标指针位于链接的上方 |
| a:active | 链接被点击的时刻 |
当为链接的不同状态设置样式时，按照爱恨原则次序，顺序不可颠倒，即lovehate (lvha)
链接的样式很多，常用的有背景颜色，字体颜色，文字装饰
5.CSS列表（List）
| 属性 | 描述 |
|---|---|
| list-style | 在一个声明中设置所有的列表属性 |
| list-style-image | 将图象设置为列表项标记 |
| list-style-position | 设置列表项标记的放置位置 |
| list-style-type | 设置列表项标记的类型 |
list-style-image
| 值 | 描述 | 举例 |
|---|---|---|
| url(‘URL’) | 图像的路径 | url(’/i/eg_arrow.gif’) |
| none | 默认。无图形被显示 | none |
| inherit | 规定应该从父元素继承此 属性的值 | inherit |
list-style-position
| 值 | 描述 | |
|---|---|---|
| inside | 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 | inside |
| outside | 默认值，保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 | outside |
| inherit | 规定应该从父元素继承此属性的值 | inherit |
list-style-type
| 值 | 描述 |
|---|---|
| none | 无标记 |
| disc | 默认。标记是实心圆 |
| circle | 标记是空心圆 |
| square | 标记是实心方块 |
| decimal | 标记是数字 |
| decimal-leading-zero | 0开头的数字标记(01, 02, 03, 等) |
| lower-roman | 小写罗马数字(i, ii, iii, iv, v, 等) |
| upper-roman | 大写罗马数字(I, II, III, IV, V, 等) |
| lower-alpha | 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等) |
| upper-alpha | 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等) |
| lower-greek | 小写希腊字母(alpha, beta, gamma, 等) |
| lower-latin | 小写拉丁字母(a, b, c, d, e, 等) |
| upper-latin | 大写拉丁字母(A, B, C, D, E, 等) |
| hebrew | 传统的希伯来编号方式 |
| armenian | 传统的亚美尼亚编号方式 |
| georgian | 传统的乔治亚编号方式(an, ban, gan, 等) |
| cjk-ideographic | 简单的表意数字 |
| hiragana | 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名） |
| katakana | 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名） |
| hiragana-iroha | 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） |
| katakana-iroha | 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） |
6.CSS表格（Table）
| 属性 | 描述 |
|---|---|
| border-collapse | 规定是否合并表格边框 |
| border-spacing | 规定相邻单元格边框之间的距离 |
| caption-side | 规定表格标题的位置 |
| empty-cells | 规定是否显示表格中的空单元格上的边框和背景 |
| table-layout | 设置用于表格的布局算法 |
border-collapse
| 值 | 描述 | 举例 |
|---|---|---|
| separate | 默认值，边框会被分开。不会忽略 border-spacing 和 empty-cells 属性 | separate |
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 | collapse |
| inherit | 规定应该从父元素继承此属性的值 | inherit |
border-spacing
| 值 | 描述 | 举例 |
|---|---|---|
| length length | 规定相邻单元的边框之间的距离，使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。 | 50px |
| inherit | 规定应该从父元素继承此属性的值。 | inherit |
caption-side
| 值 | 描述 | 举例 |
|---|---|---|
| top | 默认值。把表格标题定位在表格之上 | top |
| bottom | 把表格标题定位在表格之下 | bottom |
| inherit | 规定应该从父元素继承此属性的值 | inherit |
empty-cells
| 值 | 描述 | 举例 |
|---|---|---|
| hide | 不在空单元格周围绘制边框。 | hide |
| show | 在空单元格周围绘制边框。默认。 | show |
| inherit | 规定应该从父元素继承此属性的值 | inherit |
table-layout
| 值 | 描述 | 举例 |
|---|---|---|
| automatic | 默认。列宽度由单元格内容设定 | automatic |
| fixed | 列宽由表格宽度和列宽度设定 | fixed |
| inherit | 规定应该从父元素继承此属性的值 | inherit |
7.CSS轮廓 （Outline）
| 属性 | 描述 |
|---|---|
| outline | 在一个声明中设置所有的轮廓属性 |
| outline-color | 设置轮廓的颜色 |
| outline-style | 设置轮廓的样式 |
| outline-width | 设置轮廓的宽度 |
outline-color
| 值 | 描述 | 举例 |
|---|---|---|
| color_name | 规定颜色值为颜色名称的轮廓颜色 | red |
| hex_number | 规定颜色值为十六进制值的轮廓颜色 | #ff0000 |
| rgb_number | 规定颜色值为 rgb 代码的轮廓颜色 | rgb(255,0,0) |
| invert | 默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见 | invert |
| inherit | 规定应该从父元素继承轮廓颜色的设置 | inherit |
outline-style
| 值 | 描述 |
|---|---|
| none | 默认。定义无轮廓 |
| dotted | 定义点状的轮廓 |
| dashed | 定义虚线轮廓 |
| solid | 定义实线轮廓 |
| double | 定义双线轮廓。双线的宽度等同于 outline-width 的值 |
| groove | 定义 3D 凹槽轮廓。此效果取决于 outline-color 值 |
| ridge | 定义 3D 凸槽轮廓。此效果取决于 outline-color 值 |
| inset | 定义 3D 凹边轮廓。此效果取决于 outline-color 值 |
| outset | 定义 3D 凸边轮廓。此效果取决于 outline-color 值 |
| inherit | 规定应该从父元素继承轮廓样式的设置 |
outline-width
| 值 | 描述 | 举例 |
|---|---|---|
| thin | 规定细轮廓 | thin |
| medium | 默认。规定中等的轮廓 | medium |
| thick | 规定粗的轮廓 | thick |
| length | 规定轮廓粗细的值 | 10px |
| inherit | 规定应该从父元素继承轮廓宽度的设置 | inherit |
三、CSS框模型(盒子)
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。
- element : 元素。
- padding : 内边距，填充。
- border : 边框。
- margin : 外边距，空白或空白边。
边框内的空白是内边距，边框外的空白是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
背景应用于由内容和内边距、边框组成的区域。
内边距不能为负值，外边距可以是负值，而且在很多情况下都要使用负值的外边距。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OZiaQnnN-1573100493857)(C:\Users\lenovo\Desktop\web前端\Web前端笔记\ct_boxmodel.gif)]
1.reset CSS
浏览器在解析某些标签的时候，本身就自带了一些样式，可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式
* {
margin: 0;
padding: 0;
}
2.边框（Border）
每个边框有 3 个方面：宽度、样式、颜色
| 属性 | 描述 |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中 |
| border-bottom-color | 设置元素的下边框的颜色 |
| border-bottom-style | 设置元素的下边框的样式 |
| border-bottom-width | 设置元素的下边框的宽度 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中 |
| border-left-color | 设置元素的左边框的颜色 |
| border-left-style | 设置元素的左边框的样式 |
| border-left-width | 设置元素的左边框的宽度 |
| border-right | 简写属性，用于把右边框的所有属性设置到一个声明中 |
| border-right-color | 设置元素的右边框的颜色 |
| border-right-style | 设置元素的右边框的样式 |
| border-right-width | 设置元素的右边框的宽度 |
| border-top | 简写属性，用于把上边框的所有属性设置到一个声明中 |
| border-top-color | 设置元素的上边框的颜色 |
| border-top-style | 设置元素的上边框的样式 |
| border-top-width | 设置元素的上边框的宽度 |
border-style
| 值 | 描述 |
|---|---|
| none | 定义无边框 |
| hidden | 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线 |
| solid | 定义实线 |
| double | 定义双线。双线的宽度等于 border-width 的值 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值 |
| outset | 定义 3D outset 边框。其效果取决于 border-color 的值 |
| inherit | 规定应该从父元素继承边框样式 |
border-width
| 值 | 描述 |
|---|---|
| thin | 定义细的边框 |
| medium | 默认。定义中等的边框 |
| thick | 定义粗的边框 |
| length | 允许您自定义边框的宽度 |
| inherit | 规定应该从父元素继承边框宽度 |
border-color
| 值 | 描述 |
|---|---|
| color_name | 规定颜色值为颜色名称的边框颜色（比如 red） |
| hex_number | 规定颜色值为十六进制值的边框颜色（比如 #ff0000） |
| rgb_number | 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)） |
| transparent | 默认值。边框颜色为透明 |
| inherit | 规定应该从父元素继承边框颜色 |
3.内边距（Padding）
| 属性 | 描述 |
|---|---|
| padding | 简写属性。作用是在一个声明中设置元素的所内边距属性 |
| padding-bottom | 设置元素的下内边距 |
| padding-left | 设置元素的左内边距 |
| padding-right | 设置元素的右内边距 |
| padding-top | 设置元素的上内边距 |
padding
| 值 | 描述 | 举例 |
|---|---|---|
| auto | 浏览器计算内边距 | auto |
| length | 规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0 | 1cm |
| % | 规定基于父元素的宽度的百分比的内边距 | 10% |
| inherit | 规定应该从父元素继承内边距 | inherit |
padding-bottom、padding-left、padding-right、padding-top
| 值 | 描述 | 举例 |
|---|---|---|
| length | 规定以具体单位计的固定的（上下左右）内边距值，比如像素、厘米等。默认值是 0 | 1px |
| % | 定义基于父元素宽度的百分比（上下左右）内边距。此值不会如预期地那样工作于所有的浏览器中 | 20% |
| inherit | 规定应该从父元素继承下内边距 | inherit |
4.外边距（Margin）
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性 |
| margin-bottom | 设置元素的下外边距 |
| margin-left | 设置元素的左外边距 |
| margin-right | 设置元素的右外边距 |
| margin-top | 设置元素的上外边距 |
margin
| 值 | 描述 |
|---|---|
| auto | 浏览器计算外边距 |
| length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px |
| % | 规定基于父元素的宽度的百分比的外边距 |
| inherit | 规定应该从父元素继承外边距 |
margin-bottom、margin-left、margin-right、margin-top
同上
外边距合并
- 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
- 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
- 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
5.补充：值复制
top,right,bottom,left
- 如果缺少左外边距的值，则使用右外边距的值。
- 如果缺少下外边距的值，则使用上外边距的值。
- 如果缺少右外边距的值，则使用上外边距的值。
即
- 4个属性值: 上 右 下 左
- 3个属性值: 上 (右左) 下
- 2个属性值: (上下) (左右)
- 1个属性值: (上右下左)
6.注意
- 盒子标签：div标签
- div居中：
margin:0 auto; - margin调整内部div外边距；
- padding调整外部div内边距，它调整的是自身大小，所以如果不希望破坏外观，则尽量使用margin布局（padding有可能撑大外盒子，但如果是margin过大，则盒子内容会被挤出，但不会改变盒子本身大小）；
- border内部div和外部div定位时需要找到边界，外部div如没有设置border，则内部div的margin设置时会一直往上找，直到找到边界位置。
- 内部相邻div间的margin，取值为两个div各自设置margin的最大值，而不是相加值。
四、CSS定位（父相子绝）
1.CSS定位属性（Positioning）
| 属性 | 描述 |
|---|---|
| position | 规定元素的定位类型，把元素放置到一个静态的、相对的、绝对的、或固定的位置中 |
| bottom | 设置定位元素下外边距边界与其包含块下边界之间的偏移 |
| top | 设置定位元素的上外边距边界与其包含块上边界之间的偏移 |
| right | 设置定位元素右外边距边界与其包含块右边界之间的偏移 |
| left | 设置定位元素左外边距边界与其包含块左边界之间的偏移 |
| overflow | 规定当内容溢出元素框时发生的事情 |
| clip | 剪裁绝对定位元素，元素被剪入这个形状之中，然后显示出来 |
| vertical-align | 设置元素的垂直对齐方式(适用于inline、inline-block、img) |
| z-index | 设置元素的堆叠顺序 |
| display | 规定元素应该生成的框的类型 |
| clear | 规定元素的哪一侧不允许其他浮动元素 |
| cursor | 规定要显示的光标的类型（形状） |
| float | 规定框是否应该浮动 |
| visibility | 规定元素是否可见 |
position
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定 |
| fixed | 生成固对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） |
| inherit | 规定应该从父元素继承 position 属性的值 |
top、bottom、right、left
| 值 | 描述 |
|---|---|
| auto | 默认值。通过浏览器计算底部的位置 |
| % | 设置以包含元素的百分比计的底边位置。可使用负值 |
| length | 使用 px、cm 等单位设置元素的底边位置。可使用负值 |
| inherit | 规定应该从父元素继承此属性的值 |
overflow
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
| inherit | 规定应该从父元素继承 overflow 属性的值 |
clip
| 值 | 描述 |
|---|---|
| shape | 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left) |
| auto | 默认值。不应用任何剪裁 |
| inherit | 规定应该从父元素继承 clip 属性的值 |
vertical-align
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上 |
| sub | 垂直对齐文本的下标 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
| text-bottom | 把元素的底端与父元素字体的底端对齐 |
| length | |
| % | 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值 |
z-index
按照装饰、布局、内容的堆叠顺序
| 值 | 描述 |
|---|---|
| auto | 默认，number：0。堆叠顺序与父元素相等 |
| number | 设置元素的堆叠顺序。可以为负，默认为0 |
| inherit | 规定应该从父元素继承 z-index 属性的值 |
display
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符，可设置宽高 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符，不能设置宽高 |
| inline-block | 行内块元素。元素在一行内显示，可设置宽高 |
| list-item | 此元素会作为列表显示 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示 |
| table | 此元素会作为块级表格来显示（类似 < table>），表格前后带有换行符 |
| inline-table | 此元素会作为内联表格来显示（类似 < table>），表格前后没有换行符 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 < tbody>） |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 < thead>） |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 < tfoot>） |
| table-row | 此元素会作为一个表格行显示（类似 < tr>） |
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 < colgroup>） |
| table-column | 此元素会作为一个单元格列显示（类似 < col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似 < td> 和 < th>） |
| table-caption | 此元素会作为一个表格标题显示（类似 < caption>） |
| inherit | 规定应该从父元素继承 display 属性的值 |
clear
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左右两侧均不允许浮动元素 |
| none | 默认值。允许浮动元素出现在两侧 |
| inherit | 规定应该从父元素继承 clear 属性的值 |
cursor
| 值 | 描述 |
|---|---|
| url | 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标 |
| default | 默认光标（通常是一个箭头） |
| auto | 默认。浏览器设置的光标 |
| crosshair | 光标呈现为十字线 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西） |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东） |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西） |
| s-resize | 此光标指示矩形框的边缘可被向下移动（南） |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西） |
| text | 此光标指示文本 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏） |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球） |
float
| 值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置 |
| inherit | 规定应该从父元素继承 float 属性的值 |
visibility
| 值 | 描述 |
|---|---|
| visible | 默认值。元素是可见的 |
| hidden | 元素是不可见的 |
| collapse | 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden” |
| inherit | 规定应该从父元素继承 visibility 属性的值 |
2.固定定位(fixed)
相对于浏览器窗口定位，随着内容一起滚动，脱离文档流
3.相对定位(relative)
相对定位是“相对于”元素在文档中的初始位置发生位置改变
关键词: left / top / right / bottom 来改变位置
特性:
- 相对定位元素不脱离文档流
- 相对定位元素不影响元素本身特性
- 如果没有关键词来改变位置,元素本身不会发生任何变化
- 位置改变,原来的位置一直占据着
4.绝对定位(absolute)
相对于已经定位的上级元素来发生位置改变，定位上级包括:fixed relative absolute，没有上级定位元素参考,相对于body
关键词: left / top / right / bottom
特性:
- 完全脱离文档流
- 行内元素支持宽高
- margin:auto;无效
绝对定位使元素的位置与文档流无关，因此不占据空间，所以它们可以覆盖页面上的其它元素，可以通过设置 z-index 属性来控制这些框的堆放次序。
5.浮动(float)
浮动定义:使元素不完全脱离文档流,按照指定方向发生移动,遇到父级边界或相邻浮动元素就停下来
-
浮动几种情况
一个元素浮动,碰到父级边界就停止
浮动元素父级宽度不够,浮动元素掉下来
浮动元素往下掉,前面的浮动元素高出普通元素,就会被卡住
-
清除浮动
-
给浮动元素父级添加高度
缺点:只适合固定高度布局
-
浮动元素最后面添加一个空标签,并清除浮动
clear:both;缺点:浮动布局多的情况下,空标签增多
-
父级定义overflow:hidden;
缺点:不能和定位一起使用,定位超出父级盒子会被隐藏
-
父级添加伪元素:after
常用方法.clearfix::after{ display: block; clear:both; content:""; }<div class="box clearfix"> <div class="left"></div> <div class="right"></div> </div>
-
-
浮动与行内快的区别
inline-block会出现间隙
垂直对齐方式不同
五、CSS选择器
权重：id > class > tag
1.元素选择器
元素选择器是最基本的选择器，又称类型选择器
类型选择器匹配文档语言元素类型的名称，匹配文档树中该元素类型的每一个实例
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
选择器分组
h1,h2,p {color:gray;}
2.类选择器
类选择器
类选择器以一个点号显示，类名的第一个字符不能使用数字
.center {text-align: center}
类选择器允许以一种独立于文档元素的方式来指定样式，该选择器可以单独使用，也可以与其他元素结合使用
为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值
<h1 class="important">
This heading is very important.
</h1>
结合元素选择器使用
选择器会匹配 class 属性包含 important 的所有 p 元素，其他任何类型的元素都不匹配
p.important {color:red;}
CSS 多类选择器
在 HTML 中，一个 class 值中可以包含一个词列表，各个词之间用空格分隔，两个词的顺序无关紧要
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限），以下p标签包含三个属性
<p class="important warning">
This paragraph is a very important warning.
</p>
如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败，以下p没有属性
<html>
<head>
<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
</style>
</head>
<body>
<p class="important urgent warning">This paragraph is a very important warning.</p>
</body>
</html>
3.ID选择器
id选择器
id 选择器以 “#” 来定义，id 属性只能在每个 HTML 文档中出现一次
#intro {font-weight:bold;}
<p id="intro">This is a paragraph of introduction.</p>
类选择器与id选择器
- 与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次
- 不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表
- ID 能包含更多含义
类选择器和 ID 选择器区分大小写
#intro {font-weight:bold;}
<p id="Intro">This is a paragraph of introduction.</p>
以上p没有匹配到intro
4.属性选择器
属性选择器可以根据元素的属性及属性值来选择元素
| 选择器 | 描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素 |
| [attribute=value] | 用于选取带有指定属性和值的元素 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素 |
| [attribute=value] | 匹配属性值中包含指定值的每个元素 |
简单属性选择
1.包含标题（title）的所有元素变为红色
*[title] {color:red;}
2.只对有 href 属性的锚（a 元素）应用样式
a[href] {color:red;}
3.将同时有 href 和 title 属性的a元素设置为红色
a[href][title] {color:red;}
具体属性值选择
1.将指向 Web 服务器上某个指定文档的超链接变成红色
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
2.把多个属性-值选择器链接在一起来选择一个文档
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
注意：属性与属性值必须完全匹配，如果属性值包含用空格分隔的值列表，匹配就可能出问题
部分属性值选择
根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）
<html>
<head>
<style type="text/css">
p[class~="important"]{color: red;}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<p class="important warning">This is a paragraph.</a>
<p class="important">This is a paragraph.</a>
<hr />
<h1>无法应用样式：</h1>
<p class="warning">This is a paragraph.</a>
</body>
</html>
部分值属性选择器与点号类名记法的区别：
p.important 和 p[class=“important”] 应用到 HTML 文档时是等价的，但是"~=" 属性选择器，能用于任何属性，而不只是class
<html>
<head>
<style type="text/css">
img[title~="Figure"]{border: 1px solid gray;}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<img title="Figure 1" src="/i/figure-1.gif" />
<hr />
<h1>无法应用样式：</h1>
<img src="/i/figure-1.gif" />
</body>
</html>
子串匹配属性选择器
| 类型 | 描述 |
|---|---|
| [abc^=“def”] | 选择 abc 属性值以 “def” 开头的所有元素 |
| [abc$=“def”] | 选择 abc 属性值以 “def” 结尾的所有元素 |
| [abc*=“def”] | 选择 abc 属性值中包含子串 “def” 的所有元素 |
对指向 W3School 的所有链接应用样式
a[href*="w3school.com.cn"] {color: red;}
特定属性选择类型
<html>
<head>
<style type="text/css">
*[lang|="en"] {color: blue;}{color: red;}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<hr />
<h1>无法应用样式：</h1>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
</body>
</html>
5.后代选择器
后代选择器又称为包含选择器，选择作为某元素后代的元素，两个元素之间的层次间隔可以是无限的
只对 h1 元素中的 em 元素应用样式
h1 em {color:red;}
h1 em 选择器解释为 “作为 h1 元素后代的任何 em 元素”
6.子元素选择器
子元素选择器只能选择作为某元素子元素的元素
选择器使用了大于号（子结合符），子结合符两边可以有空白符，不影响使用
h1 > strong {color:red;}
选择器 h1 > strong 解释为“选择作为 h1 元素子元素的所有 strong 元素”
7.相邻兄弟选择器
相邻兄弟选择器选择紧接在另一元素后的元素，且二者有相同父元素
相邻兄弟选择器使用了加号（即相邻兄弟结合符），子结合符两边可以有空白符，不影响使用
h1 + p {margin-top:50px;}
此选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li> <!--加粗了-->
<li>List item 3</li> <!--加粗了-->
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li> <!--加粗了-->
<li>List item 3</li> <!--加粗了-->
</ol>
</div>
</body>
</html>
8.伪类
CSS 伪类用于向某些选择器添加特殊的效果
| 属性 | 描述 |
|---|---|
| :active | 向被激活的元素添加样式 |
| :focus | 向拥有键盘输入焦点的元素添加样式 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| :link | 向未被访问的链接添加样式 |
| :visited | 向已被访问的链接添加样式 |
| :first-child | 向元素的第一个子元素添加样式 |
| :lang | 向带有指定 lang 属性的元素添加样式 |
语法：
selector : pseudo-class {property: value} /*selector:选择器名*/
selector.class : pseudo-class {property: value} /*class:类名*/
伪类与 CSS 类结合
伪类可以与 CSS 类配合使用：
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
锚伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
:first-child 伪类
:first-child 伪类向元素的第一个子元素添加样式
例1：匹配第一个 < p> 元素
p:first-child {color: red;}
例2：匹配所有 < p> 元素中的第一个 < i> 元素
p > i:first-child {color: red;}
例3：匹配所有作为第一个子元素的 < p> 元素中的所有 < i> 元素
p:first-child i {color: red;}
:lang 伪类
:lang 伪类向带有指定 lang 属性的元素添加样式
:lang 伪类根据元素的语言编码匹配元素，这种语言信息必须包含在文档中，或者与文档关联，不能从 CSS 指定
:lang 的处理与 |= 选择器相同
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>:lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中，在下面的例子中，:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型：</p>
<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>
</body>
</html>
:focus 伪类
:focus 伪类在元素获得焦点时向元素添加特殊的样式
<html>
<head>
<style type="text/css">
input:focus
{
background-color:yellow;
}
</style>
</head>
<body>
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
9.伪元素
CSS 伪元素用于向某些选择器设置特殊效果
| 属性 | 描述 |
|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式。 |
| :first-line | 向文本的首行添加特殊样式。 |
| :before | 在元素之前添加内容。 |
| :after | 在元素之后添加内容。 |
伪元素的语法：
selector:pseudo-element {property:value;} /*pseudo-element:伪元素*/
selector.class:pseudo-element {property:value;}
:first-line 伪元素
“first-line” 伪元素用于向文本的首行设置特殊样式
根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化
p:first-line{color:red;}
:first-letter 伪元素
“first-letter” 伪元素用于向文本的首字母设置特殊样式
p:first-letter{color:red;}
before 伪元素
“:before” 伪元素可以在元素的内容前面插入新内容
下面的例子在每个 < h1> 元素前面插入一幅图片：
h1:before{content:url(logo.gif);}
:after 伪元素
“:after” 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 < h1> 元素后面插入一幅图片：
h1:after{content:url(logo.gif);}
伪元素与CSS类结合
p.article:first-letter{color: #FF0000;}
伪类在元素获得焦点时向元素添加特殊的样式
<html>
<head>
<style type="text/css">
input:focus
{
background-color:yellow;
}
</style>
</head>
<body>
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
9.伪元素
CSS 伪元素用于向某些选择器设置特殊效果
| 属性 | 描述 |
|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式。 |
| :first-line | 向文本的首行添加特殊样式。 |
| :before | 在元素之前添加内容。 |
| :after | 在元素之后添加内容。 |
伪元素的语法：
selector:pseudo-element {property:value;} /*pseudo-element:伪元素*/
selector.class:pseudo-element {property:value;}
:first-line 伪元素
“first-line” 伪元素用于向文本的首行设置特殊样式
根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化
p:first-line{color:red;}
:first-letter 伪元素
“first-letter” 伪元素用于向文本的首字母设置特殊样式
p:first-letter{color:red;}
before 伪元素
“:before” 伪元素可以在元素的内容前面插入新内容
下面的例子在每个 < h1> 元素前面插入一幅图片：
h1:before{content:url(logo.gif);}
:after 伪元素
“:after” 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 < h1> 元素后面插入一幅图片：
h1:after{content:url(logo.gif);}
伪元素与CSS类结合
p.article:first-letter{color: #FF0000;}
扫一扫
769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
