1.CSS的全称是什么?
CSS的全称是Cascading Style Sheet，汉语意思是「级联样式表」，通常又称为“风格样式表（Style Sheet）
2.CSS有几种引入方式? link 和@import 有什么区别?
三种
- 内联样式
<h1 style="color: red; font-size: 20px;"> Hello World </h1>
- 内部样式
<style>
h1{
color: red;
font-size: 20px;
}
</style>
<h1>Hello World </h1>
- 外部样式
<head>
<link rel="style sheet" type="text/css" href="css/style.css">
</head>
<style>
@import url("hello.css");
@import "world.css";
<\style>
link 和@import 区别如下
- 从属差别
link是XHTML中的标签，除了用来引用CSS之外，还能加载RSS等其他事物，@import属于CSS范畴，只能加载CSS - 加载顺序差别
link引用的CSS会和HTML同时加载，@import会在HTML渲染完之后再开始加载 - 兼容性差别
link标签可以说没有浏览器不能识别，@import是CSS 2.1中提出的，老浏览器不能识别，IE5以上才能识别（不过现在应该没有人用IE5以下的版本了） - 使用DOM控制样式时的区别
当使用JavaScript控制DOM来改变样式的时候，只能使用link标签，因为@impotent不是DOM可控的 - @import可以用在CSS中嵌套使用（注意写在最前面，否则无法生效）
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 |
根目录下的 Users/hunger/project/css 文件夹中的 a.css 文件 |
绝对路径 |
/static/css/a.css |
根目录下的 static/css 文件夹中的 a.css 文件 |
网站路径 |
http://cdn.jirengu.com/kejian1/8-1.png |
相应服务器上网站根目录下 kejian1 文件夹中的 8-1.png 文件 | 网站路径 |
-
相对路径
方便网站的本地测试，网站整体迁移方便
相对路径的网页在被人复制或转载时，不能返回正常的外部链接导入 -
绝对路径
不方便本地测试，修改麻烦
在被人复制或转载时，可以给网站带来很多外链
4. 如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
将所需图片上传至任意图床，获取到该图片的url，然后在需要用该图片的地方引入它的url
5. 列出5条以上html和 css 的书写规范
- html中除了开头的DOC和 'UTF-8'或者head里特殊情况可以大写外，其他都为小写，css类都为小写
- 不使用内联的style属性定义样式
- id和class使用有意义的单词，分隔符建议使用-
- 属性值是0的省略单位
- 块内容缩进
- 属性名冒号后面添加一个空格
6. 截图介绍 chrome 开发者工具的功能区
-
Elements 元素
查找网页源代码HTML中的任一元素，手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
自由操纵DOM和CSS来调整页面的布局和设计
左上第一个按钮点击之后，再选择页面中的任何元素，Elements窗口中会实施跳转到选中的元素的源码
Elements 元素
左上第二个按钮点击之后，可以模拟出各种尺寸的移动设备
Device
-
Console 控制台
在开发期间，可以使用控制台面板记录诊断信息。或者使用它作为 shell，在页面上与JavaScript交互
Console 控制台
-
Sources 源代码
在“源代码”面板中，可以断点调试 JavaScript 。或者通过Workspaces（工作区）连接本地文件，使用开发者工具实时编辑
Sources 源代码
-
Network 网络
从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这些信息来进行网络性能优化
Network 网络
-
Performance 性能
使用时间轴面板，可以通过记录并分析页面内的各种事件，由此可以针对性的进行优化，提供网页运行的性能
erformance 性能
-
Application 资源面板
记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等
Application 资源面板
- Security 安全
判断当前网页是否安全
Security 安全
- Audits 审计
对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等
Audits 审计
网友评论