css (cascading style sheets)是一种常用于网页设计的样式表语言,它可以控制网页的样式,包括字体、颜色、大小、布局等,使得网页具有更好的可读性和美观性。要使用 css,就需要将 css 文件引入到 html 文件中。下面将介绍 css 的三种引入方法。
一、内联样式
内联样式是将 CSS 样式直接写在 HTML 元素标签内部的一种方法。这种方法的好处是可以针对单个 HTML 元素设置样式,但是如果要在多个元素上应用相同的样式,就会显得非常冗长和重复。内联样式的语法如下:
<p style="color: red;">这是红色文本</p>
其中,style 属性用于定义样式,样式属性和值用冒号隔开,多个属性之间用分号隔开。
二、内部样式表
立即学习“前端免费学习笔记(深入)”;
内部样式表是将 CSS 样式写在 HTML 文件的 标签中的 <style></style> 标签内部。这种方法适用于某个 HTML 文件内多个元素共用样式的情况。内部样式表的语法如下:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是红色文本</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/11160" title="简灰服装商城整站 For SHOPEX"><img
src="https://img.php.cn/upload/webcode/000/000/008/176517360228330.jpg" alt="简灰服装商城整站 For SHOPEX" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/11160" title="简灰服装商城整站 For SHOPEX">简灰服装商城整站 For SHOPEX</a>
<p>SHOPEX简灰服装商城整站源码下载。 安装方法:1.解压上传程序至网站根目录.. 访问:域名/bak.(用户名:admin 密码:123456)2.进入帝国备份王后,配置数据库数据库信息.选择-www.taomoban.net目录.还原数据库.3.修改FTP目录下的config/config.phpphp 数据库连接信息.4.登陆网站后台--清空缓存..5.删除bak文件夹 后台:shopadm</p>
</div>
<a href="/xiazai/code/11160" title="简灰服装商城整站 For SHOPEX" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</body>
</html>其中,<style></style> 标签内部写 CSS 样式,样式类似于内联样式,但是不需要写在元素标签内部,而是写在 { } 中间,多个属性和值之间也用分号隔开。
三、外部样式表
外部样式表是将 CSS 样式单独写在一个 .css 文件中,然后通过 HTML 文件的 <link> 标签将其引入。这种方法适用于多个 HTML 文件需要共用相同样式的情况。外部样式表的语法如下:
- 创建
.css文件,例如style.css。 - 写入要引入的 CSS 样式,例如:
p {
color: red;
}- 在 HTML 文件中的
标签中增加如下代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>这是红色文本</p>
</body>
</html>其中,<link> 标签用于指定 .css 文件的路径,href 属性用于指定 .css 文件的路径和文件名。
以上就是 CSS 的三种引入方法,每种方法有各自的适用场景,可以根据具体需求选择使用。









