CSS基本概念和颜色

来源：互联网发布：手机淘宝怎么天猫客服编辑：程序博客网时间：2024/06/01 10:42

CSS基础知识

1.1基本概念

CSS 指层叠样式表（cascading stylesheets）

为什么需要CSS：

HTML 描述了要呈现的内容，而CSS 则定义了这些内容的形式，比如字体、颜色等。使用CSS能够将页面内容和呈现形式有效分离，有利于分工合作，也有利于快速更换不同的呈现形式。

样式表的使用有三种方式：内联样式、内部样式、外部样式

（1）使用内联样式

将样式定义到 style 属性中，一次只能定义当前页面的当前标签，内容和呈现形式高度耦合，维护困难，不利于fengonghe

<p style="font-size: 24px; color:green"> 内联样式的演示</p>

（2）内部样式

在<head>标签中通过<style>标签来定义一次定义只能在当前页面运行，内容和表现形式的耦合程度降低了。但还都是在同一个html文件里面，并没有实现完全分离
定义的样式只能运用于当前的这个页面。

<head> <metacharset="utf-8"> <title>Title</title> <style> p{给了 font-size:36px; color:red; } </style></head><body>内部样式的演示1内部样式的演示2</body>

（3）外部样式表

首先定义一个样式表文件（.css）

p{
font-size:36px;
color:blue;
}

link：是用于链接css样式文件到需要它的html文件中的，内容和呈现形式彻底分离，有利于分工合作及维护，可在多个html文件中引用。

<head>
 <metacharset="utf-8">
 <title>Title</title>
 <link rel="stylesheet"type="text/css"href="css/E102-01-02.css">
</head>
<body>

1.2颜色

颜色的样式是无穷的，但是计算机只能表示有限的信息。

最基本的颜色：

所有的颜色都可以通过红色（red）绿色（green）蓝色（blue）三种颜色调配而成。这三种颜色俗称三原色。

CSS中用8位表示一个颜色，那么可以表示 2的8次方种颜色，既256种颜色，所以总共可以表示256*256*256种颜色（真彩色）。

CSS中有六种颜色表示形式：

（1）十六进制形势：#ff0000;

十六进制颜色表示形式

（2） RGB形式：RGB(1255,0,0);

<pstyle="color:RGB(255,0,0);">RGB颜色表示形式

（3） RGBA形式：（255,0,0,0.5）在GRB的基础上增加了透明度分量（Alpha），分量的取值范围为0-1.0。

<pstyle="color:RGBA(255,0,0,0.5);">RGBA颜色表示形式

（4） HSL形式：用另外三个分量来表示：色调、饱和度和明度。饱和度和明度在css中取值范围在0~1之间。

<pstyle="color:HSL(120,50%,50%)">HSL颜色表示形式

颜色也可以有另外三个分量来表示，既色调、饱和度和明度。饱和度和明度在css中取值范围在0~1之间。

（5） HSLA形式：在HSL基础上增加了透明度分量（Alpha），分量的取值范围为0~1之间。

<pstyle="color:HSLA(120,50%,50%,0.4)">HSLA颜色表示形式

（6）预定义颜色

预定义颜色表示形式

CSS提供了一些常用的预定义颜色，比如red，blue等。

阅读全文

1 0