1、标签选择器
元素选择器
标签名{ 属性1:属性值;属性2:属性值;}
所有某一类集体更改样式按标签名分类
1.1、类选择器
<style>.one { color: red;}</style>
<p class="one">红色字体 </p>
在style标签中用.来调用需要样式的标签，在标签内给class命名，上定义下调用
1.2、类选择器常见错误及命名规范
- 长名称或词组可以使用中横线来为选择器命名，
- 不建议使用"_"下划线来命名CSS选择器
- 输入的时候少按一个shift键，浏览器兼容问题（比如使用tips的选择器命名，在IE6是无效的）能良好区分JavaScript变量命名（JS变量命名使用）
- 不要纯数字，中文等命名，尽量使用英文字母来表示。
CSS命名规范
1.3、多类名选择器
.red{ color:red;} .purple{ color:purple;} <p class="red purple">改字体是什么颜色</p>
字体颜色的显示顺序和style标签中样式的顺序一样
和标签内的顺序无关
1.4、id选择器
#red{ color:red;} <p id="red">改字体是红色</p>
类选择器和id选择器的区别
调用次数
类选择器 反复多次调用
id选择器是唯一的 只能调用一次
1.5、通配符选择器
* { color: purple;} *指所有标签（测试中使用）
2、CSS注释
/* 需要注释的内容 快捷键 Ctrl+Shift+/ */
2、
- 行高
line-height 单位有px em和
1em就是一个字的大小2em两个字大小。 - 水平对齐方式（左中右）
text-align: left center right可以让页面中文字 - 首行缩进两个字
text-indent: 2em; 让所有段落首行缩进两个字 - 标签语义化 w3cschool为例 利于SEO
去掉CSS样式之后，网页结构依然组织有序，并且有良好的可读性。
核心：合适的地方放合适的标签
小技巧 - 重语义的地方多用有语义的标签，比如h和p等等，少用没有语义的标签比如div span等等
- 如果有地方可以用p又可以用div，特别是文字段落，优先选用p标签（结构更清晰）
- 少用纯样式标签比如 b u font，可以运用CSS样式，如果有强调的地方尽量用strong em等有强调语义的标签
3、选择器
3.1、交集选择器
标签选择器 类选择器{ 属性: 值 } 例如 .singer{ color: #f00;} div .singer{ font-weight: 700;}
效果是既是红色又会加粗
3.2、并集选择器（集体声明）
标签选择器,标签选择器{ 属性: 值 } 例如 p,div,h1,.singer{ color: #f00;}
效果是p,div和h1标签内的内容都是红色
3.3后代选择器（集体声明）
标签选择器 标签选择器{ 属性: 值 } 例如 .nav ul li{ color: #f00;}
效果是p,div和h1标签内的内容都是红色
3.4子元素选择器（集体声明）
标签选择器>类选择器{ 属性: 值 } 例如 >代表子元素选择器 ul>li{ color: #f00;}
效果是ul里的li标签内的内容都是红色
3.5、行内元素
p里面不能放块级元素
p h1-h6 dt都是文字类的块级元素
3.6、块级和行内元素区别
块级元素的特点：
- 总是从新行开始
- 高度 行高 外边距以及内边距都可以控制
- 高度默认都是容器的100%
- 可以容纳内联元素和其他元素
行内元素的特点： - 和相邻的元素在一行内显示
- 宽度 高度无效，但水平方向的padding和margin可以设置，垂直方向的无效
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或者其它行内元素，不能放块级元素（a除外）
行内块元素inline-block
例如 img input td
既可以在一行内放多个又可以调整宽高。
元素之间的转换
display:
3.7、链接伪类
:link 用于未被访问过的连接
text-decoration 属性文本是否有下划线normal为无下划线
:hover 用于有鼠标指针悬停于其上的元素
:active 应用于被激活的元素，如被点击的的链接被按下的按钮。
:visited 应用于已经被访问过的链接
:focus 应用于拥有键盘输入焦点的元素（ie8以上支持）
使用顺序为link visited hover active
伪元素
p:first-letter首字变大
p:first-line 改变首行文字效果（响应式）
4、玩转行高
字体有顶线中线基线底线
基线和基线之间的距离为行高
文字的行高等于盒子的高度可以实现居中对齐
小于盒子的高度位置靠上大于则靠下
4.1、玩转行高
看照片
链入式样式表
<link rel="stylesheet" type="text/css" href="name.css">
导入式样式表
<style type="text/css"> @import url(name.css); </style>
在外部css文件中放入导入式样式表，文件即可实现串糖葫芦效果，实现两者的效果
CSS层叠性
样式如果冲突后面会覆盖之前的样式，执行后者的样式
长江后浪推前浪，前浪死在沙滩上
CSS继承性
如果子标签会继承父标签的某些样式
CSS特殊性Specificity
继承或者*的贡献值 0.0.0.0
每个元素（标签）贡献值为 0.0.0.1
每个类，伪类贡献值值为 0.0.1.0
每个ID贡献值为 0.1.0.0
每个行内样式贡献值 1.0.0.0
每个!important贡献值 无穷大
例如
div ul li 0.0.0.3
.nav ul li 0.0.1.2
a:hover 0.0.1.1
.nav a 0.0.1.1
nav p 0.1.0.1
在标签属性内写入！important，优先级最优
a和h标签的特殊性 在游览器渲染的时候，就默认有自己的样式。
权重练习题做一做
background-color: red; 背景颜色 background-image: url();背景图片 background-repeat: no-repeat;背景图片不平铺 repeat-x横向平铺 repeat-y纵向平铺 background-position: 0 0; 和background-position: left top是一样都是左上角， 方位名词没有先后顺序 left center right左中右 top center button上中下 如果精确单位和方位名词混用但是x坐标在前 y坐标在后 背景附着 background-attachment: scroll和fixed fixed背景图片是固定的 scroll背景图片是滚动的
背景简写
background:背景颜色，背景图片地址，背景平铺，背景滚动，背景位置
中间用空格隔开。没有要求顺序
网友评论