今天咱们要聊一聊那些我们经常遇到的,又如何给它们穿上色彩斑斓外衣的小家伙们:CSS的tag文字颜色和背景颜色!
想象一下,你正在看的这个页面,若是一片毫无色彩的均一,你愿意停留吗?我猜你可能会打个哈欠,然后溜走吧。但我们的救星CSS来了,它就像一个潮牌设计师,为我们的网页生活增添了无穷的乐趣。
首先,我们要来给文字上色。只需用CSS的color属性就行啦。比如,你想把一个p标签的字体变为一种颜色,就写上color:#ccc;就行。然后就是hover上去以后得背景色。
#divTags .a-tag-2:nth-child(10n+1) { color: #f44336; } #divTags .a-tag-2:nth-child(10n+2) { color: #4caf50; } #divTags .a-tag-2:nth-child(10n+3) { color: #0B0B0B; } #divTags .a-tag-2:nth-child(10n+4) { color: #00bcd4; } #divTags .a-tag-2:nth-child(10n+5) { color: #2196f3; } #divTags .a-tag-2:nth-child(10n+6) { color: #e91e63; } #divTags .a-tag-2:nth-child(10n+7) { color: #34495e; } #divTags .a-tag-2:nth-child(10n+8) { color: #003366; } #divTags .a-tag-2:nth-child(10n+9) { color: #B37333; } #divTags .a-tag-2:nth-child(10n) { color: #CC0000; } #divTags > a:nth-child(10n+1) > span:hover { color: #fff; background: #f44336; } #divTags > a:nth-child(10n+2) > span:hover { color: #fff; background: #4caf50; } #divTags > a:nth-child(10n+3) > span:hover { color: #fff; background: #0B0B0B; } #divTags > a:nth-child(10n+4) > span:hover { color: #fff; background: #00bcd4; } #divTags > a:nth-child(10n+5) > span:hover { color: #fff; background: #2196f3; } #divTags > a:nth-child(10n+6) > span:hover { color: #fff; background: #e91e63; } #divTags > a:nth-child(10n+7) > span:hover { color: #fff; background: #34495e; } #divTags > a:nth-child(10n+8) > span:hover { color: #fff; background: #003366; } #divTags > a:nth-child(10n+9) > span:hover { color: #fff; background: #B37333; } #divTags > a:nth-child(10n+10) > span:hover { color: #fff; background: #CC0000; }
当然,文字颜色和背景颜色的赋值,除了可以直接写英文颜色名,我们还可以使用 RGB(如: rgb(255, 0, 0))、HEX(如: #FF0000)等方式去指定颜色,真的超级酷炫!
这就对了,充满色彩的世界就应该是这样,经过你的精心设计,每一个元素都会有自己的个性,闪闪发光。而CSS就是实现这一切的神奇魔法,赶快行动,给你的网页来一场绚丽的色彩派对吧!