5.前端CSS之基本属性(长宽,字体,文体,背景图片,阴影,border画圆,display)

1.块儿标签长宽
    height,width
        块儿标签可以设置长宽，设置长宽后依然独占一行    h1-h6，p，div
        行内标签无法设置长宽 写了 也不会生效           i，u，s，b  span


2.字体
    样式：font-family:"微软雅黑";
    大小：font-size: 26px;                通常12，14，16，38，48
    深浅：font-weight: bolder;            加粗
          font-weight:lighter;           浅色(细)
          font-weight:00~900             值
          font-weight:inherit            继承父元素的粗细值

    颜色:color:red;                      直接写
        color:#eeeeee;                   写颜色编号
        color:rgb(128,23,45);            三基色 数字  范围0-255
        color:rgba(23, 128, 91, 0.9);    第四个参数是颜色的透明度 范围是0-1
        取颜色工具：vscode下的VS Color Picker插件
                   或者微信/QQ截图


3.文体align/decoration/indent：
    排列(align)：
        text-align: center;      居中
        text-align: right;       左对齐
        text-align: left;        右对齐
        text-align: justify;     两端对齐
    装饰(decoration)
        text-decoration: underline;     下划线
        text-decoration: overline;      上划线
        text-decoration: line-through;  删除线
        text-decoration: none;          取消任何文体线，多用在a标签做跳转标题样式（a标签文体默认带下划线）
    缩进(indent)
        font-size: 16px;                先定字大小
        text-indent: 32px;              缩进32px
        

4.背景background
    (1)背景颜色
        background-color: red;
            背景图片
    (2)图片背景
        background-image: url("图片路径");  默认要全部铺满
        平铺repeat:
            background-repeat: repeat;     平铺
            background-repeat: no-repeat;  不铺
            background-repeat:repeat-x;    x轴平铺
            background-repeat:repeat-y;    y轴平铺
        位置position：
            background-position:center center;  第一个距离左  第二个距离上，可以用px或%
        以上可以一起简写：
            background: red url("图片路径") no-repeat center center;   位置先后顺序不影响（******）
        补充：
            background-attachment:fixed;背景图像相对于窗体固定
            background-size: cover;     把背景图片放大到适合元素容器的尺寸，图片比例不变


5.块儿标签阴影设置：
    (1)语法：box-shadow: h-shadow v-shadow blur spread color inset;
            h-shadow	必需的。水平阴影的位置。允许负值
            v-shadow	必需的。垂直阴影的位置。允许负值
            blur	    可选。模糊距离
            spread	    可选。阴影的大小
            color	    可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
            inset	    可选。从外层的阴影（开始时）改变阴影内侧阴影
    (2)例子：box-shadow:5px 5px 5px rgba(0,0,0,0.5)


6.边框border
    (1)上(top)下(bottom)左(left)右(right)都有宽度(width)颜色(color)样式(style)，如：
        border-left-width: 5px;
        border-left-color: red;
        border-left-style: dotted;  点
                           solid    实线
                           dashed   虚线
    (2)以上可以简写
        bolder:3px solid red;  三者位置随意写
    (3)画圆：
        height: 400px;      先设区域长宽
        width: 400px;
        border-radius: 50%;  直接写50%即可 长宽一样就是圆 不一样就是椭圆
                             可以填四个参数，默认左上 右上 右下 左下顺序


7.显示:display属性
    display:none;            隐藏标签不展示到前端页面并且原来的位置也不再占有了
    display:inline;          将标签设置为行内标签的特点(通常用在div)
    display:block;           将标签设置成块儿级标签的特点(通常用在span)
    display:inline-block;    标签即可以在一行显示又可以设置长宽(块儿行内特点都有)
    补充：display:none;       不展示位置也不再占有
         visibility:hidden;  不展示位置还在