一:Chrome 调试工具
Chrome是浏览器提供的一个非常好用的调试工具,可以调试HTML结构和css样式。
(1)打开调试工具
按下f12或右击页面空白处选择检查。
elements元素
(2)使用调试工具
左是HTML,右是css
不会改变代码,需要复制修改代码。
如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误。
如果有样式,但样式前面有黄色叹号提示,则是样式属性书写错误。
CSS第二天
一:emmet语法
emmet使用缩写来提高html和css的编写速度。
1,快速生成HTML结构语法
- 生成标签,直接输入标签名按tab即可
- 想生成多个相同标签加上*就可以了,如:div*3,可以快速生成3个div
- 如果有父子关系的标签,可以用>比如ul>li就可以了
- 如果有兄弟关系用+
- 如果生成带有类名或id名的,直接.demo或者#two tab就可以了。
- 如果生成的类名有顺序,添加自增符号$,如:.demo$*5
- 想生成的标签里默认显示几个文字,如:div{一句话}*5按tab
二:快速生成css样式
- 简写后按tab键。基本上只用写每个单词的第一个字母。
三:css的复合选择器
1 .复合选择器是建立在基础选择器之上,对基础选择器进行组合形成的。
优点:可以更准确更高效选择目标元素(标签)
常用的复合选择器主要包括:后代选择器,子选择器,并集选择器,伪类选择器等等。
2. 后代选择器(非常重要)
又称包含选择器,可以选出父元素里面子元素。中间用空格隔开,书写格式如:
ol li{
}
子元素可以隔代,只要包含在元素一内就可以选中。
元素一和元素二可以是任意的基础选择器
3. 子选择器(重要!!!)
子选择器只能选择作为某元素的最近一级子元素,简单理解就是选亲儿子元素。
书写格式,如:.nav>a,选出nav类内的儿子标签a