网页设计之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 英寸)
pc12 点活字 (1 pc 等于 12 点)
px像素 (计算机屏幕上的一个点)
em1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。
<html>
	<body>
		<p style="max-width:40px">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
		</p>	
	</body>
</html>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值