目录
一、文本
1.字体属性
- color：设置字体的颜色
- font-family：设置字体的类型
- font-size：设置字体的大小
【属性值通常为px或%】
- font-weight：设置字体的粗细
【bold：粗体（bolder表示粗体再加粗），normal：默认字体，lighter：比默认字体还细（100~900，数字越小越细）】
- font-style：设置字体的倾斜
【normal：“正常”（默认值），italic：“斜体”，oblique：“倾斜体”】
2.文本修饰
- text-align ：文本的水平对齐方式
【left：左对齐，right：右对齐 ，center：居中】
- text-decoration:文本修饰线
【underline：下划线，overline：上划线，line-through：删除线，blink：闪烁】
- text-transform:单词字母大小写
【uppercase：字母小写变大写，lowercase：字母大写变小写】
- text-indent：文本块首行文本的缩进程度
运行代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本</title>
<style>
.font{
color: red; /* 字体颜色 */
font-size: 30px; /* 字体大小 */
font-family: 楷体; /* 字体类型 */
font-weight: 2px; /* 字体粗细 */
font-style: italic; /* 字体倾斜 */
}
#font2{
/* 这个水平对齐方式，是指相对于元素容器来说的位置*/
text-align: center;
/* 文本修饰线：删除线，下划线，上划线 */
text-decoration: underline;
}
#font3{
color: blue;
font-size: 30px;
font-family: 楷体;
font-weight: 2px;
font-style: italic;
/* 段落首行缩进 */
text-indent: 50px;
/* 文本修饰线：删除线，下划线，上划线 */
text-decoration: line-through;
/* 英文单词大小写设置 */
text-transform: uppercase;
}
</style>
</head>
<body>
<p class="font">测试字体属性</p>
<p class="font" id="font2">测试文本属性</p>
<p class="font" id="font3">hello world</p>
</body>
</html>运行结果如下：
二、图像
1.图像边框样式
- border-width：边框宽度
- border-color：边框颜色
- border-style：边框线型
注：可将以上三个属性写成一个。如：【 border: width color style; 】用 空格 隔开。
2.图像透明度
使用 opacity 属性调整图像透明度（取值范围：0~1）
举例：
运行代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像</title>
<style>
img{
width: 200px;
height: 200px;
}
#img1{
border-width: 5px; /* 边框厚度 */
border-color:aqua; /* 边框颜色 */
/* 边框线性：solid（实线）、dashed（虚线）、double（双线） */
border-style: dashed;
/* 以上属性可以写成一个 */
/* border: 5px aqua solid; */
/* 图像透明度，取值范围0~1 */
opacity: 0.5;
}
</style>
</head>
<body>
<img src="../演示图.jpg">
<img src="../演示图.jpg" id="img1">
</body>
</html>运行结果如下：
三、背景
1.背景属性
background-color：背景颜色
background-size：背景图大小
2.背景重复
主要作用是设置背景图像以何种方式在网页中显示。如果不希望平铺，或者只希望沿一个方向平铺，可以使用 background-repeat 属性（背景图展示效果）来控制。语法格式为：
background-repeat: repeat / no-repeat / repeat-x / repeat-y; （1）no-repeat：不平铺
（2）repeat:平铺（默认）
（3）repeat-x：水平方向平铺
（4）repeat-y：垂直方向平铺
3.背景图像定位
在网页中插入背景图像时，每一次插入位置都位于网页左上角，可以通过 background-position 属性来改变图像的插入位置。
（1）指定位置关键字：
横向：left（左对齐）、center（水平居中）、right（右对齐）；
纵向：top（顶部）、center（垂直居中）、bottom（底部）
（2）使用数值：一个代表的是水平位置，一个是垂直位置，采用像素值或百分比形式
举例：
运行代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景</title>
<style>
#box{
width: 600px;
height: 00px;
background-color: aquamarine; /* 背景颜色 */
background-image: url(../演示图.jpg); /* 背景图像 */
background-repeat: no-repeat; /* 背景图像不重复 */
background-size: 50% 50%; /* 设置背景图像的大小 */
background-position: center top; /* 定位背景向box的底部中央对称 */
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>运行结果如下：
四、表格
关于表格的相关内容可看：HTML5：表格_html表格代码-CSDN博客
1.CSS表格属性
| border | 表格边框宽度 颜色 线型 |
| width | 表格宽度 |
| heigh | 表格长度 |
| background-color | 背景颜色 |
.table{
width: 400px;
height: 200px;
/* 设置表格厚度、颜色、线型 */
border: 2px red solid;
/* 设置表格背景颜色 */
background-color: gray;
}2.表格边框线折叠
默认时表格会被折叠成一个个单一的边框
.table{
/* 合并单元格边框 */
border-collapse: collapse;
}3. 单元格内文本的对齐方式
设置单元格内文本水平对齐位置，text-align 的属性有left、center、right。
设置单元格内文本垂直对齐位置， vertical-align 的属性有top、center、bottom。
td{
text-align: center;
vertical-align: bottom;
}举例：
运行代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格属性</title>
<style>
.table{
width: 400px;
height: 200px;
/* 设置表格厚度、颜色、线型 */
border: 2px red solid;
/* 合并单元格边框 */
border-collapse: collapse;
/* 设置表格背景颜色 */
background-color: gray;
/* 设置表格内文本颜色 */
color: aqua;
}
#td9{
background-color: blue;
color: yellow;
/* 设置单元格内文本水平对齐位置 center right left*/
text-align: center;
/* 设置单元格内文本垂直对齐位置 top bottom center*/
vertical-align: bottom;
}
</style>
</head>
<body>
<table border="1" class="table">
<tr>
<td>文字1</td>
<td>文字2</td>
<td>文字3</td>
</tr>
<tr>
<td>文字4</td>
<td>文字5</td>
<td>文字6</td>
</tr>
<tr>
<td>文字7</td>
<td>文字8</td>
<td id="td9">文字9</td>
</tr>
</table>
</body>
</html>运行结果如下：
五、表单
关于表格的相关内容可看：HTML5：表单_html制作表格多选-CSDN博客)
1.CSS表单属性
| border | 表格边框宽度 颜色 线型 |
| width | 表格宽度 |
| heigh | 表格长度 |
| background-color | 背景颜色 |
#text2{
width: 400px;
height: 200px;
background-color: gray;
border: 2px red double;
}2.背景图像样式
background-image: url(图片路径)：设置表单背景图片
background-repeat：背景图展示效果，当背景图大小小于元素实际区域时，会默认背景图平铺展示（与上面背景属性内容一致）
#text2{
background-image: url(../演示图.jpg);
background-repeat: no-repeat;
background-size: 30% 50%;
}3.表单按钮样式
选择鼠标指针浮动在其上的样式，使用 cursor 属性
- auto ：默认。浏览器设置的光标
- pointer ：光标呈现为指示链接的指针(-只手）
举例：
运行代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
<style>
#text2{
width: 400px;
height: 200px;
color:aqua;
/* background-color: gray; */
background-image: url(../演示图.jpg);
background-repeat: no-repeat;
background-size: 30% 50%;
border: 2px red double;
}
#btn2{
color:aqua;
background-color: blue;
border: 2px red dashed;
cursor: pointer;
}
</style>
</head>
<body>
<form action="">
<input type="text" id="text1">这是默认文本输入框 <br>
<input type="text" id="text2" value="输入账号">这是有默认值的输入框
<br>
<input type="submit" id="btn1">这是默认按钮 <br>
<input type="submit" id="btn2">这是设置样式按钮
</form>
</body>
</html>运行结果如下:
六、练习
注：先自己尝试运行代码
1.图像、背景练习
运行代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习</title>
<style>
.font1{
text-align: left;
text-decoration: underline;
text-transform: uppercase;
}
.font2{
width: 500px;
text-align: center;
text-decoration: line-through;
text-transform: lowercase;
background-color: yellow;
}
.font3{
text-align: right;
text-decoration:overline;
text-transform:capitalize;
}
#img1{
width: 300px;
height: 300px;
border: green 10px dashed ;
}
footer{
width: 600px;
height: 600px;
background-color: aquamarine;
background-image: url(../演示图.jpg);
background-repeat: no-repeat;
background-size: 50% 50%;
background-position: center;
}
</style>
</head>
<body>
<p class="font1"> first测试文本：靠左对齐，下划线，大写字母 </p>
<p class="font2"> second测试文本：居中对齐，删除线，小写字母</p>
<p class="font3"> third测试文本：靠右对齐，上划线，首字母大写</p>
<img src="../演示图.jpg" id="img1">
<header></header>
<nav></nav>
<section></section>
<article></article>
<footer></footer>
</body>
</html>
2.表格、表单练习
运行代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格、表单练习</title>
<style>
table{
width: 400px;
height: 200px;
border: 2px red solid;
border-collapse: collapse;
text-align: right;
vertical-align: bottom;
}
th{
background-color: gray;
color: blue;
}
td{
background-color: yellow;
color: black;
}
#text2{
border: 2px yellow double;
color: blue;
}
#text3{
width: 200px;
height: 200px;
background-image: url(../演示图.jpg);
background-position: 50% 50%;
}
#btn2{
border: 5px pink dashed;
opacity: 0.3;
}
#btn3{
cursor: pointer;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>无</th>
<th>列标签1</th>
<th>列标签2</th>
</tr>
<tr>
<th>行标签1</th>
<td>普通单元格1</td>
<td>普通单元格2</td>
</tr>
<tr>
<th>行标签2</th>
<td>普通单元格3</td>
<td>普通单元格4</td>
</tr>
</table>
<hr>
<form action="">
<input type="text" id="text1">这是默认文本输入框 <br>
<input type="text" id="text2" value="输入的文字显示为蓝色">这是有默认值的输入框
<br>
<input type="text" id="text3">增加了背景图片的文本域
<br>
<input type="submit" id="btn1" value="提交">这是默认按钮 <br>
<input type="submit" id="btn2" value="登录">这是设置样式按钮 <br>
<input type="submit" id="btn3" value="注册">鼠标悬停出手指
</body>
</html>