网页设计之CSS实战(1) --- HTML样式及CSS基础

一、HTML 元素的样式定义:

(1)浏览器缺省设置
也就是什么也不指定,就用缺省设置。如:

<text> hello world<text>

(2)外部样式表
存放在一个特定的CSS文件中,然后在html中引用这个文件。如:

<head>
	<link rel="stylesheet" type="text/css" href="index.css" />
</head>

(3)内部样式表(位于 标签内部)

<head>
	<style type="text/css">
		img
		{
			position:absolute;
			bottom:5%
		}
	</style>
</head>

(4)内联样式(在 HTML 元素内部)

<html>
	<body>
		<p style="color:red; text-indent:5em;"> hello wolrd</p>
	</body>
</html>

二、CSS

1、CSS 概述

CSS 是指层叠样式表,定义如何显示 HTML 元素,样式的定义通常存储在样式表文件中,独立于HTML文件。

2、CSS 语法

CSS 样式定义由两个主要的部分构成:选择器以及一条或多条样式。选择器就是HTML中元素的标签或ID或class, 以此来指定该样式适用于哪个或哪些HTML元素。如下图所示:

在这里插入图片描述

3、颜色值的表示方法

(1)文字表示法:
Black:黑色
Blue:蓝色
Pink:粉红色
Red:红色
White:白色
Yellow:黄色
Green:绿色
Gray:灰色
Violet:紫色

(2)十六进制表示法:
#RRGGBB:其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
如:
灰色:Gray #808080
白色:White #FFFFFF
黑色:Black #000000

(3)RGB 表示法
rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。

p
{
	background-color:rgb(255,0,0);
	color:rgb(0,0,100%);
}

(4)RGBA 表示法
RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。RGBA 颜色值的规定:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

p
{
	background-color:rgba(255,0,0,0.5);
}

(5)HSL 表示法
HSL 指的是 hue(色调)、saturation(饱和度)、lightness(亮度) - 表示颜色柱面座标表示法。
HSL 颜色值:hsl(hue, saturation, lightness)。

  • Hue

Hue 是色盘上的度数(从 0 到 360) - 0 (或 360) 是红色,120 是绿色,240 是蓝色。

  • Saturation

Saturation 是百分比值;0% 意味着灰色,而 100% 是全彩。

  • Lightness

Lightness 同样是百分比值;0% 是黑色,100% 是白色。

p
{
	background-color:hsl(120,65%,75%);
}

4、距离或大小(尺寸)的表示单位

单位 描述
% 百分比
in 英寸
cm 厘米
mm 毫米
ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt 磅 (1 pt 等于 1/72 英寸)
pc 12 点活字 (1 pc 等于 12 点)
px 像素 (计算机屏幕上的一个点)
em 1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。
<html>
	<body>
		<p style="max-width:40px">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
		</p>	
	</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章