目录
一、文本
1、字体属性
2、文本修饰
二、图像
1、图像边框样式
2、图像透明度
三、背景
1、background-color：背景颜色
2、background-img：背景图像
3、背景展示效果
4、background-size：背景图大小
5、background-position：背景图的起始位置
四、表格
1、表格的宽度和高度
2、表格的边框
3、表格边框线折叠
4、 表格的背景颜色
5、 单元格内文本的对齐方式
五、表单
1、表单的宽度和高度
2、表单边框颜色、边框大小及线型
3、背景样式
4、背景图片样式
5、表单按钮样式
一、文本
1、字体属性
- color：颜色，可直接写颜色的英文名、十六进制写法以及rgb写法；
- font-size：字体的大小，属性值通常为px或%；
- font-family：字体；
- font-style：字的倾斜（normal：正体，italic：斜体）；
- font-weight：字的粗细
| 值 | 描述 |
| bold | 定义粗体字符 |
| bolder | 定义更粗的字体 |
| lighter | 定义更细的字体 |
| 100~900 | 定义由细到粗，400等同于默认，700为加粗 |
2、文本修饰
- text-align ：文本的水平对齐方式；
- text-decoration:文本修饰线；
- text-transform:单词字母大小写；
- 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{width: 960px;height: 60px;background-color: gray;text-align: center;/* 文字修饰线：删除线、下划线等 */text-decoration: underline;/* 英文单词大小写设置 */text-transform:lowercase;color: green;font-size: 30px;font-family: 微软雅黑;font-weight: bold;font-style: italic }</style>
</head>
<body><p class="font" >测试文本属性，CSDN博客</p>
</body>
</html>运行结果如下：
注：其中水平对齐方式，是指相对于元素容器来说的位置 ，而不是整个网页。
二、图像
1、图像边框样式
- border-color:边框颜色
- border-style：边框线型
- border-width：边框宽度
2、图像透明度
使用opacity属性调整图像透明度（取值范围：0~1）
其中，border-color、border-width、border-style属性可合并写成border：color width style，三个属性值分别用空格隔开
用部分属性举例，代码如下：
<head><style>#img1{width: 300px;height: 300px;background-color: gray;border: green 10px dotted;/* 设置图像不透明度：0.0~1.0 */opacity: 0.5;}</style>
</head>
<body><img id="img1" src="./背景.jpg">
</body>运行结果如下：
三、背景
1、background-color：背景颜色
2、background-img：背景图像
3、背景展示效果
background-repeat：背景图展示效果，当背景图大小小于元素实际区域时，会默认背景图平铺展示，可选属性有以下几个：
（1）no-repeat：不平铺
（2）repeat:平铺（默认）
（3）repeat-x：水平方向平铺
（4）repeat-y：垂直方向平铺
4、background-size：背景图大小
（1）指定宽度和高度
（2）等比缩放
5、background-position：背景图的起始位置
（1）指定位置关键字：
横向：left、center、right；
纵向：top、center、bottom
（2）使用数值：一个代表的是水平位置，一个是垂直位置，采用像素值或百分比形式
用部分属性举例，代码如下：
<head><style>nav{width: 600px;height: 300px;background-color: gray;background-image: url(./CSS常用声明/背景.jpg);background-repeat: no-repeat;/* 背景图片适配容器大小 */background-size: 25% 25%;/* 背景图片在容器内的位置，横向：left、center、right；纵向：top、center、bottom*/background-position: center center;}</style>
</head>
<body><header></header><nav></nav>
</body>
运行结果如下：
四、表格
1、表格的宽度和高度
使用width和height属性定义表格的宽度和高度
table{width: 400px;height: 100px;}2、表格的边框
指CSS表格边框，使用border属性，表格边框的格式可以和图像相同可用空格隔开
table{border: 2px red solid;}3、表格边框线折叠
默认时表格会被折叠成一个个单一的边框
table{border-collapse: collapse;}4、 表格的背景颜色
设置整张表格的背景颜色
table{background-color:red;}5、 单元格内文本的对齐方式
设置单元格内文本水平对齐位置，text-align的属性有left、center、right。
设置单元格内文本垂直对齐位置， vertical-align的属性有top、center、bottom。
td{text-align: center;vertical-align: bottom;}用部分属性举例：
<head><style>.table{width: 400px;height: 100px;border: 2px red solid; border-collapse: collapse; background-color:aquamarine;color: snow;}td{/* 设置单元格内文本水平对齐位置 */text-align: center;/* 设置单元格内文本垂直对齐位置 */vertical-align: bottom;}#td6{background-color: snow;color: black;}</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 id="td6">单元格6</td></tr></table>
</body>
运行结果如下：
五、表单
1、表单的宽度和高度
与上面相同，使用width和height属性定义表单的宽度和高度
2、表单边框颜色、边框大小及线型
可将这三个属性写在border属性内，用空格隔开。
#text2{border: 2px red double; }double表示双实线。
3、背景样式
background-color：设置表单的背景颜色
background-image: url(图片路径)：设置表单背景图片
4、背景图片样式
background-repeat：背景图展示效果，当背景图大小小于元素实际区域时，会默认背景图平铺展示（与上面背景属性内容一致）
5、表单按钮样式
使用以上属性也可以更改按钮样式
选择鼠标指针浮动在其上的样式，使用cursor属性
- auto 默认。浏览器设置的光标
- pointer 光标呈现为指示链接的指针(-只手)
用部分属性举例：
<head><style>#text2{width: 200px;height: 100px;color: aqua;background-color: gray;background-image: url(./CSS常用声明/背景.jpg);background-repeat: no-repeat;border: 2px red double; }#btn2{width: 150px;height: 100px;color: aqua;background-color: green;border: 2px red dashed; cursor: pointer;}</style>
</head>
<body><form action=""><input type="text" id="text1"> 这是默认文本输入框 <br><input type="text" id="text2" value="此处输入您的账号">这是有默认值的输入框 <hr><input type="submit" id="btn1" value="提交"> 这是默认按钮<br><input type="submit" id="btn2" value="登录"> 这是设置样式的按钮</form>
</body>
运行结果如下：
_web前端开发设计_荆州百度推广_百度一下首页手机版)
