css简述

2018-01-26 本文已影响0人 zy懒人漫游

.CSS的全称是什么?

Cascading style sheets，层叠样式表。通过CSS和HTML的结合可以实现表现与结构分离。从而提升工作效率，降低维护难度。

CSS有几种引入方式?

在HTML中，引入CSS的方法主要有以下3种：

行内样式、
即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用
例：<h1 style =”color： red; font-size: 20px;”><h1>；
内部样式、
则将对页面中各种元素的设置集中写在<head>和</head>之间，对于单一的网页，这种方法很方便

<style type="text/css">
 h1{
  background: white;
   font-size:20px;
}
</style>
<h1>战狼2</h1>

外部样式：分为导入样式和链接样式
但是对于一个包含很多页面的网站，如果每个页面都以内嵌方式设置各自的样式，就失去了CSS带来的
巨大优点，因此一个网站通常都是编写一个独立的CSS样式表文件

 A：链接样式
<head>
<link rel="stylesheet" href="css/default.css" type="text/css" />
</head>

B：导入样式
<style type="text/css">
@import"mystyle.css";
</style>

导入样式和链接样式的作用是一样的，唯一的不同是服务对象不一样

@import 为CSS服务，import 是css的一个语法
link是为当前的页服务，link html 的表签可以放在任何地方

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别

差别1：link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS 的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
从上面的分析来看，还是使用link标签比较好。

HTML书写规范

* 闭合HTML标签
* 声明正确的文档类型DOCTYPE
* 不要使用内联样式
* 在页面的head标签中引入所有的样式表文件。
* 在页面底部引入JavaScript文件
* 不要使用嵌入式JavaScript
* 代码排版要有层次，使用4个空格做为一个缩进层级。

CSS书写规范

* 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。
* 选择器 与 { 之间必须包含空格。
* 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
* 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。
* 不使用内联的style属性定义样式。
* 块内容缩进。
* 属性定义后必须以分号结尾。
* 在可以使用缩写的情况下，尽量使用属性缩写。

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

1.可以直接将图片上传到服务器，在页面使用这张图片；或者将图片存在本地服务器，然后打开本地服务器，然后再在JS BIN上引用图片
2.如果这个图片本来就存在网络上其他的服务器上，可以直接使用图片的网络路径链接的方式在页面上添加url引用这张图片