zoukankan      html  css  js  c++  java
  • 每天学点HTML08——CSS样式

    在一段落中想要更改字体颜色和大小的话,之前使用HTML是这样该更改的

    <body>
    <p><font color="blue" size="30px">
    					写字楼里写字间,写字间里程序员;<br/>
                        程序人员写程序,又拿程序换酒钱。<br/>
                        酒醒只在网上坐,酒醉还来网下眠;<br/>
                        酒醉酒醒日复日,网上网下年复年。<br/>
                        但愿老死电脑间,不愿鞠躬老板前;<br/>
                        奔驰宝马贵者趣,公交自行程序员。<br/>
                        别人笑我忒疯癫,我笑自己命太贱;<br/>
                        不见满街漂亮妹,哪个归得程序员?<br/>
    </font></p>
    </body>
    

      这样的需要在每次使用的时候都需要重复<font>标签,为此CSS中的内联样式可以解决多次重复FONT标签问题,

    <body>
    <!--
    <p><font color="blue" size="30px">
    -->
    <p style="color:red;font-size:25px;">
    					写字楼里写字间,写字间里程序员;<br/>
                        程序人员写程序,又拿程序换酒钱。<br/>
                        酒醒只在网上坐,酒醉还来网下眠;<br/>
                        酒醉酒醒日复日,网上网下年复年。<br/>
                        但愿老死电脑间,不愿鞠躬老板前;<br/>
                        奔驰宝马贵者趣,公交自行程序员。<br/>
                        别人笑我忒疯癫,我笑自己命太贱;<br/>
                        不见满街漂亮妹,哪个归得程序员?<br/>
    </font></p>
    </body>
    

      不过内联样式style在P标签中存在着和font标签类似的问题,如果大批量的标签需要复制多次,后期修改很麻烦,内联样式术语结构与表现耦合,不方便维护,不推荐使用

    接下来在

    <!DOCTYPE HTML>
    <html>
    <head><title>test02</title>
    <!--将CSS样式编写到head中的style标签里
    将样式编写style标签中,然后通过CSS选择指定元素
    然后可以同时为这些元素一起设置样式,这样可以使样式进一步复用
    将样式表编写到style标签中也可以使表现和结构进一步分离,它是我们推荐的使用-->
    <style>
    p{
    color:yellow;
    font-size=32px;
    }
    </style>
    
    </head>
    <body>
    <!--
    <p><font color="blue" size="30px">
    -->
    <!--<p style="color:red;font-size:25px;">
    重复量大不推荐使用
    -->
    <p>
    					写字楼里写字间,写字间里程序员;<br/>
                        程序人员写程序,又拿程序换酒钱。<br/>
                        酒醒只在网上坐,酒醉还来网下眠;<br/>
                        酒醉酒醒日复日,网上网下年复年。<br/>
                        但愿老死电脑间,不愿鞠躬老板前;<br/>
                        奔驰宝马贵者趣,公交自行程序员。<br/>
                        别人笑我忒疯癫,我笑自己命太贱;<br/>
                        不见满街漂亮妹,哪个归得程序员?<br/>
    </font></p>
    </body>
    </html>
    

      

  • 相关阅读:
    HiveQL:数据定义
    linux学习整理
    Hive中问题解决整理
    Hive 数据类型和文件格式
    neo4j 简要安装步骤
    Leetcode 刷题笔记二 两数相加(使用链表) -- scala版本
    leetcode 刷题笔记一 两数之和 scala版本
    windows 安装 tensorflow
    elemnetui 下载,及引用
    cenos7 安装mysql
  • 原文地址:https://www.cnblogs.com/X404/p/12358013.html
Copyright © 2011-2022 走看看