零基础学习网页制作（八）

最新推荐文章于 2020-09-29 18:48:24 发布

Jinx_Q

最新推荐文章于 2020-09-29 18:48:24 发布

阅读量1.2k

点赞数

分类专栏： html/css 零基础之html

知识本就需要传播，如果你需要请自行转走。

本文链接：https://blog.csdn.net/medivhq/article/details/52702445

版权

html/css 同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

零基础之html

8 篇文章 5 订阅

订阅专栏

郑重声明：
1.所谓的零基础并不是真的零基础，首先你会用电脑的一些简单操作，如：新建一个文本文档(txt)；
2.文章仅供本人娱乐，如有雷同，纯属巧合；
3.文章的目的还有一个，告诉一些不懂写代码的人，写代码没那么神奇，告诉那些了解一点点代码的人，写代码没那么容易；

八、如何把样式抽离出元素
1)描述
直接将style写在元素中,就会导致页面显示的元素很混乱,我们可以把这些样式抽离出来书写.
给元素添加class属性,然后将style里面的内容,写到另外一个地方.比如元素有一个class=”my-style”,
那么在中书写的方式为.my-style:{这里面是样式属性}.这样多个元素也可以共用这一个class,使用同一种属性

2)代码解释

<html>
    <head>
        <meta charset="utf-8">
        <title>第八章</title>
        <!-- 将style抽离出来,写在这里,
         包裹在一个<style></style>标签里面
        class的名字可以随便起,但不要与元素名一样,
        未添加class的元素样式也可以直接使用
        元素名进行定义,但不要加.-->
        <style>
        .text-font{
            font-size: 18px;
            color: red;
        }
        .fixed-styleP{
            position: fixed;
            left: 0px;
            top: 100px;
            width: 100%;
            height: 30px;
            padding-top: 5px;
            padding-left: 30px;
            font-size: 16px;
            background: black;
            color: white;
        }
        span{
            font-size: 22px;
            color: green;
        }
        </style>
    </head>
    <body>
        <!-- 下面这些元素使用同一个class属性 -->
        <p class="text-font" >
            我是测试一
        </p>
        <!-- 下面是原始的写法,与上面作用一样 -->
        <p style="font-size: 18px;color: red;">
            我是测试二
        </p>

        <span>我是测试三</span>

        <div class="fixed-style">
            我永远在这里
        </div>
    </body>
</html>