【前端 - CSS】第 9 课 - CSS 初体验

     欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。


目录

1、CSS 定义

2、基础选择器

3、文字控制属性 

4、示例代码 

5、总结 


1、CSS 定义

        层叠样式表(Cascading  Style  Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 文档的呈现(美化内容)

        书写位置:title 标签下方添加 style 双标签,style 标签里面书写 CSS 代码。

<title>CSS 初体验</title>
<style>
    /* 选择器 {} */
    p {
        /* CSS 属性 */
        color:red;
       }
</style>


<p>体验 CSS </p>

2、基础选择器

        在 CSS 中,基础选择器(也称为元素选择器)用于选择 HTML 文档中的特定元素并应用样式。基础选择器 以元素的名称作为选择器,例如 divpa 等。它们是 CSS 规则中最简单和最基本的选择器之一。

        基础选择器的作用是选择特定类型的元素,并将样式应用于这些元素。当 HTML 文档中包含多个相同类型的元素时,基础选择器可以一次选择它们所有,并为它们应用相同的样式规则。

        例如,如果要将所有段落元素 <p> 的文字颜色设置为红色,可以使用以下 CSS 规则:

p {
  color: red;
}

        上述规则中的 p 就是一个基础选择器,它选择了所有 <p> 元素,并将文字颜色设置为红色。通过使用基础选择器,可以轻松地对 HTML 文档中的元素应用通用样式。 

3、文字控制属性 

        在 CSS 中,文字控制属性 用于控制文本的外观和布局。这些属性允许您更改文字的字体、大小、颜色、对齐方式以及其他相关样式。以下是一些常见的文字控制属性及其作用:

①  font - family:用于指定文本的字体系列。可以使用特定字体的名称,或者提供多个字体作为备选项,以确保在某个字体不可用时使用备用字体。

②  font - size:用于设置文本的字体大小。可以指定具体的大小值,如像素或百分比,也可以使用相对值,如相对于父元素的大小。

③  font - wieght:用于控制文本的粗细程度。可以使用关键词如 "normal"(正常)、"bold"(粗体),也可以使用数字值。

④  color:用于设置文本的颜色。可以使用颜色名称、十六进制值或 RGB 值来指定颜色。

⑤  text - align:用于控制文本的水平对齐方式。可以设置为 "left"(左对齐)、"right"(右对齐)、"center"(居中对齐)或 "justify"(两端对齐)。

⑥  line - height:用于设置文本行高。可以使用具体的数值或百分比值,也可以使用相对值。

⑦  text - decoration:用于添加或移除文本装饰效果,如下划线、删除线等。

        这些属性只是文字控制属性中的一部分,还有其他许多属性可用于更精确地控制文本的样式。通过使用这些属性,您可以根据需求自定义文本的外观和布局,从而实现各种视觉效果。

4、示例代码 

<!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>
            /* CSS 代码 */
            /* 选择器 { CSS 属性 } */
            /* 属性名和属性值成对出现 -> 键值对 */
            p {
                /* 文字颜色 */
                color:red;

                /* 字号 */
                font-size:30px;
            }
        </style>

    </head>

    <body>
        <p>体验 CSS</p>
    </body>
</html>

5、总结 

        本期的分享总结就到这里了,如果有疑问的小伙伴儿,我们在评论区交流嗷~~~,笔者必回,我们下期再见啦 !!

前端 - CSS 专栏系列将持续更新 ,,,,,,

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Aperion

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值