层叠样式表CSS

浏览数：53 / 时间：2015年06月09日

1.何为层叠样式表
css就是对网页进行样式的显示进行控制
2.设置css的几种方式
内联样式表(Inline styles)
    设置标签的style属性
    在使用内联样式表时，html4.01标准建议添加如下
    <meta http-equiv="Content-Style-Type" content="text/css">
    原因：新版本的html不仅可以使用css还可以使用其他的方式，例如使用text/sml来控制xml在html中的显示效果

弊端：每个标签中都需要设置，内联样式表会在所有的介质上起作用
嵌入样式表
    在<head>标签中定义
    <stype type="text/css" media="screen,projection">
        :防止浏览器不支持css
    </style>
    在<style></style>标签对中定义的每条样式规则的基本格式如下：
    selector{property:value;property:value;...}
    selector:当定义一条样式规则时，必须制定受这条规则作用的网页元素，
    在一条规则中定义的网页元素就是selector(选择器)，也就是选择该样式规则作用的网页元素
    property：指定那些要被修改的样式名称，即css属性，如color
    value：赋给property的值，即css属性值

    弊端：每个页面中都要写

外部样式表
    <link rel="styleSheet" href="test.css" type="text/css" media="screen"></link>
    type和media属性是可选的
    将外部样式表，保存在缓冲区中，可以加快网页的加载

    优点：能使网页瘦身

输入样式表
    可以使用css的@import声明将一个外部样式表（css文件）输入到两外一个css文件中，被输入的css
    文件中的样式规则定义语句就成为了输入到的css文件的一部分。
    也可以使用@import声明将一个css文件输入到网页的<style></style>标签中，被输入的css文件中的
    样式规则定义语句就成了<style></style>标签对中的语句。

使用@import声明的例子语句如下：
      <style type="text/css" media="screen,projection">
        <!--
          @import url("http://www.it315.org/style.css");
   P{}
   在本网页中定义的css，如果与输入样式表冲突(相同)，则本页面的样式覆盖输入样式表中的样式

-->
</style>

3.样式规则的选择器
HTML selector：html标签
Class selector：
    要将一种html标签所创建的各个网页元素分成几类，需要将这个HTML标签的class属性设置为不同的值
    <p class="stop"> paragraph1 </p>
    <p class="worning"> paragraph1 </p>
    <p class="normal"> paragraph1 </p>
在样式表中，可以分别为某个HTML标签的各个类别定义样式规则
    <style>
      P.stop{color:red}
      P.worning{color:yellow}
      P.normal{color:green}
    </style>
在样式表中，可以为某个类别的所有HTML标签定义样式规则：
    <style>
      .blueone(color:blue)
    </style>

    <h1 class="blueone">蓝色题目</h1>
    <p class="blueone">蓝色段落</p>

ID selector
ID属性用来定义某一个特定的HTML元素，一个网页文件中只能有一个元素使用某一个ID属性值
ID Selector就是为样式规则定义语句选择具有某一ID属性值的HTML元素。

    <sapn id="yellowone">terst</span>
    在样式表中，id值为yellowone的HTML的元素样式规则定义语句如下：
    <style>
      #yellowone(color:blue)
    </style>

关联选择器
    关联选择器是指一个用空格隔开的两个或更多的单一选择器组成的字符串
    例如：P EM {background：yellow}
    其中的"P EM"就是关联选择器，它表示段落中的强调文本(<em></em>标签对中的内容)的背景为黄色，
    而其它地方出现的强调文本则不受影响

    关联选择器定义的样式规则的选择权比单一选择器定义的样式规则的优先权高，即使在
    P EM{background：yellow}的后面部分定义了如下样式规则：EM{background：green}
    但是，在段落标签<p>中定义的强调文本仍用黄色背景

组合选择器
为了减少样式表的重复声明，可以在一条样式规则定义语句组合若干选择器，每个选择器之间用逗号(,)隔开
例如：H1,H2，H3，H4，H5，H6，td{color:red}

伪元素选择器
    伪元素选择器是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。
    例如，对于超链接标签<a>的正常状态、访问过的状态、选中状态、光标移到超链接文本上的状态，
    对于段落的首字母和首行，都可使用伪元素选择器来定义。
    使用伪元素作为选择器的样式规则定义：
      HTML：伪元素{属性：值}
    常用的伪元素：
      A:active 选中超链接时的状态
      A:hover 光标移动到超链接上的状态
      A:link 超链接的正常状态(没有任何动作前)
      A:visited 访问过的超链接状态
      P:first-line 段落中的第一行文本
      P:first-letter段落中的第一个字母
    类选择器与伪元素一起使用的格式：
      HTML元素.类名：伪元素{属性：值}

4.样式规则的注释
css中的样式属性非常多，大体可以分为以下几类：
字体、背景、文本、位置、布局、边缘、列表、其他

5.样式属性详解
Filter(css滤镜)

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

层叠样式表CSS