前端基础HTML---css简介(内联样式)


1. 层叠样式表(Cascading Style Sheets)
2. Css可以用来为网页创建样式表,通过样式
    表可以对网页进行装饰。
3. 所谓层叠,可以将整个网页想象成是一-层
    一层的结构,层次高的将会覆盖层次低的。
    而css就可以分别为网页的各个层次设置样
    式。

 

可以将css样式编写到元素的style属性当中
将杨树直接编写到style属性中,这种样式我们成为内联样式
内联样式只对当前的元素中的内容起作用

内联样式不方便复用,不方便后期维护,不推荐使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css简介</title>
    </head>
    <body>
        <!-- 
            可以将css样式编写到元素的style属性当中
                将杨树直接编写到style属性中,这种样式我们成为内联样式
                内联样式只对当前的元素中的内容起作用
         -->
        <p style="font-size: 20px; color: red;">锄禾日当午,汗滴禾下土</p>
        
    </body>
</html>

 

也可以将css样式编写到head中的style标签里
将样式表编写的style标签中,然后通过css选择器选中指定元素
然后可以同时为这些元素一起设置样式,这样可以使样式进一步的复用
将样式表编写到style标签中,也可以使表现和结构进一步的分离,推荐使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css简介</title>
        <!-- 
            也可以将css样式编写到head中的style标签里
                将样式表编写的style标签中,然后通过css选择器选中指定元素
                然后可以同时为这些元素一起设置样式,这样可以使样式进一步的复用
            将样式表编写到style标签中,也可以使表现和结构进一步的分离,推荐使用
         -->

        <style type="text/css">
            p {
                font-size: 20px;
                color: red;
            }
        </style>
    </head>
    <body>
        <!-- 
            可以将css样式编写到元素的style属性当中
                将杨树直接编写到style属性中,这种样式我们成为内联样式
                内联样式只对当前的元素中的内容起作用
         -->
        <p style="font-size: 20px; color: red;">锄禾日当午,汗滴禾下土</p>

        <p>谁知盘中餐.粒粒皆辛苦</p>
    </body>
</html>

效果:

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM