前端-css
css概述
css:指层叠样式表，多个样式定义可层叠为一个
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素，CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。不要在属性值与单位之间留有空格
CSS注释以 /* 开始, 以 */ 结束
某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来
字体大小：em的尺寸单位由W3C建议。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
选择器
id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
class选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
属性选择器
1./* 选择所有具有 `type` 属性的元素,选择带有指定属性的所有元素（无论属性值是什么） */
[type] {
样式
}2.选择具有指定属性和值完全匹配的元素， 选择所有 `type` 属性等于 `text` 的元素
[type="text"] { background-color: yellow; }3.选择属性值中包含指定词（用空格分隔的词列表之一）的元素，选择属性值中包含 `button` 的元素
[class~="button"] { }4.选择具有指定值或者以指定值开头并紧跟着连字符 - 的属性值的元素， 选择所有 `lang` 属性是 `en` 或者以 `en-` 开头的元素
[lang|="en"] { color: green; }5.选择属性值以指定值开头的元素
[href^="https"] { text-decoration: none; }6.选择属性值以指定值结尾的元素
[src$=".jpg"] { border: 2px solid blue; }7.选择属性值中包含指定值的元素，选择所有 `title` 属性中包含 `tutorial` 的元素
[title*="tutorial"] { font-style: italic; }
插入样式表
优先级：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
外联样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link href="css文件"> 标签链接到样式表。 <link> 标签在（文档的）头部
样式表应该以 .css 扩展名进行保存
内联样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表
内联样式
当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性
CSS背景样式
background 简写属性，作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 background-color 设置元素的背景颜色。 background-image 把图像设置为背景。 background-position 设置背景图像的起始位置。 background-repeat 设置背景图像是否及如何重复。
css文本属性
属性 描述 color 设置文本颜色 direction 设置文本方向。 letter-spacing 设置字符间距 line-height 设置行高 text-align 对齐元素中的文本 text-decoration 向文本添加修饰 text-indent 缩进元素中文本的首行 text-shadow 设置文本阴影 text-transform 控制元素中的字母 unicode-bidi 设置或返回文本是否被重写 vertical-align 设置元素的垂直对齐 white-space 设置元素中空白的处理方式 word-spacing 设置字间距
css字体
Property 描述 font 在一个声明中设置所有的字体属性 font-family 指定文本的字体系列 font-size 指定文本的字体大小 font-style 指定文本的字体样式 font-variant 以小型大写字体或者正常字体显示文本。 font-weight 指定字体的粗细。
css链接
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
CSS列表
属性 描述 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中 list-style-image 将图像设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style-type 设置列表项标志的类型。
CSS盒子模型Box Model
所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
css边框样式
属性 描述 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-radius 设置圆角的边框。
CSS margin(外边距)
CSS margin(外边距)属性定义元素周围的空间。
属性 描述 margin 简写属性。在一个声明中设置所有外边距属性。 margin-bottom 设置元素的下外边距。 margin-left 设置元素的左外边距。 margin-right 设置元素的右外边距。 margin-top 设置元素的上外边距。
CSS padding填充（内边距）
padding 使用简写属性设置在一个声明中的所有填充属性 padding-bottom 设置元素的底部填充 padding-left 设置元素的左部填充 padding-right 设置元素的右部填充 padding-top 设置元素的顶部填充
css的尺寸
属性 描述 height 设置元素的高度。 line-height 设置行高。 max-height 设置元素的最大高度。 max-width 设置元素的最大宽度。 min-height 设置元素的最小高度。 min-width 设置元素的最小宽度。 width 设置元素的宽度。
css display显示
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
css position定位
属性值：
static:HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
fixed：元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动
relative:相对定位元素的定位是相对其正常位置。
absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
css overflow布局
overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow 属性只工作于指定高度的块元素上
值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。
css float浮动
会使元素向左或向右移动，其周围的元素也会重新排列，一般做用于图片
属性 描述 值 clear 指定不允许元素周围有浮动元素。 left
right
both
none
inheritfloat 指定一个盒子（元素）是否可以浮动。 left
right
none
inherit
水平/垂直对齐
margin: auto要水平居中对齐一个元素
text-align: center文本在元素内居中对齐
css组合选择符
- 后代选择器(以空格 分隔) 后代选择器用于选取某元素的后代元素。
- 子元素选择器(以大于 > 号分隔） ，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素
- 相邻兄弟选择器（以加号 + 分隔）选择紧接在另一元素后的元素，且二者有相同父元素
- 普通兄弟选择器（以波浪号 ～ 分隔）选取所有指定元素之后的相邻兄弟元素
@media 规则
允许在相同样式表为不同媒体设置不同的样式
媒体类型 描述 all 用于所有的媒体设备。 aural 用于语音和音频合成器。 braille 用于盲人用点字法触觉回馈设备。 embossed 用于分页的盲人用点字法打印机。 handheld 用于小的手持的设备。 用于打印机。 projection 用于方案展示，比如幻灯片。 screen 用于电脑显示器。 tty 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。 tv 用于电视机类型的设备。
css计数器
通过一个变量来设置，根据规则递增变量
属性 描述 content 使用 ::before 和 ::after 伪元素来插入自动生成的内容 counter-increment 递增一个或多个值 counter-reset 创建或重置一个或多个计数器
!important
!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明
- 一定要优先考虑使用样式规则的优先级来解决问题而不是
!important- 只有在需要覆盖全站或外部 CSS 的特定页面中使用
!important- 永远不要在你的插件中使用
!important- 永远不要在全站范围的 CSS 代码中使用
!important