CSS样式 一

引入一个CSS文件。标签样式（<script></script>），内联样式表：直接写在对应标签的style属性上。

内联样式表覆盖内部样式表，内部样式表覆盖外部样式表。

内联样式表<优先>内部样式表<优先>外部样式表<优先>浏览器省缺设置。

CSS层叠样式表

样式表的引入方式：

1.link（外部样式表）

2.style标签（内部样式表）

3.写在标签style属性值里面（内联样式表）

4.@import（）；

如果声明的样式相同，那么后面的会覆盖前面的样式（后定义的声明会覆盖先定义的声明）

CSS基本语法：

div{background：#fff;text-elign：center；color：#f00;font-weight：bold；}

div ：选择器     {..........} ：一条或则多条声明；

声明：

         冒号的前面是声明的属性。（CSS属性）

         冒号后面是声明的属性的值。（CSS属性值）

CSS高级语法：

        选择器分组使用逗号分隔两个选择器。

div，p{background：#fff;text-elign：center；color：#f00;font-weight：bold；}

选择器又分为几种：

ID选择器

         一般用于大板块的标签上面，用在FORM表单INPUT,TEXTAREA,SELECT,form.

        ID属性尽量不用，因为在表单上不受影响！有些前段开发人员认为ID就是为表单而生。

        例：#.odiv {background：#fff；color：#f000；}

类选择器：

        页面大量使用的选择器，可以反复的使用！

        .op {background：#f000；}

标签（元素）选择器：

        标签名作为选择器。

属性选择器：

        div[id=odiv]{height：100px；}

网页基本布局

        选择器：

                派生选择器里面可以包含其他选择器。

                派生选择器是由其它选择器组成。

                派生选择器可以包含:ID选择器，类选择器，属性选择器等....

块元素居中：margin：0 auto；

安全的现实宽度：900px-1200px，选择主流的显示器宽度最低在1280px，高度一般不使用，特殊情况下使用。最好能用内容撑开，不要使用高度来固定。

margin：外边距

padding：内边距

border：1px solid #90；（边框）

背景：

background：url（images/001.png） 100px 100px/200px 200px no-repeat;（在背景中插入图片）

background-color：#f00;（设置背景颜色）

background-position：0 0；（改变图片在背景中的位置）

background-size：100% 100%；（背景图片的尺寸）

背景图片和背景颜色是不同的两个属性，当两个属性都在设置的情况时，他们都会生效。

CSS样式中如果要设置0，请不要使用单位。

CSS样式注释格式：/* 需注释内容 */

水平对齐方式：

        text-align:left;(左对齐)

                        right（右对齐）

                        center（居中）

                        start（内容对齐开始边界，css3）

                        end（内容对齐结束边界，css3）

                        justify（内容两端对齐，css3）

垂直对齐方式：

        vertical-align:baseline;(将支持vertical特性的对象的内容的极限对齐)

                              sub（垂直对齐文本下标）

                              super（垂直对齐文本上标）

                              top（将支持vartical特性的对象内容与对象顶端对齐）  

                              text-top（将支持vartical特性的对象的文本与对象顶端对齐）

                              middle（将支持vartical特性的对象的内容与对象中部对齐） 

                               bottom（将支持vartical特性的对象的文本与对象底部对齐）

盒子模型：

        内边距：从边框到内容之间的位置，不包括边框。（一般情况下不要设置左右内边距，因为会使盒子模型变大，从而影响我们的布局。）

        外边距：边框线以外的位置。不包含在当前元素（标签）内部。围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的‘空白’。设置外边距最简单的方法就是使用margin属性，这个属性接受任何长度单位，百分数值，甚至是负值。

        边框：从内边距到外边距之间的位置。

外边距合并：

        当两个元素（标签）相邻时，且两个都有外边距时，会产生合并现象。合并后取外边距最大的哪一个值。

一个标签包含另一个标签时：

        当一个元素包含另一个元素时（假设他们没有内边距或边框把外边距分隔开），他们的上和/或下边距也会发生合并。当一个标签没有内容，没有内边距，他们的上下边框会发生合并。

定位：

        static：默认情况下是static定位，静态定位。

        relative：相对定位，元素框偏离某个距离。元素仍保持未定位前的状态，它原本所占的空间仍保留。

        absolute：绝对定位，元素框从文档流完全删除，并相对于包含块定位。包含块可能是文档中另一个元素或则是初始包含块。元素原先在正常文档流中所占的空间关闭，就好似元素原本不存在一样。元素定位后生成一个块级框，而不是原本它在正常流中生成何种类型的框。

        绝对定位在实际使用中，在进行学习，绝对定位要配合相对定位和固定定位来使用。用得较多。

浮动：float：left|right；

        浮动以后的元素（标签）脱离了文档流，元素所占的位置被删除了。下面的元素会向上移动。

        使用浮动必须清楚浮动。clear：both；

        清楚浮动必须在浮动元素后面的其它没有浮动的元素上清楚。（加一个块元素，在块元素上清楚浮动）