CSS样式基础知识
CSS样式概述
CSS是Cascading Style Sheet 的缩写。译作“层叠样式表单”。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
- 引用位置
-
- 作为元素的style特性的值
- 在<style>元素内部，位于<head>元素中
- 使用<link>引用外部样式
选择器
指定声明应用于哪个或哪些元素，不同元素之间用逗号隔开，例如：td {36px;}
- 声明
用于设置如何样式化在选择器中引用的元素
- 属性
它是该规则希望影响的所选元素的属性
- 值
它是属性的说明
- 继承
应用于某个元素的属性经常会被它的子元素所继承，可以针对特定的元素设置样式来覆盖已继承的样式
- 通用选择器
*{}
- 类型选择器
类型选择器匹配以逗号隔开的元素列表所标识的所有元素，例如：h1,h2,h3 {}
- 类选择器
类选择器可用于将一条规则应用于附带class特性的一个元素或多个元素，其中class特性的值与类选择器中指定的值相匹配，前缀使用"."，例如：.classname {} 或者 td.classname {}
- id选择器
id选择器和类选择器工作方式类似，但是使用的是id特性的值，前缀使用"#"，例如：#idname {}
- 子选择器
子选择器所匹配的元素是另外一个元素的直接子元素，例如：td>b {}
- 派生选择器
派生选择器所匹配的元素类型是另一个指定元素的派生元素或内嵌的元素，例如：table b {}
- 相邻兄弟选择器
相邻兄弟选择器匹配指定元素的相邻兄弟元素类型。例如：h1+p {}
- 通用兄弟选择器
通用兄弟选择器匹配指定元素的任何兄弟元素类型，即使它们不是直接的先后关系，例如：h1~p {}
- 特性选择器
特性选择器可以使用元素附带的特性以及特性的值，例如：p[特性选择条件] {}
伪类
伪类用于向某些选择器添加特殊的效果。伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容。
- :first-child 向元素的第一个子元素添加样式。
- :link 向未被访问的链接添加样式。
- :vistited 向已被访问的链接添加样式。
- :hover 当鼠标悬浮在元素上方时，向元素添加样式。
- :active 向被激活的元素添加样式。
- :focus 向拥有键盘输入焦点的元素添加样式。
- :lang 向带有指定 lang 属性的元素添加样式。
伪元素
伪元素用于向某些选择器设置特殊效果。
- :first-letter 向文本的第一个字母添加特殊样式。
- :first-line 向文本的首行添加特殊样式。
- :before 在元素之前添加内容。
- :after 在元素之后添加内容。
框模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
-
- element : 元素。
- padding : 内边距，也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距，也有资料将其翻译为空白或空白边。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
|
* {
margin: 0;
padding: 0;
}
|
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：
|
#box {
70px;
margin: 10px;
padding: 5px;
}
|
内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。外边距可以是负值，而且在很多情况下都要使用负值的外边距。
浏览器兼容性
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
属性说明
- 字体属性
-
- font：可以设置多个字体属性，属性之间用空格隔开
- font-family：指定字型，可附带多个值，第一个首选字型，然后第二选择，最后通用字体系列
- font-size：设置字体大小
- font-size-adjust：设置字体的纵横比值，也就是小写字母x与字体高度的比值
- Cfont-stretch：设置字母的宽度
- font-style：设置字体样式
- font-variant：用于创建与小写字母具有相同尺寸的大写字母
- font-weight：设置文本粗细程度
- color：字体颜色
- 文本属性
-
- letter-spacing：设置字母之间的距离
- text-align：设置文本的对齐方式
- text-decoration：指定字体外观，例如：underline、overline、line-through、blink
- text-indent：设置文本缩进量
- text-shadow：用于创建文本的阴影
- text-transform：指定文本的大小写
- white-space：指示空格的处理方式
- word-spacing：指定单词之间的距离
- 颜色属性和背景属性
-
- background：用于设置背景，可设置多个属性，属性之间用空格隔开
- background-attachment：设置背景图为固定在网页中的一个位置还是随着网页滚动
- background-color：设置背景颜色
- background-image：设置背景图像
- background-position：设置背景图相对于左上角的位置
- background-repeat：指定是否重复背景图
- background-positionX：指定背景图在水平方向上的位置
- background-positionY：指定背景图在垂直方向上的位置
- 边框属性
-
- border-style（bottom、left、top、right）：指定了边框周围线的样式
- border-width（bottom、left、top、right）：指定边框线的宽度
- border-color（bottom、left、top、right）：指定边框线的颜色
- 范围属性
-
- height：指定块元素的垂直高度
- width：指定元素水平宽度
- line-height：指定文本的高度，可用于控制行间距
- max-height：指定块级别元素的最大高度
- max-width：指定块级别元素的最大宽度
- min-height：指定块级别元素的最小高度
- min-width：指定块级别元素的最小宽度
- 页边距属性
-
- margin（bottom、left、top、right）：用于设置框周围页边距的宽度
- 内边距属性
-
- padding（bottom、left、top、right）：设置元素边框和其内容之间的距离
- 列表属性
-
- list-style：设置项目列表、编号列表和定义列表的外观样式
- list-style-position：设置标记符号放置在列表每一项的内部还是这些项的左边
- list-style-type：指定项目列表应当使用的项目符号或编号的类型
- marker-offset：指定列表项和其标记符号之间的空间
- 位置属性
-
- position：指定某个元素的定位方案
-
- absolute 固定元素在画布上相对于其包含元素的某个特定位置
- static 固定元素在网页的同一个位置，即使用户滚动网页也保持在该位置
- relative 将元素放置在距离它正常位置具有一定偏移量的位置
- fixed 将元素固定在网页的背景上，并且当用户滚动网页时元素不会移动
- top：设置元素相对于窗口或包含元素顶部的垂直位置
- left：设置元素相对于窗口或包含元素左边的水平位置
- bottom：设置元素相对于窗口或包含元素底部的垂直位置
- right：设置元素相对于窗口或包含元素右边的水平位置
- vertical-align：设置内联元素的垂直定位方式
- z-index：设置多个重叠元素中哪个元素出现在顶部，允许使用正数和负数
- clip：用于控制元素的哪一部分是可见的
- overflow：当内容太大以至于包含元素无法容纳时，该属性指定容器元素显示内容的方式
- overflow-x：与overflow属性相同，但只能用于水平x轴
- overflow-y：与overflow属性相同，但只能用于垂直y轴
- 外边框属性
-
- Outline：设置外边框样式，外边框类似于边框，但是外边框不占用任何空间，它位于画布之上
- outline-color：设置外边框颜色
- outline-style：设置外边框线的样式
- outline-width：设置外边框的宽度
- 表格属性
-
- border-collapse：指定表格使用的边框模型
- border-spacing：指定相邻单元格的边框之间的距离
- caption-side：指定标题应当放置在表格的哪一边
- empty-cells：指定空单元格是否显示边框
- table-layout：指定浏览器如何计算表格的布局
- 分类属性
-
- clear：设置强制一些元素显示在它的下面，可指示元素的哪条边不能接触对齐元素
- display：用于指定如何呈现一个元素，设置为none元素将不呈现并且不占用任何空间
- float：指定随后的元素应当换行到该元素的左边或右边，而不是换行到下方
- visibility：设置一个元素是否应当显示或隐藏
- 国际化属性
-
- direction：设置文本的方向，是从左到右还是从右到左
- unicode-bidi：用于重写Unicode中语言的内置方向设置
- 长度
-
- 绝对长度
-
- cm
- in
- mm
- pc
- pt
- 相对长度
-
- em
- ex
- px