CSS基础

2017-10-18  本文已影响0人  字母31

1、CSS全称 Cascading Style Sheets, 层叠样式表。
2、引入CSS方式:
a)内联样式 <h1 style="color:red"></h1>,不推荐使用,HTML代码变得复杂或重复,不利于维护
b)内部样式表,即写在head标签内部的style标签,不推荐使用,会使HTML文件变大
c)link标签引用外部CSS文件,推荐使用,利于维护,避免重复书写相同的属性,理论上可以放在HTML文件内部任何位置,但是一般放在head里,这样可以避免白屏hu
和首屏闪烁(谷歌浏览器会等CSS下载完成之后再渲染页面,而IE则是只要看到HTML就渲染页面)
d)@import引入CSS文件,要注意link与@import的区别:link属于XHTML的标签,不存在兼容性问题,除可引用CSS外还可以引用其他类型文件,而@import是CSS2.1规定的方法,只能引入CSS文件,而且低版本的浏览器无法使用,link标签一般情况是下载完成后再渲染页面,而@import是渲染页面完成之后再加载
3、相对路径与绝对路径
/xxx代表根目录下的xxx是绝对路径,./xxx表示当前目录下的xxx是相对路径,../xxx表示上层文件下的xxx是相对路径,一般上线后的文件路径写相对路径,绝对路径的话可能会出错,一些图片或者音频资源我们可以上传到图床或者七牛等网站,使用外链链接引用也是可以的
4、CSS的书写规范:一般使用小写,class或者id名要有意义推荐使用驼峰写法,要注意缩进,属性值为0的单位省略不写等
5、chrome浏览器检查工具
Element:用于查看和编辑当前页面中的 HTML 和 CSS 元素;编辑html标签和css样式;测试标签的边界条件。
Source:用于查看和调试当前页面所加载的脚本的源文件;断点调试。
Console:JS测试,查看报错
Network:可以看到页面向服务器请求了哪些资源、资源的大小以及加载 资源花费的时间,当然也能看到哪些资源不能成功加载。此外,还可以查看HTTP的请求头,返回内容等。
左上角鼠标小图标快速定位元素节点相对应,小手机图标用来移动端测试调试

上一篇下一篇

猜你喜欢

热点阅读