CSS入门

2016-12-31 本文已影响49人小松鼠hust

1，CSS的全称是什么?

答：CSS的全称是CASCADING STYLE SHEET，层叠式样式表。

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

答：在HTML中，引入CSS的方法有三种：外部样式表，内部样式表，内联样式。
<ul>
<li>外部样式表指将样式单独存为CSS文件，在HTML中的head头部文件中引用该样式文件，如

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

</li>
<li>内部样式指在 <style> 标签里定义内部样式表，如：

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

</li>
<li>内联样式表指在元素标签内部插入样式，如

<p style="color: blue; margin-left: 20px">
This is a paragraph
</p>

这种方式将内容和表现混杂在一起，不推荐使用。
link 和@import的区别：加载顺序的差别。当一个页面被浏览器加载的时候，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后页面突然变化。兼容性的差别，老式浏览器不支持@import方式。使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。还有@import是CSS专用的，而link可以用于其他方面。

3，以下这几种文件路径分别用在什么地方，代表什么意思?

答：文件路径有相对路径，绝对路径和网站路径。

相对路径：

<ul>
<li>css/a.css，当前目录下的css文件夹里的a.css文件</li>
<li>./css/a.css，当前目录下css文件夹里的a.css文件，./表示当前目录</li>
<li>b.css，当前目录下的b.css文件</li>
<li>../imgs/a.png，上级目录里的imgs文件夹里的a.png文件，../表示上级目录</li>
</ul>

绝对路径：


/Users/hunger/project/css/a.css

绝对路径为从根目录到目标文件的完整路径，一般不使用绝对路径，因为一旦文件夹发生变化，文件路径就失效了，如上传到服务器时，绝对路径就失效了。

网站路径：

/static/css/a.css
http://cdn.jirengu.com/kejian1/8-1.png

/static/css/a.css表示主域名下文件路径，即主域名加上/static/css/a.css就是文件路径。http://cdn.jirengu.com/kejian1/8-1.png为文件的http地址。
我哦一般使用相对路径，不管是在本地还是整个文件夹上传到服务器，文件路径都有效。

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

答：1，把图片上传到网络上，然后复制网址地址到js.jirengu.com上，如将图片上传到简书，地址放在jsBin上：