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;