CSS基础颜色详解文本属性

来源：互联网发布：数据库的四个基本概念编辑：程序博客网时间：2024/05/20 11:25

CSS基础

概念：层叠样式表

HTML定义内容，css定义呈现形式。

使用CSS的优势在于：

将内容呈现形式有效分类，利于分工合作。

利于更换不同的呈现形式。

实现了页面内容和表现形式的分离。

样式表的三种表现形式：

内联样式：就是使用在原处直接定一样式，内容和表现形式高度耦合。

弊端：不利于分工合作，延长设计周期。

维护困难。

只能应用于当前标签。

内部样式：写在<head>标签中，通过style标签定义。

内容和表现形式降低了耦合程度，但都是在html中，没有实现完全分离。

定义的样式只能应用于当前页面，重复利用率低。

外部样式表：首先定义一个样式表文件（.css）,利用<Link>标签使之引入HTML中。

外部样式表是内容和表现形式完全分离，有利于分工合作及后期的维护，可以在多个HTML文件中使用，重复利用率高。

颜色：自然界色彩丰富多彩，但计算机只能表现有限的颜色种类，因此需要将连续的量转化为离散的量。css中用8位表示一个颜色，即2的8次方种颜色，即256种颜色，总共为256*256*256，共16777216.

css颜色表示形式：

十六进制形式：通常由1~9，a~f，混合搭配表示形成，例：#ff88888

dddddddddddddddd

RGB颜色;

形式：RGB(128,0，0)

RGBA颜色：

在RGB颜色的基础上增加了透明度分量，该分量的取值范围为0~1，表示完全透明和完全不透明。

CSS基础

概念：层叠样式表

HTML定义内容，css定义呈现形式。

使用CSS的优势在于：

将内容呈现形式有效分类，利于分工合作。

利于更换不同的呈现形式。

实现了页面内容和表现形式的分离。

样式表的三种表现形式：

内联样式：就是使用在原处直接定一样式，内容和表现形式高度耦合。

弊端：不利于分工合作，延长设计周期。

维护困难。

只能应用于当前标签。

内部样式：写在<head>标签中，通过style标签定义。

内容和表现形式降低了耦合程度，但都是在html中，没有实现完全分离。

定义的样式只能应用于当前页面，重复利用率低。

外部样式表：首先定义一个样式表文件（.css）,利用<Link>标签使之引入HTML中。

外部样式表是内容和表现形式完全分离，有利于分工合作及后期的维护，可以在多个HTML文件中使用，重复利用率高。

css颜色表示形式：

十六进制形式：通常由1~9，a~f，混合搭配表示形成，例：#ff88888

dddddddddddddddd

RGB颜色;

形式：RGB(128,0，0)

RGBA颜色：

在RGB颜色的基础上增加了透明度分量，该分量的取值范围为0~1，表示完全透明和完全不透明。

5.HSL颜色

颜色可以有另外三个分量表示，即色调

HSL

HSLA颜色

在HSL的颜色基础上增加了Alpha分量

预定义颜色

即在color后面直接用各颜色的英文名称调用颜色分类。

尺寸：

尺寸分为相对尺寸和绝对尺寸

相对尺寸有：

cm、mm、in（尺寸）、px（像素）

相对尺寸有：

em：相对于当前对象内文本的字体尺寸。

vw:视窗宽度，一般用百分比。

vh：视窗高度，一般用百分比。

字体相关属性：

font-family：字体名称

font-size：字体大小

font-style

font-variant

font-weight

其实这些，可以简写，使界面更加简洁化，不过有一定的顺序结构：font-style font-variant font-weight font-size font-family

前三个可以缺写，使用默认值，后三个必须制定相应的值。

文本属性主要包括颜色、对齐方式、修饰效果等。
Color：设置文本的颜色
Text-decoration：
None：默认值，没有装饰效果
Underline;加下划线
Overline：加上划线
Line-through：加删除线
Text-shadow:加阴影，其水平方向上移动5px，垂直方向上上移5px。
text-shadow:red -5px -5px;

Direction：文本方向
Ltr：从左向右
Rtl：从右向左
Text-align：文本对齐方式
Left：左对齐
Right：右对齐
Center;居中对齐
Justify：两端对齐
Vertical-align：文本垂直对齐方式
Top：靠上对齐
Bottom：靠下对齐
Middle垂直居中对齐
Text-indent：文本缩进
Letter-spacing：字符之间的间距
Word-spacing：字（单词）间距
line-height：设置行高，实际上是调整行间距。

阅读全文

0 0

CSS基础 颜色详解 文本属性

CSS基础颜色详解文本属性