CSS修饰页面外观——字体、文本、图像样式

努力小贼

于 2024-09-30 16:18:44 发布

阅读量506

点赞数 7

分类专栏： web前端文章标签： css 前端 html

本文链接：https://blog.csdn.net/2302_81399643/article/details/142657733

版权

web前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、字体样式

在CSS中，可以使用以下属性来改变字体样式：

font-family：设置字体的类型。可以设置多个字体，用逗号分隔，浏览器会按照顺序依次使用可用的字体。
font-size：设置字体的大小。可以使用绝对单位（如像素px）或相对单位（如em、rem）。
font-weight：设置字体的粗细。取值有normal（正常）、bold（加粗）、bolder（更加加粗）和lighter（更加细）等。
font-style：设置字体的样式。取值有normal（正常）、italic（斜体）和oblique（倾斜）。

示例代码：

<head>
  <style>
p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  }

  </style>
</head>
<body>
    <p>样式演示</p>
</body>

运行结果：

二、文本样式

CSS文本样式是用于调整网页上文本的外观和排版的一种技术。

以下是一些常用的CSS文本样式：

属性	说明
text-align	设置文本的对齐方式
line-height	设置文本行高
text-decoration	设置文本的装饰效果，如下划线、删除线等
text-transform	设置文本的大小写转换，可以是uppercase（全部大写）、lowercase（全部小写）或capitalize（每个单词首字母大写）
text-indent	设置段落的首行缩进
first-letter	设置首字下沉
text-overflow	设置文本的截断
background-color	设置文本的背景颜色

示例代码：

 <head>
    <style>
        #font3{
            text-decoration: underline;
            /* 英文单词大小写uppercase所有字母大写 */
            text-transform: uppercase;
            /* 首行缩进 */
            text-indent: 50px;
        }
    </style>
</head>
<body>
    <p class="font" id="font3">i like eat apple</p>


</body>

运行结果：

三、图像样式

图像即img元素，作为HTML的一个独立对象，需要占据一定的空间。因此，img元素在页面中的风格样式仍然用盒模型来设计

CSS样式中有关图像控制的常用属性：

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

作为单独的图像本身，它的很多属性可以直接在HTML中进行调整，但是通过CSS统一管理，不但可以更加精确地调整图像的各种属性，还可以实现很多特殊的效果

示例代码：


<head>
    <style>
        #img1{
            width: 300px;
            height: 300px;
            background-color: gray;
            border: green 20px dotted;
            /* 图像不透明度：0.0 ~ 1.0 */
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <img src="./CSS样式规则和引入方式.png" id="img1">

    
</body>

运行结果：

示例代码2：

<head>
    <style>
        footer{
            width: 600px;
            height: 300px;

            background-color: gray;
            /* 图像填充背景 */
            background-image: url(../HTML/3.图片/bana.jpg);
            /* 不平铺 */
            background-repeat: no-repeat;  
            /* 背景图适配容器大小 */
            background-size: 50% 50%;
            /* 背景图像定位：横向：left center right   纵向：top center bottom */
            background-position: center center;  
        }
    </style>
</head>
<body>
    <header></header>
    <nav></nav>

    <main>
        <article></article>
        <aside></aside>
    </main>

    <footer></footer>
</body>

运行结果：

四、练习

实现如下图所示（图片自选）：

示例代码：

<!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>Document</title>
    <style>
        #t1{
            text-align: left;
            text-decoration: underline;
            text-transform: uppercase;
        }
        #t2{
            width: 960px;
            height: 30px;
            text-align: center;
            text-decoration: line-through;
            text-transform: lowercase;
            background-color: yellow;
        }
        #t3{
            text-align: right;
            text-decoration: overline;
            text-transform: capitalize;
        }
        #img1{
            width: 300px;
            height: 300px;
            background-color: gray;
            border: green 20px dotted;
        }
        h6{
            width: 900px;
            height: 600px;
            background-color: gray;
            background-image: url(图片.png);

            background-repeat: no-repeat; 
            background-size: 50% 50%;
            background-position: center top;
        }
    </style>
</head>
<body>
    <p id="t1">first测试文本：靠左对齐，下划线，大写字母</p>
    <p id="t2">second测试文本：居中对齐，删除线，小写字母</p>
    <p id="t3">third测试文本：靠右对齐，上划线，首字母大写</p>
    <img src="图片.png" id="img1">
    <h6></h6>
</body>
</html>