CSS基础学习（一）
1.设置背景颜色：background-color
例：background-color:#d0e4fe;或background-color:blue;
2.字体颜色·：color
例：color:red;
3.对齐方式：text-align
例：text-align:right; //右对齐
4.字体样式：font-family
例：font-family:"楷体";
5.字体大小：font-size
例：font-size:50px;
6.左外边距/右外边距：margin-left/margin-right
例：margin-left:50px;
7.CSS注释以 /* 开始, 以 */ 结束.
8.id选择器可以为标有特定 id 的 HTML 元素指定特定的样式，以 "#" 来定义。
注：ID属性不能以数字开头
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS id</title>
<style>
body{
background-color:pink;
}
#id1
{
text-align:center;
color:blue;
}
</style>
</head>
<body>
<p id="id1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>
运行结果：
9.class 选择器用于描述一组元素的样式，在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。
class 选择器有别于id选择器，class可以在多个元素中使用。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<style>
body{
background-color:pink;
}
.center
{
text-align:center;
font-family:楷体;
font-size:25px;
color:blue;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
运行截图：
可以指定特定的HTML元素使用class选择器，未被指定的html元素使用该class选择器不起作用。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<style>
body{
background-color:pink;
}
p.center
{
text-align:center;
font-family:楷体;
font-size:25px;
color:blue;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
运行截图：
10.插入外部样式表
使用 <link> 标签链接到样式表，<link rel="stylesheet" type="text/css" href="Test1.css">
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
例：
Test1.css:
@charset "UTF-8";
body{
background-image:url('https://static.runoob.com/images/mix/paper.gif'); //设置图片背景
}
.p{
font-family: 楷体;
font-size: 25px;
text-align:center;
}
Test1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<link rel="stylesheet" type="text/css" href="Test1.css">
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="p">段落居中。</p>
</body>
</html>
运行截图：
__EOF__
本文链接：https://www.cnblogs.com/zyj3955/p/14697501.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！