CSS学习（一）

最新推荐文章于 2024-07-25 15:07:09 发布

J罗家的小可爱。

最新推荐文章于 2024-07-25 15:07:09 发布

阅读量567

点赞数

分类专栏： html 文章标签： css

本文链接：https://blog.csdn.net/weakbirdfarmer/article/details/124315455

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

#CSS学习（一）

文章目录

1.CSS文本属性
2.CSS引入方式
3.Emmet语法
4.CSS的复合选择器
5.元素的显示模式

1.CSS文本属性

1.1 文本颜色

    <style>
        div {
            /* color: #c0f;  */
            color: rgb(200, 0, 0);
        }
    </style>

在这里插入图片描述
1.2 对齐文本

        h1 {
           /* text-align只能设置水平对齐方式； */
           text-align: center;
        }

在这里插入图片描述
1.3 装饰文本

        div {
            text-decoration: underline;
        }

在这里插入图片描述

        div {
            text-decoration: line-through;
        }

在这里插入图片描述

        div {
            /* 删除线 */
            /* text-decoration: line-through; */
            /* 上划线 */
            text-decoration: overline;
        }

在这里插入图片描述
1.4 文本缩进

        p {
            text-indent: 20px;
        }

在这里插入图片描述
1.5 行间距
line-height

2.CSS引入方式

1.行内样式表

<p style="color: rgb(45, 143, 110);">行内样式表：我的梦想是成为摄影师!</p>

2.内部样式表

<style>
        /* 嵌入式引入 */
             div {
                 color :pink;
             }
    </style>
</head>
<body>
    <div>这个粉色就是内部样式表控制的</div>

3.外部样式表

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

3.Emmet语法

在这里插入图片描述

4.CSS的复合选择器

在这里插入图片描述
1.后代选择器

2.子选择器

3.并集选择器

4.伪类选择器
①.链接伪类选择器
2.：focus选择器

5.元素的显示模式

①块元素
在这里插入图片描述

②行内元素
在这里插入图片描述
③行内块元素

④元素显示模式的转换
把行内元素转换为块级元素：display:block
转换为行内元素：display：inline-block；
转换为行内块：display:inline-block;

J罗家的小可爱。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习（一）

#CSS学习（一）文章目录1.CSS文本属性2.CSS引入方式3.Emmet语法4.CSS的复合选择器5.元素的显示模式总结1.CSS文本属性1.1 文本颜色 <style> div { /* color: #c0f; */ color: rgb(200, 0, 0); } </style>1.2 对齐文本 h1 { /* text-
复制链接

扫一扫