零基础学习CSS(11)——颜色表达

最新推荐文章于 2022-12-07 09:02:06 发布

Dragon水魅

最新推荐文章于 2022-12-07 09:02:06 发布

阅读量220

点赞数

分类专栏：零基础学习Web开发文章标签： html css

本文链接：https://blog.csdn.net/qq_43650934/article/details/109074601

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

本文展示了HTML5和CSS3中颜色的不同表示方式，包括RGB、HEX、HSL和RGBA、HSLA，以及如何通过CSS实现元素的透明度效果。示例代码中，`

`标签在鼠标悬停时颜色变为半透明的番茄色，而`
`标签颜色为DodgerBlue。此外，还提供了在线颜色工具供学习者参考。

摘要由CSDN通过智能技术生成

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

标准颜色速查：https://man.ilovefishc.com/color/index.html
调色器：https://man.ilovefishc.com/color/colorChange.html
颜色拾取器：https://man.ilovefishc.com/color/colorPicker.html

RGB表示：rgb(255, 99, 71)
HEX表示：＃F6357
HSL表示：hsl(9, 100%, 64%)
RGBA表示：rgb(255, 99, 71, 0.5)，表示透明度减半
HSLA表示：hsl(9, 100%, 64%, 0.5)，表示透明度减半

<!DOCTYPE html>
<html>
<head>
    <title>颜色表达</title>
    <meta charset="utf-8">
    <style type="text/css">
        h1 {
            color: tomato;
        }
        /* 透明度减半 */
        h1:hover{
            color: rgba(255,99,71, 0.5);
        }
        p {
            color: dodgerblue;
        }
    </style>
</head>
<body>
    <h1>《洛神赋》（节选）</h1>
    <p>其形也，翩若惊鸿，婉若游龙。荣曜秋菊，华茂春松。髣髴兮若轻云之蔽月，飘飖兮若流风之回雪。远而望之，皎若太阳升朝霞；迫而察之，灼若芙蕖出渌波。秾纤得衷，修短合度。肩若削成，腰如约素。延颈秀项，皓质呈露。芳泽无加，铅华弗御。云髻峨峨，修眉联娟。丹唇外朗，皓齿内鲜，明眸善睐，靥辅承权。瑰姿艳逸，仪静体闲。柔情绰态，媚于语言。奇服旷世，骨像应图。披罗衣之璀粲兮，珥瑶碧之华琚。戴金翠之首饰，缀明珠以耀躯。践远游之文履，曳雾绡之轻裾。微幽兰之芳蔼兮，步踟蹰于山隅。</p>
</body>
</html>

Dragon水魅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
零基础学习CSS(11)——颜色表达

官方资料鱼C课程案例库：https://ilovefishc.com/html5/html5速查手册：https://man.ilovefishc.com/html5/css速查手册：https://man.ilovefishc.com/css3/学习正文标准颜色速查：https://man.ilovefishc.com/color/index.html调色器：https://man.ilovefishc.com/color/colorChange.html颜色拾取器：https://man.
复制链接

扫一扫