码迷,mamicode.com
首页 > Web开发 > 详细

每天学点HTML08——CSS样式

时间:2020-02-24 18:46:23      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:指定   tle   css样式   编写   标签   复用   式表   png   doc   

在一段落中想要更改字体颜色和大小的话,之前使用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>

  技术图片

 

每天学点HTML08——CSS样式

标签:指定   tle   css样式   编写   标签   复用   式表   png   doc   

原文地址:https://www.cnblogs.com/X404/p/12358013.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!