前端-css（二）-CSDN博客

本文链接：https://blog.csdn.net/deartors/article/details/127252471

文本属性

属性	描述	说明
font-size	字体大小	单位是px，浏览器默认为16px
font-family	字体	对于中英文设置不同的字体采用“，”隔开，先解析第一个字体，没有则解析第二个（eg：宋体，微软雅黑）
color	颜色	可以采用英文，16进制和rgb模式
font-weight	加粗	主要用的就是bold，bolder和normal两个属性，也可以使用数值（100-900）400为默认值
font-style	倾斜	斜字体：italic；倾斜的文字（puls版）：oblique；常规显示：normal。
text-align	文本水平对齐	text-align：left；水平靠左/right；水平靠右/center水平居中/justify水平两端对齐，但只对多行起作用。

接上表：

line-height	行高	可以实现单行文本居中
text-indent	首行缩进	可以取负值，且对第一行起作用通常用2em。
letter-spacing	字间距	控制文字之间的距离
text-decoration	文本修饰	赋值为：none没有主要运用在a连接上/underline下划线/overline上划线/line-through删除线
font	文字简写	可以表示font-style，font-weight，font-size，font-weight，line-height，font-family的简写必须按照以上顺序来简写。{

简单的将上述属性进行运用。

下附上代码：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url(/css/a.css);
    </style>
</head>
<body>
      <p>11111111111111111111<div class="q" style="font-size: 25px;">22222222222222</div>33333333333<div class="w">44444444444444</div>55555555<div class="e">66666666666</div>77777777
        </p>
     <p>8888888888<div class="r">99999999999999</div><div class="t">1010101010</div>
        111111111111<div class="y">12121212121212</div>，<div class="u">131313131313</div></p>
</body>
</html>

css


.q{
    font-size: 25px;
}
.w{
    font-family: '宋体';
}
.e{
    color: rgb(203, 61, 61);
    letter-spacing: 5px;
}
.r{
    font-weight: 600;
}
.t{
    font-style: italic;
    text-decoration: underline;
}
.y{
    text-align: right;
    text-decoration:overline;
}
.u{
    line-height: normal;
    text-decoration:line-through;
}
p{
    text-indent: 2em;
}

列表属性

改变列表内元素的位置

在rgb模式下，透明度可自由设置0-1之间的数值。

图片的格式：

通过设置background-repeat的属性值，

repeat	默认平铺
repeat-x	平铺x轴
repeat-y	平铺y轴
no-repeat	不平铺

通过设置background-position的属性值设置图片的大小可用px，百分比，以及left，center，right，top，center，bottom来设置，左上角，左中等。类似于九宫格。

通过设置background-size的属性值设置背景的大小，当属性值为cover的时候将图片等比放大到背景的大小。（可能被裁掉一部分）。当属性值为contain时，等比放大图片，可能会有部分背景没有被覆盖。当属性值为100%，100%的时候不会出现裁剪问题。

通过设置background-attachment的属性值设置背景图片的效果在背景盒子大小内进行：scroll（滚动）/fixed（固定）

滚动覆盖的实际案例

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url(/css/a.css);
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

css部分

*{
    margin: 0;
    padding: 0;
}
div{
    height: 750px;
    background-position: center;
    background-size: 50% 50%; 
    background-repeat: no-repeat;
    background-color: rgb(233, 197, 153,0.6);
}

.box1{
    background-image: url(/img/小兔子.png);
}
.box2{  
    background-image: url(/img/熊.png);
}
.box3{
    background-image: url(/img/紫色的.png);
}

至此css样式介绍完毕，下期介绍布局。