html css

作为一个小白，防止遗忘，想理一下一些东西。

1、基本选择器：

（1）标签选择器

（2）类选择器（不能是纯数字，不能以数字开头）

（3）多类名选择器

（4）id选择器

（5）通配符选择器（*使用较少）

2、复合选择器

    （1）后代选择器（所有后代）

    （2）子代选择器（亲儿子）

    （3）交集选择器

    （4）并集选择器(eg.  div,p,span{})

    （5）伪类选择器（:link   :visited  :hover   :active）

3、id选择器和类选择器的最大区别在使用的次数

4、样式的显示效果跟HTML元素中的类名先后顺序没有关系。

5、<hr />------线

6、font:font-style font-weight  font-size/line-height font-family

    (1)连写时font-style 和font-weight 可以省略。font-size 和font-family不可以省略。

    (2)顺序不能乱

    (3)font-style(normal----正常/ italic------斜体)我们常用这个样式使斜体（<i></i><em></em>）变正常。

    (4)font-weight：字体粗细

           normal：正常字体（相当于400）

            bold：粗体（相当于700）

            bolder：特粗体（IE5+）

            lighter：细体（IE5+）

            number：100-900

    (5)font-size:字体大小(尽量使用偶数，ie6等老式浏览器支持奇数会有BUG)

            px:像素，em，rem，pt....

    (6)font-family

          1、  可以同时指定多个字体，中间以逗号隔开，浏览器在不支持第一个字体的情况下，会继续尝试下一个，知道找到合适的字体。

           2、尽量使用默认字体，一般有微软雅黑、宋体等。若必须使用特殊字体时，建议使用图片。

            3、Unicode

                宋体-------------\5B8B\4F53

                  微软雅黑----------\5FAE\8F6F\96C5\9ED1

                 黑体-----------\9ED1\4F53

                .................

   7、color

            1、预定义的颜色值（red、green、blue、pink.....）

            2、十六进制(#FFFFFF、#333333、#ffff00)------------两个挨着相同的可以合并写#000000-----------》#000

            3、RGB代码----------》rgb(红，绿，蓝)  0~255

    8、line-height 行间距：基线和基线之间的距离(一般比字号大7-8px 就比较好看了)

    9、text-indent:2em

    10、text-decoration    

            1、none：默认

            2、underline：下划线（等同<u><ins>）

            3、overline：文本上一条线

            4、line-through：删除线（等同<s><del>）

            5、blink：

    11、文本修饰的一些标签

            1、<em><i>--------------------倾斜

            2、<strong><b>----------------加粗

            3、<u><ins>--------------------下划线

            4、<s><del>--------------------删除线

    12、块级元素<div>、、<ul>、<li>、（<p>、<h1>、<h2>是属于文字类块级元素，不要放其他块级元素）

            1、可以容纳内联元素和其他块级元素

            2、宽度是默认容器的100%

            3、高度、宽度、内外边距等都可以控制

            4、总是新起一行

     13、行内元素<a>、<span>、<strong>、<em>、<u>、<b>等

            1、宽高无效，默认宽度就是本身内容的宽度

            2、和相邻行内元素在一行上

            3、水平方向padding和margin可以设置，垂直方向无效

            4、行内元素内只能容纳文本或者其他行内元素。（<a>有些特殊）

    14、行内块元素<img /> <input /> <td>

    15、display

            1、inline：行

            2、block：块

             3、inline-block：行块

     16、CSS的特性（层叠性、继承性、特殊性）

            1、样式冲突遵循就近原则

            2、样式不冲突，不会层叠

            3、子标签会继承父标签的某些样式（颜色、字体等）

17、权重

            1、标签：0001

                类，伪类：0010

                ID：0100

                行类样式：1000

                ！important：无穷大（eg.  div{ color:hotpink !important }   ）

            2、权重会叠加

            3、权重相同遵循就近原则

            4、涉及到继承问题时，优先自己。比如下面的例子，原理上p标签可以继承父级的颜色，而#father的权重也更高，但在p标签自己设置了颜色样式的情况下，优先执行自己的蓝色。

            例：<style>

                        #father{color:red;}

                          p{color:blue;}

                   </style>

                   <div id="father">

                            <p>我依旧是蓝色</p>

                    </div>