HTML如何引用CSS?

链接外部样式表

<head>标签内,使用<link>标签将外部CSS文件链接到HTML文件。如下所示:

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

属性rel规定文档与被链接文档之间的关系,type属性规定被链接文档的MIME类型,href属性指定被链接文档的URL。
在上述代码中,样式表文件名为“style.css”,保存在HTML文件所在目录中。

嵌入样式表

<head>标签内,使用<style>标签将CSS样式直接嵌入到HTML文件中。如下所示:

<head>
  <style>
    body {
      background-color: #f0f0f0;
    }
    h1 {
      color: red;
    }
  </style>
</head>

使用内联样式

在HTML标签内,使用style属性添加行内样式。如下所示:

<h1 style="color: red;">Hello world!</h1>

示例代码:

HTML文件:

<!DOCTYPE html>
<html>
<head>
  <title>HTML引用CSS示例</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>欢迎来到HTML引用CSS示例</h1>
  <p>这是一个段落</p>
  <button class="myBtn">点击我</button>
</body>
</html>

CSS文件:

body {
  background-color: #f0f0f0;
}
h1 {
  color: red;
}
.myBtn {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
}

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:HTML如何引用CSS? - Python技术站

(0)
上一篇 2023年3月20日
下一篇 2023年3月20日

相关文章

  • JavaScript中获取高度和宽度函数总结

    下面是详细讲解“JavaScript中获取高度和宽度函数总结”的完整攻略: 获取元素的高度和宽度 获取元素的高度和宽度有多种方式,下面将介绍常用的四种方法。 1. offsetWidth 和 offsetHeight 属性 元素的 offsetWidth 和 offsetHeight 属性可以分别获取元素的宽度和高度,包括内边距、边框和滚动条(如果有)。 l…

    css 2023年6月10日
    00
  • css两端对齐之div+css布局实现2端对齐的4种方法总结

    对于“css两端对齐之div+css布局实现2端对齐的4种方法总结”,我来为您进行详细的讲解。 一、前言 首先需要明确的是,“两端对齐”是指左边和右边都达到同一行,且左右两端的内容分别左对齐、右对齐,并且中间的空隙等宽。 二、方法总结 以下是4种方法总结: flex布局 使用flex布局方式比较简单直观,可以通过设置父容器display属性为flex,利用j…

    css 2023年6月10日
    00
  • Web 设计与开发者必须知道的 15 个站点

    Web 设计与开发者必须知道的 15 个站点 本文将介绍 Web 设计与开发者必须知道的 15 个站点,这些站点可以帮助我们在设计开发过程中提高效率,提供更好的用户体验。以下是这 15 个站点的简要介绍: 1. Can I use Can I use 是一个网站,用于检查 CSS、JavaScript 和 HTML 特性的兼容性。使用该网站,您可以检查特性的…

    css 2023年6月10日
    00
  • CSS工作原理及CSS规则命名介绍

    CSS工作原理及规则命名介绍 CSS工作原理 CSS是层叠样式表(Cascading Style Sheet)的缩写,是一种用于描述网页上各种元素应如何被渲染呈现出来的语言。 CSS的工作原理是将样式表与HTML文档分离。 CSS样式通过三种方式设置:内联样式、内部样式和外部样式。其中,最推荐使用的是外部样式,因为它能够提高多个页面的重用性和维护性。 CSS…

    css 2023年6月9日
    00
  • 原生js实现简单轮播图

    下面是原生JS实现简单轮播图的完整攻略。 1. 准备工作 在HTML文件中,需要定义一个容器作为轮播图的父元素,同时在其中添加轮播图片的子元素。例如,在以下代码中,容器的ID为slider,共有3张轮播图片。 <div id="slider"> <img src="1.jpg" alt="i…

    css 2023年6月10日
    00
  • 固定背景实现的背景滚动特效示例分享

    接下来我将详细讲解“固定背景实现的背景滚动特效示例分享”的完整攻略。 1. 概述 固定背景实现的背景滚动是一种常见的网页背景特效,通常用于增强页面的视觉效果和交互性。在这种特效中,背景图片或者颜色会固定在页面后面,而页面的主要内容则通过滚动条来滚动。本篇攻略将介绍如何使用CSS实现固定背景实现的背景滚动特效。 2. 实现方法 2.1 在CSS中设置背景图像或…

    css 2023年6月10日
    00
  • css3实现小箭头各种图形效果

    下面是关于“CSS3实现小箭头各种图形效果”的完整攻略: 1. 使用伪元素实现基本三角形 在CSS3中,我们可以通过使用伪元素的方法来快速地实现一个基本的三角形图形,代码如下: .arrow { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid…

    css 2023年6月10日
    00
  • CSS3的RGBA中关于整数和百分比值的转换

    CSS3的RGBA色彩模式可以使用整数或百分比值来定义每个颜色通道的值,如下所示: /* 定义RGBA颜色,参数值分别是红、绿、蓝和透明度 */ background-color: rgba(255, 0, 0, 0.5); 其中,255是红色通道的整数值,0是绿色通道的整数值,0是蓝色通道的整数值,0.5是透明度的百分比值,表示50%不透明度。 但是,在某…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部