CSS基础
2017-09-01 本文已影响0人
D一梦三四年
CSS的全称是什么？
Cascading Style Sheets 层叠样式表
CSS有几种引入方式，link 和@import 有什么区别？
CSS有4种引入方式
- 行内样式：直接在HTML的style属性中添加样式
<div style="background: blue; color: red;"></div>
缺点：太过混乱
- 内部样式：在HTML头部的<style>标签中添加样式
<head>
<style>
#div1 {
backgoround: blue;
color: red;
}
</style>
</head>
缺点：多个页面之间CSS的复用不够
- 链接方式：通过头部的<link>标签从外部引入CSS文件
<head>
<link rel="stylesheet" href="style.css">
</head>
(推荐)
- 导入方式：通过@import导入外部CSS文件
<style>
@import url(../css/style.css);
</style>
或者在CSS文件中@import url(../css/style.css)
缺点：性能差
link 与@import 的区别
- 范畴不同：link属于HTML的标签，通过其href属性来引入外部文件；@import属于CSS，所以@import导入语句应写在CSS中，且应该写在样式标的开头，否则无法正确导入外部文件
- 加载顺序的不同：页面在加载时，link引入的CSS会同时加载；而@import导入的CSS需要在页面完全载入之后再加载，所以浏览使用@import导入的页面时，最开始会没有样式（就是闪烁）
- 兼容性的区别：link是XHTML标签，无兼容问题；而@import是CSS2.1提出的，IE5以上的浏览器才能识别
- 是否支持JavaScript DOM改变：link支持使用DOM改变CSS样式；而@import不支持
以下这几种文件路径分别用在什么地方，代表什么意思?
- 相对路径(不以"/"开头)：以当前文件的所在路径为基准来查找文件
-
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根文件夹(根目录)/ Users文件夹/hunger文件夹/project文件夹/css文件夹/a.css文件 -
/static/css/a.css根文件夹(根目录)/static文件夹/css文件夹/a.css文件
- 网站路径：文件上传到服务器后生成的地址链接
-
http://cdn.jirengu.com/kejian1/8-1.png8-1.png在互联网上的地址
如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
- 将图片上传到服务器(如七牛),通过外部链接可直接调用
列出5条以上html和 css 的书写规范
HTML书写规范
- HTML页面开头使用<!DOCTYPE>指明标准模式
- <html>标签应加上lang属性
<html lang="zh-cn"> - 在HTML头部声明字符编码方式
<meta charset="UTF-8"> - 属性名小写
- 不要使用内联样式
CSS书写规范
- 缩进使用4个空格
- 每个属性声明末尾都要加分好
- 注释统一用"/* */"
- 类名小写，以中划线分隔
- id采用驼峰式命名
myList - 去掉小数点前面的0
- 属性值0后面不要加单位
截图介绍 chrome 开发者工具的功能区
Chrome开发者工具.png
