CSS常用声明(属性)
目录
5、background-position:背景图的起始位置
一、文本
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>
运行结果如下:
原文地址:https://blog.csdn.net/2302_81659011/article/details/142667985
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!