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 标签页： 用于优化前端页面，加速网页加载速度等。
网友评论