关于CSS基础

CSS的全称是什么?

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

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

- 内联样式

 <span style="color: blue; font-size: 12px; " ></span>

- 内部样式

 <style type="text/css">
     span {
         color: blue;
         font-size: 12px;
     }
 </style>

- 外部样式

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

- 导入样式

导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内部样式。
@import在html中使用，如下：

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

四种CSS引入方式的优先级

就近原则
理论上：行内>内嵌>链接>导入
实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高

link和@import的区别

link属于html标签，而@import是css的语法。
页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
link方式样式的权重高于@import的

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

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 —— 8-1.png在http://cdn.jirengu.com下的地址

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

方法一： 把图片上传到服务器上直接引用相对路径。
方法二： 把图片上传到网络上的其他服务器，得到图片url地址，使用这个地址展示图片。

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

HTML常用规范(强制)

使用 4 个空格做为一个缩进层级，不允许使用 2 个空格或 tab 字符。
class 必须单词全字母小写，单词间以 - 分隔。
对于无需自闭合的标签，不允许自闭合,例如input、br、img、hr等
对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签。
使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。
页面必须使用精简形式，明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。
引入 CSS 时必须指明 rel="stylesheet"。
页面必须包含 title 标签声明标题。title 必须作为 head 的直接子元素，并紧随 charset 声明之后。
有文本标题的控件必须使用 label 标签将其与其标题相关联。<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>

使用 button 元素时必须指明 type 属性值。

其他建议规范:HTML编码规范

CSS常用规范(强制)

使用 4 个空格做为一个缩进层级，不允许使用 2 个空格或 tab 字符。
选择器与 { 之间必须包含空格。
属性名与之后的 : 之间不允许包含空格， : 与属性值之间必须包含空格。
列表型属性值书写在单行时，, 后必须跟一个空格。font-family: Arial, sans-serif;
每行不得超过 120 个字符，除非单行不可分割。
当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

/* good */
.post,
.page,
.comment { line-height: 1.5;}

 /* bad */
.post, .page, .comment { line-height: 1.5;}

>、+、~ 选择器的两边各保留一个空格。
属性选择器中的值必须用双引号包围。
属性定义必须另起一行。
属性定义后必须以分号结尾。
文本内容必须用双引号包围。
当数值为 0 - 1 之间的小数时，省略整数部分的 0。
url() 函数中的路径不加引号。
长度为 0 时须省略单位。
RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。
颜色值可以缩写时，必须使用缩写形式。
颜色值不允许使用命名色值。
需要在 Windows 平台显示的中文内容，其字号应不小于 12px。
其他建议规范: CSS编码规范

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

看下图

chrome.png

Element 标签页： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。
Console 标签页： 用于显示脚本中所输出的调试信息，或运行测试脚本等。
Source 标签页： 用于查看和调试当前页面所加载的脚本的源文件，可以打断点进行调试。
Network 标签页： 用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。
**TimeLine 标签页： ** 用于查看脚本的执行时间、页面元素渲染时间等信息。
**Profiles 标签页： ** 用于查看 CPU 执行时间与内存占用等信息。
Application 标签页： 记录网站加载的所有资源信息。
Security 标签页： 判断网站的安全性。
Audits 标签页： 用于优化前端页面，加速网页加载速度等。