1. CSS的全称是什么?
Cascading Style Sheets, 层叠样式表,是一种样式表语言,用来描述 HTML 或 XML 文档的呈现。
2. CSS有几种引入方式? link 和@import 有什么区别?
- 样式引入有三种方式:外部样式,内部样式,内联样式
- 外部样式:当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
- 内部样式:当单个文件需要特别样式时,就可以使用内部样式表。
<head>
<style type="text/css">
body {background-color: red}
</style>
</head>
- 内联样式:当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
-
link
和@import
有什么区别
它们两者是导入CSS文件两种不同方式
- link
<link rel="stylesheet" href="style.css" type="text/css"/>
- @import
<style type="text/css">
@import url("style.css");
</style>
- 理论上,
@import
和link
的唯一区别是@import
是CSS
下导入样式表的语法而<link>
是HTML
下的语法。然而,浏览器以不同的方式处理他们。从网页性能的的角度考虑,应该避免用@import
。 而且link
除了调用css外还可以声明页面链接属性,声明目录,rss等等,而@import
就只能调用css。
3. 以下这几种文件路径分别用在什么地方,代表什么意思?
-
css/a.css
相对路径,当前目录下的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
绝对路径, 本地文件地址 -
/static/css/a.css
绝对路径,网站根目录下static文件中css中的a.css文件 -
http://cdn.jirengu.com/kejian1/8-1.png
网站路径,在 cdn.jirengu.com 这个网站上找到图片 8-1.png
4. 如果我想在js.jirengu.com上展示一个图片,需要怎么操作?
- 如果这个图片本来就存在网络上, 可以直接使用图片的网络绝对地址
- 如果图片在本地,可将图片上传到某个网址,生成一个线上网址,或将图片文件存于
本地服务器。例如: http://chuantu.biz/upload.php
5. 列出5条以上html和 css 的书写规范
- HTML:
- 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。
- 对于属性的定义,确保全部使用双引号,绝不要使用单引号。
- 不要在自闭合(self-closing)元素的尾部添加斜线
- 为每个 HTML 页面的第一行添加标准模式(standard mode)的声明,这样能够确保在每个浏览器中拥有一致的展现。
<!DOCTYPE html>
<html>
<head>
</head>
</html>
- 通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。
- CSS:
- 为选择器分组时,将单独的选择器单独放在一行。
- 为了获得更准确的错误报告,每条声明都应该独占一行。
- 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。
- 对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,
box-shadow
)。 - 避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;。
其他的HTML 和 CSS 规范: http://codeguide.bootcss.com/
6. 截图介绍 chrome 开发者工具的功能区
- elements: 查看和修改html
- style: 调试CSS
- console: JavaScript console
- sources: 协同调试JavaScript, 比如加入断点等
- network: 查看网络请求
- timeline: 时间轴,页面加载的时间
- profiles: CPU, JavaScript 的性能
- application: 查看页面加载的资源。操作HTML5 Database, Cookies, AppCache等。