zoukankan      html  css  js  c++  java
  • 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)导入外部样式表)

  • 相关阅读:
    bzoj 2527: [Poi2011]Meteors 整体二分
    bzoj 2738 矩阵乘法
    bzoj 3110 K大数查询
    bzoj 3262 陌上花开
    cogs 577 蝗灾 CDQ分治
    bzoj 1101 zap
    bzoj 2005
    bzoj 3518 Dirichlet卷积
    bzoj 1257
    最优贸易 [NOIP 2009]
  • 原文地址:https://www.cnblogs.com/futao123/p/4322585.html
Copyright © 2011-2022 走看看