html-note03_css选择器

标签在网页中的表现形式

    块级元素（大标签/大盒子）
        div table form ul ol dl li dt dd p h1-h6  
    
    行内元素（小标签/小盒子）
        span a strong b em i time
    
    行内块级元素（小标签/小盒子）
        img input select option textarea
    
        块级元素的特点：
            1.块级元素独立占一行
            2.块级元素可以嵌套块级元素和行内元素以及行内块级元素
            3.p、h1-h6、dt:不能嵌套其他块级元素，可以嵌套行内元素和行内块级元素
        行内元素的特点：
            1.在同一行显示
            2.不能嵌套块级元素，但是可以嵌套行内元素
        行内块级元素的特点：
            1.在同一行显示
            2.对于宽和高是起作用的
        语法规则：
            1.不能交叉嵌套
            2.p h1-h6 dt
            3.行内与块的嵌套方式
    html的历史
        html4.0-xhtml1.0-html5.0

HTML--页面结构

CSS（层叠样式表）：--表现

    作用：修饰和美化HTML的
    使用：将所有的样式写在样式表中

    样式表：

        1.行内样式表：
            语法：<p style="样式"></p>    
        缺点:
            没有实现结构和形式分离
        优点：
            优先级最高
        2.内部样式表（内嵌式样式表）
            <style type="text/css">
            样式
            </style>
        缺点：
            没有实现结构和形式分离
        优点：
            没有优点
        3.外部样式表
            A.链接式样式表
            <link href="样式表的路径" rel="stylesheet" type="text/css">
        缺点：
            没有缺点
        优点：
            大大的，实现了结构和形式的分离
            B.导入式样式表
                <style type="text/css">
                    @import url(路径);
                </style>
            不用 语法比较讨厌
        

    层叠：

        1.一个页面可以引入多个样式表
        2.一个样式表可以给多个页面使用
    样式表的优先级：
        就近原则
 
 
 
 
    样式：
        选择器{样式1：样式值1；样式2：样式值2；.....}
           p  {color:red; }
        
        基本选择器：
            *:全局选择器（通用选择器）表示页面中的所有标签
            *{样式1：样式值1；样式2：样式值2；.....}
                
                
            标签选择器（标记选择器）
            p{样式1：样式值1；样式2：样式值2；.....}
            
            相同的标签具有相同的样式
            类别选择器
                先定义后使用
                
                定义
                    .className{样式1：样式值1；样式2：样式值2；.....}
                使用
                    <p class="className">文字</p>
                    <h1 class="className">文字</h1>
            相同的标签具有不同的样式
            不同的标签具有相同的样式
            可以重复使用
            
 
            id选择器
                先定义后使用
                定义：
                    #idName    {样式1：样式值1；样式2：样式值2；.....}        
                使用
                    <p class="idName">文字</p>
    
                相同的id在一个页面只能出现一次，具有唯一性
                优先级最高 js中使用最多
 
            优先级问题
                
                行内>id选择器>类别选择器>标签>*
            权重问题
                行内>id选择器>类别选择器>标签>*
                1000    100      10      1   0
 
 
            注：
                1.对个标签，引用多个选择器
                2.一个标签怎么引入两个类别选择器 <p class="one two"></p>
                3.font-size font-family text-intent="2em"最多两个类别选择器
        层级选择器（后代选择器）
            群组：#id,.class,p，*{样式1：样式值1；样式2：样式值2；.....}（，后面不要打空格）
                相同的样式{}
            后代选择器：
                空格
                #id p{样式1：样式值1；样式2：样式值2；.....}
            子元素选择器
                >
 
            颜色表示法：
                1.单词表示法
                    red blue green yellow pink white
                2.十六进制表示法（0-9之间的数字 a-f之间字母任意组合成六位或者三位）
                六位
                红色#ff0000 绿色#00ff00 蓝色0000ff
                黑色#000000 白色#ffffff 灰色******(六个数字一样)
                三位
                #红绿蓝
                #f00 0f0 00f 000
                3.rgb表示法（0-255）
                    background-color：rgb（255,0,0）
 
                4.rgba表示法rgb（0-255）a（0-1）表示的是透明度
                    background-color：rgb（255,0,0，0.5）
            width/height
            尺寸的单位表示法：
                px：像素，固定值
                百分比50%：流体--响应式布局
                em：相对单位 相对父元素改变
                rem:相对单位 相对根元素进行改变
        基本样式
            color
            background-color    
            width    
            height
            font-size:12px;
            font-family:微软雅黑,microsoft yahei;