HTML图文混排（css)与网页设计内容整理_html文章排版代码案例-CSDN博客

本文详细介绍了CSS样式的基本规则，包括行内式、内嵌式和链入式等不同引入方式，以及标记选择器、类选择器和id选择器的使用方法。同时，深入解析了字体样式和文本外观属性的设置技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>愚昧的人类啊</title>
		<style type="text/css">
			.red{color:red; }
			.green{color:green; }
			.world{ word-spacing:20px; }
			</style>
	</head>
	<body>
		<img src="hh.jpg" title="我是一只无辜的猫"
		align="left"  alt="我是一只无辜的猫" width="240">
		
		<font size="2" color="#515151">
			<p class="green"> 我不管，我最帅</p><p class="red">
我不管，我最帅</p><p class="green">
我不管，我最帅</p><p class="red">
我不管，我最帅</p><p class="green">
我不管，我最帅</p><p class="red">
我不管，我最帅</p><p class="green">
我不管，我最帅 </p>
		</font>
		<h2 class="world">一只够么？</h2>
	</body>
</html>

运行结果为；
在这里插入图片描述

一 CSS样式规则

选择器{属性 1：属性值1；属性2：属性值2；属性3：属性值3；}
选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的
具体样式。
h2{ font-size： 20px; color:red; }

1 CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将选择器，属性和值都采用小写的方式。

2 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略不写。

3 如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的分号。

4 /* */是CSS中的注释文本，此文本不会显示再浏览器窗口中。

二引入CSS样式表

1 行内式

行内式也称为内联样式，是通过标记的style属性来设置元素的样式，其基本语法格式如下：
<标记名 style=“属性1；属性2；属性3；”>内容</标记>

2 内嵌式

内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义。
其基本语法如下；

<head>
<style type="text/css">
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3;}
<style >
</head>

3 链入式

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过<link/>标记
将外部样式表文件链接到HTML文档中。其基本语法格式如下：

<head>
<link href="css文件的路径" type="text/css" rel="stylesheet" />
<head>

该语法中，<link/>标记需要放在<head>头部标记中，并且必须指定<link.>标记的三个属性

4 导入式

导入式与链入式相同，都是准对外部样式表文件的。对HTML头部文档应用style标记，并
在<style>标记内的开头处使用#@import语句，就行了。基本语法格式如下；

<style type="text/css">
@import url(css 文件路径);或@import "css文件路径";
</style>

CSS 基础选择器

1 标记选择器

标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记
指定统一的CSS样式。
标记名{属性1：属性值1；属性2：属性值2；属性3：属性值 3；}
该语法中所有的HTML标记名都可以作为标记选择器，如body,h1,p,strong等用标记选择器定义的
样式对页面中改类型的所有标记都有效。