前端学习——html样式定义、CSS文件与HTML文件-CSDN博客

本文链接：https://blog.csdn.net/Wby_Nju/article/details/104095691

本文介绍了前端样式定义的三种方式：浏览器缺省设置、内部样式表和内联样式，强调了外部样式表在提高工作效率上的优势。外部样式通常存储在CSS文件中，通过`<link>`标签引入。同时，文章还讲解了HTML文件中相对地址的概念，通过实例说明了相对路径的使用，包括如何表示上级目录。

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

文章目录

示例
- 示例解释
- - `head`标签
  - html文件的相对地址

HTML页面，样式的定义方式有四种：

浏览器缺省设置
外部样式表
内部样式表（位于标签内部）
内联样式（在 HTML 元素内部）

且优先级依次增大，一般推荐使用外部样式表进行定义，因外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中

示例

.html文件

<html>
<meta http-equiv="Content-Type" content="text/html; charset=gkb" />
<meta http-equiv="Content-Language" content="zh-cn" />
 
<title>引用外部css样式</title>
 
<!--外部样式表-->
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css">
</head>
 
<body>
<h1>h1级别的标题：红色</h1>
<h2>h2级别的标题：绿色</h2>
<h3>h3级别的标题：蓝色</h3>
<p>这是一个段落：灰色</p>
</body>
 
</html>

.css文件

h1 {color:red}
h2 {color:green}
h3 {color:blue}
p {color:gray}

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

示例解释

`head`标签

<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

html文件的相对地址

eg1：相对路径的简单应用
假设：
info.html路径是：
c:/a/b/c/d/myPage.html
index.html路径是：
c:/a/b/c/d/myStyle.css

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

eg2：如何表示上级目录
../表示源文件所在目录的上一级目录
假设：
info.html路径是：
c:/a/b/c/d/myPage.html
index.html路径是：
c:/a/b/c/myStyle.css

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

前端学习——html样式定义、CSS文件与HTML文件

文章目录

示例

示例解释

head标签

html文件的相对地址

`head`标签