CSS学习

最新推荐文章于 2024-10-19 15:55:42 发布

qq_45613711

最新推荐文章于 2024-10-19 15:55:42 发布

阅读量96

点赞数

分类专栏： HTML 文章标签： css 学习 html

本文链接：https://blog.csdn.net/qq_45613711/article/details/125044036

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

2.文本样式

2.1文本缩进

属性名：text-indent

取值：数字+px 数字+em(1em =当前标签的font-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>
        p {
            /* 首行缩进2个字的大小 */
            /* 默认字号：16px */
            /* text-indent: 32px; */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>
        2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，
        研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。
        利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，
        最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，
        其他研究者也可以在此基础上进一步加以分析。
    </p>
</body>
</html>

2.2文本水平对齐方式

属性名：text-align

取值：left-左对齐 center-居中对齐 right-右对齐

注意：如果需要文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

<!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>CSS文本水平对齐方式</title>
    <style>
        h1 {
            /* 文本默认左对齐 */
            /* text-align: center; */
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>新闻标题</h1>
</body>
</html>

水平居中方法总结 text-align：center

文本、span标签、a标签、input标签、img标签

2.3文本修饰

属性名：text-decoration

属性值	描述
`none`	默认，没有装饰线（最常用）
`underline`	下划线，链接 a 自带下划线（常用）
`overline`	上划线（几乎不用）
`line-through`	删除线（不常用）

<!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>css文本修饰线</title>
    <style>
        div {
            /* 下划线 */
            text-decoration: underline;
        }

        p {
            /* 删除线 */
            text-decoration: line-through;
        }

        h2 {
            /* 上划线 */
            text-decoration: overline;
        }

        a {
            /* 无装饰线 */
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>p</p>
    <h2>H2</h2>
    <a href="#">超链接</a>
</body>
</html>

开发中会使用 text-decoration : none ; 清除a标签默认的下划线