CSS基础
2017-09-14 本文已影响0人
饥人谷_WRMSUXI
CSS的全称是什么?
Cascading Style Sheets 层叠样式表
CSS有几种引入方式? link 和@import 有什么区别?
引入方式
- 内联样式：style属性直接写在元素标签里
<h1 style="color:red;font-size:15px"></h1>
- 内部样式：将样式写在<style></style>标签内。（<style></style>标签一般写在<head></head>内）
<style>
h1{
color:red;
font-size:15px;
}
</style>
- 外部样式：样式写在.css文件中，再在html中引用样式文件
引用样式文件的方法有两种：- link标签
<link rel="stylesheet" type="text/css" href="XXX.css"></link>
- @import引入
<style>
@import url("XXX.css");
@import "XXXX.css";
</style>
link 和@import 的区别
1. link是html的标签，而@import是CSS语法，@import必须写在<style></style>标签内或.css文件内。
2. link在页面加载时同时加载，而@import引用的css会在页面加载结束后再加载。
3. link没有兼容性问题，而@import只有IE5以上才能识别。
4. link支持使用Javascript控制DOM去改变样式；而@import不支持。
以下这几种文件路径分别用在什么地方，代表什么意思?
- 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 绝对路径 表示根目录下的对应路径下的a.css文件
- /static/css/a.css 网站路径 表示网站服务器根目录下的对应路径下的a.css文件
- http://cdn.jirengu.com/kejian1/8-1.png 网站路径 表示互联网上8-1.png文件对应的url
如果我想在 js.jirengu.com 上展示一个图片，需要怎么操作?
将图片上传到服务器，然后用相对路径读取
列出5条以上html和 css 的书写规范
- 不区分大小写，但建议统一小写
- 不使用内联的style样式属性定义样式
- id和class使用有意义的单词，分隔符建议使用-，尽量使用缩写
- 属性值是0的省略单位
- 块内容缩进
- 属性名冒号后添加一个空格
截图介绍 chrome 开发者工具的功能区
Paste_Image.png
