css

2017-09-12 本文已影响0人 727上上上

CSS的全称是什么?

CSS全称是 Cascading Style Sheets, 层叠样式表

CSS有几种引入方式? link 和@import 有什么区别?

内联样式:当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。
例子
<p style="color: red; margin-left: 20px">123</p>
内部样式:当单个文件需要特别样式时，就可以使用内部样式表。通过 <style> 标签定义内部样式表。
例子

<head>
    <style type="text/css">
h1 {
    color: red;
    font-size: 20px};
p {
    margin-left: 20px}
</style>
</head>

外部样式：通过标签引入外部资源，可以是相对路径、绝对路径、网站路径引入。
例子

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

或者

<style>
  @import url("hello.css");
  @import "world.css";
</style>

这两者最根本的区别是归属区别

link是html的标签，@import是css的标签，link标签除了可以加载CSS外，还可以做很多其它的事情，比如声明页面链接属性，声明目录等，@import就只能加载CSS了。

此外还有加载顺序的差别

当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载；而@import引用的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绝对路径，本地真实地址
/static/css/a.css网站地址，网站根目录下的static下的css里的a.css
http://cdn.jirengu.com/kejian1/8-1.png线上地址

如果我想在js.jirengu.com上展示一个图片，需要怎么操作?

将图片上传至服务器，将会生成一个网站地址，可以导向这个图片，将这个地址粘贴进js.jirengu.com即可。

列出5条以上html和 css 的书写规范

html：

必须申明文档的编码charset，且与文件本身编码保持一致
标签一定要正确嵌套，标签一定要闭合
模块之间必须保持独立，区块化布局，方便随意增删改，多人协作维护
所有标签和属性名称都必须小写(包括自定义属性名)
标签的使用遵循“标签语义化” 的原则，避免标签滥用
属性值必须使用双引号括起来
css:
每条声明后都加上分号
颜色用小写，用缩写, #fff
css的":"后加个空格，"{"前加个空格
尽量缩写
去掉小数点前的“0”

截图介绍 chrome 开发者工具的功能区

elements.png

elemente可以查看网页的html代码，直接改动就会在页面生效，styles可以查看和修改样式，也可以直接查看元素绑定的事件等。

network.png

network查看页面的网络请求（打开开发者工具并且选择开启录制以后以后才会记录）。这里可以开启过滤，通过关键字或者请求的类型来更快的定位想查找的请求，概况里可以查看请求的方式，状态，大小，来源等属性

application.png
application里可以查看页面的图片，cookie，local storage等信息

console.png
控制台这里可以自由的撰写js代码，使用它作为 shell在页面上与JavaScript交互

css