1.CSS全称是什么
- 层叠样式表( Cascading Style Sheets)
2.CSS有几种引入方式? link 和@import 有什么区别?
引入方式
CSS有三种引入方式,分别是内联样式,内部样式和外部样式
- 内联样式:
直接在HTML标签的style属性中设定CSS样式
<h1 style="color: red; font-size: 20px;"></h1>
2.内部样式:
在<style>标签内书写 CSS 代码(<style>标签一般位于HTML头部)
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
<h1>饥人谷</h1>
3.外部样式:
- 链接式
通过HTML头部的<link>标签从外部引入CSS文件
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
- 导入式
使用 CSS 规则,通过@import导入外部CSS文件
<style>
@import url(../css/style.css);
@import "world.css";
</style>
link和@import的区别
- 本质不同
- link是HTML标签,可以放在HTML文件的任何位置
- @import是CSS语法,应该位于样式文件或者< style>标签里
- 加载顺序不同
- link标签内的样式会随着页面内容加载同步加载
- @import引用的文件则会等页面全部下载完毕再被加载,对于有的浏览器来说,在一些情况下,如果网页文件的体积比较大,则会出现先显示无样式的页面,闪烁一下之后再出现设置样式后的效果,从浏览者的感受来说,这是导入式的一个缺陷
- 兼容性的差别
- @import是CSS2.1提出的,所以老的浏览器不支持,@import只在IE5以上的才能识别,而link标签无此问题。
- 使用DOM控制样式差别
- 当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的
3.列出5条以上html和 css 的书写规范
- HTML
- id class建议单词全字母小写,单词间以 -分隔。同项目必须保持风格一致。
- HTML 标签的使用应该遵循标签的语义。
- 禁止 img的 src取值为空。延迟加载的图片也要增加默认的 src
- 使用 button元素时必须指明 type 属性值。
- 在 CSS 可以实现相同需求的情况下不得使用表格进行布局
- CSS
- 语法不区分大小写,但建议统一使用小写
- 不使用内联的style属性定义样式
- id和class使用有意义的单词,分隔符建议使用-(中横线)
- 有可能就是用缩写
- 属性值是0的省略单位
- 块内容缩进
- 属性名冒号后面添加一个空格