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>
    

      

  • 相关阅读:
    面试十题(4)
    TS中给接口指定的成员?
    TS中定义泛型接口的两种方式
    ts中泛型的使用
    ts中类的属性的封装
    ts中接口的使用
    自定义hook的步骤
    react中如何使用useReducer?
    react中useContext的使用
    react 中useRef的作用
  • 原文地址:https://www.cnblogs.com/X404/p/12358013.html
Copyright © 2011-2022 走看看