Cascading Style Sheets 层叠样式表，使用一些样式来修饰html标签的效果

几乎每一个标签都有的属性：id class name style
使用方式1：行内样式 根据的标签的style属性引入CSS样式
    <!-- 
        方式1：行内样式使用
            几乎每一个标签都有的属性：id  class name style（引入CSS样式）
    -->
    <div style="color: pink; font-size: 20px;">
        这是一个美女，但是没有化妆
    </div>
                
使用方式2：内联样式 根据head中的 子标签style 引入CSS样式  提高CSS的复用性
     <style>
        span, b{
            color: red;
            font-size: 25px;
        }
    </style>
        
使用方式3：外联样式  在外部编写.css文件  在head中使用link标签引入该页面
    <!-- 方式3：引入外部样式 -->
    <link rel="stylesheet" href="./css/xx.css">
        
总结：
        优先级：就近原则

1. 理解：CSS中为了便于定位具体的某个标签
2. 选择器种类：
    基本选择器：标签选择器、id选择器、类选择器
    
    
    ·标签选择器：通过标签的名字定位到标签
    	/* 1. 标签选择器: 定位页面中所有该名字的标签 */
        div{
            color: red;
        }

	·ID选择器：通过标签的ID属性值定位该标签
        
        /* 2. id选择器：id值是唯一的 定位更加准确 */
        #d2{
           color: blue; 
        }
       
	· 类选择器
        
        /*  3. 类选择器：多个标签可以有相同的class的值 一个标签可以有多个 */
        .d1{
            color: pink;
        }
        .d3{
            font-size: 25px;
        }

其他选择器
     · 组合选择器
        /* 4. 组合选择器: 多个选择器组合使用 逗号隔开 */
        .d1,.sp1{
            color: pink;
        }
	· 层级选择器
          /* 5. 层级选择器：一层一层找 */
        p b span{
            color: green;
        }
	· 伪类选择器
        /*  6. 伪类选择器：根据标签的状态定位 */
       /* a链接未点击的状态 */
       a:link{
           color: red;
       }

       /* a链接访问后的状态 */
       a:visited{
           color: #c3c3c3;
       }

      /*  a链接鼠标悬停的状态 */
      a:hover{
          color: green;
      }

      /* a链接正在点击的状态 */
      a:active{
          color: yellow;
      }
	·属性选择器
        /* 7. 属性选择器：根据标签的属性值 定位该标签 */
      input[name=username]{
          background-color: blue;
      }

	· *选择器
         /* 8. *选择器  匹配页面中所有的标签 */
      *{
          margin: 0px;
      }

优先级：
    越精确优先级越高
    	ID选择器  > 其他的选择器 > *选择器

语法：
    样式名: 样式值;   
	· 以键值对的形式书写
     · 键和值之间冒号隔开
     · 每一个样式使用分号结束
     · 一个标签可以有多个样式

color: rgba(255, 0, 0, .2);  /* 字体颜色:可以是单词 十六进制形式 和 rgba形式 */
font-size: 20px;   /* 字体大小 */
font-weight: bolder;  /* 字体粗细：加粗 */
font-family: '宋体';  /* 字体类型 */
font-style: italic;  /* 字体风格：倾斜 */

font-size: 30px;
text-align: center; /* 对齐方式 */

text-decoration: none; /* 文本装饰 */
/* 文本阴影 参数1：阴影颜色  参数2：水平方向的偏移量 参数3：垂直方向的偏移量 参数4：模糊度 */
text-shadow: pink 5px 6px 3px; 
line-height: 200px;  /* 行高：文本所占位置的高度 可以实现垂直方向的居中 */

width
height

background-color: green; /* 背景的颜色 */
/* background-image: url(./img/lgx.png); */ /* 背景图片 */
background-repeat: no-repeat; /* 是否平铺 */
background-position: left bottom; /* 背景图片的位置 */
/* 背景图片是否随着标签滚动 fixed不随着滚动  scroll 随着滚动 */
background-attachment: fixed;  
/* 背景的渐变色参数1：方向 参数2:颜色的变化 */
background: linear-gradient(to bottom, green, white)

/* 定位
     relative 相对定位 相对于当前标签原先的位置        
     absolute 绝对定位 相对于页面的左上为抽点
     fixed 固定定位  位置不变
*/
position: absolute;

参数1：边框的宽度  参数2：边框的类型 参数3：边框的颜色 

border: 1px solid blue;
/* border-top: 1px dashed red;

border-bottom: 1px dotted pink;

border-left: 8px groove #c3c3c3;

border-right: 8px ridge green; */
/*  border: 10px ridge #c3c3c3; */
border-radius: 10px;  /* 边框角的弧度 */

理解：布局页面的思想
注意：
    盒子的位置大小 = height + border边框 + margin 外边距 + padding 内边距 

float 使标签浮动 
    作用：块级标签的水平方向的对象 顶部对齐
    后果：
    	1. 块标签 转换成 行内块(可以设置宽度和高度 不独占一行)
    	2. 浮动之后 空间坍塌  影响后面的标签的正常布局  
   总结：因此只用使用了浮动 完毕之后要记得清楚浮动
   使用：
    	float: left|right
   清除浮动：
        添加一个同级别的空标签 设置 样式 clear:both
            
display 
    作用：① 可以实现块标签、行标签和行内块标签的相互转换 ② 可以实现标签的显示和隐藏
    使用：
         display: inline-block;  // 转换行内块标签
		display: inline;    // 转换行标签
		display: block;     // 转换块标签
		display: none;  // 隐藏标签