Web学习篇之---css基础知识（一）

css基础知识（一）

1、css样式：

载入css样式有下面四种：

1）、外部样式

2）、内部样式

3）、行内样式

4）、导入样式

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

这样的形式是把css单独写到一个css文件内，然后在源码中以link方式链接。它的优点是不但本页能够调用，其他页面也能够调用，是最经常使用的一种形式。

<style>
h2 { color:#f00;}
</style>

这种形式是内部样式表，它是以<style>和</style>结尾，写在源码的head标签内。这种样式表仅仅能针对本页有效。

不能作用于其他页面。

<p style="font-size:18px;">内部样式</p>

这样的在标签内以style标记的为行内样式。行内样式仅仅针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。

@import url("/css/global.css");

链接样式是以@import url标记所链接的外部样式表。它一般经常使用在还有一个样式表内部。如layout.css为主页所用样式。那么我们能够把全局都须要用的公共样式放到一个global.css的文件里，然后在layout.css中以@import url("/css/global.css")的形式链接全局样式，这样就使代码达到非常好的重用性。

2、css优先级：

1）、id优先级高于class

2）、后面的样式覆盖前面的

3）、指定的高于继承

4）、行内样式高于内部或外部样式

总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它近期的

3、css盒模型组成：

学习web标准，首先要弄懂的就是这个盒模型。这就是DIV排版的核心所在。

传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。

这样的排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容很多其它的浏览器，比方PDA设备也能正常浏览。

那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)。 CSS盒子模式都具备这些属性。

我们能够把它想像成现实中上方开口的盒子，然后从正上往下鸟瞰。边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就非常easy理解盒模型了。

所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度不过内容部分的宽度。

这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。