任务6
2017-09-03 本文已影响0人
饥人谷_一叶之秋
CSS的全称是什么?
- 全称是Cascading Style Sheets层叠样式表。
CSS有几种引入方式? link 和@import 有什么区别?
- 内联样式
<h1 style="color: red; font-size: 20px;"></h1>
- 内部样式
style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
<h1>饥人谷</h1>
- 外部样式
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<style>
@import url("hello.css");
@import "world.css";
</style>
- 浏览器默认样
image.png
- link 和@import 的区别参考：
- link是HTML的标签，他可以放到HTML的任何的方，而@import是css语法。
- 加载顺序的差别：在加载页面的时候link引用的css也会同时被加载；而@import引用的CSS 会等到页面全部被下载完再被加载。
- 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
- 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
以下这几种文件路径分别用在什么地方，代表什么意思?
- 相对路径：
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：代表当前域名下的static文件夹下的css文件夹下的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png :网站的图片地址
如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
- 可以直接将图片上传到服务器，在HTML页面用相对路径的方式展示。
- 如果这个图片在网络的服务器上，可以直接用其网站上的图片链接。
列出5条以上html和 css 的书写规范
- 语法不区分大小写，但建议统一使用小写
- 不使用内联的style属性定义样式
- d和class使用有意义的单词，分隔符建议使用-
- 有可能就是用缩写
- 属性值是0的省略单位
- 块内容缩进
- 属性名冒号后面添加一个空格
截图介绍 chrome 开发者工具的功能区
C-_Users_Administrator_Desktop_作业_图片_任务6.gif
- 1.Elements:查看当前页面的HTML和CSS元素，可以修改CSS样式。
- 2.Console: 显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。
- 3.Sources:主要用来调试JS。
- 4.Network：可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。另外，还可以查看HTTP请求头，返回内容等。
- 5.Performance：查看CPU的执行时间和内存的占用.
- 6.Application:记录网站加载的所以资源信息。
- 7.Styles:当前元素的样式。
- 8.查看当前页面在移动端的样式。
