简单的css样式 -内联样式,内部样式表,外部样式表,css语法,常用/复合/关系/属性/伪类/伪元素选择器,a元素的伪类,样式的继承,选择器的权重

css简介

网页分成三个部分：
        结构(HTML)
        表现(CSS)
        行为(JavaScript)
    CSS
        - 层叠样式表
        - 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式
            而最终我们能看到只是网页的最上边一层
        - 总之一句话，CSS用来设置网页中元素的样式

内联样式，行内样式

在标签内部通过style属性来设置元素的样式
        - 问题：
            使用内联样式，样式只能对一个标签生效，
                如果希望影响到多个元素必须在每一个元素中都复制一遍
                并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便

        - 注意：开发时绝对不要使用内联样式
        
        <p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>
		<p style="color: red; font-size: 60px;">今天天气真不错！</p>

内部样式表

第二种方式（内部样式表）
        - 将样式编写到head中的style标签里
            然后通过CSS的选择器来选中元素并为其设置各种样式
            可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
        - 内部样式表更加方便对样式进行复用
        - 问题：
            我们的内部样式表只能对一个网页起作用，
                它里边的样式不能跨页面进行复用    

	    <style>
	        p{
	            color: green;
	            font-size: 50px;
	        }
	    </style>

外部样式表

第三种方式 （外部样式表） 最佳实践
        - 可以将CSS样式编写到一个外部的CSS文件中,
            然后通过link标签来引入外部的CSS文件
        - 外部样式表需要通过link标签进行引入，
            意味着只要想使用这些样式的网页都可以对其进行引用
            使样式可以在不同页面之间进行复用
        - 将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，
            从而加快网页的加载速度，提高用户的体验。

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

css语法

CSS中的注释，注释中的内容会自动被浏览器所忽略

    CSS的基本语法:
        选择器 声明块

        选择器，通过选择器可以选中页面中的指定元素
            比如 p 的作用就是选中页面中所有的p元素

        声明块，通过声明块来指定要为元素设置的样式
            声明块由一个一个的声明组成
            声明是一个名值对结构
                一个样式名对应一个样式值，名和值之间以:连接，以;结尾  
                
     p{
      color: red;
      font-size: 40px;
  	 }

     h1{
         color: green;
     }           

常用的选择器

元素选择器

        元素选择器
            作用：根据标签名来选中指定的元素
            语法：标签名{}
            例子：p{}  h1{}  div{}

     p{
        color: red;
    }

    h1{
        color: green;
    } 

id选择器

        id选择器
            作用：根据元素的id属性值选中一个元素
            语法：#id属性值{}
            例子：#box{} #red{}  
    
    #red{
        color: red;
    } 

类选择器

        类选择器
        	class 是一个标签的属性，它和id类似，不同的是class可以重复使用
		            可以通过class属性来为元素分组
		            可以同时为一个元素指定多个class属性
            作用：根据元素的class属性值选中一组元素
            语法：.class属性值
   
     .blue{
        color: blue;
    }

    .abc{
        font-size: 20px;
    }

通配选择器

        通配选择器
            作用：选中页面中的所有元素
            语法: *
    
    *{
        color: red;
    }

复合选择器

交集选择器

 交集选择器
            作用：选中同时复合多个条件的元素
            语法：选择器1选择器2选择器3选择器n{}
            注意点：
                交集选择器中如果有元素选择器，必须使用元素选择器开头
   
    div.red{
        font-size: 30px;
    }

    .a.b.c{
        color: blue
    }

    div#box1{} 

选择器分组（并集选择器）

        选择器分组（并集选择器）
            作用：同时选择多个选择器对应的元素
            语法：选择器1,选择器2,选择器3,选择器n{}

   #b1,.p1,h1,span,div.red{}

    h1, span{
        color: green
    }

body中代码