4. CSS基础知识
2017-04-10 本文已影响0人
石林涛
CSS的全称是什么？
Cascading Style Sheets, 层叠样式表。
CSS的引入方式
- 有三种引入方式：
- 内联样式
<h1 style="color: red; font-size: 20px;"></h1> - 内部样式
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
- 外部样式
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<style>
@import url("hello.css");
@import "world.css";
</style>
- link 和@import的区别：
- link是HTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- 加载顺序差别。link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- ink支持使用Javascript控制DOM去改变样式；而@import不支持。
相对路径和绝对路径
| 路径 | 分类 | 描述 |
|---|---|---|
| css/a.css | 相对路径 | 当前目录下 css 文件夹中的 a.css 文件 |
| ./css/a.css | 相对路径 | 当前目录下 css 文件夹中的 a.css 文件 |
| b.css | 相对路径 | 当前文件夹下的 b.css 文件 |
| ../imgs/a.png | 相对路径 | 上级目录中的imgs文件夹里面的图片 |
| /Users/hunger/project/css/a.css | 绝对路径 | 本地路径中的a.css文件 |
| /static/css/a.css | 网络相对路径 | 当前服务器根目录下的a.css文件 |
| http://cdn.jirengu.com/kejian1/8-1.png | 网络绝对路径 | 网络上的图片地址 |
怎么在网站上展示图片？
- 上传到服务器内部并用相对路径读取。
- 直接用其他网站上的图片链接或上传到图床使用图床的绝对链接。
语法：
<img src = "myimage.gif" alt = "My Image" title = "My Image" >
讲解：
-
src：标识图像的位置；
-
alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
-
title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
-
图像可以是GIF，PNG，JPEG格式的图像文件。
html和 css 的书写规范
- 语法不区分大小写，但建议统一使用小写；
- 不使用内联的style属性定义样式；
- id和class使用有意义的单词，分隔符建议使用“-”；
- 有可能用就用缩写；
- 属性值是0的省略单位；
- 块内容缩进；
- 属性名冒号后面添加一个空格；
更多规范请参考：https://github.com/fex-team/styleguide/blob/master/css.md
chrome 开发者工具的功能区介绍
