| css的书写样式 | 名称 | 语法 | 注意 |
| 行内样式表 | <标签名 style="属性1：属性值1；属性2：属性值2；..."></标签名> | 1.写在要添加样式的元素的开始标签里
2.每个属性用；隔开，属性与属性值用“：”隔开 |
| 内部样式表 | <head><style>选择器 {属性1：属性值1；..}</style></head> | 1.写在head标签里
2.每个属性用；隔开，属性与属性值用“：”隔开 |
| 外部样式表 | <head><link rel="" type="" href="css文件地址"</head> | 1.link是个单标签；
2.link标签要放在头部标签里 ，并指定link标签的属性；
3.外部样式表利用link标签与html建立连接； |
| 选择器 | | |
| 标签选择器 | 标签名 { 属性1：属性值1；...} | 1.选择所有相同标签； |
| 类选择器 | .类名 { 属性：属性值1；} <标签 class="类名1 类名2 .."> | 1.选择相同类名的标签；
2.样式表里类名前加“.”
3.一个标签有多个类名时，类名用空格号隔开； |
| id选择器 | #id名 {属性：属性值1；...} <标签 id="id名"> | 1.选择有id名的标签
2.具有唯一性 只能使用一次； |
| 通配符选择器 | * {属性：属性值；...} | 1.将所有的标签全部选择出来； |
| 链接伪类选择器 | a:link | 未访问时 链接的状态（样式） |
| a:visited | 已访问后 链接的样式 |
| a:hover | 鼠标移动到链接上时的样式 |
| a:active | 选中链接时的状态样式 |
| 后代选择器 | 父级 子级 {属性：属性值；...} | 1.父级名在前 子级名在后，父级与子级之间用空格隔开；
2.选中父级元素后面的所有子元素（包括子元素的子元素） |
| 子元素选择器 | 父级>子级 {属性：属性值；...} | 1.选中父级元素里的子元素（只选中下一级） 不包括子元素的子元素； |
| 交集选择器 | 由两个选择器组成，两个选择器紧挨在一起，中间不加任何符号 | 例；p.red 是指既是p标签又是类名为red的标签 |
| 并集选择器 | 选择器1，选择器2 ,...{属性：属性值；...} | 1.当某些选择器定义相同样式时使用；
2.选择器与选择器之间用，隔开； |
| 以下是css3新增选择器 | |
| 属性选择器 | e[att] | 选择具有att属性的e元素 |
| e[att="val"] | 选择具有att属性且属性值为val的e元素 |
| e[att^="val"] | 匹配具有att属性且属性值以val开头的e元素 |
| e[att$="val"] | 匹配具有att属性且属性值以val结尾的e元素 |
| e[att*="val"] | 匹配具有att属性且属性值包含val的e元素 |
| 结构伪类选择器 | e：nth-child（n）{属性=属性值；...} | 1.选择父元素中第n个子元素，不管子元素是否为同一类型；
2.n可以是数字 公式 名词；
3.公式 例：n+1 n是从0开始计算； |
| e：nth-of-type（n）{属性=属性值；...} | 1.选择父元素中第n个指定e类型的元素；
2.n可以是数字 公式 名词；
3.公式 例：n+1 n是从0开始计算； |
| 伪元素选择器 | div：：before | 在div盒子内部的前面插入内容 必须加“conten”属性 |
| div：：after | 在div盒子内部的后面插入内容 必须加“conten”属性 |
| 文字文本样式 | 名称 | 语法 | 作用 |
| 字体大小 | font-size | 用来设置字体的大小，单位通常用px； |
| 字体 | font-family | 用来设置使用什么样的字体，常用字体：微软雅黑，宋体，黑体等；
2.可以指定多个字体，但中间要用，隔开；
3.中文字体及字体名称中带有# &等特殊符号时要用""括起来 |
| 字体粗细 | font-weight | 属性：1.font-weight:normal;正常的；等同font-weight:400 ; ；
2.font-weight="bold " 加粗，等同font-weight="700 " |
| 字体风格 | font-style | 1.font-style: normal;字体正常；
2.font-style: italic; 斜体； |
| 综合设置字体样式 | 选择器 { font: font-style font-weight font-size/line-height font-family;} | 1.使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
2.其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用 |
| 外观属性 | 颜色 | color | 1.直接写英文状态的颜色名称，例 color:red；
2.十六进制 如#fff（白色）
3.rgb代码 如rgb（0，0,0）或rgb（100% ，0%，0%） |
| 文本水平对齐 | text-align | 1.left 左对齐；
2.right 右对齐；
3.center 居中对齐； 是让盒子里的内容水平居中对齐，不是盒子居中对齐； |
| 行间距 | line-height | 1.单位为px；
2.line-height=盒子高度 单行文本垂直居中； |
| 首行缩进 | text-indent | 1.单位为em；
2.1em为1个汉字的宽度，通常设置为2em； |
| 文本装饰 | text-decoration | 1.none 取消文本下划线；（最常用）
2.underline 添加下划线；
3.overline 在文字上方添加线条；
4.line-through 类似删除线 在文本中间穿过线条； |
| 背景设置 | 背景颜色 | background-color:颜色值; | 属性值同color设置一样； |
| 背景图片 | background-image : none 或 url (图片地址) | 1.none无背景图；
2.url（图片地址），使用绝对或相对地址指定背景图像 背景图片后面的地址，url不要加引号 |
| 背景平铺 | background-repeat : repeat | no-repeat | repeat-x | repeat-y | |
| 背景位置 | background-position：x y; | x y 可以是方位名词 也可以是精确值 和百分比 可以相互混合使用； |
| 背景附着 | background-attachment | background-attachment : scroll | fixed
scroll 背景图像随着内容滚动；
ficed 背景图片固定； |
| 背景设置简写 | background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; | 简写时 属性值不分先后顺序； |
| 背景透明 | background: rgba(0, 0, 0, 0.3); | 最后一个参数值在0-1之间选择， |
| 背景缩放 | background-size：背景图片宽度 背景图片高度；（通常移动端使用） | 1.只写一个参数时 肯定是宽度 高度会等比缩放；
2.cover 背景图片等比放大 铺满盒子 会使图片显示不完全；
3.contain 背景图片等比缩放 当宽度或高度铺满盒子时 不再进行缩放； |
| 盒子模型 | 盒子组成 | 内容+内边距（padding）+边框（border）+外边距（margin） | |
| 边框 | 边框样式border-style：solid | dashed |dotted |none | 简写border : border-width || border-style || border-color |
| 边框颜色border-color：颜色值； |
| 边框粗细border-width：n px；（n是数值） |
| border-collapse:collapse; | 表示相邻边框合并在一起。 |
| 内边距 | padding：上 右 下 左； | 当盒子没有宽度或高度时 设置内边距不会影响盒子大小； |
| 外边距 | margin：上 右 下 左； | |
| margin :{0 auto};表示块级盒子水平居中 | 1.盒子必须指定宽度； |
| 以下是css3新增属性 | | |
| 圆角边框 | border-radius：数值；（4个角设置一样）
border-radius：左上角 右上角 右下角 左下角；（4个角分别设置写法） | 1.正方形盒子数值为50%，呈现出一个圆形盒子；
2.矩形盒子数值一般为高度的一半； |
| 盒子阴影 | box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影； | 1.水平阴影 垂直阴影必须写 允许为负值；
2.颜色通常用rgba（）； |
| css布局 | 标准流 | 块级元素 | div p 等 独占一行 可以设置宽高 |
| 行内元素 | span i 等 一行显示多个 直到父盒子宽度不够时自动换行 不能设置宽高； |
| 浮动 | float：left 、right 、none（一般要给浮动的盒子添加一个标准流父盒子） | 1.让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
2.加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
3.特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙 |
| 定位 | position:fixed / relative /absolute/static | 1.定位的盒子可以漂浮在标准流和浮动的盒子上； |
| | | |
收藏
淘帖
踩
