分享

【聊代码】第三十三集 css样式(之三)

 pfm 2022-08-30 发布于广东

聊代码(第三十三集)css样式(之三)

       在本集,要讨论 css样式 的第二种表示方式,即内部样式表。内部样式表适用于单个文件的需要,在head部分的 style 标签中定义内部样式表。也就是说,把 css样式 放在<style></style>首尾标签之间。

       在上一集”的末尾,我给朋友们展示了一段代码<style type="text/css">a{font-size:20px;color:#ffc20e} </style>,这个代码就是最简单的 内部样式表

       代码解析:

       <style type="text/css">表示内部样式表。

       大括号前面的英文字母 a 叫做 选择器(关于 选择器 的命名后面还要细讲)。

       大括号内叫做 声明 ,有一条或多条声明,每条声明由一个属性和一个属性值组成。属性与属性值之间用冒号连接,各声明之间用分号隔开。

       大括号后面的</style>css样式 的尾标签。

       关于选择器的名称如何定的问题,我要啰嗦几句,我现在介绍的是任意改变文档中各个位置上的文字字体、字色、字大小,这样的内容网上没有。当然,用单个英文字母给选择器命名在网上也是见不到的。因为我对文档中的文字变化很感兴趣,大家也会看到,【聊代码】中,为了看着明显,有太多太多的地方都采用了文字变色。为此,通过我的反复摸索,终于如愿以偿了。因为这个结果很实用,我分享给朋友们。

       大家都知道,有些单个的英文字母在代码中是有意义的。例如:a ,链接会用到它;b ,加粗文字用;p ,段落标签的字母。如果以这三个字母为选择器命名,势必赋予了它双重意义,使声明的属性附有了链接的意思,加粗的意思,段落的意思。实践发现,如果用 a 为选择器命名,在“老小孩”网,将鼠标放在变色文字上,文字会变色,显示出了链接特征,这个显示是无所谓的,因为文字很清晰,所以可用。而在“老年人之家”网就不同了,文字有了下划线,并且字迹灰暗不清,故在“老年人之家”网 a 不宜用。如果用 b 为选择器命名,只要也想同时加粗文字,无论“老小孩”网还是“老年人之家”网,都是可以的。除此之外,我还要说明,在“老小孩”网,单一字母的选择器只能有两个,命名的字母只限 ab

       下面,请看一段变化文字的实际效果。

       我是原来颜色的文字我是用a命名变色的字“老年人之家”看我会有下划线我是用b命名变色同时又加粗的字 我是用c命名因无效所以仍是原色的字,但“老年人之家”看我,我有效(网站不同,效果不一)。

 

       代码:

       <style type="text/css">
a{font-size:22px;color:#f0f}
b{font-size:22px;color:#0f0}
c{font-size:22px;color:#f00}
</style>
<p align="left"><span style="font-size:20px;color:#ffffff">我是原来颜色的文字<a>我是用a命名变色的字“老年人之家”看我会有下划线</a><b>我是用b命名变色同时又加粗的字 <c>我是用c命名因无效所以仍是原色的字,但“老年人之家”看我,我有效(网站不同,效果不一)。</c></span></p>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多