css常用样式

最新推荐文章于 2024-05-13 08:00:00 发布

啃西瓜的小煤球

最新推荐文章于 2024-05-13 08:00:00 发布

阅读量213

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/A1010574609/article/details/101270924

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS常用样式</title>
    <style>
        /* 
            行元素特点：
            不能设置宽高，宽高由内容撑开

            行内块元素：介于行元素和块元素之间，本质是行元素，但具备块元素的特点，即可以设置宽高和边距
         */
        span{
            background-color:red;
            width:200px;
            height:100px;
            /* 设置行内块元素 */
            display:inline-block;
            /* 设置块元素 */
            /* display:block; */
            font-size:20px;
            /* 设置字体加粗，数值可以是100-900之间的整百值 */
            font-weight:bold;
            /* 设置斜体文字 */
            font-style:italic;
            /* 默认文本内容是基线对齐
                四线三格的笔记本
                顶线
                中线
                基线 （默认情况下，文字只占据中间那一格）
                底线
            
             */
        }
        p{
            /* 设置边框 */
            border:solid 1px #000;
            /* 边框圆角 */
            border-radius:5px;
            /*  设置边框阴影：水平 竖直  模糊度  */
            box-shadow:0 0 20px red;
            /* 处理文字之间的间距 */
            letter-spacing: 10px;
            /* 文本阴影 水平 竖直  模糊度 */
            text-shadow: 10px 10px 0.5px green;
            /* 首行缩进 n个字符  nem */
            text-indent:2em;
            /* 设置行高 */
            line-height:30px;
            /* 设置文本装饰：下划线 */
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <span> 文本标签 </span>
    <span> 没有特殊含义的文本标签 标签标签</span>
    <span> 文本标签 </span>
    <br>
    <p>
        普通的段落标签，内部放置大量的文本内容及文本标签。普通的段落标签，内部放置大量的文本内容及文本标签。普通的段落标签，内部放置大量的文本内容及文本标签。普通的段落标签，内部放置大量的文本内容及文本标签。
    </p>
</body>
</html>