1. CSS的全称是什么?
CSS全称是 Cascading Style Sheets, 层叠样式表
2. CSS有几种引入方式? link 和@import 有什么区别?
2.1内联样式
即写在标签内部的样式
<h1 style="color: red; font-size: 20px;"></h1>
2.2内部样式
写在<style></style>中的样式
<style type="text/css">
p{
color: yellow;
font-size: 30px;
}
</style>
2.3外部样式
用link标签引入css文件
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
用import引入样式
<style>
@import url("hello.css");
@import "world.css";
</style>
2.4浏览器默认样式
例如h1~h6本身自带样式
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
link 和@import 有什么区别
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。
3.以下这几种文件路径分别用在什么地方，代表什么意思?
相对路径
- css/a.css
当前文件和css同级，要切换到css文件夹下的a.css文件 - ./css/a.css
./代表当前文件（夹），作用和css/a.css一样 - b.css
当前文件和b.css文件同处于一级，直接切换到b.css文件。 - ../imgs/a.png
当前文件上一级与imgs同处一个文件夹，切换到当前文件的上一级，然后进入其中的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
线上图片地址
4.如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
图片是网络上的图片，直接在src中添加其网络地址；
如果是本地图片，先上传至网络上，获得网络地址再添加进src。
七牛云图床
5.列出5条以上html和 css 的书写规范
- 语法不区分大小写，但建议统一使用小写
- 不使用内联的style属性定义样式
- id和class使用有意义的单词，分隔符建议使用-
- 有可能就是用缩写
- 属性值是0的省略单位
- 块内容缩进
- 属性名冒号后面添加一个空格
- 选择器 与 { 之间必须包含空格
- +、>、~ 选择器的两边各保留一个空格
- 属性定义必须另起一行
- 属性定义后必须以分号结尾
- 如无必要，不得为 id、class 选择器添加类型选择器进行限定
- 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。
Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相关属性包括：border / margin / padding / width / height 等
Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
Visual 相关属性包括：background / color / transition / list-style 等
另外，如果包含 content 属性，应放在最前面。
6.截图介绍 chrome 开发者工具的功能区
chrome调试.png
网友评论