CSS外观属性

碎碎奶黄包

于 2024-06-14 18:03:23 发布

阅读量290

点赞数 5

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_78854119/article/details/139687332

版权

CSS提供了丰富的外观属性来控制和美化HTML元素的外观。以下是一些主要的CSS外观属性及其简要介绍：

1.color:文本颜色

作用：color属性用于定义文本的颜色

取值方式：

2.text-align:文本水平对齐方式

作用：text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性

属性值如下：

注意：是让盒子里边的内容水平居中，而不是让盒子居中对齐

3.line-height:行间距

作用：
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高

单位：
line-height常用的属性值单位有三种，分别为像素px 相对值em 百分比%

4.text-indent：首行缩进

作用：
text-indent属性御用设置首行文本的缩进

5.text-decoration 文本的装饰

作用：
通常用于给超链接修改装饰效果

6.css外观属性总结

演示代码如下：

<!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>
        .odiv {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /* 盒子模型  宽、高*/
            line-height: 200px;
            /* 行高 让文本在当前行内最中间，单行文本垂直居中 */
            /* 盒子中单行文本垂直居中 ，需设置行高为盒子高度 */
            text-align: center;
            /* 内容在水平方向对齐方式：left左对齐 center居中 right右对齐 */
        }
        
        .inp {
            text-align: center;
            /* 不仅文本居中，任何元素都可以 */
        }
        
        .sh {
            text-indent: 2em;
            /* 首行缩进2字符 */
            letter-spacing: 10px;
            /* 字符间距 -16px重叠*/
            /* word-spacing: 15px;
            单词的间距 以空格识别，中文也适用*/
        }
        
        .oa {
            text-decoration: rgb(19, 19, 196);
        }
        
        .oa:hover {
            color: red;
            /* hover链接伪类选择器，鼠标经过由原来的蓝色变为红色 */
        }
        
        .yy {
            /* text-shadow: -1px 0px 1px red;
            /* 左右 上下 模糊 颜色 */
            /* text-shadow: 0px 10px 1px rgb(41, 31, 186);
            设置多种阴影，以最后一个为主，会发生覆盖 */
            text-shadow: -1px 0px 0px red, -1px 0px 0px rgb(41, 31, 186);
        }
    </style>
</head>

<body>
    <div class="odiv">
        今天星期五！
    </div>
    <div class="inp"><input type="text"></div>
    <!-- 不能嵌套div -->
    <div class="sh">内容在水平方向对齐方式：left左对齐 center居中 right右对齐 </div>
    <a href="#" class="oa">这是一个a标签</a>
    <div class="yy">
        碳达峰碳中和顶层设计快马加鞭
    </div>

</body>

</html>

这些属性只是CSS外观属性的一部分，但涵盖了最常用的功能。通过组合这些属性，你可以创建出丰富多样的网页效果。