1. CSS基本语法
    • css的基本组成:选择器{属性:值} ,多个属性之间用空格间隔
    • 当属性值为0时不用加单位,因为0就是0
    • 属性为多个单词时,属性要加引号
    • 结尾加分号
  2. CSS高级语法
    • 选择器可以成组进行声名

      h1,h2,h3,h4,h5,h6 {
        color: green;
        }
    • 通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。

      但有些浏览器不支持继承,如Netscape 4.0,所以我们在body定义的声名也要在各个选择器中声名一遍,为了Netscape用户。

      另外子标签可以通过定义自己的属性来摆脱对父类的继承

      body  {
           font-family: Verdana, sans-serif;
           }
      
      p, td, ul, ol, li, dl, dt, dd  {
           font-family: Verdana, sans-serif;
           }
  3. 选择器
    • 类选择器样式:以一个点表示

      .center {text-align: center}
    • 派生选择器

      定义类为fancy的标签内的td

      .fancy td {
      	color: #f60;
      	background: #666;
      	}
    • 元素也可以基于他们的类而被选择

      那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。

      td.fancy {
      	color: #f60;
      	background: #666;
      	}
  4. 创建css样式
    • 外部样式表

      外部样式表的插入在html的head用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");}

      不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ,它仅在 IE 6 中有效,但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

    • 内部样式表

      内部样式表在html头部用style标签定义

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

      样式仅需要在一个元素上应用一次时使用内联

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

      外部样式

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

      内部样式

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

      继承下来的样式

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

      即:继承外部有而内部没有的样式,重复的样式以内部为准

  5. CSS背景
    • CSS 背景属性
      background 简写属性,作用是将背景属性设置在一个声明中。
      background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
      background-color 设置元素的背景颜色。
      background-image 把图像设置为背景。
      background-position 设置背景图像的起始位置。
      background-repeat 设置背景图像是否及如何重复。
    • 背景色

      如果您希望背景色从元素中的文本向外少有延伸,只需增加一些内边距:

      p {background-color: gray; padding: 20px;}

      background-color 不能继承,其默认值是 transparent。transparent 有"透明"之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。

    • 背景图像

      另外还要补充一点,background-image 也不能继承。事实上,所有背景属性都不能继承。

      要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。

      body {background-image: url(/i/eg_bg_04.gif);}
    • 背景定位

      {关键,字百分数值,长度值}

      根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对象垂直方向。

      如果只出现一个关键字,则认为另一个关键字是 center。

    • 背景关联

      如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。

      您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:

      body 
      {
      background-image:url(/i/eg_bg_02.gif);
      background-repeat:no-repeat;
      background-attachment:fixed
      }

      background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。

  6. CSS文本
    • CSS 文本属性
      color 设置文本颜色
      direction 设置文本方向。
      line-height 设置行高。
      letter-spacing 设置字符间距。
      text-align 对齐元素中的文本。
      text-decoration 向文本添加修饰。
      text-indent 缩进元素中文本的首行。
      text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
      text-transform 控制元素中的字母。
      unicode-bidi 设置文本方向。
      white-space 设置元素中空白的处理方式。
      word-spacing 设置字间距。
    • text-decoration 值会替换而不是累积起来。
  7. CSS字体
    • CSS 字体属性
      font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
      font-family 设置字体系列。
      font-size 设置字体的尺寸。
      font-size-adjust 当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)
      font-stretch 对字体进行水平拉伸。(CSS2.1 已删除该属性。)
      font-style 设置字体风格。
      font-variant 以小型大写字体或者正常字体显示文本。
      font-weight 设置字体的粗细。

      例:

      p.ex1
        {
        font:italic arial,sans-serif;
        }
      
    • 字体属性有继承性
  8. CSS 列表
    • CSS 列表属性
      list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
      list-style-image 将图象设置为列表项标志。
      list-style-position 设置列表中列表项标志的位置。
      list-style-type 设置列表项标志的类型。
    • list-style-type
      none 无标记。
      disc 默认。标记是实心圆。
      circle 标记是空心圆。
      square 标记是实心方块。
      decimal 标记是数字。
      decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
      lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
      upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
      lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
      upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
      lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
      lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
      upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
      hebrew 传统的希伯来编号方式
      armenian 传统的亚美尼亚编号方式
      georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
      cjk-ideographic 简单的表意数字
      hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
      katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
      hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
      katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
  9. CSS 表格
    • CSS 表格属性
      border-collapse 表格边框与内表格边框合为一
      border-spacing 表格之间的距离
      caption-side 设置表格标题的位置
      empty-cells 设置是否显示表格中的空单元格(仅用于 "separated borders" 模型)
      table-layout 设置显示单元、行和列的算法
    • border-collapse值
      • separate(默认)
      • collapse
    • table-layout值
      • automatic(默认)
      • fixed
  10. CSS 边框
    • CSS 边框属性 CSS
      outline 在一个声明中设置所有的轮廓属性。 2
      outline-color 设置轮廓的颜色。 2
      outline-style 设置轮廓的样式。 2
      outline-width 设置轮廓的宽度。 2
    • outline-style
      none 默认。定义无轮廓。
      dotted 定义点状的轮廓。
      dashed 定义虚线轮廓。
      solid 定义实线轮廓。
      double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
      groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
      ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
      inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
      outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
      inherit 规定应该从父元素继承轮廓样式的设置。
    • outline-width
      thin 规定细轮廓。
      medium 默认。规定中等的轮廓。
      thick 规定粗的轮廓。
      length 允许您规定轮廓粗细的值。
      inherit 规定应该从父元素继承轮廓宽度的设置。
  11. CSS 框架模型
    • 框架模型概述

    • CSS padding
      padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
      padding-bottom 设置元素的下内边距。
      padding-left 设置元素的左内边距。
      padding-right 设置元素的右内边距。
      padding-top 设置元素的上内边距。

      例:

      h1 {padding: 10px 0.25em 2ex 20%;}
    • CSS border
      border 简写属性,把针对四个边的属性设置在一个声明。
      border-style 设置所有边框的样式
      border-width 简写属性,设置宽度
      border-color 简写属性,框中可见部分的颜色
      border-bottom 简写属性,把下边框的所有属性设置到一个声明中。
      border-left 简写属性,把左边框的所有属性设置到一个声明中。
      border-right 简写属性,把右边框的所有属性设置到一个声明中。
      border-top 简写属性,把上边框的所有属性设置到一个声明中。
      border-top-color 设置元素的上边框的颜色。
      border-bottom-color 设置元素的下边框的颜色。
      border-left-color 设置元素的左边框的颜色。
      border-right-color 设置元素的右边框的颜色。
      border-left-style 设置元素的左边框的样式。
      border-bottom-style 设置元素的下边框的样式。
      border-right-style 设置元素的右边框的样式。
      border-top-style 设置元素的上边框的样式。
      border-bottom-width 设置元素的下边框的宽度。
      border-left-width 设置元素的左边框的宽度。
      border-right-width 设置元素的右边框的宽度。
      border-top-width 设置元素的上边框的宽度。

      例:

      p {
        border-style: solid;
        border-color: blue rgb(25%,35%,45%) #909090 red;
        }
    • CSS magin
      margin 简写属性。在一个声明中设置所有外边距属性。
      margin-bottom 设置元素的下外边距。
      margin-left 设置元素的左外边距。
      margin-right 设置元素的右外边距。
      margin-top 设置元素的上外边距。

      例:

      p {margin: 20px 30px 30px 20px;}
  12. CSS 定位
    • CSS 定位概述
      position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
      top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
      right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
      bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
      left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
      overflow 设置当元素的内容溢出其区域时发生的事情。
      clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
      vertical-align 设置元素的垂直对齐方式。
      z-index 设置元素的堆叠顺序。
    • position 属性
      absolute

      生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

      元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

      fixed

      生成绝对定位的元素,相对于浏览器窗口进行定位。

      元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

      relative

      生成相对定位的元素,相对于其正常位置进行定位。

      因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

      static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
      inherit 规定应该从父元素继承 position 属性的值。

      各属性定义

      • 相对定位

        设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。

        在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

      • 绝对定位

        设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

      • 浮动

        浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

        由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

    • clip属性 描述
      shape 设置元素的形状。唯一合法的形状值是:rect (top, right, bottom, left)
      auto 默认值。不应用任何剪裁。
      inherit 规定应该从父元素继承 clip 属性的值。
    • vertical-align属性 描述
      baseline 默认。元素放置在父元素的基线上。
      sub 垂直对齐文本的下标。
      super 垂直对齐文本的上标
      top 把元素的顶端与行中最高元素的顶端对齐
      text-top 把元素的顶端与父元素字体的顶端对齐
      middle 把此元素放置在父元素的中部。
      bottom 把元素的顶端与行中最低的元素的顶端对齐。
      text-bottom 把元素的底端与父元素字体的底端对齐。
      length  
      % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
      inherit 规定应该从父元素继承 vertical-align 属性的值。
    • z-index属性

      该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

      img
        {
        position:absolute;
        left:0px;
        top:0px;
        z-index:-1;
        }
  13. CSS 高级
    • 尺寸属性
      height 设置元素的高度。
      line-height 设置行高。
      max-height 设置元素的最大高度。
      max-width 设置元素的最大宽度。
      min-height 设置元素的最小高度。
      min-width 设置元素的最小宽度。
      width 设置元素的宽度。
    • 分类属性
      clear 设置一个元素的侧面是否允许其他的浮动元素。
      cursor 规定当指向某元素之上时显示的指针类型。
      display 设置是否及如何显示元素。
      float 定义元素在哪个方向浮动。
      position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
      visibility 设置元素是否可见或不可见。
    • 伪类 IE F N W3C
      :active 将样式添加到被激活的元素 4 1 8 1
      :focus 将样式添加到被选中的元素 - - - 2
      :hover 当鼠标悬浮在元素上方时,向元素添加样式 4 1 7 1
      :link 将特殊的样式添加到未被访问过的链接 3 1 4 1
      :visited 将特殊的样式添加到被访问过的链接 3 1 4 1
      :first-child 将特殊的样式添加到元素的第一个子元素   1 7 2
      :lang 允许创作者来定义指定的元素中使用的语言   1 8 2

      例:

      a:link {color: #FF0000}	/* 未访问的链接 */
      a:visited {color: #00FF00}	/* 已访问的链接 */
      a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
      a:active {color: #0000FF}	/* 选定的链接 */
    • 伪元素 IE F N W3C
      :first-letter 将特殊的样式添加到文本的首字母 5 1 8 1
      :first-line 将特殊的样式添加到文本的首行 5 1 8 1
      :before 在某元素之前插入某些内容   1.5 8 2
      :after 在某元素之后插入某些内容   1.5 8 2
    • 媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。

      媒介类型
      all 用于所有的媒介设备。
      aural 用于语音和音频合成器。
      braille 用于盲人用点字法触觉回馈设备。
      embossed 用于分页的盲人用点字法打印机。
      handheld 用于小的手持的设备。
      print 用于打印机。
      projection 用于方案展示,比如幻灯片。
      screen 用于电脑显示器。
      tty 用于使用固定密度字母栅格的媒介,比如电传打字机和终端。
      tv 用于电视机类型的设备。

      例:

      <html>
      <head>
      
      <style>
      @media screen
      {
      p.test {font-family:verdana,sans-serif; font-size:14px}
      }
      
      @media print
      {
      p.test {font-family:times,serif; font-size:10px}
       }
      
      @media screen,print
      {
      p.test {font-weight:bold}
      }
      </style>
      
      </head>
      
      <body>....</body>
      
      </html>