CSS的全称是什么?
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
@charset "utf-8";
h1 {
color: red;
font-size: 20px;
/*这是注释*/
}
a:hover{
color: red;
}
作用
- CSS不仅可以修饰静态网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
- CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS有几种引入方式? link 和@import 有什么区别?
css的四种引入方式：
1.内联方式
直接在 HTML 标签中的 style 属性中添加 CSS。
<div style="background: red"></div>
这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。
2.嵌入方式
嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。
<head>
<style>
.content {
background: red;
}
</style>
</head>
嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。
3.链接方式
链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。
4.导入方式
导入方式指的是使用 CSS 规则引入外部 CSS 文件。
<style>
@import url(style.css);
</style>
link和@import区别：
1.引用的方式不同
link(外部引用):<link rel="stylesheet" href="xxx.css" type="text/css" / >
@import(导入式):@import url(xxx.css);
2.放置的位置不同
link一般放在head标签中
@import必须放在<style type="text/css">标签中
3.加载方式不同
link会和dom结构一同加载渲染
@import只能能dom结构加载完成以后才能渲染页面
4.link样式可以被js改变，@import引入的样式不可以
当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制的；
5.兼容性不同
link是在xhtml的标签，兼容IE各个版本
@import是css2.1时提出来的，只能在IE6以上进行解析。
6.加载内容不同
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；
@import属于CSS范畴，只能加载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 |
绝对路径 |
指定地址文件 |
/static/css/a.css |
网站相对路径 |
在服务器上通过该路径寻找相关文件 |
http://cdn.jirengu.com/kejian1/8-1.png |
网站路径 |
网上地址 |
如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
本地图片：上传到图窗，获取url
网上图片：直接引入图片的url
html和 css 的书写规范
- 语法不区分大小写，但建议统一使用小写
- 不使用内联的style属性定义样式
- id和class使用有意义的单词，分隔符建议使用-
- 有可能就是用缩写
- 属性值是0的省略单位
- 块内容缩进
- 属性名冒号后面添加一个空格
chrome 开发者工具的功能区
1、先打开谷歌浏览器，然后打开调试界面，打开方式有三种 ：
- 第一：按F12，
- 第二：shift+ctrl+i，
- 第三：鼠标右键点审查元素
2、功能区介绍
Element 标签页： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。
Console 标签页：用于显示脚本中所输出的调试信息，或运行测试脚本等。
Source 标签页：用于查看和调试当前页面所加载的脚本的源文件，可以打断点进行调试。
Network 标签页：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。
**TimeLine 标签页： **用于查看脚本的执行时间、页面元素渲染时间等信息。
Profiles 标签页：用于查看 CPU 执行时间与内存占用等信息。
Resource 标签页：用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件，图片等。
Audits 标签页：用于优化前端页面，加速网页加载速度等。
网友评论