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
网友评论