CSS基础知识
css，英文Cascading Style Sheets，中文名：级联样式表。层叠样式表。css是一种表现语言，是对网页语言的补充。css用于网页的风格设计，包括字体，颜色，位置等。css使用的4中方式：引入外部样式文件，导入外部样式文件，使用内部样式定义，使用内联样式定义。
引入外部样式文件：
<link type="text/css" rel="stylesheet" href="css样式文件的url"/>
导入外部样式文件:
<style type="text/css">
@import "css样式文件的url";
</style>
使用内部样式定义：
<style type="text/css">
div {
background-color: #ffffff;
300px;
height: 300px;
}
</style>
使用内联样式定义：
<div style="background-color: #ffffff; 100px; height: 100px;">
</div>
css的两个特性：层叠，继承
层叠：层叠样式生效的优先级：
内联样式->内部样式->外部样式->浏览器默认效果。
继承，就是css属性可以从父元素向下传递到子元素。
css的选择器
元素选择器，是最简单的选择器。 通配符选择器，用 "*"表示，表示对任意元素都有效。属性选择器
格式：
E[attribute]{property1:value1; property2:value2;...}
| 语法 | 说明 |
|---|---|
E[attribute] |
用于选取带有指定属性的元素 |
E[attribute=value] |
用于选取带有指定属性和指定值的元素 |
E[attribute~=value] |
用于选取属性值包含指定值的元素，该值必须是整个单词，可以前后有空格 |
E[attribute|=value] |
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词或者后面跟着连字符“-” |
派生选择器
派生选择器根据元素在其位置的上下文关系定义样式
派生选择器分3种：后代选择器，子元素选择器，相邻兄弟选择器
后代选择器是某元素后代的所有元素。
子元素选择器是相对于父元素的第一级子元素符合条件。
相邻兄弟选择器，针对的元素是同级元素，拥有相同的父元素，且两个元素是相邻的。
id选择器，以特定id值的HTML元素指定样式。类选择器，以指定
class的HTML元素指定样式。伪类选择器
伪类选择器：伪类选择器和伪元素选择器
伪类以冒号(:)开头，元素选择符和冒号之间不能有空格，伪类名中间也不能有空格。
css中常用的伪类如下表所示：
| 伪类名 | 说明 |
|---|---|
:active |
向被激活的元素添加样式 |
:focus |
向拥有输入焦点的元素添加样式 |
:hover |
向鼠标悬停在上方的元素添加样式 |
:link |
向未被访问的链接添加样式 |
:visited |
向已被访问的链接添加样式 |
:first-child |
向元素添加样式，且该元素是它的父元素的第一个子元素 |
:lang |
向带有指定lang属性的元素添加样式 |
伪元素选择器
css中常用的伪元素如下表所示：
| 伪元素名 | 说明 |
|---|---|
:first-letter |
向文本的第一个字母添加样式 |
:first-line |
向文本的第一行添加样式 |
:after |
在元素之后添加内容 |
:before |
在元素之前添加内容 |
css背景
css背景属性如下：
| 属性 | 说明 |
|---|---|
background-color |
定义背景颜色 |
background-image |
定义背景图片 |
background-repeat |
定义背景图片是否重复以及其重复方式 |
background-attachment |
定义背景图片是否跟随内容滚动 |
background-position |
定义背景图片的水平位置和垂直位置 |
background |
可以用一条样式定义各种背景属性 |
background
background-color用于设置背景颜色，初始值为transparent透明色。颜色取值3种如：颜色名，十六进制颜色，rgb函数。 background-image用于设置元素的背景图片，默认值为none。background-repeat控制图像的平铺。
background-repeat默认值为repeat，即图像沿着x轴和y轴平铺，还可以指定沿着x轴平铺rpeat-x，沿着y轴平铺repeat-y，或者不平铺no-repeat，继承父元素该属性设置inherit。
background-attachment用于设置背景图像是否固定或者随着页面的其余部分滚动。默认值为：scroll，表示可以随着页面其余部分的滚动而滚动。设置fixed，表示当页面其余部分滚动时，背景图片不会滚动，设置inherit，继承父元素。background-position用于设置背景图像圆点的位置。
background可以将background-color，background-position，background-attachment，background-repeat，background-image全部设置。
css字体属性
css常用字体属性表：
| 属性 | 说明 |
|---|---|
font-family |
定义文本的字体系列 |
font-size |
定义文本的字体尺寸 |
font-variant |
定义是否以小型大写字母的字体显示文本 |
font-style |
定义文本的字体是否是斜体 |
font-weight |
定义字体的粗细 |
font |
可以一条样式定义各种字体属性 |
font-family用于设置元素的字体，该元素属性值一般可以设置多个字体。font-size用于设置字体的尺寸。font-style用于设置字体是否是斜体，默认值为normal，当设置为italic，显示为一个斜体的样式，当设置为oblique，显示为一个倾斜的样式。font-variant用于设置字体使用小写字体，默认为normal，一旦设置为small-caps，将所有小写字母变为大写。font-weight用于设置字体的粗细，normal值等于400，bold的值等于700。font，可以设置font-family,font-size,font-style,font-variant,font-weight。
css文本属性表：
| 属性 | 说明 |
|---|---|
color |
文本颜色 |
direction |
文本方向或者书写方向 |
letter-spacing |
字符的间距 |
line-height |
文本的行高 |
text-align |
文本的水平对齐方式属性,设置元素中文本的水平方式，值有left，right，center，inherit。 |
text-decoration |
给文本添加修饰效果，值有underline为添加下画线，overline添加上画线，line-through添加删除线，blink添加闪烁的效果,none无如何修饰,inherit。 |
text-indent |
定义文本的首行缩进方式，默认值为0 |
text-shadow |
为文本添加阴影效果 |
text-transform |
切换文本的大小写 |
white-space |
设置如何处理元素内的空白 |
word-spacing |
定义单词之间的距离 |
css尺寸属性表：
| 属性 | 说明 |
|---|---|
width |
设置元素的宽度 |
min-width |
设置元素的最小宽度 |
max-width |
设置元素的最大宽度 |
height |
设置元素的高度 |
min-height |
设置元素的最小高度 |
max-height |
设置元素的最大高度 |
css列表属性表：
| 属性 | 说明 |
|---|---|
list-style-image |
设置列表项标记样式为图像，none/inherit/url |
list-style-position |
设置列表项标记的位置，inside/outside/inherit |
list-style-type |
设置列表项标记的类型 |
list-style |
可以用一条样式定义各种列表属性 |
list-style-type
| 值 | 说明 |
|---|---|
disc |
实心圆 |
circle |
空心圆 |
square |
方块 |
decimal |
数字 |
low-roman |
小写罗马数字 |
upper-roman |
大写罗马数字 |
low-alpha |
小写字母 |
upper-alpha |
大写字母 |
none |
无标记 |
inherit |
继承父元素的该设置 |
css表格属性表：
| 属性 | 说明 |
|---|---|
border-collapse |
设置是否合并表格边框 |
border-spacing |
设置相邻单元格边框之间的距离 |
caption-side |
设置表格标题的位置 |
empty-cells |
设置是否显示表格中空单元格上的边框和背景 |
table-layout |
设置用于表格单元格列宽的设置方式 |
盒模型
css盒模型，包含元素内容content，内边距padding，边框border，外部距margin。
css内边距属性，元素的内边距在边框和内容之间。
css内边距的属性：
| 属性 | 说明 |
|---|---|
padding-top |
元素的上内边距 |
padding-right |
元素的右内边距 |
padding-bottom |
元素的下内边距 |
padding-left |
元素的左内边距 |
padding |
用一个声明定义所有内边距属性 |
设置顺序为上右下左依次进行。
padding: 10px 10px 10px 10px;
css外边距的属性：
| 属性 | 说明 |
|---|---|
margin-top |
定义元素的上外边距 |
margin-right |
定义元素的右外边距 |
margin-bottom |
定义元素的下外边距 |
margin-left |
定义元素的左外边距 |
margin |
用一个声明定义所有外边距属性 |
css边框的属性：
| 属性 | 说明 |
|---|---|
border-top-style |
上边框的样式属性 |
border-right-style |
右边框的样式属性 |
border-bottom-style |
下边框的样式属性 |
border-left-style |
左边框的样式属性 |
border-style |
设置4条边框的样式属性 |
border-top-width |
设置上边框的宽度属性 |
border-right-width |
设置右边框的宽度属性 |
border-bottom-width |
设置下边框的宽度属性 |
border-left-width |
设置下边框的宽度属性 |
border-width |
设置4条边框的宽度属性 |
border-top-color |
设置上边框的颜色属性 |
border-right-color |
设置右边框的颜色属性 |
border-bottom-color |
设置下边框的颜色属性 |
border-left-color |
设置左边框的颜色属性 |
border-color |
设置4条边框的颜色属性 |
border-top |
用一条声明定义所有上边框的属性 |
border-right |
用一条声明定义所有右边框的属性 |
border-bottom |
用一条声明定义所有下边框的属性 |
border-left |
用一条声明定义所有左边框的属性 |
border |
用一条声明定义所有边框的属性 |
border-width |
一次定义4条边框的宽度 |
border-color |
一次定义4条边框的颜色 |
边框的样式
none，无边框效果hidden，与none相同dotted，点线边框效果dashed，虚线边框效果double，双线边框效果solid，实线边框效果groove，3D凹槽边框效果ridge，3D凸槽边框效果
css轮廓是绘制在元素周围的一条线，位于边框边缘的外围，起到突出元素的作用。
| 属性 | 说明 |
|---|---|
outline-style |
定义轮廓的样式属性 |
outline-color |
定义轮廓的颜色属性 |
outline-width |
定义轮廓的宽度属性 |
outline |
同一个声明中定义所有的轮廓属性 |
布局属性
布局属性是文档中元素排列显示的规则 布局方式3种：普通文档流，浮动，定位
css浮动涉及到的属性
| 属性 | 说明 |
|---|---|
float |
设置框是否需要浮动以及浮动方向 |
clear |
设置元素的哪一侧不允许出现其他浮动元素 |
clip |
裁剪绝对定位元素，该元素必须是绝对定位，上右下左原则 |
overflow |
设置内容溢出元素框时的处理方式，值：visible,auto,hidden,scroll |
display |
设置元素如何显示，值none,block,inline,inline-block,inherit |
visibility |
定义元素是否可见，visibility设置为隐藏，元素占用的空间依然会保留，但display:none不保留占用空间，值：visible,hidden |
css定位的属性
| 属性 | 说明 |
|---|---|
position |
元素的定位类型，值static,absolute绝对，relative相对 |
top |
元素上外边距 |
right |
元素右外边距 |
bottom |
元素下外边距 |
left |
元素的左外边距 |
z-index |
元素的堆叠顺序 |
z-index用于设置目标对象的定位层序，数值越大，所在层级越高。该属性只在position:absolute时有效。