CSS样式表

一:为什么要使用样式表?(CSS样式表对HTML标签进行控制,美化页面)

  1.HTML标签的外观样式比较单一(默认字体黑色)

  2.可以美化网页,使页面更漂亮

  3.可以在多个网页中共享使用,提高工作效率

  4.实现样式和页面分离,方便团队开发

DIV标签:容器标签  CSS控制页面是可直接对DIV 进行控制

二:样式表发的基本语法

  <style type="text/css">

  选择器{

    属性:属性值

    ……

  }

  </style>

三:选择器的分类(1.标签选择器;2.类选择器;3.id选择器;)

  1.标签选择器(标签名{属性:属性值})

  例:<style type="text/css">

  p{

    属性:属性值

    ……

  }

     </style>

  2.类选择器(.类名{属性:属性值})  在代码标签中要定义类名称(<p class="r">  </p>)

  例:<style type="text/css">

  .className{

    属性:属性值

    ……

  }

     </style>

  3.id选择器(#id名称{属性:属性值})  在代码标签中要定义id名称(<p id="e"></p>)

  例:<style type="text/css">

  #idName{

    属性:属性值

    ……

  }

     </style>

  4.选择器的集体声明

  标签,#id名称,.类名称{属性:属性值……}

四:CSS的继承和嵌套

  CSS继承是指:子标记会继承父标记的所有样式风格,并可以在父标记样式的风格的基础上加以修改,产生新的样式,而产生的新样式风格完全不会影响父标记

五:样式的分类(如下3种)

  使用CSS控制页面的方法

    1.行内样式:直接在标签中加入 属性定义

    2.内嵌样式:

      (1)CSS代码写在 <head>与</head>之间

      (2)使用<style></style>标签进行声明

    3.外部样式表

      (1)链接外部样式表

        <head>

          <link href="文件的路径和名称"  rel="指定相互关系是样式表(stylesheet)" type="链接的样式表示CSS(text/css)">

        </head>

      (2)导入外部样式表

        <head>

        <style type="text/css">

        <!--

          @import url(外部样式表CSS文件的路径和名称);

        -->

        </style>

        </head>

      (3)链接外部样式表与导入外部样式表的区别@import样式表:在HTML初始化时会被导入到HTML文件内<link>样式表:HTML标签需要样式时链接导入)

       [1]:加载的顺序不同<link>样式表:同时加载 @import样式表:页面全部下载完后再加载  

       [2]:兼容性的差别@import样式表:CSS2.1提出的使用方式 一些老的浏览器不支持(如:IE4以下的浏览器)

       [3]:使用DOM控制页面的样式的区别(页面使用JavaScript控制DOM改变页面样式时@import不支持,<link>属于XHTML标签@importCSS提供的方式)

六:样式的优先级(由以下 由左到右)

    1.行内样式表--2.内嵌样式表--3.外部样式表((1)链接外部样式表--(2)导入外部样式表)

原文地址:https://www.cnblogs.com/futao123/p/4322585.html