第四章 CSS样式表

样式的分类：

        1、行类样式

        2、内嵌式样式

        3、外部样式

选择器的分类

        1、标签选择器

        2、类选择器

        3、ID选择器

        4、伪类选择器

内嵌式样式

   
   
<style type="text/css">
     选择器:{键:值;键:值;}
</style>

样式中的注释

    /*注释内容*/

文本属性：

    font-size                font-family                font-style            color            text-align

    字体大小               字体类型                   字体样式         字体颜色      文本水平对齐

    font-weight            lettle-spacing            line-height

     文字的粗细           文字间距                  行高

           当多个样式对同一个标签进行作用时，所有都将生效，根据样式作用就近原则，距离修饰内容更近的样式将覆盖掉其他样式中相同的属性。

           

 类样式

  
  
.demo{}

类样式需要标签的class属性来作用

   
   
class="demo"

        类样式将覆盖掉标签样式

ID样式

   
   
#mydiv{}

ID样式需要标签的id属性来作用

   
   
id=""

层叠式样式

  
  
#main-table table
.mydiv table

层叠式样式的编写，表示通过前一个选择器定位标签，然后在该标签内通过选择器再定位另一个标签对象

层叠式样式的书写方式一般通过    类选择器[空格]标签样式

                                                         ID选择器[空格]标签样式

背景属性    

    background-color                    背景颜色

    background-image                  设置背景图像    url{路径}

    background-repeat                  背景图片重复

    background-position                背景图片的为孩子

盒子模型

        margin                       标签间的间距

        border                        边框

        padding                      容器与内容的填充距

边框样式

    设置统一的边框样式，边框需要通过3个属性来设置，分别是粗细、线条类型、颜色

padding 样式

    在使用时需要注意padding距离加上内容宽度不能超过容器，否则将导致容器宽度的变化

margin样式

        margin:50px   100px;        -----50px表示的是上下       100px表示左右

        margin:50px 100px  150px  200px    ------50px表示的是上；100px表示的是右；150px表示的是下；200px表示的是左

相邻标签如果都设置margin样式，只取最大值生效。

margin：auto  使标签始终在容器内居中

vertical-align   垂直方向，但不太准

background-position 可以设置像素

伪类

        一般用在a标签上

        a:link                未被访问的链接

        a:visited           已被访问过的标签

        a:hover            鼠标悬浮在上的链接

        a:active            鼠标点击激活链接

text-decoration  可以设置链接的下滑线等属性

line-height  行高；设置于容器相同的高度，这样文字就会垂直居中

ul

    list-style:none：去除点

    list-style-image：url{}; 设置点的图片

行内样式将覆盖ID样式

       在标签里直接使用 style

外部样式

    链接外部样式表，写在head中

方式一：<link href="路径"  type="text/css"  rel="stylesheet" />            最主要的方式

方式二：导入外部样式    只做了解

                <style>

                       @inport  "  ";

               </style>