CSS样式引入

原创已于 2023-03-18 17:38:50 修改 · 307 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

HTML

于 2023-03-18 16:13:42 首次发布

本文介绍了CSS样式的四种应用方式：行内式通过style属性设置元素样式；内嵌式将CSS代码写在HTML头部；外链式通过link标签链接外部样式表；导入式使用@import导入外部样式。这些方法各有优缺点，适用于不同的场景。

1、行内式

行内式也称为内联样式，是通过标签的style属性来设置元素的样式

基本语法格式如下：

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

代码举例说明：

<h2 style="color:red;font-size:28px ;">行内式CSS样式</h2>

2、内嵌式

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

基本语法格式如下：

代码举例说明：

<head>
    <style type="text/css">
			div{
				width: 1000px;
				margin: auto;
				text-align: center;
			}
    </style>
</head>

3、外链

外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标签将外部样式表文件链接到HTML文档中

基本语法格式如下：

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

代码举例说明：

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

4、导入时（不常用）

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

基本语法格式如下：

代码举例说明：

<head>	
    <style type="text/css">
		@font-face{
			font-family:jianzhi;      /*服务器字体名称*/
			src:url(https://blog.csdn.net/FZJZJW.TTF);      /*服务器字体名称*/
		}
		p{
			font-family:jianzhi;      /*设置字体样式*/
			font-size:32px;
		}  
	</style>
</head>

标签

#css #前端 #html