标签：单位   inpu   改变样式   line   har   复制   自动   overflow   size   

 PART-1 CSS的基础常识

一、什么是CSS？

W3C标准中，倡导有3：其一为内容与表现分离，其二为内容与行为分离，其三为内容结构的语义化。其倡导中第一条的“表现”指的便可以说是CSS。CSS全称Cascading Style Sheets，中文名为层叠样式表，是一种用来表现HTML等文件样式的计算机语言。

 二、CSS应用的三种方式：

1. 行内样式表

行内样式表将CSS样式与HTML代码完全杂糅在一起，不符合W3C关于内容与表现分离的的基本规则，且不利于网站的维护。但是行内样式表在样式测试方面提供了便利，且优先级最高。不推荐使用。

2. 内部样式表

内部样式表在一定程度上将CSS样式与HTML代码分离，但是分离不够彻底，无法实现样式复用。（样式复用：多个网页共享同一样式。）内部样式表的优先级要低于行内样式表。

3. 外部样式表

外部样式表实现了CSS样式与HTML代码的彻底分离，方便样式复用和网站的维护，符合W3C规范。外部样式表的优先级低于内部样式表。在后续开发中，首推外部样式表。

      [导入CSS文件的两种方式]
             *    ① 在

①除行内样式表，内部样式表与外部样式表的链接均写于HTML的HEAD部分中。

②导入外部样式表时，除type属性可选写外，rel与href属性必须出现。

  PART-2 CSS的常用选择器

1. 选择器的命名规则

①只能由字母、数字、下划线组成，不能有任何特殊字符；

②开头不能是数字，只能由下划线或者字母开头。

