初识CSS
2018-06-17 本文已影响0人
饥人谷_bigJiao
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的省略单位
- 块内容缩进
- 属性名冒号后面添加一个空格
