【HTML】颜色和选择器

颜色与单位

一.颜色

  • 相关的概念
  1. 色调:指图像的相对明暗程度,也称色相。 通俗来说就是颜色。
  2. 饱和度:指色彩的鲜艳程度,也称色彩的纯度或彩度。是颜色中灰色的含量。饱和最大灰色为零
  3. 亮度:指色彩的明暗差异,也称色彩明度。是颜色中黑色的含量。亮度最大黑色为零
    饱和度、亮度和色调是色彩的三要素
  4. 对比度:前景色与背景色之间的差异。差异越大,对比度越大。
  5. 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色彩空间的颜色,可通过以下三种类型进行定义:
    1. 色彩关键字:是一个不分大小写的标识符,如red、blue、black等。
      transparent关键字表示一个完全透明的颜色。
    2. RGB模式:就是红-绿-蓝 Red-Green-Blue的简称。通过这三种颜色互相叠加组合成各种颜色。
      css中使用RGB色彩模式的方式:
      • 十六进制符号:#RRGGBB和#RGB
      • #RRGGBB:#后6个十六进制字符(0-9,A-F)
      • #RGB:#后3个十六进制字符
      • #ff0033可简写为#f03
    3. 函数符:rgb(R,G,B)
      • R,G,B的值可以用0255或0%100%之间的值
      • 这里的255和100%是一样的,相对于十六进制FF

几种用法:

<!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>
  1. 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表示不透明

用法:

<!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() 函数。

二. 单位

  • 相关概念
  1. 值:
#op3{
        background-color: red;
    }
   
background-color是属性    red是设定的值
  1. 单位:描述长度值时附加单位。
    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
pt1pt = 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>

效果:

捕获.JPG

字体测试示例

最终效果:

捕获.JPG

  • 分析:由一个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>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页