CSS字体编辑

已于 2024-03-18 10:05:40 修改
阅读量421 收藏 7
点赞数 11
分类专栏： web 文章标签： css 学习 前端
于 2024-03-14 22:23:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73701759/article/details/136722962
版权

体验CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验css</title>
    <style>
        /* css代码 */
        p {
            /* 文字颜色 */
            color: brown;
            /* 字号 */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>css：层叠样化表</p>
    css在title下面，用style包起来<br>
    color: brown;颜色<br>
    font-size: 30px;字号<br>
</body>
</html>

CSS引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css引入方式</title>
    <link rel="stylesheet" href="./2-css引入方式.css">
</head>
<body>
    <strong>Css 引入方式：<br></strong>
    <ul>
        <li>内部样式表:学习使用</li>
        <ul><li>CSS 代码写在 style 标签里面</li></ul>
        <li>外部样式表:开发使用</li>
        <ul><li>在HTML使用link 标签引入</li>
            <li>CSS代码写在单独的CSS文件中（.css）</li></ul>
        <li>行内样式:配合 JavaScript 使用</li>
    </ul>
    <p>这是p标签</p>
    <!-- 行内写法 style="color: red; font-size: 30px;-->
    <div style="color: red; font-size: 30px;">这是div标签</div>
    <p>外部引入比较常用，link标签引用</p>
</body>
</html>

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        p {
            color: rgb(31, 134, 223);
        }
    </style>
</head>
<body>
    以标签名命名的，同名标签相同样式<br>
    p，h1，div，a，img等等<br>
    <p>这是p标签</p>
    <div>这是div标签</div>
    <h1>这是h1标签</h1>
</body>
</html>

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        /* 定义 */
        .red {color: red;}
        .blue {color: blue;}
        .size {font-size: 30px;}
    </style>
</head>
<body>
    <h3>类选择器：差异化设置标签</h3>
    步骤：
    <ul>
        <li>定义类选择器  .类名</li>
        <li>使用类选择器  标签添加class="类名"</li>
    </ul>
    <p class="red">这是p标签，引用red标签</p>
    <p class="blue">这是p标签，引用bule标签</p>
    <div class="red">这是div标签，引用red标签</div>
    <div class=" red size">这是div标签，引用red和size标签，class=" red size "即可</div>
    <p>开发习惯：类名见名知意，多个单词用 - 连接，例如：葛-幸-蔚 </p>
</body>
</html>

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        /* 定义css */
        #red {
            color: red;
        }
    </style>
</head>
<body>
    <h3>id选择器</h3>
    作用：查找标签，差异化标签显示效果。<br>
    场景：id选择器一般配合JavaScript使用，很少用css<br>
    步骤：
    <ul>
        <li>定义id选择器 #id名</li>
        <li>使用id选择器 标签添加id="id名"</li>
    </ul>
    规则：
    <ul>
        <li>同一个id在一个界面只用一次</li>
    </ul>
    <div id="red">这是div标签，引用red标签，id选择器</div>
</body>
</html>

通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <h3>通配符选择器</h3>
    作用：查找页面所有标签，设置相同样式<br>
    通配符选择器：*，不需要调用，浏览器自动查找所有标签，设置相同样式
    <p>这是p标签，自动引用通配符标签</p>
    <div>这是div标签，自动引用通配符标签</div>
</body>
</html>

画盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画盒子</title>
    <style>
        .div-red {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .div-rebeccapurple {
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
    <h3>画盒子</h3>
    目标：使用合适选择器画盒子<br>
    <ul>
        <li>宽度：width</li>
        <li>高度：heigh</li>
        <li>background-color：背景色</li>
    </ul>
    <div class="div-red">这是div标签,使用div-red标签</div>
    <div class="div-rebeccapurple">这是div标签，使用div-rebeccapurple标签</div>
</body>
</html>

文字大小属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字控制属性</title>
    <!-- 谷歌浏览器字体默认16px -->
    <style>
        p {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h3>文字控制属性</h3>
    <ul>
        <li>字体大小 font-size</li>
        <li>字体粗细 font-weight</li>
        <li>字体倾斜 font-style</li>
        <li>行高 line-height</li>
        <li>字体族 font-family</li>
        <li>字体复合属性 font</li>
        <li>文本缩进 text-indent</li>
        <li>文本对齐 text-align</li>
        <li>修饰线 text-decoration</li>
        <li>颜色 color</li>
    </ul>
    <p>这是p标签，自动引用通配符标签，控制字体大小</p>
</body>
</html>

控制字体粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字控制属性</title>
    <!-- 谷歌浏览器字体默认16px -->
    <style>
        p {
            font-weight: 1000;
        }
        div {
            font-weight: 100;
        }
    </style>
</head>
<body>
    <h3>文字控制属性</h3>
    <ul>
        <li>字体大小 font-size</li>
        <li>字体粗细 font-weight</li>
        <li>字体倾斜 font-style</li>
        <li>行高 line-height</li>
        <li>字体族 font-family</li>
        <li>字体复合属性 font</li>
        <li>文本缩进 text-indent</li>
        <li>文本对齐 text-align</li>
        <li>修饰线 text-decoration</li>
        <li>颜色 color</li>
    </ul>
    <strong>属性名：</strong>font-weight
    <strong>属性值：</strong><br>
    <ul>
        <li>数字（用的多）</li>
        <li>关键字</li>
    </ul>
    <p>这是p标签，自动引用通配符标签，控制文字粗细</p>
    <div>这是div标签，自动引用通配符标签，控制文字粗细</div>

</body>
</html>

控制字体倾斜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字倾斜</title>
    <style>
        p {
            font-style: italic;
        }
        div {
            font-style: normal;
        }
    </style>
</head>
<body>
    <h3>文字控制属性</h3>
    <ul>
        <li>字体大小 font-size</li>
        <li>字体粗细 font-weight</li>
        <li>字体倾斜 font-style</li>
        <li>行高 line-height</li>
        <li>字体族 font-family</li>
        <li>字体复合属性 font</li>
        <li>文本缩进 text-indent</li>
        <li>文本对齐 text-align</li>
        <li>修饰线 text-decoration</li>
        <li>颜色 color</li>
    </ul>
    <strong>属性名：</strong>font-stylebr <br>
    <strong>属性值：</strong><br>
    <ul>
        <li>正常（不倾斜）：normal</li>
        <li>倾斜：italic</li>
    </ul>
    <p>这是p标签，控制文字倾斜</p>
    <div>这是div标签，控制文字不倾斜</div>
</body>
</html>

行高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高</title>
    <style>
        p {
            font-size: 10px;
            line-height: 2;
        }
        div {
            font-size: 20px;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <h3>文字控制属性</h3>
    <ul>
        <li>字体大小 font-size</li>
        <li>字体粗细 font-weight</li>
        <li>字体倾斜 font-style</li>
        <li>行高 line-height</li>
        <li>字体族 font-family</li>
        <li>字体复合属性 font</li>
        <li>文本缩进 text-indent</li>
        <li>文本对齐 text-align</li>
        <li>修饰线 text-decoration</li>
        <li>颜色 color</li>
    </ul><br>

    <strong>属性名：</strong>line-height <br>
    作用：设置多行文本间距 <br>
    行高 = 文本高度+上间距+下间距（上下行高相等）<br>
    <strong>属性值：</strong><br>
    <ul>
        <li>数字+px</li>
        <li>数字（当前标签的倍数）</li>
    </ul><br><br><br>

    <p>这是p标签，控制文字行高，默认的的2倍<br>
        今年受成本驱动、需求拉动以及全球粮价上涨等各种因素叠加影响，我国粮食价格整体上扬，小麦、玉米、大豆价格高位波动，水稻价格运行平稳，优质优价特征明显，农民择机择时售粮，实现种粮收益最大化。但种粮成本持续攀升成为影响农民增收的“拦路虎”。这是因为，在去年高粮价的刺激下，今年土地租金以及化肥、农药、柴油等农资价格大幅上涨，种粮成本随之增加。加之今年粮食生产遭遇去年北方罕见秋雨秋汛、今年“南早北涝”等极端天气，虽然没有带来灾害性后果，但一些农户为抗灾付出更多生产成本，种粮农户收益空间进一步收窄。</p>
    <div>这是div标签，控制文字行高，间距50px<br>
        今年受成本驱动、需求拉动以及全球粮价上涨等各种因素叠加影响，我国粮食价格整体上扬，小麦、玉米、大豆价格高位波动，水稻价格运行平稳，优质优价特征明显，农民择机择时售粮，实现种粮收益最大化。但种粮成本持续攀升成为影响农民增收的“拦路虎”。这是因为，在去年高粮价的刺激下，今年土地租金以及化肥、农药、柴油等农资价格大幅上涨，种粮成本随之增加。加之今年粮食生产遭遇去年北方罕见秋雨秋汛、今年“南早北涝”等极端天气，虽然没有带来灾害性后果，但一些农户为抗灾付出更多生产成本，种粮农户收益空间进一步收窄。</div>
</body>
</html>

行高-垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高-垂直居中</title>
    <style>
        div {
            height: 100px;
            background-color: blue;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <h3>行高-垂直居中</h3>
    <strong>垂直居中技巧：</strong>行高属性等于盒子高度属性值（只适合单行文本）<br>
    文字高度和盒子高度相同即可，本文中都是100px <br>
    <div>这是p标签，控制盒子行高</div>
</body>
</html>

文字字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体族</title>
    <style>
        p {
            font-family: 楷体;
        }
        div {
            font-family: 宋体;
        }
        h1 {
            font-family: Microsoft YaHei, Heiti Sc, tahoma, arial, Hiragino Sans GB, " 5B8B\4F53" sans-serif;
        }
    </style>
</head>
<body>
    <h3>文字控制属性</h3>
    <ul>
        <li>字体大小 font-size</li>
        <li>字体粗细 font-weight</li>
        <li>字体倾斜 font-style</li>
        <li>行高 line-height</li>
        <li>字体族 font-family</li>
        <li>字体复合属性 font</li>
        <li>文本缩进 text-indent</li>
        <li>文本对齐 text-align</li>
        <li>修饰线 text-decoration</li>
        <li>颜色 color</li>
    </ul><br>

    <strong>属性名：</strong>font-family <br>
    作用：设置文字字体 <br>
    使用：可以按顺序递归（font-family: Microsoft YaHei, Heiti Sc, tahoma, arial, Hiragino Sans GB, " 5B8B\4F53" sans-serif;）<br>
    <strong>拓展(了解):</strong> font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找网页开发建议使用无衬线字体<br>
    <img src="./img/字体.png" width="350" height="200"><br>

    <ul>
        <li>font-family 属性最后设置一个字体族名，网页开发使用无衬线字体</li>
    </ul>
    <br>
    <p>这是p标签，控制文字字体，<strong>楷体</strong><br>
        今年受成本驱动、需求拉动以及全球粮价上涨等各种因素叠加影响，我国粮食价格整体上扬，小麦、玉米、大豆价格高位波动，水稻价格运行平稳，优质优价特征明显，农民择机择时售粮，实现种粮收益最大化。但种粮成本持续攀升成为影响农民增收的“拦路虎”。这是因为，在去年高粮价的刺激下，今年土地租金以及化肥、农药、柴油等农资价格大幅上涨，种粮成本随之增加。加之今年粮食生产遭遇去年北方罕见秋雨秋汛、今年“南早北涝”等极端天气，虽然没有带来灾害性后果，但一些农户为抗灾付出更多生产成本，种粮农户收益空间进一步收窄。</p>
    <div>这是div标签，控制文字行高，<strong>宋体</strong><br>
        今年受成本驱动、需求拉动以及全球粮价上涨等各种因素叠加影响，我国粮食价格整体上扬，小麦、玉米、大豆价格高位波动，水稻价格运行平稳，优质优价特征明显，农民择机择时售粮，实现种粮收益最大化。但种粮成本持续攀升成为影响农民增收的“拦路虎”。这是因为，在去年高粮价的刺激下，今年土地租金以及化肥、农药、柴油等农资价格大幅上涨，种粮成本随之增加。加之今年粮食生产遭遇去年北方罕见秋雨秋汛、今年“南早北涝”等极端天气，虽然没有带来灾害性后果，但一些农户为抗灾付出更多生产成本，种粮农户收益空间进一步收窄。</div>
</body>
</html>

文字复合属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字复合属性</title>
    <style>
        div {
            font: italic 700 30px/2 楷体;
            /* font: 30px 楷体;显示有字号字体 */
            /* font: 30px;不显示，字号字体缺一 */
        }
    </style>
</head>

<body>
    <h3>文字复合属性</h3>
    <strong>使用场景：</strong>设置网页文字公共样式。
    复合属性:属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开<br>
    <h4><strong>顺序： 是否倾斜 是否加粗 字号/行高 字体</strong></h4>
    注意: <strong>字号和字体值必须书写</strong> ，否则 font 属性不生效<br>
    <br>
    <div>测试font属性，文字倾斜、文字加粗、字体大小是30px、行高2倍、楷体</div>
    <br>
    <strong>font复合属性</strong><br>
    <img src="./img/font复合属性.png">---》<img src="./img/font复合属性2.png"><br>
</body>
</html>

文本缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本缩进</title>
    <style>
       p {
        text-indent: 20px;
        font-size: 30px;
       }
       div {
        text-indent: 2em;
        font-size: 30px;
       }
    </style>
</head>
<body>
    <h3>文本缩进</h3>
    <ul>
        <li>字体大小 font-size</li>
        <li>字体粗细 font-weight</li>
        <li>字体倾斜 font-style</li>
        <li>行高 line-height</li>
        <li>字体族 font-family</li>
        <li>字体复合属性 font</li>
        <li>文本缩进 text-indent</li>
        <li>文本对齐 text-align</li>
        <li>修饰线 text-decoration</li>
        <li>颜色 color</li>
    </ul><br>

    <strong>属性名：</strong>text-indent <br>
    作用：设置文本缩进 <br>
    <strong>属性值：</strong>
    <ul>
        <li>数字+px</li>
        <li>数字+em（推荐：1em =当前标签的字号大小）</li>
    </ul>
    <br>
    <p>这是p标签，控制文本缩进，<strong>20px</strong><br>
        今年受成本驱动、需求拉动以及全球粮价上涨等各种因素叠加影响，我国粮食价格整体上扬，小麦、玉米、大豆价格高位波动，水稻价格运行平稳，优质优价特征明显，农民择机择时售粮，实现种粮收益最大化。但种粮成本持续攀升成为影响农民增收的“拦路虎”。这是因为，在去年高粮价的刺激下，今年土地租金以及化肥、农药、柴油等农资价格大幅上涨，种粮成本随之增加。加之今年粮食生产遭遇去年北方罕见秋雨秋汛、今年“南早北涝”等极端天气，虽然没有带来灾害性后果，但一些农户为抗灾付出更多生产成本，种粮农户收益空间进一步收窄。</p>
    <div>这是div标签，控制文本缩进，<strong>2em</strong><br>
        今年受成本驱动、需求拉动以及全球粮价上涨等各种因素叠加影响，我国粮食价格整体上扬，小麦、玉米、大豆价格高位波动，水稻价格运行平稳，优质优价特征明显，农民择机择时售粮，实现种粮收益最大化。但种粮成本持续攀升成为影响农民增收的“拦路虎”。这是因为，在去年高粮价的刺激下，今年土地租金以及化肥、农药、柴油等农资价格大幅上涨，种粮成本随之增加。加之今年粮食生产遭遇去年北方罕见秋雨秋汛、今年“南早北涝”等极端天气，虽然没有带来灾害性后果，但一些农户为抗灾付出更多生产成本，种粮农户收益空间进一步收窄。</div>
</body>
</html>

文本对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对齐</title>
    <style>
        h3 {
            text-align: center;
            /* text-align: left; */
            /* text-align: right; */
        }
        * {
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>文本对齐</h3>
    <ul>
        <li>字体大小 font-size</li>
        <li>字体粗细 font-weight</li>
        <li>字体倾斜 font-style</li>
        <li>行高 line-height</li>
        <li>字体族 font-family</li>
        <li>字体复合属性 font</li>
        <li>文本缩进 text-indent</li>
        <li>文本对齐 text-align</li>
        <li>修饰线 text-decoration</li>
        <li>颜色 color</li>
    </ul><br>

    <strong>属性名：</strong>text-align <br>
    作用：控制内容水平方向对齐方式 ，居中的是字，不是标签<br>
    <strong>属性值：</strong>
    <ul>
        <li>left（默认）：左对齐</li>
        <li>center：居中</li>
        <li>right：右对齐</li>
    </ul>
    <br>
    <h3>这是h3标签，居中对齐</h3>
</body>
</html>

图片对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片对齐</title>
    <style>
        div {
            text-align: center;
        }
        .div {
            width: 500px;
            height: 500px;
            background-color: red;
            line-height: 500px;
        }
    </style>
</head>
<body>
    <h3>文本对齐</h3>
    <ul>
        <li>字体大小 font-size</li>
        <li>字体粗细 font-weight</li>
        <li>字体倾斜 font-style</li>
        <li>行高 line-height</li>
        <li>字体族 font-family</li>
        <li>字体复合属性 font</li>
        <li>文本缩进 text-indent</li>
        <li>文本对齐 text-align</li>
        <li>修饰线 text-decoration</li>
        <li>颜色 color</li>
    </ul><br>

    <strong>属性名：</strong>text-align <br>
    作用：控制内容水平方向对齐方式 ，居中的是字，不是标签<br>
    放div里，然后 text-align: center
    <strong>属性值：</strong>
    <ul>
        <li>left（默认）：左对齐</li>
        <li>center：居中</li>
        <li>right：右对齐</li>
    </ul>
    <br>
    
    <div><img src="./img/字体.png" ></div>
    
</body>
</html>

文本修饰线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本修饰线</title>
    <style>
        a {
            text-decoration: none;
        }
        div {
            text-decoration: underline;
        }
        p {
            text-decoration: line-through;
        }
        span {
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <h3>文本修饰线</h3>
    属性名：text-decoration <br>
    <ul>
        <li><strong>none：删除下划线</strong></li>
        <li><strong>underline：下划线</strong></li>
        <li>line-through：删除线</li>
        <li>overline：上划线</li>
    </ul><br><br>

    <a href="#">a 标签，去掉下划线</a>
    <div>div 标签，添加下划线</div>
    <p>p 标签，添加删除线</p>
    <span>span 标签，添加顶划线</span>
    <br>
</body>
</html>

文字颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字颜色</title>
    <style>
        h1 {
            color: rgb(241, 105, 105)
        }
        h2 {
            color: rgb(61, 61, 186);
        }
        h3 {
            color: rgba(136, 71, 71, 0.5);
        }
        h4 {
            color: #f30a0a
        }
    </style>
</head>
<body>
    <h3>文字颜色</h3>
    <strong>属性名：</strong> color <br>
    颜色表示方法：
    <ul>
        <li>颜色关键字：直接英文单词</li>
        <li>rgb表示法：</li>
        <li>rgba表示法</li>
        <li>十六进制表示法</li>
    </ul>
    <img src="./img/颜色表示方法.png" >
    <h1>第一种颜色表示</h1>
    <h2>第二种颜色表示</h2>
    <h3>第三种颜色表示</h3>
    <h4>第四种颜色表示</h4>
</body>
</html>

调试工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调试工具</title>
    <style>
        div {
            color: rebeccapurple;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h3>调试工具</h3>
    <strong>作用：</strong>检查、调试代码；帮助程序员发现代码问题、解决问题 <br>
    <ol>
        <li>打开调试工具
            <ul>
                <li>浏览器窗口内任意位置/选中标签一鼠标右键一检查</li>
                <li>F12</li>
            </ul>
        </li>
        <li>使用调试工具</li>
    </ol>
    <div>这是div</div>
</body>
</html>

案例

新闻详情

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻详情</title>
    <style>
        h1 {
            text-align: center;
            font-weight: 400;
            color: #333;
            font-size: 30px;
        }

        div {
            font-size: 14px;
            color: #999;
        }
        p {
            text-indent: 2em;
            font-size: 18px;
            color: #333;
        }
        .div2 {
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 网页制作思路：从上到下，先整体在局部；先标签再css -->
    <h1>在希望的田野上 | 湖北秋收开各地多举保增产增收</h1>
    <div>来源：央视网 | 2022年12月12日 12:12:12</div>
    <p><strong>央视网消息：</strong>眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。</p>
    <p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。</p>
    <div class="div2"><img src="./img/新闻详情1.png" alt=""></div>
    <p>王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还贝有抗病、抗倒、抗高温的特性，在荆门潭河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。</p>
    <p>此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。</p>
</body>
</html>

在这里插入图片描述

CSS简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css简介</title>
    <style>
        h1 {
            color: #333;
            text-align: left;
        }
        p {
            text-indent: 2em;
            color: #444;
            font-size: 14px;
            line-height: 30px;
        }
        a {
            color: #0069c2;
        }
        li {
            font-size: 14px;
            color: #444;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <h1>CSS（层叠样式表）</h1>
    <p>质叠样表(Casading Style Sheets，缩写为CSS)，是一种<a href="#">样式表</a>语言，
        用来播述 HTML XM(包 SVG、MathMLXHTML 之樊的XML 分支语言)文档的呈现。
        CSS 捕述了在屏幕、质、音等其它媒休上的元素应该如何被潼染的问题.</p>
    <p><strong>CSS是开放网络的核心诞言之一</strong>，由 W3C 规范 实现浏览器的准化。
        CSS 节省了大量的工作。样式可以通过定义保存在外部,CSS 文件中，同控制多个网页的布局，
        这意味着开发者不必经历在所有网页上编布局的烦，CSS 被分为不同等汲:CS1 现已废弃，
        CSS2.1 是推荐标准，CSS3分成多个小模块且正在标准化中。</p>
    <ul>
        <li>cSS介绍如果你是Web 开发的斯手
            请务必回读我们的CSS 基础文章以学习 CSS 的含义和用法</li>
        <li>CSS 教程 我们的CSS 学习区 包含了丰富的款程，它们盖了金部基础知识，
            能使你在CSS 之路上从初出茅声到游刃有余</li>
        <li>CSS 参考 针对资深 Web 开发者的<a href="#">详细参考手册</a> ，播述了 CSS 的个属性与概念</li>
    </ul>
</body>
</html>
鷇韩
关注
  • 11
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
CSS设置字体和文字样式
codeyf的专栏
11-16 6万+
网页字体样式
CSS设置文本
lh11223326的博客
04-11 3763
在CSS中我们可以设置文本的属性，就像Word文档那样可以定义网页中的文本间距或者对齐方式又或者缩进等等。CSS文本常用的属性如下所示：text-aling:用来控制文本水平的对齐方式。:用来控制文本的装饰。：用来控制文本中英文大小写转换方式。:用来控制文本的缩进方式。用来控制行高。:用来控制字符之间的间距。:用来控制单词和单词之间的间距(中文无效)。:用来控制文本的阴影。:用来控制文本的垂直和对齐的方式。:用来控制对文本中空白的处理方式。direction:用来控制文本的方向。
CSS修改样式基本内容
weixin_64178950的博客
04-26 1949
CSS修改样式基本内容1 > 选择器1.1 > 伪元素选择器1.2 > 选择器优先级1.3 > 选择器总结2 > 字体样式3 > 文字属性4 > 背景属性5 > 边框6 > display属性7 > 盒子模型8 > 浮动(重要)9 > 解决浮动造成的影响 1 > 选择器 1.1 > 伪元素选择器    伪元素选择器的作用就是通过css来操作文本内容。具体操作代码如下：    1 > 修改首个字体样式 p
前端——伪类选择器、选择器优先级、css修改文字属性、css背景、css边框、display属性、div、浮动、浮动清除
kdq18486588014的博客
04-26 736
文章目录一、伪类选择器二、选择器优先级三、css修改文字属性四、css背景五、css边框六、display属性七、div1.外边距2.内边距八、浮动 一、伪类选择器 1.修改首个字体样式 p:first-letter { color: red; font-size: 48px; } 2.在文本开头添加内容 p:before { content: 'css开头'; color: blue;
css的基础标签，字体的修改
hy250_的博客
03-03 774
div{ width: 500px; height: 800px; background-color: aqua; /* 背景颜色 */ background-color: rgb(255.0.0); /*rag三色取色红黄蓝数值越大,数值在0-255之间,颜色越深,对颜色有了解的比较好用*/ /* background-color: rgba(255.0.0.10); 跟上面相比多了个a,a是透明度,透明度有1--10 */...
css之文本编辑
qq_51670115的博客
09-04 815
css之文本编辑，体验css，字体标签，文本属性，样式表，以及一篇文本案例
CSS - 字体图标
AlanDragonLee的博客
07-18 803
字体图标的用法
css改变字体
qq_34631220的博客
07-20 1007
css改变字体
CSS字体样式调整详解
weixin_47556601的博客
01-30 3728
大家好，今天分享一下CSS字体样式调整 我们对文本样式做以下的调整 1.颜色 2.文本对齐的方式 3.首行缩进 4.行高 5.装饰 写HTMl代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>字体样式</h1>
css文件可以编辑修改,CSS文件修改
weixin_35990183的博客
08-03 488
CSS代码：/* 黑色导航风格＝＝＝我改了一些颜色*/ul#navigation{background-position:left -464px;background-color:#000;}/* 初始值：background-color:#000;好像是菜单条上半部分的背景色*/ul#navigation li{background-position:right bottom;}ul#navig...
CSS 的工作原理
07-25 1109
我可能会为一个框给出一个以像素为单位的回退宽度，然后继续给出一个值为 .旧浏览器将使用像素版本，忽略该行，因为它们不理解它。请记住，这是浏览器加载网页时发生的情况的非常简化的版本，并且不同的浏览器将以不同的方式处理该过程。鉴于 CSS 一直在开发中，因此领先于浏览器可以识别的内容，您可能会想知道如果浏览器遇到它无法识别的 CSS 选择器或声明会发生什么。如果浏览器正在解析您的规则，并遇到它无法理解的属性或值，它会忽略它并继续下一个声明。我们已经学习了CSS的基础知识，它的用途以及如何编写简单的样式表。
Python每日学习
q2903160397的博客
07-21 2100
我是从c++转来学习Python的，总感觉和c++相比Python的实操简单，但是由于写c++的代码多了，感觉Python的语法好奇怪。由于今天是我正式学Python的第一天，干货不多，以后让我们一步一步来见证Python这个优雅的代码的学习之路吧！），这种格式对于我来说已成习惯了，而这一切Python这个优雅的语言通通没有，学习Python这将是道阻且长。今天就简单了解了一下Python的起源和成长并学习了打印 halloworld，算是开始学习了吧。）而且它每一项的代码结束之后要有一个表示结束的封号（
爬虫学习4：爬取王者荣耀技能信息
mohanyelong的博客
07-22 2372
爬取王者荣耀技能信息（代码和代码流程）。
Go语言教程（一看就会）
bjjgff的博客
07-25 809
Go语言是一门开源的编程语言，目的在于降低构建简单、可靠、高效软件的门槛。Go平衡了底层系统语言的能力，以及在现代语言中所见到的高级特性。
《计算机网络》（学习笔记）
qiqi_liuliu的博客
07-24 2594
网络（Network）由若干结点(Node)和连接这些结点的链路(Link)组成多个网络还可以通过路由器互连起来，这样就构成了一个覆盖范围更大的网络，即互联网（互连网）。因此，互联网是"网络的网络（Network of Networks）"因特网（Internet）是世界上最大的互连网络（用TCP/IP）internet是通用名词，互连的网络都叫internet注：互连、自治、集合。在计算机内部或在相邻设备之间近距离传输时，可不经过调制就在信道上直接进行的传输方式称为基带传输。
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1267
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 582
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
【前端面试】五、框架
最新发布
weixin_49015558的博客
07-31 427
1 Vue2 2 Vue3 3 React 4 Angular
electron 主进程和渲染进程
qq_21087199的博客
07-29 352
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鷇韩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值