CSS样式

小k鏖

已于 2024-10-08 22:14:24 修改

阅读量304

点赞数 1

文章标签： css 前端

于 2024-10-07 22:25:18 首次发布

本文链接：https://blog.csdn.net/2301_79765198/article/details/142747650

版权

CSS字体样式

在CSS中，您可以使用多种属性来自定义文本的字体样式。以下是一些常用的字体样式属性：

font-family：设置文本的字体类型。可以指定具体的字体名称或者使用通用字体族，如serif、sans-serif等。
font-size：设置文本的大小，通常使用像素（px）、点（pt）、em等单位。
font-weight：设置文本的粗细，常见值有normal、bold、bolder、lighter以及数值100到900。
font-style：设置文本的风格，如normal、italic（斜体）或oblique。
color：设置文本的颜色，可以使用颜色名称、十六进制值或RGB值。

CSS文本样式

文本样式属性用于调整文本的布局和视觉效果，包括：

text-align：设置文本的水平对齐方式，如left、right、center或justify。
text-decoration：添加文本装饰，如underline（下划线）、overline（上划线）、line-through（删除线）或none。
text-transform：设置文本的大小写，如uppercase（全部大写）、lowercase（全部小写）或capitalize（首字母大写）。
text-indent：设置文本的首行缩进。
line-height：设置文本行的高度，可以是具体长度值或相对于字体大小的百分比。
first-letter：设置首字下沉 text-overflow：设置文本的截断
background-color：设置文本的背景颜色

CSS图像样式

CSS也提供了多种属性来设置图像的样式，例如：

width 和 height：设置图像的尺寸。
border：设置图像周围的边框样式、宽度和颜色。
float：使图像浮动到包含块的左侧或右侧。
margin 和 padding：设置图像与其周围元素的外边距和内边距。
opacity：设置图像的不透明度。
border-radius：设置图像的圆角。
background-image：设置背景图像
background-repeat：设置背景图像重复方式
background-position：设置背景图像定位
background-attachment：设置背景图像固定
background-size：设置背景图像大小

练习

代码

<!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>

以上属性可以单独使用，也可以组合使用，以达到预期的设计效果。在实际应用中，您可以根据需要灵活运用这些CSS属性来美化网页中的文本和图像.