HTML-CSS入门-实战CSS高级技巧
发布时间: 2024-02-19 08:57:07 阅读量: 10 订阅数: 9
# 1. HTML基础知识回顾与CSS入门
## 1.1 HTML基础知识回顾
在本节中,我们将回顾HTML的基础知识,包括HTML的结构、常用标签等内容。
```html
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落。</p>
<img src="image.jpg" alt="图片">
</body>
</html>
```
**代码解释:**
- `<!DOCTYPE html>` 声明了文档类型为HTML5。
- `<html>` 元素是HTML文档的根元素。
- `<head>` 元素包含了文档的元(meta)数据。
- `<title>` 元素定义了文档的标题,显示在浏览器的标题栏上。
- `<body>` 元素包含了可见的页面内容。
- `<h1>` 到 `<h6>` 元素定义了标题。
- `<p>` 元素定义了段落。
- `<img>` 元素用于向网页中嵌入一幅图像。
在HTML基础知识回顾这一节中,我们深入了解了HTML文档的基本结构及常用标签的使用。
## 1.2 CSS概述与基本语法
接下来,我们将学习CSS的概述以及基本语法,包括如何创建样式规则以美化页面元素。
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
p {
color: darkgreen;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
```
**代码解释:**
- `<style>` 元素用于在文档中定义样式。
- `body`、`h1`、`p` 是选择器,选择要添加样式的HTML元素。
- `{}` 内部是样式规则,以属性-值对的形式定义如何显示元素。
- `background-color`、`color`、`font-family` 是CSS属性。
- `lightblue`、`navy`、`darkgreen` 是属性值,表示颜色。
- `text-align: center;` 将标题居中显示。
通过CSS概述与基本语法这一节的学习,我们可以更好地掌握如何使用CSS来为网页添加样式。
## 1.3 CSS选择器与样式规则
在这个部分,我们将学习CSS中的选择器及样式规则,以便更精确地定位和修改特定的HTML元素样式。
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* 通过类选择器设置样式 */
.important {
font-weight: bold;
color: red;
}
/* 通过ID选择器设置样式 */
#special {
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="important">这是一个重要的标题</h1>
<p id="special">这是一个特殊的段落。</p>
</body>
</html>
```
**代码解释:**
- `.important` 是类选择器,用于选中具有`important`类的元素。
- `font-weight` 控制文字的粗细,`color` 控制文字颜色。
- `#special` 是ID选择器,用于选中具有`special` ID的元素。
- `background-color` 控制背景颜色。
通过学习CSS选择器与样式规则,我们可以更有针对性地为网页元素添加样式,实现更加丰富多彩的页面效果。
以上是第一章中HTML基础知识回顾与CSS入门的内容,希望对你有所帮助。接下来,我们将继续深入学习CSS布局与盒模型。
# 2. CSS布局与盒模型
### 2.1 盒模型详解
在CSS中,每个元素都被看作一个矩形的盒子,这就是盒模型。盒子包括内容区域、内边距、边框和外边距。通过盒模型,我们可以控制元素的大小和布局。
#### 示例代码
```html
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">这是一个盒子</div>
</body>
</html>
```
#### 代码说明
- `width`和`height`定义了盒子的宽度和高度;
- `padding`指定了盒子内边距大小;
- `border`定义了边框样式,包括宽度和颜色;
- `margin`设置了盒子的外边距。
#### 结果说明
以上代码会在页面中显示一个带有20px内
0
0