CSS修饰页面字体、文本、图像样式-CSDN博客

本文链接：https://blog.csdn.net/2301_81466619/article/details/142717453

在网页设计中，CSS（层叠样式表）是塑造视觉效果的基石。通过精心设计的CSS样式，我们可以让字体、文本和图像焕发新生，为用户带来愉悦的浏览体验。本文将深入探讨CSS在字体、文本和图像样式方面的应用，分享实用技巧和最佳实践。

一、字体样式

字体是网页内容的灵魂，选择合适的字体并设置恰当的样式对于提升网页的整体美感至关重要。

字体族的选择
使用font-family属性指定字体族，如font-family: 'Arial', sans-serif;。注意，应提供多个字体选项，以防用户计算机上没有安装首选字体。
字体大小的调整
通过font-size属性设置字体大小，可以使用像素（px）、百分比（%）或相对单位（如em、rem）。例如，font-size: 16px;。
字体粗细与风格
利用font-weight调整字体粗细，如font-weight: bold;或font-weight: 700;。
使用font-style设置字体风格，如font-style: italic;实现斜体效果。
字体变体与小型大写
font-variant属性可用于设置字体的变体形式，如小型大写字母：font-variant: small-caps;。
行高与字间距
line-height属性控制行高，影响文本的垂直间距。
letter-spacing属性调整字母之间的间距，为文本增添独特的视觉效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<head> 
<style>
#font        {
        font-size: 30px;
        font-family:楷体 ;
        font-weight: 2px;
        font-style: italic;}</style>
</head>
<body> 

 <p class="font">测试字体属性</p>
</body>
</html>

二、文本样式

文本样式是塑造网页氛围的关键，通过CSS可以轻松实现文本的颜色、对齐、装饰等效果。

文本颜色
使用color属性设置文本颜色，如color: #333;或color: rgba(0, 0, 0, 0.8);。
文本对齐
通过text-align属性实现文本的水平对齐，包括左对齐、右对齐、居中和两端对齐。
文本装饰
text-decoration属性用于添加或移除文本装饰，如下划线、上划线和中划线。
文本阴影
text-shadow属性为文本添加阴影，增强视觉层次感。
文本溢出与换行
使用white-space、overflow和word-wrap等属性控制文本的溢出和换行行为。

<!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>
        #font2
        {
            width: 960px;
            height: 30px;
            background-color: beige;
            color:green;
            font-size: 30px;
            font-family:楷体 ;
            font-weight: 2px;
            font-style: italic;
            text-align: center;
            /* 这个水平对齐方式，是指相对于元素容器来说的位置 */
            text-decoration: solid;
            /* 文字修饰线：删除线，下滑线，上划线 */
            text-transform: capitalize;
            /* 英文单词的大小写设置 */
        }
      

    </style>
</head>
<body>
    
  
    <p class="font" id="font2">测试字体属性</p>
</body>
</html>

三、图像样式

图像是网页中不可或缺的视觉元素，CSS提供了丰富的样式选项来优化图像的显示效果。

图像大小与缩放
使用width和height属性设置图像的宽度和高度，或使用max-width和max-height限制图像的最大尺寸。
object-fit属性控制图像在容器中的填充方式，如cover、contain等。
图像边框与阴影
通过border属性为图像添加边框，如border: 2px solid #000;。
使用box-shadow属性为图像添加阴影，增强立体感。
图像滤镜与透明度
filter属性提供了一系列滤镜效果，如模糊、灰度、亮度等。
opacity属性设置图像的透明度，影响图像与背景色的混合程度。
图像背景与响应式
使用background-image属性将图像设置为元素的背景，并通过background-size、background-position等属性调整背景图像的显示效果。
在响应式设计中，利用媒体查询（@media）根据屏幕尺寸调整图像样式，确保在不同设备上都能获得良好的视觉效果。

<!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>
        #img1
        {
            width: 300px;
            height: 300px;
            background-color: gray;
            /* border-color: green;
            border-width: 30px;
            border-style: solid; */
            border: red 30px dashed;
            /* 合并写法 */
            opacity: 1;

        }
    </style>
</head>
<body>
    <img id="img1" src="./2.jpg">
</body>
</html>