HTML與CSS中的顏色與單位我的分享

時間 2019-12-10

標籤 html css 顏色單位我的分享欄目 HTML 简体版

原文原文鏈接

顏色與單位

- Web安全色有216中其中色彩有210中,非色彩6中

前景色與背景色

前景色就是設置字體的顏色
背景色就是爲指定元素設置背景色 - 瀏覽器默認背景色的顏色爲透明色

顏色的命名

1.使用單詞方式定義顏色 - 目前主流瀏覽器識別147種預約義顏色瀏覽器

問題:可選的顏色數量有限
不一樣瀏覽器中存在色差問題

2.使用RGB方式定義顏色 - 稱爲三原色(就是不能再分解的三種基本顏色)安全

RGB - red(紅色)、green(綠色)、blue(藍色)
使用方法:
1.函數式RGB顏色 - rgb(紅色, 綠色, 藍色)
每一個顏色的值範圍 - 0 ~ 255
2.十六進制RGB顏色 - #紅色綠色藍色
每一個顏色具備兩位
每一個顏色的值範圍 - 00 ~ ff
數字是 - 0 ~ 9 字母是 - a ~ f
若是每一個顏色的兩位相同的話則能夠省略其中一個

示例代碼:函數

<style>

        h1{
            color: rgb(0,154,192);
            background-color: #00ffff;
        }
    </style>
</head>
<body>
<h1>一花一世界</h1>
</body>

透明度

透明度 - 默認值爲1.0 (徹底不透明)
取值範圍是 - 0 ~ 1.0
語法 - opacity: 0.5;
設置透明度還有第二種方式:
rgba() - 其中a表示透明度

示例代碼:字體

/* 如下是透明度的兩種用法 */

opacity: 0.5;

background-color: rgba(223,0,220,0.5);

單位

單位分爲相對值和絕對值
像素值(px) - 與電腦分辨率有關分辨率越大單位像素值就相對越小

示例代碼:spa

<style>
        div{
            /* 使用百分值是相對於父級元素的 */
            width: 120%;
            height: 200px;
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<div></div>
</body>

圖片分析:
code