css

 

可以将css样式编写到style属性中，这种称为内联样式，它只对当前元素的内容器起作用，不方便复用，结构和表现耦合，不方便后期维护

<p style="color:red;font-size:40px;">

也可以将css样式编写到head标签的style标签里面，通过指定 元素，然后为所有选中的元素设置严实，进一步复用，结构和表现相对解耦

<style type="text/css">
            p{
                color:red;
                font-size:40px;
            }
        
</style>

将样式表写到外部的css文件中，然后通过link标签来引入外部的css文件，这样使得结构和标签完全分离，这样可以利用浏览器的缓存,加快用户访问速度。提高用户体验

<link rel="stylesheet" type="text/css" href="style.css" />

 

块元素：独占一行     　　div、p、h标签

div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它其中的元素设置任何的样式，　　div元素主要是对页面进行布局的

span是一个内联元素（行内元素），只占自身的大小的元素，不会独占一行　　a、img、iframe、span， span没有任何的语义，span标签专门用来选中元素，然后设置元素

块元素主要用来做页面中的布局，内联元素主要用来选中文本，设置文本样式，一般情况，使用块级元素去包含内两元素，而不会使用内联元素包含一个块级元素

注意：a标签可以用来包含任何元素，除了它自己本身

　　    p元素不可以包含其他任何的块级元素

　　　　　　　/*
             * 元素选择器
             *     作用：通过元素选择器可以选则页面中的所有指定元素
             *  语法：标签名 {}
             */
            
            p{
                color: red;
            }
            
            h1{
                color: red;
            }

                       /*
             * id选择器
             *     - 通过元素的id属性值选中唯一的一个元素
             *  - 语法：
             *         #id属性值 {}
             */
            #p1{
                font-size: 20px;
            }

                       /*
             * 类选择器
             *     - 通过元素的class属性值选中一组元素
             *  - 语法：
             *         .class属性值{}
             */
            .p2{
                color: red;
            }
            
            .hello{
                font-size: 50px;
            }

                       /*
             * 选择器分组(并集选择器)
             *     - 通过选择器分组可以同时选中多个选择器对应的元素
             *     - 语法：选择器1,选择器2,选择器N{}
             */
            #p1 , .p2 , h1{
                background-color: yellow;
            }

                    /*
             * 通配选择器
             *     - 他可以用来选中页面中的所有的元素
             *     语法：*{}
             */
            
            *{
                color: red;
            }                            

                       /*
             * 为拥有class p3 span元素设置一个背景颜色为黄色
             * 
             * 复合选择器（交集选择器）
             *     - 作用：
             *         - 可以选中同时满足多个选择器的元素
             *  - 语法：
             *         - 选择器1选择器2选择器N{}
             */
            span.p3{
                background-color: yellow;
            } 

　　　　　　  /*
             * 为div中的span设置一个颜色为绿色
             * 后代元素选择器
             *     - 作用：
             *         - 选中指定元素的指定后代元素
             *     - 语法：
             *         祖先元素 后代元素{}    
             */
            #d1 span{
                color: greenyellow;
            }

            /*
             * 选中id为d1的div中的p元素中的span元素
             */
            #d1 p span{
                font-size: 50px;
            }

            /*
             * 为div的子元素span设置一个背景颜色为黄色
             * 子元素选择器
             *     - 作用：
             *         - 选中指定父元素的指定子元素
             *     - 语法：
             *         父元素 > 子元素
             * 
             * IE6及以下的浏览器不支持子元素选择器
             */
            div > span{
                background-color: yellow;
            }