CSS-3.1-CSS页面引入

最新推荐文章于 2025-01-12 20:00:46 发布

anh_qwh

最新推荐文章于 2025-01-12 20:00:46 发布

阅读量429

点赞数 1

CC 4.0 BY-SA版权

分类专栏： WEB前端 CSS 文章标签： CSS页面引入外联式嵌入式内联式

本文链接：https://blog.youkuaiyun.com/QWH_PYTHON/article/details/100639730

WEB前端同时被 2 个专栏收录

61 篇文章

订阅专栏

CSS

19 篇文章

订阅专栏

本文详细介绍了CSS页面引入的三种方式：外联式、嵌入式和内联式。外联式包括通过<link>标签和@import引入外部样式表；嵌入式通过<style>标签在页面中创建样式表；内联式则直接在标签上使用<style>属性定义样式。

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

CSS页面引入方法
1.外联式：通过<link>标签，链接到外部样式表到页面中，可以应用在多个页面
2.嵌入式：通过<style>标签，在网页上创建嵌入的样式表，范围针对页面
3.内联式：通过<style>属性，在标签上直接写样式，范围只针对标签

一：外联式

通过<link>标签，链接到外部样式表到页面中

外链式引入样式表文件的两种方式
1.采用<link>标签
2.采用import

1、采用<link>标签

属性
- rel
  - stylesheet：定义的样式表
  - alternate stylesheet：候选的样式表
    - title属性不写显示不出效果，样式

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>外联式</title>
	<link rel="stylesheet" type="text/css" href="./1.css">
	<!-- title属性不能忘记写，否则不显示 -->
	<link rel="alternate stylesheet" type="text/css" href="./2.css" title="第二种样式">
	<link rel="alternate stylesheet" type="text/css" href="./3.css" title="第三种样式">
</head>
<body>
	<div>中国</div>
</body>
</html>

CSS样式表文件

/* 1.css */
div{
	height: 200px;
	width: 200px;
    /* 实线红色边框 */
	border: 1px solid red;
	font-size: 40px;
}

/* 2.css */
div{
	width: 200px;
	height: 200px;
    /* 虚线蓝色边框 */
	border: 1px dotted blue;
}

/* 3.css */
div{
	height: 200px;
	width: 200px;
	border: 1px solid red;
    /* 背景图片 */
	background-image: url(./image/backgroud.jpg);
}

在这里插入图片描述

2、采用import

必须写在<style>标签中，并且必须是第一句
@import url(a.css)

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>外联式</title>
	<style rel="stylesheet" type="text/css">
        @import url(./1.css)
    </style>
</head>
<body>
	<div>中国</div>
</body>
</html>

CSS样式表文件

/* 1.css */
div{
	height: 200px;
	width: 200px;
	border: 1px solid red;
	background-color:blue;
	font-size: 40px;
}

在这里插入图片描述

二：嵌入式

通过<style>标签，在网页上创建嵌入的样式表
该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>嵌入式</title>
    <style type="text/css">
        /* 嵌入式 */
        div{
            font-weight: bold;
            font-style: italic;
            color: red;
    </style>
<body>
	<div>中国</div>
</body>
</html>

在这里插入图片描述

三：内联式

通过<stylr>属性，在标签上直接写样式，范围只针对此标签使用
对于多个相同标签的同一样式定义比较麻烦，适合局部修改

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内联式</title>
</head>
<body>
    <!-- 适合局部修改 -->
	<div style="color: blue;background-color: red">中国</div>
</body>
</html>

在这里插入图片描述