css+div学习笔记

CSS+DIV学习

css样式

l  加载css样式有以下四种

1.        外部样式

2.        内部样式

3.        行内样式

4.        导入样式

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

这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。

 

l  <style>

h2 { color:#f00;}

</style>

这种形式是内部样式表，它是以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。

 

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

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

 

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

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

css优先级

1.        id优先级高于class

2.        后面的样式覆盖前面的

3.        指定的高于继承

4.        行内样式高于内部或外部样式

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

 

 

css盒模型组成

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

   

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