css颜色的表现形式 em vw vh px
1.1 css基本概念:
Css层叠样式表
Html描述了呈现的内容,而css则定义了这些内容的呈现样式,比如字体的颜色、大小,使用css能够使页面的内容和呈现方式有效分离,有助于分工合作,也有利于快速切换不同的呈现形式。
使用样式表有三种:
内联样式:
<p style="font-family: 黑体;font-size: 20px;color: blue" >内联样式的演示</p>
将样式定义在style属性中,内容和表现形式高度耦合。维护起来困难,不利于分工合作。只能应用当前标签内。
内部样式
1. <style> p { color: red; }</style>
在<head>标签中通过<style>标签来定义,内容和表现形式耦合程度降低,并没有完全分离,定义的样式只能应用在当前页面。
外部样式表
首先定义一个样式表文件css。
p{ font-size: 30px ; color: blue;}
css中也可以使用注释,形式/*.....*/
然后在需要使用这些样式的HTML文件引入该样式表文件。
<head lang="en"> <meta charset="UTF-8"> <title>css样式</title><link rel="stylesheet" type="text/css" href="7.11.css"></head>
外部样式表使得内容和形式彻底分离,有力于分工合作及维护,可在多个html中应用。
1.2颜色
光的三基色(三原色):红、绿、蓝、
Css中用8为表示一个颜色,那么可以表示2的8次方中颜色,及256中颜色,所以有256*256*256
Css中有多种颜色表示形式。
十六进制颜色:
<p style="color: #800000">内部样式的演示4</p>
RGBA颜色
<p style="color:RGBA(255,0,0,0.5)">内部样式的演示1</p>
A代表透明图,1位完全不透明。
RGB颜色<p style="color: RGB(255.0.0)">内部样式的演示3</p>
HSL颜色
颜色也可以由另外三个分量及:色调,饱和度,明度。
HSLA颜色
颜色也可以由另外三个分量及:色调,饱和度,明度。A代表透明图,1位完全不透明。
预定义颜色
提供一些常用的颜色:
<p style="color: black">3333</p>
1.3尺寸单位
CM:厘米
Mm毫米
In英寸
Px像素绝对单位
%百分比相对单位
em有如下特点:
EM是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内字体尺寸没被人设置,则相对于浏览器的默认字体尺寸。
Vw
1vw等于视口宽度(viewport width)的百分之一,也就是说100vw就是视口的宽度。
Vh
1vh等于视口高度(viewport height)的百分之一。
vw和vh是相对于视口(viewport,也可以叫做视区、视界或可视范围)的宽度和高度。由于现在移动设备(主要是手机)的屏幕尺寸千差万别,如果仍然根据屏幕的物理分辨率来设计网页,效果会很难统一,因此html5和css3引入视口的概念来代替显示器的物理尺寸。通过在meta标签上的设置,视口的长宽可以跟设备的物理分辨率相等,也可以不相等(以便手机上可以实现用两个手指来放大会缩小页面),可根据需要灵活掌握。在PC中,视口的长宽则是跟浏览器窗口的物理分辨率恒等的。作者:燃烧岁月-------
来源链接:https://blog.csdn.net/yangwenlongsss/article/details/75003559
版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。
2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。