【HTML】颜色和选择器
2024-04-12 15:38:51
颜色与单位
一.颜色
- 相关的概念
- 色调：指图像的相对明暗程度，也称色相。 通俗来说就是颜色。
- 饱和度：指色彩的鲜艳程度，也称色彩的纯度或彩度。是颜色中灰色的含量。饱和最大灰色为零
- 亮度：指色彩的明暗差异，也称色彩明度。是颜色中黑色的含量。亮度最大黑色为零
饱和度、亮度和色调是色彩的三要素 - 对比度：前景色与背景色之间的差异。差异越大，对比度越大。
- 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；清除浮动zheight:高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">ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</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】颜色和选择器相关推荐
- 色带（8种颜色）选择器
8颜色色带选择器,效果如下图 export let colorRampList = [{id: 'colorRamp-1',colorRamp: ['#00939C', '#65B3BA', '#A2 ...
- TextView文本颜色状态选择器
ImageView状态选择器 一般情况下,我们为ImageView设置一个状态选择器,实现点击控件改变其背景图片: 如: <ImageView android:id="@+id/nav ...
- html颜色块选择器,ColorPick:网页颜色选择器
ColorPick Eyedropper开发背景 在网页设计当中网页的色彩是个难题,你可能经常会遇到需要取到网页某个部分的颜色,但是单单为了取色而打开ps就太大材小用了.之前我们介绍过一款Chrome ...
- 设置Button的字体颜色状态选择器
以前项目中经常使用的就是Button的状态背景选择器了,但是现在突然遇到一个字体颜色也要改变的需求,按照以前的方法时出现了一些问题,现在就把正确的解决方案写一下 整个需求需要3步来完成 1> 创 ...
- Android之 颜色选择器
一,简介 1.1 计算机的颜色通常有两种表示方式: 光源模式RGB(Red=红, Green=绿, Blue=蓝),数值0-255 印刷模式CMYK(Cyan=青, Magenta=品红, Yello ...
- Android动态实现文字颜色选择器 ColorStateList
在公司做项目的时候设计到了动态设置选择器的内容今天我来写一下关于动态实现选择器的内容: 应为才进公司所以被分配到的是简单的活,修改按钮的字体颜色,也就是实现字体颜色的选择器,因此我先说ColorSta ...
- CSS中的四种样式及选择器
CSS语法 选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素. 属性:属性是指定选择符所具有的属性,它是css的核心,css2共有150多个属性 属性值:属性值包括法定属 ...
- css--css选择器，伪类
前戏 前面我们说过CSS规则由选择器和声明组成,我们要给标签设置属性,那我们就要找到对应的标签,CSS选择器可以帮我们找到我们需要的标签 css选择器有: 标签选择器 类选择器 ID选择器 全局选择器 ...
- css修改select选择框option被选中的背景颜色_这五个有用的 CSS 属性完全被我忽视了...
作者 | Desiré译者 | 苏本如,责编 | 郭芮头图 | CSDN 下载自视觉中国出品 | CSDN(ID:CSDNnews) 以下为译文: 各位网友,大家好!?今天,我想在这里和大家分享一些我 ...
最新文章
- 第十六届智能车竞赛广东线上比赛 - 哈尔滨工业大学（深圳）比赛筹备
- [Openwrt 项目开发笔记]：Samba服务vsFTP服务（四）
- 为什么将 0.1f 改为 0 会使性能降低 10 倍？
- 算一算是一年中的第几天
- Resin3.19 连接池配置
- php怎么解析xml,使用PHP快速解析复杂的XML文件
- C# aspx页面动态加载ascx用户控件 及 利用反射调用其内方法
- 有赞下拉菜单html,有赞vant-ui Tabs、List、PullRefresh组件实践
- 你所不知道的 JavaScript
- 微信发虎年新春贺词领福袋：游戏皮肤、QQ音乐VIP、现金红包等
- 转 android有用代码片段
- 2分钟学会小程序中使用vant组件库
- 精细化运营的用户分层方法论——RFM
- 火柴棍游戏c语言,C语言题目
- 如何解决推荐系统中的冷启动问题？
- H5页面调起关注微信公众号的方法
- 如何将数据导入python
- python——颜文字emoji
- ARM cache 结构与访问方式
- Linux 新手必会的21条命令合集