CSS基础

2017-06-02 本文已影响0人 billa_8f6b

1.CSS的全称是什么?

层叠样式表(英文全称：Cascading Style Sheets)
是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2.CSS有几种引入方式? link 和@import 有什么区别?

引入方式：
在HTML中引入CSS的方法主要有四种，它们分别是行内式、内嵌式、链接式和导入式。

1.行内式（内联式）
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。如下：

 <div style="color:red">123</div>

2.内嵌式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。
缺点是对于一个包含很多网页的网站，在每个网页中使用嵌入式，进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。
如下：

<head>
   <style type="text/css">
    ...CSS样式
   </style>
</head>

3.链接式
也是将一个.css文件引入到HTML文件中，但它与导入式不同的是链接式使用HTML规则引入外部CSS文件，它在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件，如下：

<link href="style.css" rel="stylesheet" type="text/css"/>

4.导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，如下：

<style>
   @import url("style.css");
   @import "css.css"
</style>

link 和@import的区别：

语法结构差别 link属于HTML标签，只能放入html源代码中使用，而@import是CSS提供的一种方式，只能加载CSS了。

加载顺序的差别 link引用的CSS会在一个页面被加载的时候（就是被浏览者浏览的时候）同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）。

兼容性的差别由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

使用dom控制样式时的差别当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

3.以下这几种文件路径分别用在什么地方，代表什么意思?

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) （网站的图片地址）

4. 如果我想在js.jirengu.com上展示一个图片，需要怎么操作?

方法：

把图片上传到网站服务器，在页面中使用相对路径引用，如：../imgs/a.png
在页面中使用绝对路径，引用其他网站中的图片，如：http://cdn.jirengu.com/kejian1/8-1.png

5. 列出5条以上html和 css 的书写规范

HTML书写规范

id元素必须保证页面唯一。
同一页面，应避免使用相同的 name 与 id。
标签使用必须符合标签嵌套规则。
属性值必须用双引号包围。
引入 CSS 时必须指明 rel="stylesheet"。
title 必须作为 head 的直接子元素，并紧随 charset 声明之后。

CSS书写规范

语法不区分大小写，但建议统一使用小写
当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。
属性定义后必须以分号结尾。
不使用内联的style属性定义样式
id和class使用有意义的单词，分隔符建议使用-
属性值是0的省略单位
块内容缩进
属性名冒号后面添加一个空格

6.截图介绍 chrome 开发者工具的功能区

chrome调试.png

面板上包含了Elements面板、Console面板、Sources面板、Network面板、Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。

** 这些面板的功能点如下：**

Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
Sources:查看网站包含的html，css，js等文件，可以在js文件中打断点调试
Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
Security:判断当前网页是否安全。
Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。