zoukankan      html  css  js  c++  java
  • HTML中放置CSS的三种方式和CSS选择器

    (一)在HTML中使用CSS样式的方式一般有三种:
    1 内联引用
    2 内部引用
    3 外部引用。
     
     第一种:内联引用(也叫行内引用)
      就是把CSS样式直接作用在HTML标签中。

       <p style="font-size: 10px; color: #FFFFFF;">

        使用CSS内联引用表现段落.

       </p>

      特点:内联的样式比其他方法更加灵活,但需要和展示的内容混淆在一起,内联样式会失去一些样式表的优点。
     
      第二种:内部引用(也叫内嵌式)
      使用style标签直接把CSS文件中的内容加载到HTML文档内部的<head>标签里。

      <head>

           ……

          <style type="text/css">

                /* 设置本页面p标签中的文字为以下样式*/

                 p{

         font-size: 10px;

         color: #FFFFFF;

                 }

           </style>

      </head>

      特点 : 适合用于一个HTML文档具有独一无二的样式时。
     
      第三种:外部引用
      CSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.
      外部引用相对于内部引用和内联引用来说是高效的是节省宽带的.
      外部引用是W3C推荐使用的
      实现外部引用有两种方式:
        (1)使用link标签引用CSS
        (2)使用@import导入CSS

      <head>

           ……

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

          <style type="text/css">

                 @import "mystyle2.css"

                  …….  /*其它CSS定义*/

          </style>

      </head>
     
      注 : 如果在同一个选择器上使用几个不同的样式表时,这个属性值将会叠加几个样式表,遇到冲突的地方会以最后定义的为准。
     
    (二)CSS选择器有六种选择符:
    1 HTML选择符
    2 类选择符
    3 ID选择符
    4 关联选择符
    5 组合选择符
    6 伪元素选择符
     
     1 HTML选择符 : 即是HTML标签,用来改变一个指定标签的样式,任何HTML元素都可以是一个CSS的选择符。
      语法:HTML标签名{属性:值}

      p  { text-indent:3em; }  /*当中的选择符是p*/

      h1{ color:red; }  /*当中的选择符是h1*/

     2 类选择符 : 匹配文档中元素E的class属性的属性值为classname的元素
      语法:标记名.类名{属性:值} 或 .类名{属性:值}
      类选择符名称的定义方式是,"."符号,英文"dot",后加类名称classname
      类选择符的定义需要有.符号(.符号标明是类选择符),但是HTML文档中的标签的class属性名不能出现.符号,见下面示例:

      p.dark-row{ background:#EAEAEA; }    /*设置p标签中class属性为dark-row的*/

      .note{ font-size:small }            /*为note的类可以被用于任何元素*/

      <p class="dark-row">第一段</p>             <!– 具有类dark-row样式 -->

      <span class="dark-row">第二段</span>    <!– 没有类dark-row样式 -->

      <span class="note">第三段</span>           <!– 具有类note样式 -->

      <div class="note">第四段</div>        <!– 具有类note样式 -->
     
     3 ID选择符 : 匹配文档中元素E的id属性的属性值为idname的元素
      语法:ID名称{属性:值}
      ID选择符名称的定义方式是,#符号,英文"pound",后加ID名称idname
      ID选择符的定义需要有#符号(#符号标明是ID选择符),但是HTML文档中的标签的id属性名不能出现#符号,见下面示例
      id属性的特殊之处在于,一个文档中只能有一个元素使用一个ID选择符(与class属性正好相反),id属性可以用来单一地标识一个元素 。

      #main{ text-indent:3em; }  /*ID名称main前加上一个#号*/

      … …

      <p id=“main”>文本缩进3em</p>  <!– 在html的p标签中指定id属性main -->

     4 关联选择符 : 也称包含选择符,可以单独对某种元素包含关系定义的样式表,元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义
      语法:选择符1 选择符2...{属性:值}
      table a{font-size:12px}  
      在表格内的链接改变了样式,文字大小为12象素,而表格外的链接的文字仍为默认大小。
     
     5 组合选择符:也叫选择符组,可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义。
      语法:选择符1,选择符2,.,..{属性:值}
      h1, h2, h3, h4, h5, h6 { color: green }

      p, table{ font-size: 9pt }

        效果完全等效于:
      p { font-size: 9pt }
      table { font-size: 9pt }

     

     6 伪元素选择符是指对同一个HTML元素不同状态的一种定义方式。例如对于<a>标签的正常状态、访问状态、选中状态、光标移到超链接文本上的状态,就可以使用伪元素选择器来定义。
      语法:标签:伪元素{属性:值;}

      a:link {color: #FF0000; text-decoration: none}           /* 未访问的链接 */

      a:visited {color: #00FF00; text-decoration: none}         /* 已访问的链接 */

      a:hover {color: #FF00FF; text-decoration: underline}   /* 鼠标在链接上 */

      a:active {color: #0000FF; text-decoration: underline}   /* 激活链接 */
      提示:a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
      提示:a:active 必须被置于 a:hover 之后,才是有效的。
     
    最近整理的所学的浅显知识,若有错误,敬请指正.
  • 相关阅读:
    萨卡斯指法
    香港保险
    数据分析,了解行业
    数据分析师
    黑盒测试方法
    web系统的常用功能测试
    linux-磁盘问题
    mysql连表查询
    mysql模糊查询
    MySQL 数据类型
  • 原文地址:https://www.cnblogs.com/hongxinlaoking/p/4675073.html
Copyright © 2011-2022 走看看