CSS的基础用法（1）

• 1、什么是CSS：指层叠样式表（Cascading Style Sheets）                                     
• 2、样式定义该如何显示HTML元素。样式通常存储在样式表中。外部样式表通常存储在CSS文件中。多个样式可以层叠为一。CSS使用规则：有选择器和多条声明                                    

 h1   {   color ： bule  ；font-size : 12px ; }
选择器    属性声明   值      属性声明     值  

• 选择器：想要被改变的样式HTML元素。
• 声明由一个属性和一个值组成。属性是你希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。

 3、CSS注释：   /*这是个注释*/

 4、id选择器：以“#”来定义。为特定的HTML元素指定样式。

           #fff { （属性）}       
           <p id="fff">          </p>

• class选择器：用于描述一组元素的样式，并可以在多个元素中使用。它以一个点‘.’号表示。（也可以指定特定的HTML元素）

          .ffff { }
          <p class="ffff">    </p>

5、插入样式表的方法有三种：

   a、外部样式表：用于多个页面，通过改变一个文件夹来改变整个站点的外观。每个页面使用<link>标签链接到样式表，它在头部。

   b、内部样式表：单个页面需要特殊的样式，可以在文档头部使用<style>标签来定义样式表

   c、内联样式：仅需要在一个元素应用一次时使用，在相关的标签内使用样式属性。

6、多重样式：某一属性在不同的样式表中被相同的选择器定义，则从更具体的样式表中被继承过来。

•   多重样式的优先级：内联样式>内部样式>外部样式>浏览器默认样式。（如果外部样式放在内部样式的后面，那么内部样式将被覆盖）

7、CSS背景：

    背景颜色：在body的选择器中，background-color：#FF0000或rgb（255，0，0）；

    背景图像：在body的选择器中，background-image：url=""；

          水平或者垂直平铺：background-repeat：repeat-x；

          设置位置与不平铺：background-repeat：no-repeat；（以左上角为顶点）

                      background-position：right top;

    背景的简写属性：

            body { background：#FF0000 url('     ') no-repeat right top;}

               简写顺序：color  image  repeat  attachment  position

     固定的背景图像：

            background-attachment : fixed;

8、文本格式：

         h1{text-align：center；}          （居中）

         p.date{text-align：right;}        （靠右）

         p.main{text-alingn：justify;}    （两边对齐）

9、删除链接的下划线：

      a { text-decoration : none }

10、装饰文字：

    h1{ text-decoration : overline }      （上划线）

      h2{ text-decoration : line-through }  （中划线）

      h3{ text-decoration : underline}      （下划线）

11、文本转换：

         p.uppercase {text-transform:uppercase;}   （大写）

         p.lowercase {text-transform:lowercase;}    （小写）

         p.capitalize {text-transform:capitalize;}   （首字母大写）

12、文本缩近：

            p {text-indent:50px;}

13、字符之间的空间：

    <style>
          h1 {letter-spacing:2px;}
          h2 {letter-spacing:-3px;}
       </style>

14、行与行之间的距离：

    <style>
          p.small {line-height:70%;}
          p.big {line-height:200%;}
     </style>

15、文本排序：

    {direction:rtl;}（从右到左）

文本阴影：

      {text-shadow:2px 2px #FF0000;}

16、CSS字体：

    通用字体系列 ： 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）

    特定字体系列 ： 一个特定的字体系列（如 "Times" 或 "Courier"）

字体系列：

    font-family 设置文本的字体，他设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

    注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。多个字体系列是用逗号分隔

字体样式：

    {font-size:40px;}
    {font-size:30px;}
    {font-size:14px;}

 主要是用于指定斜体文字的字体样式属性。   

        这个属性有三个值：
        {font-style:normal;}       正常显示文本
        {font-style:italic;}       以斜体字显示的文字
        {font-style:oblique;}      文字向一边倾斜（和斜体非常类似，但不太支持）

字体大小：

    font-size 属性设置文本的大小。 

            {font-size:40px;}
            {font-size:30px;}
            {font-size:14px;}

       1em的默认大小是16px

17、link链接：   

        a:link {color:#000000;}      /* 未访问链接*/
        a:visited {color:#00FF00;}  /* 已访问链接 */
        a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
        a:active {color:#0000FF;}  /* 鼠标点击时 */
                                         注意：   a:hover 必须跟在 a:link 和 a:visited后面
                                                  a:active 必须跟在 a:hover后面

18、列表：

ul.a {list-style-type:circle;}       （空心圆标记，下面的都是标记）
ul.b {list-style-type:square;}      
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}

list-style:              简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image:        将图象设置为列表项标志。
list-style-position:     设置列表中列表项标志的位置。
list-style-position:     设置列表项标志的类型。

• 垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

           vertical-align:bottom;（底部）。

  
  

19、表格边框：由border定义

    单个边框定义：   border-collapse:collapse;
    表格文本对齐：   text-align设置水平对齐方式
    表格颜色：       border:（color）（边框颜色）

20、盒子模型：

    Margin(外边距)：清除边框外的区域，外边距是透明的。             Margin:（‘上右下左’可以有1~4个）
    Border(边框)：围绕在内边距和内容外的边框。
    Padding(内边距)：清除内容周围的区域，内边距是透明的。          Padding：（‘上右下左’可以有1~4个）
    Content(内容)：盒子的内容，显示文本和图像

21、边框样式： 由border-style定义

none：默认无边框

dotted: 定义一个点线边框dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。 效果取决于边框的颜色值

• 为边框指定宽度有两种方法：

     1、可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)

     2、使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin（可自定义）。

• 边框颜色：
• 定义侧面不同的边框：

  border-top（等）-style：（...）
  
  或border-style：（‘上右下左’||‘上（左右）下’||‘（上下）（左右）’）

  
  

22、轮廓：

outline-style：轮廓属性。

outline-style：轮廓颜色。

outlline-style：轮廓宽度。

23、分组：选择器用逗号分开。

24、嵌套选择器：适用于选择器内部的选择器的样式。

25、尺寸：

 height：设置元素的高度。

   width：宽度。

   line-height：行高

   min（max）-height（width）：最小（最大）高度（宽度）。

26、显示：

•    隐藏元素 ：

- display:none：会影响布局。

- visibility:hidden：不会影响布局

• 块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

• 内联元素(inline)特性：

和相邻的内联元素在同一行;

（未完待续）....

（参考网站：http://www.runoob.com/css/css-tutorial.html）