引入：

外部样式：

	<link rel="stylesheet" href="style.css" />

内部样式表：

        <head>
            <style>...<style>
        </head>

内嵌样式：

        <p style="color:red;margin-left:20px"></p>

浏览器私有属性：

chrome、safari: -webkit-; firefox: -moz-; IE:-ms-; opera: -o-;

语法规则：

    margin:[<length>|<percentage>|auto]{1,4}
    /*
        <length>:基本元素；
        `|`:组合符号；
        {1,4}:数量符号；
    */

基本元素：

关键字： auto、solid、bold……
组合符号：

空格：表示必须出现，且顺去固定；

&&：必须出现，但顺序不固定；

||：至少出现一个，但顺序随意；

|：只能出现一个；

[]：分组；

+：可出现一次或多次；

？：可出现也可不出现；

{}：可以出现的次数；{2，4}：最少出现2次，最多出现4此；

*：可出现0次，1次或多次；

#：需出现1次或多次，需要用,隔开；

规则语法：

@media：响应式布局时监听屏幕尺寸；

@keyframs：描述CSS动画帧；

@font-face：引入外部字体；

@import/@charset/@name space/@page/@supports/@document

选择器：

简单选择器：

标签选择器： tag{ }
类选择器：.className{ }
id选择器： #id{ }
通配符： *{ }
属性选择器： [disabled]{ }/[type=button]{ }
           [class~="sports"]{ }   // 类名中包含sports,且以空格隔开；
           [lang|="en"]{ }        // 类名中包含en，且以“-”隔开；
           [href^="#"]{ }         // href属性值以 # 开头的元素；
           [href$="pdf"]{ }       // href属性值以 pdf 结尾的元素；
           [here*="lady"]{ }      // href属性值包含lady的元素；

伪类选择器：

a:link{ }                 // 选中具有href的a标签样式；
a:visited{ }              // 已访问过的链接的样式；
a:hover{ }                // 当鼠标移上时的样式；
a:active{ }               //  当鼠标点击时的样式；

:enabled{ }  :disabled{ }   :chedcked{ }

li:first-child{ }  li:last-child{ }       // 元素首项、末项
li:nth-child(even){ }                     // 选中偶数项
li:nth-child(3n+1){ }              // 选中正序第1、4、7。。。项
li:nth-last-child(3n+1){ }         // 选中倒序第1、4、7。。。项

li: only-child{ }                 // 选中作为唯一子元素的的li标签
dd:first-of-type{ }              // 选中第一个dd类型的元素
dd:last-of-type{ }               // 选中最后一个；
dd:nth-of-type{ } 
span: only-of-type{ }             // 选中同级元素只有一个span的<span>

:empty{ }   :root{ }   :not(){ }  
:target(){ }                // 选择器会突出显示当前活动的HTML锚;

组合选择器：

可以将简单选择器进行组合，如 img[src$="jpg"]{ };

伪元素选择器：

::first-letter{ };               /* 选择头字母；*/
::first-line{ };                 /* 选择首行；*/
/* 插入内容；*/
::before{content:"before";}
::after{content:"after";}    
/* 应用于被用户选中的内容 */
::selection{ }

后代选择器：

<div class="main">
    <h2>111</h2>
    <div>
        <h2>222</h2>
        <p>333</p>
    </div>
</div>

.main h2{ }                     // 选中111、222;
.main>h2{ }                     // 选中111

兄弟选择器：

<div class="main">
    <h2>111</h2>
    <p>222</p>
    <p>333</p>
</div>

h2+p{ }               // 选中与h2相邻的p：222；
h2~p{ }               // 选中h2同级之后的所有p:222,333;

选择器分组：

可以使用 ,讲选择器合并：

    h1,h2,h3{ };

CSS选择器优先级：

样式类型权重
a：行内样式 1000
b：id选择器 100
c：类、伪类和属性选择器 10
d：标签和伪元素选择器 1

样式类型	权重
a：行内样式	1000
b：id选择器	100
c：类、伪类和属性选择器	10
d：标签和伪元素选择器	1

value值 = a 1000 + b 100 + c* 10+ d ;

1、当value不等时，value值越大，则优先权更大；不同属性则合并，相同属性覆盖；
2、当value相等时，相同属性，后面的覆盖前面；不同属性合并；
改变CSS优先级：
1、通过改变CSS里的前后顺序；
2、提升选择器的value值；
3、加入 !important. （优先使用1、2）；

# 文本与颜色： ## 字体大小

font-size:<length>|<percentage>|<absolute-size>|<relative-size>

<length>: 例如14px;
<percentage>: 例如200%/2em(2em/200% ：表示为父级字体大小的2倍)；
<absolute-size>:例如small、large;
<relative-size>: 例如smaller、larger;

字体

font-family:[<family-name>|<generic-family>]#

字体族名称(family-name)：是具体的字体名称, "Microsoft YaHei"

类族名称(generic-family)：是字体类型名称而具体的字体则由浏览器决定,serif/sans-serif/cursive/fantasy/monospace等

font-family中设置的字体不会被浏览器自动下载, 字体是否可用则完全依靠用户电脑是否已安装该字体库而已；
属性值必须以类族名称(generic-family)结尾确保字体会以正确的形式解析渲染；
类族名称(generic-family)后的字体族名称(family-name)不会生效;

