【HTML】顏色和選擇器
顏色與單位
一.顏色
- 相關的概念
- 色調：指影像的相對明暗程度，也稱色相。 通俗來說就是顏色。
- 飽和度：指色彩的鮮豔程度，也稱色彩的純度或彩度。是顏色中灰色的含量。飽和最大灰色為零
- 亮度：指色彩的明暗差異，也稱色彩明度。是顏色中黑色的含量。亮度最大黑色為零
飽和度、亮度和色調是色彩的三要素 - 對比度：前景色與背景色之間的差異。差異越大，對比度越大。
- web安全色：一個色板，些顏色可以安全的應用於所有的Web中.
具體顏色參考網站：https://www.bootcss.com/p/websafecolors
- 前景色與背景色
- 前景色：在
css中是color屬性，color還表示文字內容的顏色。
用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>顏色</title>
<style>
h2{
color: aqua;
}
</style>
</head>
<body>
<h2>床前明月光，疑是地上霜</h2>
</body>
</html>
- 背景色：
css中由background-color屬性設定背景色，預設屬性為transparent(透明)
用法：
<head>
<style>
p{
background-color: black;
}
</style>
</head>
<body>
<p>床前明月光，疑是地上霜</p>
<p>舉頭望明月，把酒問青天</p>
</body>
- 顏色值的型別
- 顏色值是一種標準RGB色彩空間的顏色，可通過以下三種型別進行定義：
- 色彩關鍵字：是一個不分大小寫的識別符號，如red、blue、black等。
transparent關鍵字表示一個完全透明的顏色。 - RGB模式：就是紅-綠-藍 Red-Green-Blue的簡稱。通過這三種顏色互相疊加組合成各種顏色。
在css中使用RGB色彩模式的方式：- 十六進位制符號：#RRGGBB和#RGB
- #RRGGBB：#後6個十六進位制字元（0-9，A-F）
- #RGB：#後3個十六進位制字元
- #ff0033可簡寫為#f03
- 函式符：
rgb(R,G,B)- R,G,B的值可以用0255或0%100%之間的值
- 這裡的255和100%是一樣的，相對於十六進位制FF
- 色彩關鍵字：是一個不分大小寫的識別符號，如red、blue、black等。
幾種用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>顏色</title>
<style>
#p1{
color: #FFCC33;
background-color: rgb(137,0,137);
}
#p2{
color:#FC3;
}
</style>
</head>
<body>
<p id="p1">轉朱閣,低綺戶,照無眠</p>
<p id="p2">不應有恨，明月長向別時圓</p>
</body>
</html>
- HSL模式：是Hue-Saturation-Lightness 色調-飽和度-亮度的簡稱。是一種將RGB色彩模型中的點在圓柱座標系中的表示法。 CSS3 版本新增用法。
在CSS中用hsl(H,S,L)函式實現：- H表示色調，範圍0~360之間的一個角度。
- S表示飽和度，範圍0%~100%之間的百分百。
- L表示亮度，用百分比表示，0%黑色，50%標準色，100%白色
用法：
<head>
<style>
.test{
background-color: hsl(99, 66%, 30%);
}
</style>
</head>
<body>
<p class="test">你在這裡不要走動，我去給你買幾個橘子</p>
</body>
- 透明度
- CSS3版本中新增了
opacity屬性用來設定透明度，值介於0~1之間。- 值為0或0.0表示完全透明
- 值為0.5表示半透明
- 值為1或1.0表示不透明
- CSS3版本中新增了
用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>顏色</title>
<style>
#op1{
opacity: 1;
}
#op2{
opacity: 0.7;
}
#op3{
opacity: 0.5;
}
</style>
</head>
<body>
<p id="op1">老夫從未見過如此厚顏無恥之人</p>
<p id="op2">ohhhhhhhhhhh</p>
<p id="op3">李斯拉里人呀</p>
</body>
</html>
-
可以結合RGB模式和HSL模式使用
RGB模式增加了
rgba(R,G,B,A)，A表示透明度HSL增加了
hsl(H,S,L,A)，A表示透明度 -
顏色模式
四種顏色模式：
- CSS2 版本的是
rgb()函式 - CSS3 新增加了
rgba()、hsl()和hsla()函式。
- CSS2 版本的是
二. 單位
- 相關概念
- 值：
#op3{
background-color: red;
}
background-color是屬性 red是設定的值
-
單位：描述長度值時附加單位。
CSS中有兩種不同的長度單位：絕對長度單位
長度是固定的、不變化，常見絕對長度單位如下
| 單位 | 名稱 | 等價換算 |
|---|---|---|
cm | 釐米 | 1cm = 96px/2.54 |
mm | 毫米 | 1mm = 1/10th of 1cm |
Q | 四分之一毫米 | 1Q = 1/40th of 1cm |
in | 英寸 | 1in = 2.54cm = 96px |
pc | 十二點活字 | 1pc = 1/16th of 1in |
pt | 點 | 1pt = 1/72th of 1in |
px | 畫素 | 1px = 1/96th of 1in |
- 相對長度單位
- 一般有明確的參照物，比絕對長度單位更適用於複雜的螢幕輸出
| 單位 | 相對於 |
|---|---|
em | 父元素的字型大小 |
ex | 字元“x”的高度 |
ch | 數字“0”的寬度 |
rem | 根元素的字型大小 |
lh | 元素的line-height |
vw | 視窗寬度的1% |
vh | 視窗高度的1% |
vmin | 視窗較小尺寸的1% |
vmax | 檢視大尺寸的1% |
- 畫素值(px)
是構成圖片的最小單元，畫素(px)是絕對單位，顯示器的（PPI）一般都是由物理元件決定的 - 百分比(%)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百分比</title>
<style>
.parent{
width: 400px;
height: 200px;
border: 3px solid burlywood;
}
#child1{
width: 40%;
height: 100px;
background-color: aqua;
}
#child2{
width: 80%;
height: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="parent">
<div id="child1"></div>
<div id="child2"></div>
</div>
</body>
</html>
- em和rem
- em：是相對於當前 HTML元素的父級元素來進行設定。
- rem：是相對於當前 HTML根元素（
<html>）來進行設定。
上述 2 種單位都具有如下 3 種情況：
- 小於 1 時：表示相對於父級元素或根元素縮小。例如 0.5em 表示是父級元素的 0.5 倍，0.5rem 表示是根元素的 0.5 倍。
- 等於 1 時：表示與父級元素或根元素的大小保持一致。
- 大於 1 時：表示相對於父級元素或根元素放大。例如 1.5em 表示是父級元素的 1.5 倍，1.5rem 表示是根元素的 1.5 倍。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>em AND rem</title>
<style>
html{
font-size: 18px;
}
.ems li{
font-size: 1.3em;
}
.rems li{
font-size: 1.3rem;
}
</style>
</head>
<body>
<ul class="ems">
<li>One</li>
<li>Tow</li>
<li>三
<ul>
<li>3-11111</li>
<li>3-22222
<ul>
<li>3-22222-11111</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="rems">
<li>One</li>
<li>Tow</li>
<li>三
<ul>
<li>3-11111</li>
<li>3-22222
<ul>
<li>3-22222-11111</li>
<li>1111111111111</li>
<li>1111111111</li>
</ul>
<li>1111111111111111</li>
</li>
</ul>
</li>
</ul>
</body>
</html>
三. 結構化元素
-
相關概念
-
結構化元素就是指HTML元素中具有明確含義和作用的元素，例如
<p>元素表示段落
如下列表所示展示了部分 HTML 4.01 版本的結構化元素：- 標題元素（
<h1>~<h6>） - 段落元素（
<p>） - 粗體元素（
<b>） - 斜體元素（
<i>） - 上標元素（
<sup>）與下標元素（<sub>） - 換行符（
<br>） - 水平線元素（
<hr>）
- 標題元素（
-
如下列表所示展示了部分 HTML5 版本新增的結構化元素：
<article>元素<section>元素<nav>元素<aside>元素<header>元素<main>元素<footer>元素
-
-
標題元素：
<h1>這是標題一</h1>
<h2>這是標題二</h2>
<h3>這是標題三</h3>
<h4>這是標題四</h4>
<h5>這是標題五</h5>
<h6>這是標題六</h6>
- 段落元素
<p>：
可用margin取消行間距，如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>結構化元素</title>
<style>
p{
margin: 0;
}
</style>
</head>
<body>
<p>我是一個段落.</p>
<p>巧了我也是一個段落.</p>
</body>
</html>
- 粗體元素
<b>：
讓文字顯示粗體更好的方式用CSS的font-weight屬性設定為bold,如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>結構化元素</title>
<style>
p{
margin: 0;
}
#p1{
font-weight: bold;
}
</style>
</head>
<body>
<p>我是一個段落.</p>
<p>巧了我也是一個段落.</p>
<p><b>我</b>比你們<b>粗</b></p>
<p id="p1">上面的，我比你更粗的均勻</p>
</body>
</html>
- 傾斜元素
<i>：
就是斜體
<p><i>我是歪的</i></p>
- 上標
<sup>與下標<sub>：
<sup> 上標元素元素顯示更高更小。
<sub> 下標元素元素顯示更低更小。
用法：
<p>我<sup>上</sup>來了</p>
<p>我<sub>下</sub>去了</p>
- 換行符
<br>：
<p>我斷了<br>一半掉下去了</p>
- 水平線
<hr>:
表示段落元素之間的主題轉換
<p>我下面有道線</p>
<hr>
四. HTML5 版本的結構化元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>結構化元素</title>
<style>
p{
margin: 0;
}
#p1{
font-weight: bold;
}
aside{
width: 28%;
padding-left: .5rem;
margin-left: .5rem;
float: right;
box-shadow: inset 5px 0 5px -5px #666666;
color: royalblue;
}
</style>
</head>
<body>
<h1>標題一</h1>
<h2>標題二</h2>
<h3>標題三</h3>
<h4>標題四</h4>
<h5>標題五</h5>
<h6>標題六</h6>
<p>我是一個段落.</p>
<p>巧了我也是一個段落.</p>
<p><b>我</b>比你們<b>粗</b></p>
<p id="p1">上面的，我比你更粗的均勻</p>
<p><i>我是歪的</i></p>
<p>我<sup>上</sup>來了</p>
<p>我<sub>下</sub>去了</p>
<p>我斷了<br>一半掉下去了</p>
<p>我下面有道線</p>
<hr>
<article>
<h1>ni hao</h1>
<p>我是article元素，我定義HTML頁面中的可獨立分配或可複用結構<small>例如論壇的帖子、新聞網站的文章等</small></p>
</article>
<section>
<h1>HI I Am section</h1>
<p>我也是獨立部分</p>
<article>
<p>我是子部分</p>
</article>
<article>
<p>我是下面的</p>
</article>
</section>
<nav>
<ul>
<li><p>我是nav，我用來定義導航連結。比如選單，目錄，索引</p></li>
<li><a href="#">計算機網路基礎</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">程式設計藝術</a></li>
</ul>
</nav>
<aside>
俺是aside，我是獨立於你們的存在，我不受你們影響。 我來當側邊欄。
</aside>
<header>
<h2>
我是header，我來定義引導和導航內容。 如logo、搜尋框
</h2>
</header>
<main>
<h2>我是main</h2>
<p>我用來定義主要內容</p>
<p>一個頁面只能有一個我，不能出現在article>元素、aside元素、nav元素、header元素和footer元素的內部</p>
<main>
<footer>
<ul>
<li>footer定義一個章節內容或根元素的頁尾</li>
<li>一個頁尾通常包含該章節作者、版權資料或文件相關連結等資訊</li>
</ul>
</footer>
</body>
</html>
text-size屬性
- 設定陰影，可以設定多個，之間用逗號隔開。 有四個值:顏色 水平位置 垂直位置 陰影範圍 顏色可以放最後，陰影範圍可以不設。
- 例如：
<head>
<style>
.h{
font-size: 56px;
text-shadow: 0 1px #808d93,
-1px 0 #cdd2d5,
-1px 2px #808d93,
-2px 1px #cdd2d5,
-2px 3px #808d93,
-3px 2px #cdd2d5,
-3px 4px #808d93,
-4px 3px #cdd2d5,
-4px 5px #808d93,
-5px 4px #cdd2d5,
-5px 6px #808d93,
-6px 5px #cdd2d5,
-6px 7px #808d93,
-7px 6px #cdd2d5,
-7px 8px #808d93,
-8px 7px #cdd2d5;
}
.r{
font-size: 46px;
text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -30px 35px #ec760c,
-20px -40px 40px #cd4606,
0 -50px 65px #973716,
10px -70px 70px #451b0e;
}
</style>
</head>
<body>
<p class="h">惑也，終不解矣。</p>
<p class="r">野火燒不盡，春風吹又生</p>
</body>
效果：
字型測試示例
最終效果：
- 分析：由一個HTML頁面、一個CSS檔案、一個JS檔案組成
-
- HTML頁面：主體由一個表單和多個巢狀div組成，div中有單選按鈕組，用link外聯CSS檔案
部分結構：
段落
表單 action="createShorHand()"
標籤1 class="cf"
子標籤1 class="setPropCont"
單選按鈕 name="font_family"
單選按鈕
單選按鈕
單選按鈕 同上
子標籤2 class="setPropCont"
單選按鈕 name="font_family"
單選按鈕
單選按鈕 同上
標籤2 class="cf"
子標籤2-1 class="propInputCont"
單選按鈕 class="curCss"
標籤3 class="fontShortHand"
-
CSS檔案：
主要用到的屬性：-
float：left;左浮動 -
text-align：center;文字居中 -
margin-right:設定右側外邊間距 -
margin-bottom:設定下外邊間距 -
border-bottom：設定下邊框
-
display: table; 設定顯示型別
-
clear：both；清除浮動z -
height:高 -
width:寬
-
-
JS檔案：
-
var:宣告變數
-
getElementsByClassName：根據 class 屬性值獲取一組元素節點物件
-
document:為對網頁內部文件的操作，它基本上所有的東西都可以操作，一般用來操作一些標籤
-
getElementById: 返回指定 ID 的元素
-
getElementsByTagName:返回帶有指定標籤名的物件的集合
-
appendChild: 向當前節點的子節點列表的末尾新增新的子節點
-
var textAreas = document.getElementsByClassName("curCss"),
shortText = "",
getCheckedValue,
setCss,
getProperties,
injectCss;
getProperties = function () {
shortText =
getCheckedValue("font_style") + " " +
getCheckedValue("font_variant") + " " +
getCheckedValue("font_weight") + " " +
getCheckedValue("font_size") +
getCheckedValue("line_height") + " " +
getCheckedValue("font_family");
return shortText;
}
getCheckedValue = function(radio_name){
oRadio = document.forms[0].elements[radio_name];
for(var i = 0; i < oRadio.length; i++){
if(oRadio[i].checked){
var propInput ="input_" + radio_name,
curElemName = "input_" + radio_name,
curElem = document.getElementById(curElemName);
curElem.value = oRadio[i].value;
return oRadio[i].value;
}
}
}
setCss = function(){
getProperties();
injectCss(shortText);
}
injectCss = function(cssFragment){
old = document.body.getElementsByTagName("style");
if(old.length > 1){
old[1].parentElement.removeChild(old[1]);
}
css = document.createElement("style");
css.innerHTML = ".fontShortHand{font: " + cssFragment + "}";
document.body.appendChild(css);
}
setCss();
偽類選擇器
一. 動態偽類選擇器
- 可以劃分為連結中錨點的偽類選擇器和使用者行為的偽類選擇器，如下：
| 偽類選擇器 | 型別 | 描述 |
|---|---|---|
e:link | 連結錨點偽類選擇器 | 匹配的 e 元素，定義了超連結並且未被訪問過 |
e:visited | 連結錨點偽類選擇器 | 匹配的 e 元素，定義了超連結並且已被訪問過 |
e:active | 使用者行為偽類選擇器 | 匹配的 e 元素，定義了超連結並且被啟用 |
e:hover | 使用者行為偽類選擇器 | 匹配的e元素，定義了超連結並且使用者滑鼠懸停在連結文字內容上 |
e:focus | 使用者行為偽類選擇器 | 匹配的 e 元素，定義了超連結並且獲得焦點 |
- 在
<a>元素應用如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>連結</title>
<style>
a:link{
color: aqua;
}
a:visited{
color: red;
}
a:active{
color: black;
}
a:hover{
color: fuchsia;
}
a:focus{
color: orange;
}
</style>
</head>
<body>
<a target="_blank" href="www.baidu.com">百度度度度度度度度度度度度度度</a>
<a href="#">我是一個空連結</a>
<a href="www.baidu.com">百度</a>
<a target="_blank" href="#">ooooooooooo</a>
</body>
</html>
- 其他元素也可以使用動態偽類選擇器，如:
<button>按鈕配合：hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>連結</title>
<style>
button:hover{
color: aqua;
background-color: blue;
}
</style>
</head>
<body>
<div>
<button>一個按鈕</button>
</div>
</body>
</html>
注意：在觸控式螢幕上 :hover 基本不可用。不同的瀏覽器上:hover 偽類表現不同。
二. 目標偽類選擇器
- 指的是CSS中的
:target偽類選擇器，該偽類選擇器用來設定<a>元素錨點功能中的目標元素的樣式。
用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>目標偽類選擇器</title>
<style>
p:target{
background-color:aqua;
}
p:target::before{
font: 70% sans-serif;
content: ">";
color: blanchedalmond;
margin-right: .25em;
}
p:target i{
color: red;
}
</style>
</head>
<body>
<h3>The Change is Every</h3>
<ol>
<li><a href="#p1">aaaaaaaaaaaaaaaaaaaaaaa</a></li>
<li><a href="#p1">bbbbbbbbbbbbbbbbbbbbbbb</a></li>
<li><a href="#nowhere">ccccccccccccccccccccccccccccccc
cccccccccccccccccccccccccccccccc</a></li>
</ol>
<h3>I Am fever</h3>
<p id="p1">you jump,i don't jump</p>
<p id="p2">oh my god</p>
</body>
</html>
相關文章
- html 顏色選擇器 親測，很好用HTML
- Color UI for Mac(顏色選擇器)UIMac
- 如何快速實現一個顏色選擇器
- HTML 顏色HTML
- 小程式，選擇顏色，去水印
- html點選<a>元素後顏色的變換HTML
- HTML常用選擇器HTML
- HTML <meter> 顏色規則HTML
- Web應用課 第二講 CSS定義方式、選擇器、顏色WebCSS
- VSCode 程式碼沒有顏色-選擇語言模式VSCode模式
- day42:HTML標籤和CSS選擇器HTMLCSS
- 從零開始實現一個顏色選擇器（原生JavaScript實現）JavaScript
- html和css選擇器使用HTMLCSS
- 短視訊平臺原始碼，選擇顏色flutter_colorpicker原始碼Flutter
- HTML表單及CSS選擇器、偽類和偽元素HTMLCSS
- 設定toast的字型顏色和背景顏色AST
- HTML中CSS引用：選擇器的使用HTMLCSS
- 微軟Chromium版Edge新特性：支援Win10現代顏色選擇器/印表機微軟Win10
- 網站設計如何合理地選擇顏色與圖片？網站
- HTML-CSS顏色樣式(推薦)HTMLCSS
- 選中按鈕改變文字大小和顏色
- CSS3新特性（樣式、選擇器、顏色漸變、2D3D、動畫）CSSS33D動畫
- Win10系統怎麼更改半透明選擇框矩形顏色Win10
- 「Adobe國際認證」Adobe Photoshop，選擇影像中的顏色範圍
- HTML DOM querySelectorAll() 代替 jquery的 $('') CSS選擇器HTMLjQueryCSS
- 002---選擇器（標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器）字元
- jQuery選擇器介紹：基本選擇器、層次選擇器、過濾選擇器、表單選擇器jQuery
- 如何選擇美顏SDK介面？
- 【譯】你不知道的 Chrome 除錯工具技巧 第八天：Color picker（顏色選擇器）Chrome除錯
- CSS設定選中網頁文字時的背景和顏色CSS網頁
- Kubernetes – 標籤和選擇器
- 相鄰兄弟選擇器、後代選擇器和子選擇器三者有什麼區別？
- echars legend未選中、點選後的顏色修改
- HTML input color 拾色器HTML
- JavaScript 十六進位制顏色和RGB顏色值的相互轉換JavaScript
- [SVG]修改固定顏色為填充顏色SVG
- CSS3新增選擇器（屬性選擇器、結構偽類選擇器、偽元素選擇器）CSSS3
- jQuery選擇器之層次選擇器jQuery