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

css颜色的表现形式 em vw vh px

6个月前 (05-23)66

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

标签: css

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

CSS3 如何实现标签宽度按权等分

类似于导航栏类的标签通常会涉及到宽度等分的问题,一些比较好等分的类似四个五个六个这样的按百分比为单位就可以的,但是遇到三等分七等分这种的用百分比就很...

bootstrap学习总结-css组件(三)

bootstrap学习总结-css组件(三)

   今天我们来看看css组件效果以及其中比较重要的类,这些类都不难,关键要熟练掌握,搭配使用,灵活运用。关于前两篇中,css样式和布局的文章,大家可以在首页进行阅读...

CSS Reset(样式重置)

CSS Reset,意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值,通常为了避免重复定义元素样式,需要进行重置默认样式(...

html用css修改了img标签位置,css怎么设置图片位置?

html用css修改了img标签位置,css怎么设置图片位置?

在HTML中,显示图片的方式有两种:img图片和背景(background)图片。那么在HTML中怎么使用css设置图片位置?下面本篇文章就来给大家介绍使用CSS设...

css设置表单背景颜色为透明色

1. 用background-color的值rgba(R, G, B, A)来设置。 2. R、G、B分别代表红绿蓝三种颜色。 3. A代表透明度,...

CSS从大图中抠取小图完整教程(background-position应用)

CSS从大图中抠取小图完整教程(background-position应用)

       相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象:网页中很多图片素材被合成在一张图片上。  ...

css实现图片背景颜色变灰变白

css实现图片背景颜色变灰变白

黄色图片为原图 1、下图是图片变为灰色 下图是图片变为白色 css代码实现 /*优惠券图片变为灰色 */ .change{...

html设置背景颜色宽度,如何设置div的背景色和高度 CSS示例代码

html设置背景颜色宽度,如何设置div的背景色和高度 CSS示例代码

对DIV设置背景色同时设置宽度和高度CSS样式,当然DIV的背景色、DIV宽度、DIV高度是不同的CSS样式属性代码。 一、三个样式CSS单词: b...

CSS3——颜色

一、颜色模式 随着CSS和浏览器的技术发展,CSS可以支持更多的颜色模式,包括在RGB颜色模式基础上增加透明度通道的RGBA模式和HSLA颜色...

使用 CSS 轻松实现一些高频出现的奇形怪状按钮

使用 CSS 轻松实现一些高频出现的奇形怪状按钮

背景 在群里会有同学问相关的问题,怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢? 本文基于一些高频出现在设计稿中的,使用 CSS 实现稍微有点难度和...