原创教程,转载请注明出处:情缘科技 现在我们设计网页已经离不开CSS,使用CSS可以美化我们的网页,这已经是大家所共知的了! CSS是“Cascading Style Sheets”的缩写,译为样式表。HTML允许我们利用CSS来实现风格的显示,举个简单的例子:我们可以使用标签来使页面的字体加粗。如: 情缘科技加粗字体显示 如果你使我们使字体显示为红色、宋体、并且加粗显示我们可以使用下面的代码: 情缘科技字体演示 这时我们观察上面的代码时我们发现网页中的元素比较多了,当我们自己编写时可能显得很凌乱,这时我们该想有没有一种方法使用的代码比较少,而同时达到上面显示的要求呢?回答是肯定的,这时我们就要用到CSS了。用CSS设置一种风格,设置好我们需要的特性,给它命名一个唯一的名字,然后保存放在网站的其它地方,然后我们在编写HTML时引用刚才的风格的名字就可以达到这种要求。如: 情缘科技的 CSS 风格文本 然后在网页的头部之间加上设置风格的代码,如: 如果你想使上面的CSS控制你的网页的每个页面,那么我们复制粘贴上面的代码就可以了,如果觉得比较麻烦或者说你觉得网页的头部很乱的话,我们也可以把CSS设置的风格单独保存为一个文件(文件的扩展名为.CSS),之后我们在HTML直接引用那个保存的文件就可以引用样式了。如你保存的文件的名字为:myFirstStyleSheet.css,那么我们可以使用下面代码来引用: 注意:上述代码要放到HTML页面的区域内。 至于CSS的设置就在这里不提了,我们可以专门打开一个记事本,或使用专门的设计工具如DW等。 在编辑CSS注意不要再加上如下代码了: 我们在CSS文件中只要设置CSS风格就行了,如: .myNewStyle { font-family: 宋体; font-weight: bold; font-size: 8pt; color: #FF0000; } .my2ndNewStyle { font-family: 宋体; font-weight: bold; font-size: 9pt; color: #FF0000; } .my3rdNewStyle { font-family: 宋体; font-weight: bold; font-size: 12pt; color: #FF0000; } 然后直接保存为扩展名为css的文件就行了(如:myFirstStyleSheet.css) 最后我们在HTML代码的BODY区域内加入如下代码就可以引用我们的设置了: 情缘科技CSS字体显示1 情缘科技CSS字体显示2情缘科技CSS字体显示3我们在上面的代码中用到了 标签,我们在CSS中也可以直接对标签进行风格的定义: |
|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )
GMT+8, 2024-9-30 05:32 , Processed in 0.159595 second(s), 12 queries , Gzip On, MemCache On.
Powered by Discuz! X3.5
© 2001-2023 Discuz! Team.