当前位置：首页 > news >正文

【HTML】HTML学习之引入CSS样式表

news 2025/7/8 15:42:24

1、CSS样式规则

选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

2、HTML引入CSS样式表

2.1、行内式

行内式也称为内联样式，是通过标签的style属性来设置元素的样式，其基本语法格式如下:

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

<body>
<h2 style="font-size:20px; color:red;">使用CSS行内式修饰二级标题的字体大小和颜色</h2>
</body>

2.2、内嵌式

内嵌式是将CSS代码集中写在HTML文档的头部标签中，并且用

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用CSS内嵌式</title>
<style type="text/css">
h2{ text-align:center;}                                           /*定义标题标记居中对齐*/
p{ font-size:16px; color:red; text-decoration:underline;}  /*定义段落标记的样式*/
</style>
</head>
<body>
<h2>内嵌式CSS样式</h2>
<p>使用style标记可定义内嵌式CSS样式表，style标记一般位于head头部标记中，title标记之后。</p>
</body>

2.3、外链式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标签将外部样式表文件链接到HTML文档中，其基本语法格式如下:

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用链入式CSS样式表</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h2>链入式CSS样式表</h2>
<p>通过link 标记可以将拓展名为.css的外部样式表文件链接到HTML文档中</p>
</body>

2.4、导入式

导入式针对外部样式表文件。对HTML头部文档应用style标签，并在< style>标签内的开头处使用@import语句，即可导入外部样式表文件。其基本语法格式如下:

<style type="text/css" >
@import url(css文件路径);或 @import "css文件路径";/* 在此还可以存放其他CSS样式*/
</style>

3、CSS基础选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。

3.1、标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标签指定式选择器的应用</title>
<style type="text/css">
p{ color:blue;}
.special{ color:green;}
p.special{ color:red;}    /*标签指定式选择器*/   
</style>
</head>
<body>
<p>普通段落文本（蓝色）</p>
<p class="special">指定了.special类的段落文本（红色）</p>
<h3 class="special">指定了.special类的标题文本（绿色）</h3>
</body>

3.2、类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>类选择器</title>
<style type="text/css">
.red{color:red; }
.green{color:green; }
.font22{font-size:22px; }
p{ text-decoration:underline; font-family:"微软雅黑";}
</style>
</head>
<body>
<h2 class="red">二级标题文本</h2>
<p class="green font22">段落一文本内容</p>
<p class="red font22">段落二文本内容</p>
<p>段落三文本内容</p>
</body>

3.3、id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>id选择器</title>
<style type="text/css">
#bold {font-weight:bold;}
#font24 {font-size:24px;}
</style>
</head>
<body>
<p id="bold">段落1：id="bold"，设置粗体文字。</p>
<p id="font24">段落2：id="font24"，设置字号为24px。</p>
<p id="font24">段落3：id="font24"，设置字号为24px。</p>
<p id="bold font24">段落4：id="bold font24"，同时设置粗体和字号24px。</p>
</body>

3.4、通配符选择器

通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

3.5、练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字Logo</title>
<style type="text/css">
strong{ font-size:100px;}
.blue{color:#2B75F5;}
.red{color:#D33E2A;}
#orange{ color:#FFC609;}
#green{ color:#00A45D;}
</style>
</head>
<body>
<strong class="blue">G</strong>
<strong class="red">o</strong>
<strong id="orange">o</strong>
<strong class="blue">g</strong>
<strong id="green">l</strong>
<strong class="red">e</strong>
</body>
</html>

效果图：
在这里插入图片描述

4、CSS字体样式属性

4.1、font-size：设置字号。

在这里插入图片描述

4.2、font-family：设置字体。

p{ font-family:"微软雅黑";}

4.3、font-weight：定义字体的粗细。

在这里插入图片描述

4.4、font-style：定义字体风格

如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式;
italic：浏览器会显示斜体的字体样式;
oblique：浏览器会显示倾斜的字体样式;
italic与oblique在显示上没有本质区别，italic使用了文字本身的斜体属性，oblique是让，没有斜体属性的文字倾斜。

4.5、font：对字体样式进行综合设置

选择器{font: font-style font-variant font-weight font-size/line-height font-family;}

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>font属性</title>
<style type="text/css">
.one{ font:italic 18px/30px "隶书";}
.two{ font:italic 18px/30px;}
</style>
</head>
<body>
<p class="one">段落1：使用font属性综合设置段落文本的字体风格，字号，行高和字体。</p>
<p class="two">段落2：使用font属性综合设置段落文本的字体风格、字号和行高。由于省略了字体属性font-family，这时font属性不起作用。</p>
</body>

4.6、@font-face

CSS3的新增属性，用于定义服务器字体。通过@font-face属性，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体。

@font-face{font-family:字体名称;src:字体路径;}

5、CSS文本外观属性

5.1、color:定义文本的颜色

其取值方式有如下3种：
①预定义的颜色值，如red，green，blue等。
②十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
③RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

5.2、letter-spacing：定义字间距

所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

5.3、word-spacing：定义英文间距

对中文字符无效。

5.4、line-height：设置行间距

所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。

5.5、text-align：设置水平对齐方式

相当于html中的align对齐属性，其可用属性值如下：
left：左对齐（默认值）
right：右对齐。
center：居中对齐。

5.6、text-transform：大小写转换

其可用属性值如下：
none：不转换（默认值）。
capitalize：首字母大写。
uppercase：全部字符转换为大写。
lowercase：全部字符转换为小写。

5.7、text-decoration：文本装饰

属性用于设置文本的下划线，上划线，删除线等装饰效果。
其可用属性值如下：
none：没有装饰（正常文本默认值）。
underline：下划线。
overline：上划线。
line-through：删除线。

5.8、text-indent：首行缩进

其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

5.9、white-space：空白符处理

其属性值如下：
normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。
pre：预格式化，按文档的书写格式保留空格、空行原样显示。
nowrap：空格空行无效，强制文本不能换行，除非遇到换行标签< br />。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。

5.10、text-shadow：阴影效果

h-shadow用于设置水平阴影的距离，v-shadow用于设置垂直阴影的距离，blur用于设置模糊半径，color用于设置阴影颜色。

5.11、text-overflow：处理溢出文本

clip：修剪溢出文本，不显示省略标签“…”。
ellipsis：用省略标签“…”替代被修剪文本，省略标签插入的位置是最后一个字符。

5.12、word-wrap

用于实现长单词和URL地址的自动换行。
normal：只在允许的断字点换行（浏览器保持默认处理）。
break-word：在长单词或 URL 地址内部进行换。