2. 常用选择器

 2.1 标签选择器

   写法：HTML标签名{}

   作用：选中页面中所有的对应标签。

 2.3 Class选择器

   写法：.选择器名称{}

   作用：需要改变样式的标签上使用class="选择器名称"来调用对应选择器。

 2.4 Id选择器

   写法：#选择器名称{}

   作用：需要改变样式的标签上使用id="选择器名称"来调用对应选择器。

 2.5 通用选择器

   写法：*{}

   作用：选中页面中所有标签。

 2.6 后代选择器

   写法：选择器1 选择器2 选择器3...{}

   作用：比如说 div .li{}就表示满足div里面的class="li"的元素样式，其中选择器之间允许隔代。

    生效规则： 只要满足，后一选择器是前一个选择器的后代，即可成效。（后代包括子代、孙代、重孙代。。。）
             *
             * 通俗的讲：只要后一个选择器，在前一个选择器里面即可。

 2.7 子代选择器

   写法：选择器1>选择器2>选择器3...{}

   作用：用法大致与后代选择器相同，但要注意的是，选择器之间不允许隔代。

 2.8 并集选择器

   写法：选择器1,选择器2,选择器3...{}

   作用：比如说 .li,#li{} 表示具备class="li"或者id="li"的形式便可生效，相当于数学逻辑中的“或”。

   生效规则： 多个选择器取并集，只要标签满足其中任意一个选择器，样式即可生效。

 2.9 交集选择器

   写法：选择器1选择器2选择器3...{}

   作用：比如 .li,#li{} 表示必须同时具备class="li"和id="li"的形式可生效，相当于数学逻辑中的“且”。

    生效规则： 多个选择器取交集，则必须满足所有选择器的要求，才能生效

 2.10 伪类选择器

   写法：选择器名称:伪类状态{}

   常见的伪类状态：①link 未访问状态；②visited 已访问状态；③hover 鼠标指上状态；

                         ④active 激活选定状态；⑤focus 获得焦点时状态(input常用)。

   超链接多种伪类共存时的顺序： link/visited→visited/link→hover→active

 3. 选择器的优先级

  3.1 第一原则：近者优先！最内层选择器>>>>>>>外层！！！

        例如：div ul li > div #ul

        li在ul内层，所以li标签选择器能覆盖外层id选择器

  3.2 当作用在同一层时：ID选择器>class选择器>标签选择器！！！

       例如：div #li > div .li > div li

       只要最后一个选择器都作用于li上，那无论之前有多少层

       选择器嵌套，均没有远近关系。

  3.3 当作用于同一层，且最后一层为同等选择器。

        例如： div ul .li > div li

        作用范围越精准，则优先级更高。

  3.4 当优先级完全相同时，写在后面的选择器会覆盖前面的选择器 。

  PART-3 CSS的属性单位

 1. 长度单位：像素px，在某些情况下可以使用百分比。

 2. 颜色：

  2.1 十六进制写法：#XXXXXX （X：1-F）。

  2.2 颜色的英文名称。

  2.3 RGB写法：(0-255,0-255,0-255)  三者由前到后分别对应红、绿、蓝三种颜色的比例。

  2.4 RGBA写法：(0-255,0-255,0-255、0-1) 前三者同RGB写法，最后为透明度，此透明度 只会使当前控件变透明，并不会影响其子控件。

  PART-4 CSS的常用文本属性

 1、 字体、字号类：                                                                                    
         *   ① font-weight： 字体粗细。 bold-加粗、normal-正常、lighter-细体
         *     也可以使用100-900数值，400表示normal，700表示bold
         *
         *   ② font-style: 字体样式。 italic-倾斜、normal-正常
         *
         *   ③ font-size: 字号。 可以写px单位，也可以写%
         *     200%表示浏览器默认大小(16px)的两倍=32px
         *
         *   ④ font-family: 字体系列(字体族)。
         *     >>> 可以直接写字体名，也可以写字体系列名。
         *     >>> 常用字体系列：serif-衬线体    sans-serif-非衬线体；
         *     >>> font-family可以接收多个值，用逗号分隔。表示优先使用第一个，如果没有这个字体，依次向后使用。 通常，最后一个值放字体系列名；
         *         eg: font-family: "黑体","微软雅黑",sans-serif;
         *     
         *   ⑤ font缩写形式：
         *     >>> 顺序必须是：
         *         font-weight font-style font-size/line-height font-family
         *     >>> 不同属性之间，用空格分隔；
         *     >>> font-size/line-height必须一组，用/分隔；
         *     >>> font-family多个字体之间，用逗号分隔
         *     >>> eg： font: bold italic 32px/50px "微软雅黑",serif;
         *
         * 2、 字体颜色
         *   ① color： 字体颜色  可以使单词、十六进制、RGB等
         *
         *   ② opacity： 透明度，可选值0-1
         *     [opacity和RGBA的区别]（重点）
         *     >>> RGBA本身可以设置颜色，而opacity必须配合其他颜色属性来用；
         *     >>> rgba仅仅是让当前元素设置的颜色透明；
         *         而opacity，会让当前元素里面的所有文字、背景、子元素都透明；
         *
         *
         * 3、行距、对齐、其他类
         *   ① line-height: 行高。 可以写px单位、可以直接写数字(表示默认行距的几倍)、可以写% (表示默认行距的百分比)
         *       

                   >>> 行高重要作用： 让单行文字在div中垂直居中？
         *         设置行高等于div的高度，即可让单行文字垂直居中。
         *
         *   ② text-align：设置区域内的行级元素水平对齐方式left/center/right
         *
         *   ③ letter-spacing： 字符间距，字与字之间的距离
         *
         *   ④ text-decoration: 文本修饰；
         *     underline-下划线、overline-上划线、line-through-删除线、none-去下划线
         *
         *   ⑤ overflow： 设置超出区域文字的显示方式。
         *     >>> overflow: hidden; 超出区域的文字隐藏不显示；
         *       >>> overflow: scroll; 无论文字多少，都会显示水平垂直滚动条
         *       >>> overflow: auto; 自动。文字多显示滚动条，文字少，不显示滚动条。
         *       >>> 可以使用overflow-x和overflow-y单独修改两个方向的滚动条
         *             overflow-y: scroll; overflow-x: hidden;
         *
         *   ⑥ text-overflow：设置行末多余文字的显示方式；
         *     >>> clip-多余文字裁剪掉（默认效果）   ellipsis-多余文字省略号显示
         *     >>> 显示省略号，需要配合white-space: nowrap;使用
         *     >>> 【重点】 设置行末显示省略号(三行代码，缺一不可)
         *          overflow: hidden;
         *            white-space: nowrap;
         *            text-overflow: ellipsis;
         *
         *   ⑦ white-space: nowrap; 设置中文行末，不断行显示
         *
         *   ⑧ text-indent: 首行缩进。
         *
         *   ⑨ -webkit-text-stroke: 0.5px blue; 文字描边。
         *     -webkit-表示只有webkit内核浏览器生效、常见的有chrome、safari
         *
         *   ⑩ text-shadow: 文字阴影，有四个属性值，空格分隔；
         *     >>> 水平阴影距离，正数表示阴影右移，负数左移；
         *     >>> 垂直阴影距离，正数表示阴影下移，负数上移；
         *     >>> 阴影模糊距离， 0表示阴影一点不模糊；
         *     >>> 阴影的颜色；
         *     >>> eg:text-shadow: 20px -10px 2px blue;
         *   文字加空格

以下举例：

DOCTYPE html>
html>
    head>
        meta charset="UTF-8">
        title>CSS常用文本属性title>
        style type="text/css">
            .div1 {
                width: 200px;
                height: 200px;
                background-color: rgb(177,0,0);
                font-weight: 900px;
                font-style: italic;
                font-size:50px ;
                color: #CCCCCC;
                opacity: 0.7;
                line-height: 100px;
                letter-spacing: 10px;
                text-decoration: line-through;
                overflow: hidden;
                text-shadow: 1px 1px 20px green;
                text-indent: 20px;
                -webkit-text-stroke: 1px red;
                white-space: nowrap;
                text-overflow: ellipsis;
                /*font:italic bold 75%/1.8 ‘Microsoft Yahei‘,sans-serif；*/
                    } 
        style>
    head>
    body>
        div class="div1">
                   嘿嘿嘿
        br />哈哈哈哈哈
            div>
    body>
html>

效果图如下：

  PART-5 CSS的常用背景属性

第二部分----CSS的基础语法

标签：单位   inpu   改变样式   line   har   复制   自动   overflow   size   

原文地址：http://www.cnblogs.com/wq1994/p/7295027.html