WEB前端demo3

2024-01-02 14:31:20

文章目录

1.css引入

在title和body之间写style标签，引入css样式

或者新建一个css文件，在这两者之间引入link标签，链接css文件。

2.建立样式

1.建立类选择器

 .red{
        color: red;
    }


<p class="red size" >hhh</p >

可用于任何标签，用class标签引用

2.标签选择器

给每个标签一个样式，代码如图

div{
        color: darksalmon;
        font-size: 30px;
    }

每个div标签都是这样

3.全局选择器

#red{

            color: red;

        }

    </style>

<div id="red">sssss</div>

这个文件每个标签都用这个样式，在文件初期，不知道具体样式，可用这个代替。

3.画盒子

<style>

        .one{

            width: 100px;

            height: 100px;

            background-color: red;

        }

        .two{

            width: 200px;

            height: 200px;

            background-color: rosybrown;

        }

    </style>

 <div class="one">ddd</div>

    <div class="two">ddjd</div>

</body>

4.文字效果

p{

            /* 字号 */

            font-size: 30px;



            /* 字体粗细 */

            font-weight: 400;



            /* 字体倾斜  normal--正常  italic--倾斜 */

            font-style: italic;



            /* 行高

            数字+px 

            数字----当前字号的倍数           */

            line-height: 30px;

        }



        div{

            /* height与line-height保持垂直居中，值相等，

            单行文字垂直居中 */

            height: 100px;

            background-color: aquamarine;

            line-height: 100px;｝

<style>
    div{
        font-family: 楷体;
    }

/* font复合性，倾斜，加粗，字体大小，行高，楷体 */
/* 字号，字体必须都写 */
    p{
        font: italic 700 30PX/2 楷体;
    }
</style>

 <style>
        p
        {
            /* 首行缩进两个字符 */
            
            text-indent: 2em;
        }
    </style>

4.图片文字位置

h1{
        /* text-align: left; */
        text-align: center;
        /* 居中文字内容，不是标签 */
        /* text-align: right; */
    }

    div{
        text-align: center;
    }


</style>
<body>
    <h1>hahha</h1>

/*图片用文字标签包裹，*/
    <div>< img src="./demo1/0992.png" alt=""></div>

 a{
        /* 删除下划线 ，用于删除超链接默认的下划线*/
text-decoration: none;
    }

    div{
        /* 添加下划线 */
        text-decoration: underline;
    }

    p{
        /* 添加删除线 */
        text-decoration: line-through;
    }

    span{
        /* 添加顶划线 */
        text-decoration: overline;
    }

5.综合案例

1.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>新闻界面</title>

</head>

<link rel="stylesheet" href="./综合案例一样式.css">

<body>



    <h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1>

    

    <div >来源：央视网 | 2222年12月12日 12:12:12</div>

    <p><strong>央视网消息：</strong>眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。</p >



    <p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。</p >

    <div class="center">< img src="./1.jpg" alt="" ></div>



    <p>王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。</p >



    <p>此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。</p >

    



</body>

</html>

2.css

h1{
    text-align: center;
  font-weight: 400;
  font-size: 30px;
  color: #333;
}
.center{
    text-align: center;
}
p{
   text-indent: 2em; 
   line-height: 18px;
   color: #333;
}
div{
    font-weight: 50;
    font-size: 14px;
    color: #999;
}

文章来源:https://blog.csdn.net/m0_65348671/article/details/135303883
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。