第14章 web开发技术1
html是网页开发的基础，学会html对于学习其他前端技术（如css、javascript）以及后端技术（如python、java等）都具有重要意义。
css（层叠样式表，cascading style sheets）是一种用于描述html和xml文档样式的标记性语言。css允许你将样式和结构分离，使得网页更易于维护和扩展。css的主要功能包括：
1 基本样式设置：设置文本颜色、字体、大小、行高、背景色等基本样式属性。
在css中，可以使用以下属性来设置文本的颜色、字体、大小、行高和背景色等基本样式属性：
1 文本色：`color`属性用于设置文本颜色。例如：
```css
p {
color: blue;
}
```
2 字体：`font-family`属性用于设置文本字体。例如：
```css
p {
font-family: arial, sans-serif;
}
```
3 字体大小：`font-size`属性用于设置文本大小。例如：
```css
p {
font-size: 14px;
}
```
4 行高：`line-height`属性用于设置文本的行高。例如：
```css
p {
line-height: 15;
}
```
5 背景色：`background-color`属性用于设置元素的背景颜色。例如：
```css
p {
background-color: f5f5f5;
}
```
6 文本对齐：`text-align`属性用于设置文本水平对齐方式。例如：
```css
p {
text-align: center;
}
```
7 首行缩进：`text-indent`属性用于设置文本首行的缩进。例如：
```css
p {
text-indent: 2em;
}
```
8 文本装饰：`text-decoration`属性用于设置文本装饰，如下划线、删除线等。例如：
```css
a {
text-decoration: underline;
}
```
将上述属性应用到html元素上，可以实现各种文本样式效果。例如，创建一个具有特定颜色、字体大小和背景色的段落：
```html
＜!doctype html＞
＜html lang=&34;en&34;＞
＜head＞
＜meta charset=&34;utf-8&34;＞
＜meta name=&34;viewport&34; content=&34;width=device-width, initial-scale=10&34;＞
＜title＞文本样式示例＜/title＞
＜style＞
p {
color: blue;
font-family: arial, sans-serif;
font-size: 14px;
line-height: 15;
background-color: f5f5f5;
text-align: center;
}
＜/style＞
＜/head＞
＜body＞
＜p＞这是一个示例段落。＜/p＞
＜/body＞
＜/html＞
```
在这个示例中，我们使用了`＜style＞`标签将css样式内嵌到html文档中。通过设置各种文本样式属性，实现了特定颜色、字体大小和背景色的段落效果。
2 布局与定位：使用盒模型、定位、浮动、弹性布局等方法实现网页布局和元素定位。
在css中，实现网页布局和元素定位有多种方法，包括盒模型、定位、浮动和弹性布局。以下是这些方法的简要介绍和示例：
1 盒模型（box model）：
盒模型是css中描述元素尺寸和布局的基础。一个元素在页面上的实际尺寸由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
```css
div {
width: 300px;
padding: 10px;
border: 1px solid ccc;
margin: 10px;
}
```
2 定位（positioning）：
通过定位属性（如`position`、`top`、`right`、`bottom`、`left`和`z-index`），可以控制元素在页面上的精确位置。
```css
header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
background-color: 333;
z-index: 1000;
}
```
3 浮动（floating）：
通过`float`属性，可以将元素浮动在页面的左侧或右侧，实现文本环绕效果。
```css
sidebar {
float: right;
width: 200px;
}
main {
float: left;
width: calc(100 - 210px);
}
```
4 弹性布局（flexbox）：
弹性布局是一种强大的一维布局方法，可以在一行或多行上创建弹性伸缩的盒子。
```css
container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
item {
flex: 1 0 200px;
margin: 10px;
border: 1px solid ccc;
text-align: center;
}
```
根据项目需求和设计，您可以选择合适的布局和定位方法。