当前位置: 首页 >前端技术 > css颜色的表现形式 em vw vh px

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),我们将第一时间核实后及时予以删除。





本文链接:https://www.javaclub.cn/front/112822.html

标签:css
分享给朋友:

“css颜色的表现形式 em vw vh px” 的相关文章

HTML常用标签的用法 2022年05月17日 21:01:04
dart语法中list相关详解 2022年05月22日 09:44:25
HTML5 速查列表 2022年06月04日 23:21:45
HTML之框架结构标签的简单使用 2022年06月06日 03:51:52
HTML5 自动聚焦autofocus属性 2022年06月06日 04:30:20
HTML - 标签自定义属性 2022年06月07日 17:28:32
HTML中常见的选择器 的优先级 2022年06月10日 22:52:06