技術標籤：初級CSS css 前端

顏色


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>顏色</title>
    <!-- <link rel="stylesheet" href="../chujicss/css/11.18.04.css"> --> 

    <style>
        /* 
        顏色單位：
            在css中可以直接使用顏色名來設定各種顏色
            比如：red,orange,yellow,blue....
            但是在 css中直接使用顏色名是非常的不方便


            RGB值：
                -RFB通過三種顏色的不同濃度來調配出不同的顏色
                R:red G:green B:blue
                -每一種顏色的範圍在0-255（0%-100%）之間
                -語法：RGB（紅色，綠色，藍色）

            RGBA：
                -就是在rgb的基礎上增加了一個a表示不透明度
                -需要四個值，前三個和rgb一樣，第四個表示不透明度
                 1表示完全不透明  0表示完全透明  .5表示半透明

            十六進位制的RGB值：
                -語法：#紅色綠色藍色
                -顏色濃度通過 00-ff
                -如果顏色兩位兩位重複可以進行簡寫
                    #aabbcc --> #abc         
        
            HSL值 HSLA值
             H 色相（0-360）
             S 飽和度，顏色的濃度（0%-100%）
             L 亮度顏色的亮度（0%-100%）
        */ 

        .box{
            width: 100px;
            height: 100px;
            background-color: blue;
            background-color: rgb(255,0,0);
            background-color: rgb(0,255,0);
            background-color: rgb(35, 35, 59);
            background-color: rgb(255,255,255);
            background-color 
: rgb(125,145,213);
            background-color: rgba(125,145,213,.5);
            background-color: #ffff00;
            background-color: hsl(0, 100%, 0%);
            /* 它的位置在最後所以顯示為黑色 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

執行結果為：
在這裡插入圖片描述

前端的學習之路：初級CSS---顏色

顏色

前端的學習之路：初級CSS---顏色

前端的學習之路：初級CSS---複合選擇器

前端的學習之路：初級CSS---clearfix

前端的學習之路：初級CSS---使用after偽類解決高度塌陷問題

前端的學習之路：初級CSS---BFC的演示

前端的學習之路：初級CSS---字型的簡寫屬性

前端的學習之路：初級CSS---圖示字型的其他使用方式

前端的學習之路：初級CSS---字型族

前端的學習之路：初級CSS---元素的層級

前端的學習之路：初級CSS---絕對定位的佈局

前端的學習之路：初級CSS---背景練習

前端的學習之路：初級CSS---其他的文字樣式

前端的學習之路：初級CSS---選擇器的權重

前端的學習之路：初級CSS---繼承

前端的學習之路：初級CSS---偽元素

前端的學習之路：初級CSS---關係選擇器

前端的學習之路：初級CSS---常用選擇器

前端的學習之路：初級CSS---css語法

前端的學習之路：初級CSS---單位：畫素和百分比

前端的學習之路：初級HTML---超連結

前端的學習之路：初級CSS---顏色

顏色

相關推薦