CSS 基础
2017-09-14 本文已影响0人
Tuuu
CSS的全称是什么?
Cascading style sheets 层叠样式表
CSS有几种引入方式?
- 内联样式：直接在标签中引入样式
<h1 style="color: red></h1> - 内部样式：通过style标签引入样式
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
<h1>饥人谷</h1>
- 外部样式：通过link标签或者@import引入外部的CSS文件
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<style>
@import url("hello.css");
@import "world.css";
</style>
- 浏览器的默认样式
link 和@import 有什么区别?
- link是XHTML标签，而
@import是CSS链接外部文件的方式，只能用来加载CSS； - 页面加载顺序有区别：通过link引入的CSS是与页面同时加载，而
@import需要等待网页加载完成之后才会加载css样式，可能会出现延时的现象； - 页面兼容区别：link是XHTML标签所以无兼容问题，
@import是CSS2.1提出的，所以低版本浏览器不支持； - link支持使用Javascript控制改变样式，@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服务端网站上的某个图片
如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
- 上传一个图片并得到图片的链接，再使用链接展示图片
列出5条以上html和 css 的书写规范
HTML
- 代码缩进四个空格；
- 标签通常是成对出现的，一开一关。也存在一些单标签，如：
<meta />、<br />等； - 标签与它的属性都必须小写；
- 所有的标签必须合理嵌套；
- 值需要用引号“”括起来。
CSS
- 语法不区分大小写，但是建议统一使用小写
- 不使用内联的 style 属性定义样式
- id 和 class 命名使用有意义的词，分隔符建议使用 “-”
- 有可能就使用缩写
- 属性值是0的省略单位
- 块内容缩进
- 属性名冒号后面加一个空格
截图介绍 chrome 开发者工具的功能区
截图
- Elements：查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
- Console：记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行。
- Sources：打断点调试JS。
- Network：从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
- Timeline：记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
- Application：记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
- Audits：对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等
