目录
使用CSS修饰页面外观：字体、文本与图像样式
在网页设计中，CSS（层叠样式表）扮演着至关重要的角色。它不仅能帮助我们控制网页的布局和结构，还能极大地提升网页的视觉效果。今天，我们将探讨如何使用CSS来修饰页面的字体、文本和图像样式，让你的网页更加美观和吸引人
一、字体样式
字体是网页设计中非常重要的元素之一，选择合适的字体可以显著提升网页的视觉效果和阅读体验。
1. font-family
font-family 属性用来设置元素内文本的字体。能设置的值有很多，列举不了。这里就展示一个。
<html>
<head>
<title>CSS字体</title>
<style>
body {
font-family:"微軟正黑體 Light";
}
</style>
</head>
<body>
<h1>字体展示</h1>
</body>
</html>运行结果
2. font-style
font-style 属性用来设置字体的样式，例如斜体、倾斜等，该属性的可选值如下：
| 值 | 描述 |
|---|---|
| norma | l 默认值，文本以正常字体显示 |
| italic | 文本以斜体显示 |
| oblique | 文本倾斜显示 |
| inherit | 从父元素继承字体样式 |
<!DOCTYPE html>
<html>
<head>
<title>CSS字体</title>
<style>
body {
font-style: oblique;
}
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
.inherit {
font-style: inherit;
}
</style>
</head>
<body>
<p class="normal">normal：标准的字体</p>
<p class="italic">italic：斜体的字体</p>
<p class="oblique">oblique：倾斜的字体</p>
<p class="inherit">inherit：从父元素继承字体样式</p>
</body>
</html>
运行结果
注；您可能觉得 italic 和 oblique 的效果是一样的。但是，italic 显示的字体的斜体版本，而 oblique 则只是一个倾斜的普通字体。
3. font-weight
font-weight 属性能够设置字体的粗细，可选值如下：
| 值 | 描述 |
|---|---|
| normal | 默认值，标准字体 |
| bold | 粗体字体 |
| bolder | 更粗的字体 |
| lighter | 更细的字体 |
也可以输入100-900设置粗细如下
<!DOCTYPE html>
<html>
<head>
<title>CSS字体</title>
<style>
p.weight-100 {
font-weight: 100;
}
p.weight-200 {
font-weight: 200;
}
p.normal {
font-weight: normal;
}
p.bold {
font-weight: bold;
}
p.bolder {
font-weight: bolder;
}
</style>
</head>
<body>
<p class="weight-100">font-weight: 100;</p>
<p class="weight-200">font-weight: 200;</p>
<p class="normal">font-weight: normal;</p>
<p class="bold">font-weight: bold;</p>
<p class="bolder">font-weight: bolder;</p>
</body>
</html>
运行结果
4. font-size
font-size 属性用来设置字体的大小（字号），可选值如下：
| 值 | 描述 |
|---|---|
| xx-small、x-small、small、medium、large、x-large、xx-large | 以关键字的形式把字体设置为不同的大小，从 xx-small 到 xx-large 依次变大，默认值为 medium |
| smaller | 为字体设置一个比父元素更小的尺寸 |
| larger | 为字体设置一个比父元素更大的尺寸 |
| length | 以数值加单位的形式把字体设置为一个固定尺寸，例如 18px、2em% 以百分比的形式为字体设置一个相对于父元素字体的大小 |
| inherit | 从父元素继承字体的尺寸 |
<!DOCTYPE html>
<html>
<head>
<title>CSS字体</title>
<style>
.xx_small {
font-size: xx-small;
}
.x_small {
font-size: x-small;
}
.small {
font-size: x-small;
}
.medium {
font-size: x-small;
}
.large {
font-size: large;
}
.x-large {
font-size: x-large;
}
.xx-large {
font-size: xx-large;
}
.smaller {
font-size: smaller;
}
.larger {
font-size: larger;
}
.font-20 {
font-size: 20px;
}
</style>
</head>
<body>
<p class="xx_small">将字体大小设置为：xx-small</p>
<p class="x_small">将字体大小设置为：x-small</p>
<p class="small">将字体大小设置为：x-small</p>
<p class="medium">将字体大小设置为：medium</p>
<p class="large">将字体大小设置为：large</p>
<p class="x-large">将字体大小设置为：x-large</p>
<p class="xx-large">将字体大小设置为：xx-large</p>
<p class="smaller">将字体大小设置为：smaller</p>
<p class="larger">将字体大小设置为：larger</p>
<p class="font-20">将字体大小设置为 20 像素</p>
</body>
</html>
运行结果
5. font-variant
font-variant 属性可以将文本中的小写英文字母转换为小型大写字母（转换后的大写字母与转换前小写字母的大小相仿，所以称之为小型大写字母）。font-variant 属性的可选值如下
| 值 | 描述 |
|---|---|
| normal | 默认值，浏览器会显示一个标准的字体 |
| small-caps | 将文本中的小写英文字母转换为小型大写字母 |
| inherit | 从父元素继承 font-variant 属性的值 |
<!DOCTYPE html>
<html>
<head>
<title>CSS字体</title>
<style>
.normal {
font-variant: normal
}
.small {
font-variant: small-caps
}
</style>
</head>
<body>
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
</body>
</html>
运行结果
二、文本样式
1.文本颜色
<style>
a {
color: #ff6347;
}
</style>
<a>我是字体颜色</a>运行结果
2.文本对齐
文本对齐方式影响文本块在容器中的位置。我们可以选择左对齐、右对齐、居中对齐或两端对齐。
使用text-align属性用于设置元素内文本内容的水平对齐方式，其属性值如下：
| 值 | 描述 |
|---|---|
| left | 左对齐（默认值） |
| center | 居中对齐 |
| righ | 右对齐 |
<style>
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.example {
border: 1px solid
}
</style>
</head>
<body>
<div class="example align-left">
<p>左对齐的文本</p>
</div>
<div class="example align-center">
<p>居中对齐的文本</p>
</div>
<div class="example align-right">
<p>右对齐的文本</p>
</div>
</body>
运行结果
3.文本修饰
使用text-decoration属性规定添加到文本的修饰，其属性值如下
| 值 | 描述 |
|---|---|
| none | 默认值，无任何修饰（最常用） |
| underline | 下划线，例如链接a标签自带的下划线（常用） |
| overline | 上划线（几乎不用） |
| line-through | 删除线（不常用） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本修饰示例</title>
<style>
.example {
border: 1px
}
.none {
text-decoration: none; /* 无任何修饰 */
}
.underline {
text-decoration: underline; /* 下划线 */
}
.overline {
text-decoration: overline; /* 上划线 */
}
.line-through {
text-decoration: line-through; /* 删除线 */
}
</style>
</head>
<body>
<div class="example none">
<p>这是无任何修饰的文本（text-decoration: none）。</p>
</div>
<div class="example underline">
<p>这是带有下划线的文本（text-decoration: underline）。</p>
</div>
<div class="example overline">
<p>这是带有上划线的文本（text-decoration: overline）。</p>
</div>
<div class="example line-through">
<p>这是带有删除线的文本（text-decoration: line-through）。</p>
</div>
</body>
</html>运行结果
三、图像样式
在网页设计中，图像是传递信息、营造氛围和吸引用户注意力的关键元素
| 值 | 描述 |
| width、height | 设置图像的缩放 |
| border | 设置图像边框样式 |
| opacity | 设置图像的不透明度 |
| background-image | 设置背景图像 |
| background-repeat | 设置背景图像重复方式 |
| background-position | 设置背景图像定位 |
| background-attachment | 设置背景图像固定 |
| background-size | 设置背景图像大小 |
<style>
/* 为图像设置样式 */
.styled-image {
width: 300px; /* 设置图像宽度 */
height: auto; /* 高度自适应以保持比例 */
border: 5px solid #007BFF; /* 设置蓝色实线边框 */
opacity: 0.8; /* 设置不透明度为80% */
}
/* 为背景图像设置样式 */
.background-container {
width: 400px;
height: 300px;
background-image: url('th (2).jpg');
background-repeat: no-repeat; /* 背景图像不重复 */
background-position: center center; /* 背景图像居中显示 */
background-size: cover; /* 背景图像覆盖整个容器并保持比例 */
}
</style>
</head>
<body class="background-container">
<!-- 演示图像 -->
<img src="th.jpg" alt="演示图像" class="styled-image">
<!-- 演示背景图像 -->运行结果
总结css就是让你的网页变得生动，穿上好看的衣服
扫一扫
1214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
