颜色与单位
一.颜色
- 相关的概念
- 色调:指图像的相对明暗程度,也称色相。 通俗来说就是颜色。
- 饱和度:指色彩的鲜艳程度,也称色彩的纯度或彩度。是颜色中灰色的含量。饱和最大灰色为零
- 亮度:指色彩的明暗差异,也称色彩明度。是颜色中黑色的含量。亮度最大黑色为零
饱和度、亮度和色调是色彩的三要素 - 对比度:前景色与背景色之间的差异。差异越大,对比度越大。
- 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>