欢迎加入Unity业内qq交流群：956187480
qq扫描二维码加群
1.语法基础
格式：选择器{属性1：值1;属性2：值2}
单位：px像素pixel，%百分比根据外部父容器设置大小
基本样式：width，height，background-color
2.CSS样式的引入方式
1.内联样式：style属性
这是一个div块
2.内部样式：style标签
div{width: 100px; height:100px; background-color: red;}
内部样式的代码可以复用，复合w3c的标准规范，尽量让结构和样式分开处理
3.外部样式
引入一个单独的css文件，name.css
标签用来引入外部资源，rel指定引入资源类型，hraf指定资源地址路径:
@import也用来引入外部样式: @import url('./common.css')
3.CSS中颜色的表示方法
单词表示法，十六进制表示法，三原色表示法
4.CSS背景样式
background-color背景色
background-image背景图
url 背景地址
background-repeat
水平竖直平铺方式 repeat-x；repeat-y；repeat(x,y)(默认)，no-repeat
background-postion 背景图位置:right;30%;50px
background-attachment 背景图随滚动条的移动方式
scroll背景位置是按照当前元素进行偏移的。
fixed背景位置是按照浏览器进行偏移的
5.Css边框样式
border-style:边框样式
border-width:边框大小
border-color:边框颜色
只针对某一条边单独设置：border-right-style 中间是方向
颜色：透明 transparent
6.CSS文字样式
font-family:字体类型
Arial /'Times New Roman'英文字体
微软雅黑，宋体 中文字体
衬线体与非衬线体：显示风格不同
多字体设置：可设置多个备选方案 识别本机存在的字体：div{font-family: SimSun, Helvetica, sans-serif;}
引号问题：字体名字里面出现空格就需要单引号引起来
字体大小：font-size
(不推荐)xx-small 最小；x-small 较小；small小；medium 正常(16px)；large 大；x-large较大；xx-large最大
字体粗细：font-weight
模式：正常（normal）加粗（bold）
写法：单词（normaln,bold）|number(100....900)100-500都是正常的，500-900才有加粗效果
字体样式：font-style
模式：正常normal，斜体italic
字体颜色：color
7.CSS段落样式
text-decoration 文本装饰
下划线 underline
上划线 overline
删除线 linethrough
可以附加多个用空格隔开
text-transform 文本大小写(英文)
lowercase 小写
uppercase 大写
capitalize 只针对首字母大写
text-indent 文本缩进
em 相对缩放值
text-align 对齐方式
left right center justify(两边对齐)
Line-height 行高
一行文字的高度，上边距和下边距等价关系
8.css复合样式
复合样式的写法是通过空格是实现的,有的对顺序没有要求background：border；font字体就必须按照顺序写
1.background： red url() repeat 0 0;
2.border: 1px red solid
3.font：（最少要有两个属性：size family）
注意：要么只用单一样式要么只用复合样式，
如果真的要两种都用就要先写复合样式最后写单一样式，
因为后写复合的话就会把之前的单一样式覆盖掉
9.CSS选择器
1.ID选择器
#elem{} id="elem"
注：
1.id是唯一值 在一个界面里面只能出现一次
2.命名规范，由字母，下划线，中划线，数字组成，且第一个字符不能是数字
3.驼峰写法：小驼峰 大驼峰
2.class选择器
.elem{} class ="elem"
注：1.class选择器可以复用，
2.可以添加多个class选择器
3.多个样式的时候，样式优先级根据CSS决定，而不是Class属性中的顺序
4.标签+类的写法
3.标签选择器（Tag选择器）
css：div{}
htm：
使用的场景：
1.去掉某些标签的默认样式时
2.复杂的选择器中，如 层次选择器
4.群组选择器
css：div，p，span{}
5.通配选择器
*{ } -> div ,ul,li,p,h1,h2...{}
注：慎用通用选择器
6.层次选择器
后代：M N{ }
父子：M > N{}
兄弟：M~N{} 当前M下的所有兄弟
相邻：M+N 当前M下面相邻的标签
7.属性选择器
M[attr] {}
= :完全匹配
*= : 部分匹配
^= :起始匹配
$= ：结束匹配
[][][] :组合匹配
8.伪类选择器
M:伪类{}
:link 访问前的样式 （只能添加给a标签）
:visited 访问后的样式 （只能添加给a标签）
:hover 鼠标移入时的样式 （添加给所有标签）
:active 鼠标按下时的样式 （添加给所有标签）
如果四个伪类都生效，一定要注意顺序：L V H A
一般网站只设置： a:{} a:hover{}
:after :before 通过伪类的方式给元素添加一个文本内容,使用content属性
:checked :disabled :focus 都是针对表单元素的
结构型伪类选择器
nth-of-type() nth-child()
括号内角标是从1开始的，1表示第一项，2表示第二项 n表示从0到无穷大
first-of-type
last-of-type
only-of-type
nth-of-type()和nth-child()之间的区别
type：类型
child：子节点欢迎加入Unity业内qq交流群：956187480
qq扫描二维码加群
