7-在html使用css设置样式
css
css定义如何显示 HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，可以提高工作效率 。
样式存储在样式表中，通常放在、<head>部分或存储在 外部CSS文件中
html中使用css
CSS 可以通过以下方式添加到HTML中:
- 内联样式： 在HTML元素中使用"
<style>" 属性
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
- 内部样式表 ：在HTML文档头部
<head>区域使用<style>元素 来包含CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
效果:
- 外部引用 ： 使用外部 CSS 文件
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
href 表示要用的css文件的路径，相对路径或者绝对路径都可以。
最好的方式是通过外部引用CSS文件。
常用的一些文本样式
| 样式 | 含义 |
|---|---|
background-color | 背景色：例如 red, rgb(255,0,0), #FF0000 |
font-family | 字体，例如 arial、FangSong |
color | 字体颜色 |
font-size | 字体大小 |
text-align | 文字对齐方式，例如 center |
本文来自博客园，作者：aJream，转载请记得标明出处：https://www.cnblogs.com/ajream/p/15383568.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人