CSS&路径相关
2017-10-04 本文已影响0人
饥人谷_李维超
1. CSS的全称是什么？
CSS：Cascading Style Sheets
2. CSS有几种引入方式? link 和@import 有什么区别?
CSS引入方式有4种
内联样式：
<body>
<!-- 内联样式，在 HTML 元素内部 -->
<h1 style="color: red; font-size: 20px; ">我是标题1</h1>
<div style="font-size: 14px;color: blue">
<p>你好</p>
</div>
</body>
内部样式：
<head>
<!-- 内部样式，位于 <head> 标签内部 -->
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
</head>
外部样式：
外部样式1：
<head>
<!-- 外部样式 -->
<link rel="stylesheet" href="css/a.css" />
</head>
--------------------------------------------------------------
外部样式2：
<head>
<style>
@import url("hello.css");
@import "world.css";
</style>
</head>
浏览器缺省样式：
QQ截图20171003235042.png
3. 以下这几种文件路径分别用在什么地方，代表什么意思?
lujing.png
css/a.css----------------------------------相对路径，与html文件同级的css文件下的css文件，用在本地或者服务器
./css/a.css--------------------------------相对路径，与html文件同级的css文件下的css文件，用在本地或者服务器
b.css--------------------------------------相对路径，与html处于同一目录下，用在本地或者服务器
../imgs/a.png------------------------------相对路径，与html处于不同一目录下，在html上一级的imgs文件夹下，用在本地或者服务器
/Users/hunger/project/css/a.css------------绝对路径，一般用在本地
/static/css/a.css--------------------------网站路径，一般用在服务器，不常用
http://cdn.jirengu.com/kejian1/8-1.png-----网站路径，引用的情况下常用
4. 如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
- 网站路径引用
通过网站地址引用来显示，例：
点我查看
<body>
</body>
- 本地开服务器，通过网站路径来引用
5. 列出5条以上html和 css 的书写规范
- 标签小写
- 标签闭合
- 标题里不可有段落，段落里不可以有标题
- 不使用内联式（嵌入式）样式
- 不使用“_”下划线来连接单词
- 遵从语义化书写原则，标签、name、id都尽量选择适宜的
6. 截图介绍 chrome 开发者工具的功能区
打开chrome开发者工具的方式
- 键盘 F12
- Ctrl + Shift + i
- 鼠标右键 - "检查"
- chrome - "更多工具" -"开发者工具"
搜狗为例
printScreen2.png
printScreen1.png
Elements展示了html标签和css样式表
sources.png
Sources展示了网站结构和访问页面过程中加载的资源
network.png
Network展示了页面各部分响应时间和加载时间
performance.png
Performance展示了JS的加载时间和页面元素渲染时间
Audits.png
Audits-2.png
Audits用于优化前端页面、移动页面等的加载速度
Security.png
Security用于对网站做安全环境做综合评估
