css
css格式
选择器{属性:值;}
基础选择器
标签选择器，类选择器，id选择器，通配符选择器
标签选择器
使用html标签名命名的为标签选择器
eq：div{color:green;}
类选择器
可以设置差异化
.类名{内容}
不允许使用纯数字、中文字符命名
多类引用
一个元素引用多个类名，在每个类名之间加入空格即可。
id选择器
使用html标签名命名的为标签选择器，使用#开头
#名称{内容}
不允许使用纯数字、中文字符命名
只能调用一次，如果上面有标签元素调用了id选择器，下面的标签就不可以使用这个选择器，类选择器不会有这个限制
通配符选择器
会将html中所有标签属性都改为这里的样式，无需刻意调用
*{内容}
字符属性
字体属性font-family
font-family:’微软雅黑,Microsoft YaHei’;
建议使用字体的英文名称；设置多个字体的意思是,如果用户电脑未安装第一种字体，就执行第二个字体，以此类推；字体与字体之间用英文逗号分隔；如果字体名称有两个或两个以上的单词组成，使用引号包含起来，单双引都可
字体大小font-size
font-size: 20px;
px为像素，标题标签需要单独指定大小，body中设置会不起效果
字体粗细font-weight
font-weight: normal[bold;bolder;leghter;number]
normal:正常字体，相当于number为400.声明此值会取消此前所有设置
bold:粗体，相当于number为700，也相当于b对象作用
bolder:ie5+，特粗体。
leghter:ie5+，细体。
number:ie5+ 100~900[取整递增]
通常使用数字对文字的粗细进行修改
字体样式font-style
normal：默认值，浏览器显示的标准字体样式
italic：斜体
文本属性
文本颜色
使用预定义颜色值（单词）、16进制或RGB进行文本颜色描述
color: red;
或
color:#ff0000;
或
color: rgb(255,0,0);
文本对齐
text-align：用于水平方向的文本对齐方式
left左对齐
right右对齐
center居中对齐
文本装饰
text-decoration：装饰文本的线的存在位置
none：取消所有文本装饰
underline：下划线
line-through：删除线
overline：上划线
文本缩进
text-indent: 10px;：段落第一行进行缩进
px是像素
em也是像素，此单位为相对当前对象和元素进行缩进，1em为当前元素的一个文字的距离，如果当前元素没有设置大小，会按照父元素大小的一个文字大小
行间距
line-height：控制行与行之间的距离
px像素
css引用
行内样式表
写在标签里面的（<p style=”color: red”>）为行内样式表
使用较少，适用于修改简单需求的情况
所有的属性都需要在双引号内
内部样式表
写在<style>标签里的为内部样式表
理论上可以放到HTML的任何地方，一般放在head标签中
控制范围是整个html
外部样式表
使用较多，适用于
写在.css文件中，在html里使用<link>标签引入该.css文件，这种方式为外部引入。注意路径问题
chrome调试工具
f12，剩下的自己查吧
Emmet语法
使用Emmet语法快速生成html框架结构
标签名加上星号可快速生成多个该标签，div*10.
有父子级关系的标签，可以用父标签名>子标签名书写创建，ul>li
有兄弟标签，用两个标签名中间加加号，div+p
想生成带有类名或id名的字符，写.类名或#id名，默认div，p.gray；
如果生成div类名是有序的，使用自增$符，.demo$*5
如果想要在生成的标签内部写内容用{}}，div{lalalalalala}
复合选择器
后代选择器
又称为包含选择器，适用于有父子级关系的元素；最终更改的是最后一个元素
ol li {}
如果有同类的父子级，可以通过修改其中一个父级的class进行区分
ol li {}
.nav li {}
子代选择器
适用于父子级关系中最近一级的子元素
<style>
div a {
color: red;
}
/* 可以分别尝试一下 */
div>a {
color: pink;
}
</style>
<div>
<a href="">div下</a>
<a href="">div下</a>
<p>
<a href="">div p下</a>
<a href="">div p下</a>
</p>
</div>
并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式，适用于集体声明。
并集选择器通过逗号链接，任何形式的选择器都可以作为并集选择器的一部分，包括元素名，父代子代，基本选择器等
一般情况下习惯每一个选择器名还有逗号独占一行，最后一个选择器没有逗号
伪类选择器
适用于向某些选择器添加特殊效果
使用冒号开头,:demo，:herm-ol
链接伪类选择器
a:link 所有未被访问的链接
a:visited 所有已访问过的链接（涉及隐私，font-size没效果）
a:hover 鼠标指针在连接上
a:active 鼠标按下未弹起的连接
Tip:尽量按link，visited，hover，active的顺序对连接进行修改
链接想改变样式需要单独设置
:focus伪类选择器
适用于获取有焦点（光标）的元素，例如input文本框
元素显示模式
作用：为了更好的布局网页
块元素
特点：独占一行；高宽内外边距可自定义；宽度默认占浏览器（父级宽度）的100%；可以放行内或块级元素
注意：文字类元素内不能适合用块级元素，p标签不能放div标签
行内元素（内联元素）
特点：相邻的行内元素可以在一行上；宽高直接设置不会生效；默认的宽度是内容的宽度；行内元素只能容纳文本或其他行内元素。
a可以放块级元素，多会转换为块级元素
行内块元素
部分标签同时具备块级元素和行内元素的特性，如img，input等
显示模式的转换
有些情况下，某些元素需要模式的转换，通过display属性进行转换
eq：a标签需要增加触发范围
a{
display: block;
/* block为转换成块元素；inline为转换成行内元素；inline-block为行内块元素 */
}
工具snipaste，win10应用商店可查
单行文字垂直居中：使用line-hight可以让文字的行高等于盒子hight的高度，因为本身文字的行高就等于文字本身的高度加文字上距离元素上边框的距离加文字下距离元素下的高度
背景样式
背景颜色
background-color：rgb[预设;16进制]
默认值为transparent，透明的
背景图片
用于装饰性图片
background-image：none [url(url图片路径)]
相对于插入图片，便于控制位置，
背景平铺
background-repeat: repeat [no-repeat;repeat-x;repeat-y]
repeat平铺，no-repeat不平铺，repeat-x沿x轴平铺，repeat-y沿y轴平铺
默认为平铺
背景位置
方位名词
background-position: x y;
值：
lenght 百分比;由浮点数和单位标识符组成的长度值
position top;center;botton;left;right
如果xy两个值全部使用方位名词，没有先后顺序；但是当只有一个方位名词时，第二个为默认为居中对齐
精确位置
background-position: 20px 50px;
如果使用精确位置，规定第一个值必须是x轴，第二个值必须是y轴；如果只有一个精确值，前面属性不变，缺省的第二个值默认为y轴居中对齐
混合单位
background-position: center 50px;
混合使用时，第一个值一定是x轴，第二轴一定是y轴
背景固定
固定图片在某个位置
background-attachment: scroll fixed
scroll为滚动，fixed为固定
背景的属性复合性写法
background: 值
值的顺序没有严格要求，一般书写习惯为：background:背景颜色 背景图片地址 平铺样式 背景图片滚动 背景图片位置;
背景色半透明
background: rgba(0,0,0,0.3)
第一个值为红色值，第二个值为绿色值，第三个为蓝色值，最后一个为alpha值，取值在0~1之间
三大特性
层叠性
相同的选择器给相同的样式
样式冲突: 遵循就近原则，就是浏览器从上倒下解析时，最后一个同属性的会覆盖掉上面之前设置的相同属性。
不冲突：不层叠
继承性
当给父级设置样式后，下面的子级同样会继承某些父级样式（文字类属性），子级单独设置样式，父级的样式会失效
（未完待续……）
更多内容：
