前端初体验——css 样式补充 学习

对之前的学习过程进行补充：颜色 字体 背景 定位 等相关内容

1.颜色表示

1 用颜色名表示 yellow red

div{
    color:red;
}

2 用六位十六进制的数据表示颜色 #000000~#FFFFFF

div{
    color:#FFFFFF;
}

3 rgb(256,256,256)

div{
    color:rgb(255,255,255);
}

4 rbga(red,green,blue,alpha) alpha为透明度0~1   alpha只针对背景颜色透明 opacity针对整个元素透明

div{
    background:rgba(25,25,23,0.5);
}

5 linear-gradient(方向，颜色，颜色)渐变色  ( 透明色transparent)

div{
    background:linear-gradient(30deg,rgba(237, 45, 150, 0.6),transparent);
}

2. 字体相关

1 color:设置颜色

div{
    color:blue
}

2 font-size:设置大小

div{
    font-size: 50px;
}

3 font-weight:设置字体粗细100~900 

并不是均匀变化的 500 600之间有一个大跳跃 通常500表示偏细 600表示加粗

div{
    font-weight: 900;
}

4 font-style:字体风格 italic斜体 normal正常

div{
    font-style: italic;
}

5 text-decoration控制文字是否有修饰线

text-align: center;

none(通常用于a标签去下划线)  underline 下划线    line-through中划线     overline中划线

div{
    text-decoration:underline;
}

6 text-align 规定文本水平方向

对齐方式 left    right    center

text-align: center;

 7 line-height设置字体行高

当容器只有一行时,设置行高与容器高一致 可实现垂直方向上的居中

line-height:100px;

3. 背景相关

background复合属性

1 background-color 设置背景颜色 无法设置渐变

background-color:green;

2 background-image 设置背景为图片 使用url("地址")

 background-image: url(monkey.jpg);

3 background-repeat:平铺

  repeat平铺 no-repeat不平铺 repeat-x只横向平铺 repeat-y只纵向平铺

background-repeat: repeat;

4 background-size 控制背景图片大小  cover把所在容器填满

background-size: cover;

5 background-position:设置背景图片位置 center居中

background-position: center;

6 background-attachment 固定图片并不随鼠标滑轮而滚动 fixed

background-attachment:fixed;

4.  position 定位

取值有static fixed absolute relative

static 代表静态模式 常态模式

fixed  代表固定模式 不随浏览器的滚动而滚动 会释放掉自己原来的空间调整位置时参考物为整个浏览器 left right 距窗口边缘的举例

absolute 代表绝对模式  随浏览器的滚动而滚动 会释放掉自己原来的空间 调整位置时参考物为整个浏览器

relative 代表相对模式  随浏览器的滚动而滚动 不会释放掉自己原来的空间 调整位置时参考物为原来的位置

结合模式 父级relative 子级absolute 子集随浏览器的滚动而滚动 会释放掉原来的空间 调整的参考物为父级元素

与定位配套的方位属性 left right bottom top 定位的其取值不能为static 其余皆可

与定位配套的层次属性 z-index 调整定位层次，取值为整数，越大越靠上

.container{
        height: 600px;
        width: 2000px;
        background:#e79b9b;
        position: relative;
}

.top{
        height: 200px;
        width: 200px;
        background:#b19be7;
        position:absolute;
        left: 100px;
        top:300px;
        z-index: 10;
}
.middle{
        height: 200px;
        width: 200px;
        background:#b9e79b;
        position:absolute;
        left: 200px;
        top:400px;
        z-index: ;

}
.bottom{
        height: 200px;
        width: 200px;
        background:#e7c49b;
}