字体粗细；

font-weight:normal|bold|bolder|lighter|100|200...

斜体；

font-style:normal|italic|oblique

行高；

line-height:normal|<number>|<length>|<percentage>

设置linge-height:300%与设置line-height:3的区别：

line-height：两行基线的间隔；设置为300%时，直接以父元素的字体大小计算后继承，不管子元素自身的字体大小；既为父元素字体大小的3倍；（先计算后继承，为静态值）设置为3时，则是动态的根据子元素自身的字体大小乘以3；（先继承后计算，为动态值，会自适应）；

利用line-height让多行文本垂直居中：

在文本的后面添加个空白元素，设置其line-height和父元素高度一致，并在文本上设置vertical-align:middle;

字体组合样式：

// font:italic bolid 20px/1.5 arial,serif;
font:[<font-style>||<font-weight>]?<font-size>[/<line-height>]?<font-family>

字体颜色：

color:red;
color:#ff0000;
color:rgb(255,0,0);
color:rgba(255.0.0.1)

对齐：

水平对齐：左对齐/右对齐/居中/两端对齐

text-align:left|right|center|justify

垂直对齐：

vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>|<length>

文本缩进：

text-indent:<length>|<pencentage>

换行，空格，自动换行：

white-space:normal|nowrap|pre|pre-wrap|pre-line

normal：换行符、空格合并，自动换行； nowrap：换行符、空格合并，不自动换行； pre：换行符、空格保留，不自动换行； pre-wrap：换行符、空格保留，自动换行； pre-line：换行符保留、空格/tab合并，自动换行；

单词换行：

word-wrap:normal|break-word;
word-break:normal|keep-all|break-all;

文字阴影：

text-shadow:none|[<length>{2,3}&&<color>?]#;
text-decoration:none|[underline||overline||line-through];

隐藏文本，且用省略号显示：

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

定义鼠标形状：

// 自定义|自适应|鼠标|消失|疑问|点击|放大|缩小|移动
cursor:[<url>]*,[auto|default|none|help|pointer|zoom-in|zoom-out|move];

强制继承： inherit;

盒模型：

// min-width,max-width用法一致；
width:<length>|<percentage>|auto|inherit;
// min-width,max-width用法一致；
height:<length>|<percentage>|auto|inherit;

// 顺序为 上，右，下，左
padding:[<length>|<percentage>]{1,4};
margin:[<length>|<percentage>|auto]{1,4};

边框：

border:[<border-width>||<border-style>||<border-color>];
border-width:[<length>]{1,4};
//             实线|虚线|点
border-style:[solid|dashed|dotted]{1,4};
border-color:[<color>|transparent]{1,4};

圆角边框：

border-radius:[<length>|<percentage>]{1,4}[/[<length>|<pencentage>]{1,4}]?
//                  水平半径     /     垂直半径
border-radius: 0px 5px 10px 15px/20px 15px 10px 5px;
border-top-left-radius:5px;

设置超出部分的样式：

//   overflow-x|overflow-y;
//         可见|隐藏|出现滚动条|自动显隐滚动条；
overflow:visible|hidden|scroll|auto;

切换盒子模型模式：

box-sizing:content-box|border-box|inherit;

盒阴影：

box-shadow:none|<shadow>[,<shadow>]*
<shadow>:inset?&&<length>{2,4}&&<color>?
//水平偏移 垂直偏移 模糊半径 阴影大小 阴影颜色；
box-shadow:4px 6px 3px 3px red;
//  内阴影
box-shadow:inset 0px 0px 5px red;

轮廓：

outline:[<out-width>||<outline-style>||<outline-color>];
outline-width:<length>;
outline-style:solid|dashed|dotted;
outline-color:<color>|invert;

与border值较为相似，但有两点区别： 1、border占据空间，而outline并不占据空间； 2、outline在border的外围；

背景(位于盒模型的最底层)：

background-color:<color>；
background-image:<bg-image>[,<bg-image>]*
<bg-image> :<image>|none;

Tips: 1、绝对路径：“http://....”; 2、相对路径，相对于根目录，CSS文件是相对于CSS文件，JS文件是相对于HTML的文件，..代表上一级："../images/x.png"

背景平铺方式：

background-repeat:<repeat-style>[,>repeat-style>]*
//             X方向重复|Y方向重复|重复|留空隙平铺|伸缩铺满
<repeat-style>:repeat-x|repeat-y|[repeat|space|round|no-repeat]{1,2};
//  x轴不重复，y轴重复
background-repeat:no-repeat repeat;

背景固定方式：

background-attachment:<attachment>[,<attachment>]*
//           背景随滚动而滚动|背景固定|继承
<attachment>:scroll|fixed|inherit;

背景图片位置：

background-position:<position>[,<position>]*
<position>:left|center|right|top|bottom|<percentage>|<length>

background-position:10px 20px; 表示x轴偏移10px,y轴偏移20px； background-position:20% 50%; 表示相对于父元素的定位； background-position: center center; 图片居中； background-position:right; 水平靠右，垂直居中； background-position:right 10px top 20px; 与右边偏10px ,与上边偏20px；

常用的背景属性：

background:url("x.png" ) no-repeat 10px 10px;