程序员之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > HTML/Xhtml > HTML引入CSS样式

HTML外部样式表如何引入CSS样式

  发布时间：2020-12-10 16:48:13   作者：我和维米尔五五开   我要评论
这篇文章主要介绍了HTML外部样式表如何引入CSS样式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

链入式是把所有的 样式 放在一个或多个 外部样式表文件 中，这个文件是以 css 为扩展名的，通过 link 标签，将外部样式表（css命名的外部样式文件）链接到html文档中，这样可以把结构和样式分割成2个文件，更能清晰的编辑样式或者结构。

基本语法为：

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

tips: 快捷键为 link+tab键

具体步骤

①分别建立HTML和css文件，文件名分别以 .html 和 .css 为后缀。

其中 HTML 中只写 结构 和 需要改变样式的 内容；
css文件中只写样式。

例如：

HTML文件写：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="demo">跟张汪汪一起学会外部样式表</div>
	<div>跟张汪汪一起学会外部样式表</div>
	<div>跟张汪汪一起学会外部样式表</div>
	<div>跟张汪汪一起学会外部样式表</div>
</body>
</html>

css文件写：

.demo{
	color: blue; 
}

此时，浏览器中显示：

在这里插入图片描述

由上面的代码可见，我们为第一行的 “跟张汪汪一起学会外部样式表” 做了颜色为 蓝色 样式，但是由于没有将.html和.css 这2个文件建立连接，浏览器中的第一行字并不显示所编辑的颜色。

②在HTML中的 < head > 中插入

<link rel="stylesheet" href="css文件的路径" />

后，Ctrl+S后 刷新浏览器显示如下：

可以看到这里第一行字已经变成蓝色啦~

注意

小白在练习过程中，最好把 .css 文件和 .html 文件放在同一目录文件夹下，且写完 样式 或 结构 后记得先 Ctrl+S 先保存哦，这样才能更好更快捷的把结果显示出来。
link标签的作用是 把外边的css样式引入到当前的HTML页面中，是HTML和css文件的桥梁。

到此这篇关于HTML外部样式表如何引入CSS样式的文章就介绍到这了,更多相关HTML引入CSS样式内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！

相关文章

  • HTML基础知识——css样式表,样式属性,格式与布局详解

    下面小编就为大家带来一篇HTML基础知识——css样式表,样式属性,格式与布局详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-11

  • HTML基础必看——全面了解css样式表

    下面小编就为大家带来一篇HTML基础必看——全面了解css样式表。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-11

  • HTML (css样式规范)必看篇

    下面小编就为大家带来一篇HTML (css样式规范)必看篇。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-27

  • html动态加载css样式和js脚本示例

    这篇文章主要介绍了html动态加载css样式和js脚本示例,需要的朋友可以参考下
    2014-04-16

  • 将html标签在浏览器居中显示的css样式

    在布局过程中为了某些需求，将html标签在浏览器居中显示是很常见的做法，下面有个不错的示例，大家可以参考下
    2014-04-15

  • 通过CSS样式实现的html背景色渐变效果

    在html中可以轻松实现背景色渐变的下面是一个通过CSS实现的示例，大家若感兴趣，可以参考下
    2014-03-24

  • html 隐藏div HTML里隐藏表格TABLE或者DIV内容的css样式

    突然想起几年前用过的一个隐藏样式代码，有些时候用它非常方便，比如想让某块表格TABLE或者DIV里的内容完全看不到，那就加上他，嘿嘿，就隐身了,需要的朋友可以了解下
    2012-12-21

  • XHTML语言默认的CSS样式

    html,address, blockquote, body,dd,div, dl,dt,fieldset,form, frame,frameset, h1,h2,h3,h4, h5,h6,noframes, ol,p,ul,center, dir,hr,menu,pre { display:block} li {
    2008-10-17

  • HTML嵌入CSS样式的四种实现方法

    CSS 样式既可以作为单独的文件（.css类型的文件）引入到 HTML 文档中，本文主要介绍了HTML嵌入CSS样式的四种实现方法，具有一定的参考价值，感兴趣的可以了解一下
    2023-11-03

最新评论

关注微信公众号

扫一扫
?


http://www.vxiaotou.com