css基础
2017-06-25 本文已影响0人
marmot_ning
CSS全程是什么
css全称：层叠样式列表（cascading style sheets）
CSS引入方式有几种？ link 和@import 有什么区别
css引入方式：
- 内联样式
<h1 style="color: red;font-size: 30px">饥人谷</h1>
- 内部样式
<style type="text/css">
h1{
color: red;
font-size: 30px;
}
</style>
<h1>饥人谷</h1>
- 外部样式
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<style>
@import url("hello.css");
@import "word.css"
</style>
- 浏览器默认样式
link和@import的区别：
- link是html标签，@import是css（一种CSS语法）
- link是写在html中的，@import是写在css文件中的
- 加载的时候link标签引用的css文件会和html主体部分一起加载，@import用法的需要在加载完html之后才会加载css
- 当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的
- @import可以在CSS中再次引入其他样式表
以下这几种文件分别用在什么地方？代表的意思
| 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 | 绝对路径，表示Users文件目录下hunger文件目录下project文件目录下css目录下的a.css文件 |
| static/css/a.css | 主域名下static文件目录下css文件目录下的a.css文件 |
| http://cdn.jirengu.com/kejian1/8-1.png | 网站路径，http://cdn.jirengu.com网站的kejian1目录下的8-1.png文件 |
如果我想在js.jirengu.com上展示一个图片，需要怎么操作？
- 将图片文件夹传至服务器上使用相对路径
- 使用网站路径链接的方式
书写规范
- 语法不区分大小写，一般情况下都使用小写
- 不使用内联的style属性定义样式
- id和class使用有意义的单词，分隔符使用-
- 有可能就是用缩写
- 属性值是0的省略单位
- 块内容缩进
- 属性名冒号后面添加一个空格
截图介绍 chrome 开发者工具的功能区
Instagram Pic
- element：用于查看和编辑当前页面中的 HTML 和 CSS 元素；编辑html标签和css样式；测试标签的边界条件
- Network：可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等
- Source：用于查看和调试当前页面所加载的脚本的源文件；断点调试
- Resource：用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等
- console：用于调试JS
