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

文章目录

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

HTML页面,样式的定义方式有四种:

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 标签内部)
  4. 内联样式(在 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}

效果:
前端学习——html样式定义、CSS文件与HTML文件_第1张图片

示例解释

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">

你可能感兴趣的:(前端)