CSS

层叠样式表

主要用于调节HTML标签的各种样式
标签的两大属性：
    1.class属性
        分类查找，主要用于批量查找
    2.id属性
        精确查找，点对点的查找
我们之所以将标签分为这两大属性主要是用来区分标签的，页面都是由HTML组成的，且一个页面有许多HTML标签都是相同的，但是这些相同的标签在不同的位置样式可能是不同的，所以我们需要将之区分开来

# 我们学习css是需要先学会查找标签，然后才能调整对应标签的样式
1.css语法结构
    选择器{
        样式名1:样式值1,
        样式名2:样式值2
    }
2.css注释语法
    /*注释内容*/
3.引入css的多种方式
    1.head内style标签内编写(学习css是推荐使用)
    2.head内link标签引入(主流写法)
    3.标签内直接通过style属性编写(不推荐使用)

选择器

1.CSS基本选择器
    1.标签选择器(直接按照标签名查找标签)
		div {
            color: red;
			}
    2.类选择器(按照标签的class值查找标签)
        .c1 {
            color: red;
        }
    3.id选择器(根据标签的id值精准查找标签)
        #d1 {
            color: yellow;
        }
    4.通用选择器(直接选择页面所有的标签)
        * {
            color: blue;
        }

2.CSS组合器
    1.后代选择器(空格)
        div span {
            color: red;
        }
        查找div标签内所有的span标签
    2.儿子选择器(大于)
        div>span {
            color: yellow;
        }
		查找div标签下的第一级的span标签
    3.毗邻选择器(加号)
        div+span {
            color: blue;
        }
        查找与div标签紧挨着的span标签，如果与div标签紧挨着的不是span标签那么该选择器不生效
    4.弟弟选择器(小波浪号)
        div~span {
            color: yellow;
        }
        查找与div标签同级的span标签

3.分组与嵌套
    1.div,p,span {
            color: yellow;
        }
     多个选择器合并查找
    2. div.c1 {
        color: red;
    }
     查找class类含有c1的div的标签
    3..c1 p.c2 {
        color: yellow;
    }
     查找含有c1样式值中含有c2样式值的p标签

4.属性选择器
    [username] {
        color: red;
    }  # 按照属性名查找
    [username='jason'] {
        color: red;
    }  # 按照属性名等于属性值查找

5.伪类选择器
    1.鼠标移动到连接上
        a:hover {
            color: red;
        }
     2.input获取焦点(鼠标点击)之后采用的样式
        input:focus {
            background-color: red;
        }

6.伪元素选择器
    使用css添加文本无法正常选中
    1.在文本之前
        p:before {
            content: '一二三';
            color: red;
        }
    2.在文本之后
        p:after {
            content: '三二一';
            color: red;
        }

选择器优先级

1.选择器相同，导入方式不同
    就近原则
2.原则器不同，导入方式相同
    内联样式 > id选择器 > 类选择器 > 标签选择器

样式调节

1.字体样式
    font-size:24px  # 字体大小
    font-weight用来设置字体的字重（粗细）。
        值	       描述
        normal	    默认值，标准粗细
        bold	    粗体
        bolder	    更粗
        lighter	    更细
        100~900	    设置具体粗细，400等同于normal，而700等同于bold
        inherit	    继承父元素字体的粗细值
    字体颜色 三种模式
        color: red;  # 直接填写颜色英文
        color: #3d3d3d;  # 填写颜色代码
        color: rgb(111,111,111)  # rgb值 
        color: rgba()  # 与rgb一样，只是最后一个a用来控制透明度
    文字对齐
        text-align 属性规定元素中的文本的水平对齐方式。
            值	     描述
            left	  左边对齐 默认值
            right	  右对齐
            center	  居中对齐
            justify	  两端对齐
    文字装饰
        text-decoration 属性用来给文字添加特殊效果。
            值				描述
            none		 	默认。定义标准的文本。
            underline	 	定义文本下的一条线。
            overline	 	定义文本上的一条线。
            line-through	定义穿过文本下的一条线。
            inherit		 	继承父元素的text-decoration属性的值
            
2.背景属性
	div {
            width: 800px;
            height: 800px;  # 背景大小
            /*background-color: red;*/  # 背景颜色
            /*background-image: url("666.png");*/  # 以图片作为背景
            /*background-repeat: no-repeat;*/  # 背景图片不平铺满整个背景，正常默认平铺满
            /*background-repeat: repeat-x;*/  # 背景图片只在水平方向上平铺
            /*background-repeat: repeat-y;*/  # 背景图片只在上下方向上平铺
            /*background-position: center center;*/  # 背景图片居中
            background:  url("666.png") blue no-repeat center center; 
            # 当多个属性名有相同的前缀 那么可以简写一次性完成
        }