CSS-基础(二)

目录

文字文本样式

背景样式


文字文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字样式</title>
    <style>
        div#sp1{font:italic bold 50px "宋体";color:blue;text-align:center;}

        div[id="sp2"]{
            text-align: center;
            letter-spacing: 1em;
            line-height: 50px;
            font-family: "楷体";
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!--
        文字常用样式:字体类型(font-family);字体加粗(font-weight);字体倾斜(font-style);字体大小(font-size);字体大小写(font-variant)
                  标签名{
                       font-family:"宋体";
                       font-weight:bold;
                       font-style:italic;
                       font-size:100px;
                  }

        复合样式写法:font:font-style font-weight font-size font-family,复合样式写法的顺序是固定的,不能错乱
                  标签名{font:italic bold 100px "宋体";}

        文本常用样式:
                  对齐方式:text-align:center;
                  行间距:line-height: 50px;
                  首行缩进:text-indent:2em;  em为单个汉字字符的距离
                  文本线:text-decoration
                  字间距:letter-spacing
                  词间距:word-spacing
      -->
    <div id="sp1"><span>林则徐</span><br></div>
    <div id="sp2"><span><br>苟利国家生死以<br>岂因祸福避趋之</span><br></div>
</body>
</html>

背景样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <style>
        div#di1{
            width: 500px;
            height: 400px;
            background-color: yellow;   /*  设置背景颜色  */
            background-image: url("../img/img1/287149.jpg");  /*  设置背景图片  */
            background-repeat: no-repeat;   /*  设置背景图片不平铺  */
            background-size: 400px 300px;   /*  设置背景图片大小  */
            background-position: center;    /*  设置背景定位  */
        }
        /* 复合样式:background:颜色 图片 是否平铺 背景定位/背景大小 */
        div#di2{
            width: 500px;
            height: 400px;
            border: 1px solid blue;
            background: yellow url(../img/img1/287149.jpg) no-repeat center/400px 300px;
        }
    </style>
</head>
<body>
    <div id="di1">
        <p style="text-align: center; color: red; font-size: 20px;">这是一个背景</p>
    </div>
    <br>
    <div id="di2">
        <p style="text-align: center; color: red; font-size: 20px;">这是一个背景复合样式</p>
    </div>
</body>
</html>

常用样式

  

更多参考:https://www.w3school.com.cn/h.asp

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值