CSS的全称是什么?
CSS全称Cascading Style Sheets,层叠样式表
CSS有几种引入方式? link 和@import 有什么区别?
有三种引入方式:内联样式,内部样式,外部样式。
link和@import区别:
- link是XHTML的标签,@import是CSS的语法。
- 加载顺序的区别,当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。
- 兼容性的差别,由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
- 使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
以下这几种文件路径分别用在什么地方,代表什么意思?
相对路径:相对于当前目录的路径
css/a.css 当前目录下css中的a.css
./css/a.css 当前目录下css中的a.css
b.css 当前目录下的b.css
../imgs/a.png 上级目录下imgs中的a.png
绝对路径:本地文件的绝对地址
/Users/hunger/project/css/a.css
网站路径
/static/css/a.css网站路径的相对路径
http://cdn.jirengu.com/kejian1/8-1.png 线上的图片地址
如果我想在js.jirengu.com上展示一个图片,需要怎么操作?
把本地图片上传到一个图床网站,生成一个地址,添加到img标签中展示
列出5条以上html和 css 的书写规范
css书写规范:
- 语法不区分大小写,建议统一使用小写
- 不使用内联style属性定义样式
- 用<link>调用CSS样式
- 尽量避免@import调用方法
- 写CSS的时候块内容缩进
- 属性名冒号后面添加空格
- 属性值是0不写单位
- id和class 建议使用有意义的单词,单词间用分隔符-连接
HTML书写规范:
- 遵循标签语义化原则,避免标签乱用
- 要求结构清晰,结构层级扁平化处理
- 标签用来表达结构,而不是形式样式
- 属性值必须用双引号括起来
- 不使用属性简写
- 不是标签一部分的特殊符号都用编码表示
截图介绍 chrome 开发者工具的功能区
Elements: 允许我们从浏览器的角度看页面,也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM对象。此外,还可以编辑这些内容更改页面显示效果;在这里选中某一DOM对象时,网页中相应元素也会被阴影覆盖。我们可以对DOM对象进行修改,修改后结果会在页面实时显示出来
Network: 可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间,当然也能看到哪些资源不能成功加载。此外,还可以查看HTTP的请求头,返回内容
Styles: 显示用户定义的样式,比如请求的default.css中的样式,和通过Javasript生成的样式,还有开发者工具添加的样式
Console: 显示各种警告与错误信息,并且提供了shell用来和文档、开发者工具交互