前端学习之css样式背景样式、字体样式、列表样式、边框样式、内外边距元素属性的转换-CSDN博客

本文链接：https://blog.csdn.net/banliyaoguai/article/details/136792575

背景样式

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <link rel="stylesheet" href="../css/3.1背景样式.css">
</head>
<body>
    <div class="test-div"></div>
</body>
</html>

css文件

.test-div{
    /* 修改背景颜色 */
    /* background-color: yellow; */
    background-image: url(../../01.html/图片音频视频标签/测试标签.jpg);
 
    /* 背景平铺方式，repeat是默认，repeat-x水平平铺，repeat-y垂直平铺，no-repeat不平铺 */
    background-repeat: no-repeat;
    /* 滚动方式 scroll随下拉框滚动而滚动 */
    background-attachment: scroll;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
    /* 背景图片位置,也可以输入数值和百分比 */
    background-position: left;
    /* 图片尺寸 cover沾满*/
    background-size: cover;
    /* 复合写法 直接在后面写*/
    /* background: url(../../01.html/图片音频视频标签/测试标签.jpg) fixed no-repeat; */
    width: 1920px;
    height: 1080px;
}

结果

字体样式

html文件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <link rel="stylesheet" href="../css/3.2字体样式.css">
</head>
<body>
    <div>撒地方上空的飞机圣诞快乐房价爱上了开发撒看到了放假啊圣诞快乐房价ask劳动法上的放假啊圣诞快乐房价卡拉圣诞节</div>
</body>
</html>

css文件

div{
    /* 字体颜色 */
    color: blueviolet;
    /* 字体大小 */
    font-size: 100px;
    /* 字体斜体 normal正常的 italic斜体 oblique*/
    font-style: oblique;
    /* 字体粗细 bold加粗 可以输入数值*/ 
    font-weight: bold;
    /* 字体格式 */
    font-family:cursive;
    /* 行距 可以输入百分比（1.5倍，%150）和数字*/
    line-height: 1.5;
    /* 删除线 line-through删除线 overline上划线 underline下划线*/
    text-decoration:overline;
    /* 首行缩进 只针对块元素，em表示首行缩进几个字符 */
    text-indent:2em;
    /* 对其方式 center表示每一行居中对齐 只能运用于块元素 */
    text-align: center;
    /* 大小写转换 uppercase大写 lowercase小写 只针对字母 */
    text-transform: uppercase;
    /* 文字阴影  10px比较好用*/
    text-shadow: 10px 10px 10px rgb(75, 73, 73);
}

结果

列表样式

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="../css/3.3列表样式.css">
</head>
<body>
    <div>
        <ol>
            <li>测试内容</li>
            <li>测试内容</li>
            <li>测试内容</li>
            <li>测试内容</li>
        </ol>
    </div>
</body>
</html>

css文件

li{
    /* 列表样式类型 circle空心圆 disc实心圆 none无序列样式 square实心方形 decimal数字序号*/
    list-style-type: decimal;
    /* 列表样式位置 inside内部 outside外部*/
    list-style-position: inside;
    /* 列表图片 这个会和列表样式类型重合*/
    list-style-image: url(测试图片.png);
}

结果

边框样式

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框样式</title>
    <link rel="stylesheet" href="../css/3.4边框样式.css">
</head>
<body>
    <div>

    </div>
</body>
</html>

css文件

div{
    /* 边框的宽度 */
    border-width:2px;
    /* 边框的线类型 dashed虚线 dotted点虚线 solid实现 double双实线*/
    border-style: dashed;
    /* 边框的颜色 */
    border-color: aquamarine;
    /* 边框弧度 */
    border-radius: 200px;
    /* 边框阴影 */
    box-shadow: 10px 10px 10px gray;
    background-color: blanchedalmond;
    width: 600px;
    height: 400px;
    /* 这个也可以进行复合写法，格式通背景复合写法 */
}

结果

内外边距

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内外边距样式</title>
    <link rel="stylesheet" href="../css/3.5内外边距样式.css">
</head>
<body>
    <div>

    </div>
</body>
</html>

css文件

div{
    width: 800px;
    height: 600px;
    border: 1px salmon dashed;
    background-color: aquamarine;
    margin:100px 100px;
}

结果

元素属性转换

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素属性的转换</title>
    <link rel="stylesheet" href="../css/3.6元素属性的转换.css">
</head>
<body>
    <div class="a">a</div>
    <div class="b">b</div>
    <hr>
    <span class="c">c</span>
    <span class="d">d</span>
    <hr>
    <li>测试内容</li>
    <li>测试内容</li>
    <li>测试内容</li>
    <li>测试内容</li>
</body>
</html>

css文件

div{
    /* 
    display:
    inline块元素变行内元素
    inline-block块元素变行内元素并保留原来设置
    block行内元素变块元素
    */
    width: 100px;
    height: 100px;
    border: 2px solid red;
    background-color: aquamarine;
    /* display: inline; */
    display: inline-block;

}
span{ 
    width: 100px;
    height: 100px;
    border: 2px solid red;
    background-color: aquamarine;
    display: block;
}
/* 将列表这个块级元素变行内元素并且保留原来特征 */
li{
    list-style-type:none;
    display: inline-block;
}