当我们写好网页内容时,怎样给内容加五颜六色的颜色呢?当然还是依靠我们的CSS咯!那么有哪些方法可以给我们的网页添加色彩呢?
工具/原料
pycharm
颜色表示法
1
颜色名比如,red红色,gold金色等等英文颜色名。
2
例,我们将其中的标题和每个段落都加一个颜色。在html文件中,将每个段落设置一个类选择器。添加代码如下:class='p1'。有五个段落,我们就一直添加到p5.
3
然后将样式表通过外链式的方式连接到HTML文件中。代码如下:注意:link标签写在head标签中比较好。
4
最后,我们在样式表中设置标题及各段落颜色,代码如下:h2{color:orange;} .p1{ color:red;} .p2{color:blue;} .p3{ color:green;} .p4{color:pink;} .p5{color:gray;}
5
这样,CSS中用颜色名来表示颜色的结果就完成啦!
16进制数值表示法
1
在表示颜色的时候,除了英文颜色名超好用外,最最最好用的非16进制数值表示法莫属了!例如#000000黑,#ffffff白色等,可简写成#000和#fff。
2
例:html中的四个div容器,我们用16进制设置这些容器的颜色。在html页面中,代码为
3
然后我们在样式表中设置16进制数值表示颜色,代码如下:.d1{background-color:#951212;} .d2{background-color:#74A7EA;} .d3{background-color:#90C98E;} .d4{ clear:both; background-color:#BC9B43; width:200px; height:200px; }
4
这样,我们的16进制数值表示法就完成啦!
注意事项
本次案例通过pycharm完成,用vs更方便哦!
上一篇:css3如何实现圆角边框
下一篇:css3实现圆形的卡牌滑块