前端之CSS

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; 
            # 当多个属性名有相同的前缀 那么可以简写一次性完成
        }
	

边框

用于给标签添加样式
border-width: 5px;  # 边框宽度
border-style: solid;  # 边框样式
border-color: red;  # 边框颜色
上面的可以直接简写成
    border: 5px solid red;
# 如果只是设置其中一面的边框的话加上方向就行了 border-left]\

画圆(就是将边框设置为圆形)  #边框长宽一样则是正圆
border-radius: 50%;

display

用于控制HTML元素的显示效果
display:none  # 彻底的隐藏标签，页面上不会显示标签，也不会保留标签的位置
起到隐藏作用的还有一个
visibility:hidden  
# 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局

盒子模型

我们可以将标签看成是一个盒子，标签内的内容就是盒子内的物体
1.盒子内的物体               content(内容)
2.物体与盒子内部边界的距离    padding(内边距)
3.快递盒包装                 border(边框)
4.快递盒与快递盒之间的距离    margin(外边框)

padding使用方法
padding: 10px;  # 上下左右
padding: 10px 20px;  # 上下  左右
padding: 10px 20px 30px;  # 上  左右  下
padding: 10px 20px 30px 40px;  # 上  右  下  左
    
margin使用方法与padding相同 
针对标签的嵌套水平方向可以居中
margin: 0 auto;

浮动

浮动是用来做页面布局的，使用方法就是 float:left\right
但是使用浮动带来的影响就是会造成父标签塌陷，这是因为浮动的元素是脱离正常文档流的
解决浮动最好的办法就是先写好样式类，谁塌陷了就给谁添加该样式类就行了
样式类
    .clearfix:after {
        content: '';
        display: block;
        clear: both;
    }

溢出

就是填充的内容超出了标签的大小
比如是图片超出了标签大小，那么我们可以让它自适应
div img {
    max-width: 100%;
}  # 需要单独写

定位

针对标签的定位有四种状态
    1.static静态        标签默认的状态，正常状态下无法通过定位的参数来移动
    2.relative相对定位  基于标签原来的位置
    3.absolute绝对定位  基于某个定位过的父标签做定位
    4.fixed固定定位     基于浏览器窗口固定不动，无论窗口是否滚动都会在设置好的固定位置

z-index

用于设置对象的层叠顺序
    1.z-index值表示谁在谁上面，数值大的压着数值小的
    2.只有定位了的原色才能有z-index，浮动元素用不了
    3.z-index是一个正整数，默认的z-index值为零，如果大家的z-index值相同，那么谁写在HTML后面谁就压着别人
    4.定位了的元素永远压着没有定位的元素