在 HTML 中，样式是控制网页元素外观和布局的关键部分。通过 CSS（层叠样式表），你可以控制网页的颜色、字体、布局、间距等视觉效果。CSS 与 HTML 是分离的，HTML 用于定义内容结构，而 CSS 用于控制其样式和布局。
CSS 基本概念
- CSS 选择器：用于选择 HTML 元素，并为这些元素应用样式。
- CSS 声明：由 属性 和 值 组成，指定如何展示选定的元素。
selector { property: value; }- 选择器：指定要应用样式的 HTML 元素。
- 属性：定义元素样式的具体方面（如颜色、字体、大小）。
- 值：为属性设置的具体数值（如
red、16px、#ff0000等）。
1. CSS 样式的引入方式
CSS 样式可以通过三种方式引入到 HTML 文档中：
a. 内联样式（Inline Style）
直接在 HTML 标签中使用 style 属性定义样式。
<p style="color: red; font-size: 16px;">这是红色文字</p>
b. 内部样式（Internal Style）
将 CSS 样式嵌入到 HTML 文档的 <head> 部分，使用 <style> 标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式示例</title>
<style>
body {
background-color: lightblue;
}
p {
color: green;
}
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
c. 外部样式（External Style）
通过链接外部 CSS 文件来定义样式，适用于多个页面共享样式。
<head>
<link rel="stylesheet" href="styles.css">
</head>
外部 CSS 文件 styles.css 示例：
body {
background-color: lightblue;
}
p {
color: green;
}
2. CSS 选择器
CSS 选择器用于选中 HTML 元素并为其添加样式。常见的选择器有：
a. 元素选择器
选择所有指定的 HTML 元素。
p {
color: blue;
}
这会使页面中所有 <p> 标签中的文本颜色变为蓝色。
b. 类选择器
使用类名选择指定的 HTML 元素，类名以 . 开头。
.button {
background-color: red;
color: white;
}
HTML：
<button class="button">点击我</button>
c. ID 选择器
使用 ID 选择器选择唯一的 HTML 元素，ID 以 # 开头。
#header {
background-color: #333;
color: white;
}
HTML：
<div id="header">这是头部内容</div>
d. 组合选择器
可以将多个选择器组合在一起，应用相同的样式。
h1, h2, h3 {
font-family: Arial, sans-serif;
}
e. 子元素选择器（>）
选择某个元素的直接子元素。
div > p {
color: green;
}
3. CSS 常见属性
a. 颜色
使用 color 和 background-color 设置文本和背景颜色。
h1 {
color: red;
}
body {
background-color: #f0f0f0;
}
b. 字体
使用 font-family、font-size、font-weight 等设置字体的样式。
p {
font-family: "Arial", sans-serif;
font-size: 14px;
font-weight: bold;
}
c. 文本效果
使用 text-align、line-height、text-decoration 等控制文本的对齐、行高和装饰。
h2 {
text-align: center;
text-decoration: underline;
}
d. 边框
使用 border 设置元素的边框。
div {
border: 2px solid black;
}
e. 间距
使用 margin 和 padding 设置外边距和内边距。
div {
margin: 20px;
padding: 10px;
}
f. 布局
使用 display、position、flex 等属性来控制元素布局。
.container {
display: flex;
justify-content: space-between;
}
g. 尺寸
使用 width 和 height 设置元素的宽度和高度。
img {
width: 100%;
height: auto;
}
4. CSS 响应式设计
通过 CSS 媒体查询（Media Query），可以为不同屏幕尺寸的设备设置不同的样式，以实现响应式设计。
/* 默认样式 */
body {
font-size: 16px;
}
/* 屏幕宽度小于等于 768px 时应用的样式 */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
5. CSS 示例
a. 基础样式示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 样式示例</title>
<style>
body {
background-color: lightgray;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-align: center;
display: inline-block;
cursor: pointer;
}
.button:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个简单的 CSS 示例。</p>
<a href="#" class="button">点击我</a>
</body>
</html>
总结
CSS 是控制网页样式的强大工具，能够精确控制页面的外观、布局和响应式设计。通过内联样式、内部样式和外部样式等方式，可以轻松实现样式的应用。掌握 CSS 的基本属性、选择器和布局技术，能够帮助你设计出美观且高效的网页。
如果你对 CSS 有更多问题，或者需要更深入的示例和解释，随时告诉我！
发表回复