css制作html
CSS 制作 HTML 样式
CSS（层叠样式表）用于控制 HTML 元素的外观和布局。通过 CSS，可以定义颜色、字体、间距、边框等样式属性，使 HTML 页面更具视觉吸引力。
内联样式
直接在 HTML 标签中使用 style 属性定义样式，适用于单个元素的快速样式设置。
<p style="color: blue; font-size: 16px;">这是一段蓝色文字。</p>内部样式表
在 HTML 文件的 <head> 部分使用 <style> 标签定义样式，适用于单个页面的样式控制。
<head>
<style>
p {
color: red;
font-family: Arial;
}
</style>
</head>
<body>
<p>这是一段红色文字。</p>
</body>外部样式表
将 CSS 代码保存在独立的 .css 文件中，通过 <link> 标签引入，适用于多页面共享样式。
HTML 文件：
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这段文字样式来自外部文件。</p>
</body>CSS 文件（styles.css）：
p {
color: green;
text-align: center;
}常用 CSS 属性
文本样式
color: 设置文本颜色（如#FF0000或red）。font-family: 指定字体（如Arial, sans-serif）。font-size: 控制字号（如14px或1.2em）。text-align: 对齐方式（left、center、right）。
盒模型属性
width/height: 设置元素宽度和高度。margin: 控制外边距（如margin: 10px;）。padding: 设置内边距（如padding: 5px 10px;）。border: 定义边框（如border: 1px solid black;）。
布局属性
display: 控制元素显示方式（如block、inline、flex）。position: 定位方式（如relative、absolute）。flexbox/grid: 现代布局方案。
示例：按钮样式
<button class="custom-btn">点击按钮</button>.custom-btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.custom-btn:hover {
background-color: #45a049;
}通过组合 HTML 结构和 CSS 样式，可以创建丰富多样的网页界面。
