一、谷歌浏览器开发者工具
- 网页右键-->检查（审查元素）
- F12快捷键
- Elements选项查看元素
- network查看网络
- console控制台
- 右边styles表示当前选中标签设置了什么属性，可以修改直接查看效果但不会保存影响到源码
二、CSS三大特性
1. 继承性
- 给父元素设置一些属性，所有的子元素都可以继承
- 并不是所有的属性都可以继承，只有以color、font-、text-、line开头的属性才可以继承
- a标签的字体颜色和下划线是不能继承的
- h标签的文字大小是不能继承的
- 可通过谷歌浏览器开发者工具右边的style标签中查看
- 一般用于设置网页上的一些共性信息，例如网页的文字颜色，字体大小等
2. 层叠性
- css处理冲突的一种能力
- 层叠性只有在多个选择器同时选中同一个标签，然后又设置了相同的属性，才会发生层叠
- 可通过谷歌浏览器开发者工具右边的style标签中查看
3. 优先级
- 当多个选择器同时选中同一个标签，然后又设置了相同的属性，如何层叠就由优先级来确定
- 如果是间接选中（继承），谁离目标标签近就听谁的
- 如果是直接选中，而且选择器类型相同，那么谁写在后面就听谁的
- 如果是直接选中，选择器类型不同，那么就会按照选择器的优先级来层叠：id选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认
4. !important
- 用于提升某个直接选中标签的选择器中的某个属性的优先级，可以将被指定的属性的优先级提升为最高
- 通配符选择器也可以使用
- 只能提升某个被指定的属性，那些没有被标记的不影响
- 必须写在分号前面，感叹号也不能省略
5. 权重的计算
- 当多个选择器混合在一起使用时，我们可以通过计算权重来判断谁的优先级最高
- 首先数id选择器的个数，谁的多谁的优先级就高
- 如果id选择器的个数相同，那么数类选择器的个数，谁的多谁的优先级高
- 如果id和类的个数都相同，那么数标签选择器的个数，谁的多谁的优先级高
- 如果id、类和标签个数都一样，那么就不进行计算了，谁写在后面听谁的
注意：必须是直接选中标签
三、CSS显示模式
div：一般用于配合css完成网页的基本布局，是一个容器级别的标签
span：一般用于配合css修改网页中的一些局部信息，是一个文本级别的标签
区别：div是块级元素，会单独占一行。span是行内元素，一行内可以有多个
容器级的标签：可以层叠多个标签
文字级的标签：只能放文字，图片和超链接等
在企业中一般嵌套都是用div或者按照标签来嵌套
1. 块级元素：p div h ul ol li dl dt dd
独占一行，如果没有设置宽高，默认和父元素一样，如果设置了就按设置的来
2. 行内元素：span b u i s strong em ins del
行内元素不可以设置宽高，默认和内容一样
3. 行内块级元素：img
元素既不独占一行，也能设置宽高
4. 相互转换
在每个选择器的属性里都有display这个属性
display:inline(di+tab)：转化为行内元素
display:inline-block(dib+tab)：转化为行内块级元素
display:block(db+tab)：转化为块级元素
三、CSS背景属性
- 背景颜色：
background-color:(bc + tab) - 背景图片：
background-image:url()(bi + tab) - 背景图片的平铺：
background-repeat:(bgr + tab)
repeat：默认值，在水平和垂直方向都平铺
repeat-x：只在水平方向平铺
repeat-y：只在垂直方向平铺
no-repeat：不平铺 - 背景定位：
background-position:水平方向 垂直方向(bp + tab)
水平方向：left/center/right或者具体像素，默认值为left，越往右越大，可设置负数即图片往左移，可只设置水平方向值为center，图片自动居中显示
垂直方向：top/center/bottom或者具体像素，默认值为top，越往下越大，可设置负数即图片往上移
具体像素用来与精灵图结合使用 - 关联方式：
background-attachment:(ba + tab)默认值为scroll，背景图片会随着滚动条滚动而滚动，如果不想让他随着滚动可以将值该为fixed - 连写：
background：背景颜色 背景图片 平铺方式 关联方式 定位方式(bg+ + tab) - 背景重叠的应用可以理解为PS当中的图层多个图层重叠显示
注意：
- 同个标签可以同时设置背景颜色和背景图片，默认是图片覆盖颜色
- 如果要设置background-repeat属性，必须有background-image属性
- 连写中任何一个属性都可以被省略
- 由于是背景图片,需要先给div设置一个高度
- background-image属性与img标签的区别:
- 背景图片仅仅是一个装饰,不会占用位置
- 背景图片有定位属性,可以随便改变位置
- 插入标签的语义比背景图片更强,容易被搜索引擎搜到
网友评论