码迷,mamicode.com
首页 > Web开发 > 详细

关于css

时间:2015-10-24 14:17:22      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:

css指层叠样式表(Cascading Style Sheet)

css规则由两个主要部分构成:选择器,以及一条或者多条声明。例如:selector{declaration1,declaration2,declaration3……declarationN}

用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术。用于控制网页的外观,包括内容和图像的定位,不同颜色的使用等。作为web核心语言之一。

  • 选择器通常是指需要改变样式的HTML元素。
  • 每条声明由一个属性和一个值组成。
    •   属性是指希望设置的样式属性
    • 每个属性都有一个值,属性和值被冒号分开。例子:selector{property:value}

  比如说想要设置h1元素的文字颜色问红色,字体大小设置为14像素。其中h1是选择器,color和font-size是属性,red和14px是值。

      • h1{color:red;font-size:14px;}      

  如果值为若干单词,则要给值加引号:p{font-family:“sans-serif";}

  • 多重声明:如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么做的好处是,当你从现有的规则中增减声明时,会尽可能地减少出错的可能性。就像这样:

    p {text-align:center; color:red;}

  • 空格和大小写

  大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:

  body {
    color: #000;
    background: #fff;
    margin: 0;
    padding: 0;
    font-family: Georgia, Palatino, serif;
    }
    •     CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。
  • 选择器分组:可以给选择器进行分组,这样,被分组的选择器就分享相同的声明。
    •   例:h1,h2,h3{color:green;}

CSS选择器分类

  1. 派生选择器:宜居元素再其位置的上下文关系来定义样式,可以使标记更加简洁。在css1中这种方式来应用规则的选择器被称为上下文选择器(contextual selectors),这是由于他们依赖于上下文关系来应用或者避免某项规则。

    比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:

    li strong {
        font-style: italic;
        font-weight: normal;
      }
    

    请注意标记为 <strong> 的蓝色代码的上下文关系:

    <p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p>
    <ol>
    <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
    <li>我是正常的字体。</li>
    </ol>
    
  2. ID选择器:id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以“#”来定义。id 属性只能在每个 HTML 文档中出现一次。

    下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:

    #red {color:red;}
    #green {color:green;}

    下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。

    <p id="red">这个段落是红色。</p>
    <p id="green">这个段落是绿色。</p> 
   在现代布局中,id 选择器常常用于建立派生选择器。

  3.类选择器:在CSS中,类选择器以一个点号来定义。(类名第一个字符不能使用数字)

  4.属性选择器:可以为拥有指定属性的HTML元素设置样式,而不仅限于class和ID。(只有在规定了!DOCTYPE时,IE7和IE8才支持属性选择器,在IE6及更低的版本中,不支持属性选择器)

      • 属性选择器:[title]{color:red;} /*为带有title属性的所有元素设置样式*/
      • 属性和值选择器:[title="w3school"]{border:5px solid blue;} /*为带有title属性的所有元素设置样式*/
      • 属性和值选择器—多个值:
        1. [title~=hello]{color:red;}为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:

          <h1>可以应用样式:</h1>
          <h2 title="hello world">Hello world</h2>
          <p title="student hello">Hello W3School students!</h1>
          <hr />

          <h1>无法应用样式:</h1>
          <h2 title="world">Hello world</h2>
          <p title="student">Hello W:3School students!</p>

        2. [lang|=en]{color:green;}为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:

          <h1>可以应用样式:</h1>
          <p lang="en">Hello!</p>
          <p lang="en-us">Hi!</p>
          <hr />

          <h1>无法应用样式:</h1>
          <p lang="us">Hi!</p>
          <p lang="zh">Hao!</p>

      • 设置表单的样式:属性选择器在为不带class和ID的表单设置样式时特别有用。input[type="text"]
        {
          width:150px;
          display:block;
          margin-bottom:10px;
          background-color:yellow;
          font-family: Verdana, Arial;
        }

        input[type="button"]
        {
          width:120px;
          margin-left:35px;
          display:block;
          font-family: Verdana, Arial;
        }

插入样式表方式

  1. 外部样式表:

    当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部:

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

    外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子:

    hr {color: sienna;}
    p {margin-left: 20px;}
    body {background-image: url("images/back40.gif");}
    不要在属性值与单位之间留有空格。
  2. 内部样式表

    当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:

    <head>
    <style type="text/css">
      hr {color: sienna;}
      p {margin-left: 20px;}
      body {background-image: url("images/back40.gif");}
    </style>
    </head>
    
  3. 内联样式

    由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

    要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:

    <p style="color: sienna; margin-left: 20px">
    This is a paragraph
    </p>
    
  4. 多重样式

    如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。

    例如,外部样式表拥有针对 h3 选择器的三个属性:

    h3 {
      color: red;
      text-align: left;
      font-size: 8pt;
      }

    而内部样式表拥有针对 h3 选择器的两个属性:

    h3 {
      text-align: right; 
      font-size: 20pt;
      }

    假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:

    color: red; 
    text-align: right; 
    font-size: 20pt;

    即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。

关于css

标签:

原文地址:http://www.cnblogs.com/Shirley-He/p/4906672.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!