CSS常用声明（属性）

一、文本

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>

运行结果如下：