CSS的字体、文本和图像样式和例子-CSDN博客

本文链接：https://blog.csdn.net/d7210/article/details/142662332

css字体样式属性：

font-family	字体的类型
font-size	字体的大小（常用单位px）
font-weight	字体的粗细（normal正常、bold加粗等）
font-style	字体的倾斜（italic斜体、oblique倾斜等）

css的文本样式属性（常用）：

text-align	文本的水平对齐方式（center、left等）
line-height	行高（常用单位px）
text-decoration	文本修饰效果（underline下划线、overline上划线、line-through删除线等）
text-indent	段落的首行缩进
text-overflow	文本的截断
first-letter	首字下沉
text-transform	英文字母的大小写（uppercase全大写、lowercase全小写、capitalize每个英文首字母大写）
background-color	文本的背景颜色

css的图像样式：

width、height	图像的缩放
border	图像边框样式
opacity	图像的不透明度
background-image	背景图像
background-repeat	背景图像重复方式
background-position	背景图像定位
background-attachment	背景图像固定
background-size	背景图像大小

例子：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

#p1{

text-decoration: underline;

text-align: left;

text-transform: uppercase;

}

#p2{

height: 20px;

width: 400px;

background-color: yellow;

text-decoration: line-through;

text-align: center;

text-transform: lowercase;

}

#p3{

text-decoration: overline;

text-align: right;

text-transform: capitalize;

}

#img1{

height: 250px;

width: 250px;

border: 20px green dotted;

background-color: gray;

display: block;

}

h6{

height: 300px;

width: 500px;

background-color: gray;

background-repeat: no-repeat;

background-size: 50% 50%;

background-position: center top;

background-image: url(./风景.jpg);

}

</style>

</head>

<body>

<p id="p1">靠左对齐，下划线，大写字母</p>

<p id="p2">居中对齐，删除线，小写字母</p>

<p id="p3">靠右对齐，上划线，单词首大写字母</p>

<img src="./风景.jpg" id="img1">

<h6></h6>

</body>

</html>

运行结果：