定义小块 小图标
CSS引入方式—外联式（外链式）
含义：通过link标签将独立的css文件引入到html文件中
优点：可以分屏，利于写样式
语法：link标签 href=“css样式路径名称”
可以放在head标签或者body标签里面
rel="stylesheet" 描述了当前页面与href所指定文档的关系。即href连接的文档是一个新式表
type="text/css" 是指定mime类型，也就是css文档
href="../css/prism.js" 规定被连接文档的位置
CSS引入方式—导入式
含义：通过@import‘url’引入一个独立的css文件
语法：依赖css样式文件，所以他要放在style或者css样式表里
@import "css样式路径"
如果style里面既有内嵌的样式又有导入的样式，导入式要放在内嵌式的上面；放在下面导入式会失效
url(style.css) url(规定被链接文档的位置)
外链式和导入式的区别
1.link和@import虽然都是引入外部的css文件，但是他们是有天差地别的
2.link是html标签，@impor完全是css提供的方式，要写在css文件或者style标签中
3.他们加载顺序也是有区别的，当一个页面被加载的时候，link引用的css文件会被同时加载，而@import引入的css文件会等页面全部下载完后再加载
4.当使用JavaScript控制dom去改变css样式的时候，只能使用link标签，因为import是不能被dom控制的
css命名规范及项目文件目录
1.必须使用英文开头，并且开头字母一律小写
2.所有命名最好都小写
3.尽量不要用缩写英，除非可以一目了然的
4.如果遇到相差不大class或者id，主功能识别字母在前，位置识别字母在后，职位识别字母第一个可大写（如：navTop，menuLeft）
5.遵循驼峰命名法：第一个单词的首字母小写，其余每一个有意义的单词的首字母大写（如：studentInfo、getElementById）
头：header 内容：content/container
尾：footer 导航：nav
侧栏：sidebar 栏目：column
页面外围控制整体布局宽度：wrapper 左右中：left right center
登陆条：loginbar 标志：logo
广告：banner 页面主体：main
热点：hot 新闻：news
下载：download 子导航：subnav
菜单：menu 子菜单：submenu
搜索：search 友情链接：friendlink
页脚：footer 版权：copyright
投票：vote 合作伙伴：partner
滚动：scroll 内容：content
标签页：tab 文章列表：list
提示信息：msg 小技巧：tips
栏目标题：title 加入：joinus
指南：guild 服务：service
注册：regsiter 状态：status
CSS选择器-基本选择器
1.标签选择器：直接通过元素标签进行选择
p{color:red;}
——此选择器权重为1
2.类选择器：通过元素的类名，来选择元素，一个元 素可以有多个类名，都代表这个元素
类名是元素class属性中的属性值，
.sum{}
——此选择器的权重为10
3.id选择器：通过元素的id名，来选择元素，类名是元素id属性中的属性值，
#sum{}
——此选择器的权重为100
4.通配符选择器：代表页面上所有的标签名，可以用来去掉浏览器默认自带的间距
*{margin：0；padding：0；}
——权重小于1，可被覆盖
口号：看到class名要想到"."看到id要想到"#"
CSS选择器-并集选择器
含义：可以对选择器进行分组，被分组的选择器就可以分享相同的声明。
用","将需要分组的选择器分开
语法：样式相同的标签可以并列在一起，节约代码量，更加简化，减少代码的多次重复使用
h1,h2,h3{color:green;}
CSS选择器-交集选择器
含义：两种属性同属一个元素的时候，我们可以使用交集选择器来进行元素的准确选择
语法：在class名或者id名前面加上标签名 缩小查找范围
注意：标签名和class/id名中没有空格隔开
p.name1{}
p#id1{}
.name1.name2{}
CSS选择器-派生（后代）选择器
含义：通过依据元素在其位置的上下文关系来定义样式，用 空格 隔开列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器
后代选择器尽量不要超过3个，没有必要把每一个层级都写出来，只需要写出关键节点即可
li strong{
font-style:italic;
font-weight:normal;
list-style:none;}去掉ul li前面默认的小黑点
- 我是斜体字，这是因为strong元素位于li元素内
CSS选择器-子代选择器
含义：与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素，符号为大括号
只作用于子元素这一代 孙子以及孙子后面的代不会受影响
h1>strong{color:red;}
this isveryimportant.
CSS选择器-相邻兄弟选择器
含义：相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素
加号前面的选择器只是用来作为我们查找兄弟的参照标签 他不参与样式的影响
h1+p{margin-top:50px;}
+ 相邻兄弟
~ 所有兄弟
CSS选择器-属性选择器
属性：标签天生自带/我们自定义的标签属性
符号：[属性名] [属性名=“属性值”]
含义：对带有指定属性的html元素设置样式 权重为10
可以为拥有指定属性的html元素设置样式，而不仅限于class和id属性
属性选择器
下面例子为带有title属性所有元素设置样式：
[title]{color:red;}
属性和值选择器
下面例子为title=“zfpx”的所有元素设置样式：
[title=zfpx]{border：5px solid blue；}
设置表单的样式
input[type=“text”]{width:150px;display:block;}
CSS选择器-伪类选择器
a:link{color:red} 未访问的连接
a:visited{color:red} 已访问的连接
a:hover{color:red} 鼠标以动的连接上
a:active{color:red} 选定的连接（没有抬起时）
text-decoration:none/underline; 无下划线/有下划线
权重：10<权重<11
表单元素input：
input：focus 获取焦点（鼠标光标）
input：blur 失去交点（鼠标光标）
CSS3新增的伪类选择器*
css选择器有哪些？css3新增伪类有哪些？
a:link 没有访问之前的样式
a:visited 已访问的样式
a:hover 鼠标移上的样式
a:active 鼠标按下的样式
input：focus 获取光标
css3新增伪类选择器
1. ：not 排除
ul li{
list-style：none；
width：100px；
height：50px
background：red；}
ul li：not（last-child）{
border-right：10px solid #000；}
2. ：last-child
3. :nth-child(n) n=数字（具体第几个）/odd（奇数行）/even（偶数行）
4. ：only-child 唯一、仅仅只有一个的元素
5. ：nth-last-child 倒数第几个元素
6. ：first-of-type 第一个同级凶死元素
7. ：last-of-type
8. ：only-of-type 只有一个元素
9. ：nth-of-type（n）第几个同级兄弟元素
10. ：nth-last-of-type（n）
11. ：empty 空内容
12. ：check 被选中
CSS选择器-伪元素选择器
:first-line 伪元素用于向文本的首行设置特殊样式，只能用于块级元素
：first-letter 微元素用于向文本的首字母设置特殊样式
：before 在元素的内容前面插入内容
：after 在元素的后面插入内容
display：block
content:" " 这个属性不能省略 如果没有这个属性：after样式不会起作用
只要碰到before和after就要加content
只要是设置宽度不起作用 就加display：block（独占一行）/display：inline-block（不独占一行）（转换为块）
vertical-align：bottom/4px；基线对齐
CSS权重和基本规则
权重记忆口诀：从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1
！important>id>class>标签>*
规则：相同的权重：以后面出现的选择器为最后规则
不同的权重：权重值高则生效
权重相等 不遵循就近原则：！important(权重1000)
CSS中可以和不可以继承的属性
一、无继承的属性
1.display：规定元素应该生成的框的类型
2.文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
3.盒子模型的属性：width、height、margin、
margin-top、margin-right、
margin-bottom、margin-left、border、border-
style、border-top-style、
border-right-style、border-bottom-style、
border-left-style、border-
width、border-top-width、border-right-right、
border-bottom-width、
border-left-width、border-color、border-top-color、border-right-color、
border-bottom-color、border-left-color、
border-top、border-right、
border-bottom、border-left、padding、
padding-top、padding-right、
padding-bottom、padding-left
4.背景属性：background、background-color、background-image、background-
repeat、background-position、background-attachment
5.定位属性：clear、position、top、bottom、left、min-height、max-width、
max-height、overflow、clip、z-index、
6.生成内容属性：content、counter-reset、counter-increment
7.轮廓样式属性：outline-style、outline-color、outline-width、outline
8.页面样式属性：size、pause、cue-before、cue-after、cue、play-during
二、有继承性的属性
1.字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换成大写，但是所有使用大型小写字体的字母与其余文本相比，其字体尺寸更小
font-size-adjust：为某个元素规定一个aspect值，这样就可以保持首选字体的x-height
2.文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
3.元素可见性：visibility
4.表格布局属性：caption-side、border-collapse、border-spacing、table-layout
5.列表布局属性：
6.生成内容属性
7.光标属性：cersor
8.页面样式属性：page、windows
9.声音样式属性：speak
CSS盒子模型
宽度和高度的单位
1.px 像素单位 写死
2.% 百分比 动态计算的单位 （自适应 响应式）
内边距（顺时针方向）
内边距会影响盒子在浏览器中的大小
padding:10px
上、下、左、右=10px
padding：10px 20px
上、下：10px 左、右：20px
padding：10px 20px 30px
上=10px 左、右=20px 下=30px
padding：10px 20px 30px 40px
上=10px 右=20px 下=30px 左=40px
边框border
属性：宽度、类型、颜色
类型：solid 实线/dashed虚线/dotted点状线
颜色：英文名：黑色 白色
# ：#000 #fff
rgb：rgb（0，0，0） rgb（255，255，255）
如果没有指明方向的情况下 表示四个方向都有边框线 而且边框线相等
如果border属性只有边框宽度 没有边框线的类型和颜色 导致border属性失效
去掉边框线 border：0
不切图片的情况下 如何制作箭头和小三角的形状*
=>border
小箭头：
原理：正方形的的任意相邻的两条边线
然后旋转一定的角度 得到我们需要的任意方向的箭头
箭头的大小由正方形的宽高控制
箭头的粗细由border边框线的宽度去控制
deg：角度单位 rotate：旋转角度
