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

最新推荐文章于 2024-10-08 21:31:55 发布

我是包不同

最新推荐文章于 2024-10-08 21:31:55 发布

阅读量567

点赞数

分类专栏：网站设计文章标签： css

本文链接：https://blog.csdn.net/x879014419/article/details/106113813

版权

24 篇文章 0 订阅

订阅专栏

一、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 是指层叠样式表，定义如何显示 HTML 元素，样式的定义通常存储在样式表文件中，独立于HTML文件。

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

在这里插入图片描述

（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 是色盘上的度数（从 0 到 360） - 0 (或 360) 是红色，120 是绿色，240 是蓝色。

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

Lightness 同样是百分比值；0% 是黑色，100% 是白色。

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

单位	描述
%	百分比
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>