【前端 - 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 专栏系列将持续更新 ,,,,,,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/27686.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前端vue地图定位并测算当前定位离目标位置距离

前端vue地图定位并测算当前定位离目标位置距离, 下载完整代码请访问uni-app插件市场地址: https://ext.dcloud.net.cn/plugin?id12974 效果图如下: # #### 使用方法 使用方法 <!-- // 腾讯地图key注册地址&#xff08;针对H5端&#xff0c;manifest.json中web配置&…

触发器和事件自动化的讲解

触发器和事件自动化 一、触发器 1、触发器的基本概念 触发器是和表相关的一种数据库对象&#xff0c;可以将他看作一种特殊的存储过程&#xff0c;不需要人为调动的存储过程。 关键字&#xff1a;trigger 基本作用&#xff1a;通过对表进行数据的插入、更新或删除等操作来触…

XGBoost的介绍

一、XGBoost的介绍 1.什么是XGBoost&#xff1f; XGBoost&#xff08;eXtreme Gradient Boosting&#xff09;是一种基于梯度提升树的机器学习算法&#xff0c;它在解决分类和回归问题上表现出色。它是由陈天奇在2014年开发的&#xff0c;如今已成为机器学习领域中最流行和强…

那年我头脑发热,选择了自动化,后来我掉入计算机的世界无法自拔

首先&#xff0c;小雅兰是22届高考考生&#xff0c;而且当时填报志愿也没有填报到计算机相关的专业去&#xff0c;小雅兰是自动化专业的学生&#xff0c;是由于一次偶然的机会&#xff0c;了解到了这个行业&#xff0c;对于写代码所带来的成就感&#xff0c;总之&#xff0c;我…

2023春期末考试选择题R2-9AVL树插入调整详解

题目&#xff1a; 将 8, 9, 7, 2, 3, 5, 6, 4 顺序插入一棵初始为空的AVL树。下列句子中哪句是错的&#xff1f; A. 4 和 6 是兄弟 B. 5 是 8 的父结点 C. 7 是根结点 D. 3 和 8 是兄弟 解题要点&#xff1a; 需要对AVL树的4种旋转方式熟悉。 AVL旋转过程&#xff1a; 根据…

人事管理项目-部门数据删除

人事管理项目-部门数据删除 后端实现前端实现 Spring Boot是一个框架&#xff0c;一种全新的编程规范&#xff0c;它的产生简化了框架的使用&#xff0c;所谓简化是指简化了Spring众多框架中所需的大量且烦琐的配置文件&#xff0c;所以Spring Boot是一个服务于框架的框架&…

使用IDEA使用Git:Git使用指北——实际操作篇

Git使用指北——实际操作 &#x1f916;:使用IDEA Git插件实际工作流程 &#x1f4a1; 本文从实际使用的角度出发&#xff0c;以IDEA Git插件为基座讲述了如果使用IDEA的Git插件来解决实际开发中的协作开发问题。本文从 远程仓库中拉取项目&#xff0c;在本地分支进行开发&…

电路模型和电路定律(3)——“电路分析”

小雅兰期末加油冲冲冲&#xff01;&#xff01;&#xff01; 复习之前的内容&#xff1a; 这样的连接方式是不可以的&#xff1a; 两个电压源&#xff0c;电压值不相同&#xff0c;是不能并联的 两个电流源&#xff0c;电流值不相同&#xff0c;是不能串联的 电流源也不能开…

PoseiSwap的趋势性如何体现?

DEX 代表了一种先进的意识形态&#xff0c;相对于 CEX 其更强调无许可、去中心化以及公开透明。然而随着 DeFi 赛道逐渐从 2021 年年底的高峰逐渐转向低谷&#xff0c;DEX 整体的交易量、TVL等数据指标也开始呈现下滑的趋势&#xff0c;DEX 正在面临发展的新瓶颈期。 在这样的背…

漂亮国因一颗气球而疯狂给质量团队带来的启示

最近漂亮国因为我国的一颗漂洋过海的淘气的民用气球而疯狂。这颗气球成功躲过了号称全球最先进的防空系统&#xff0c;跨越大半个漂亮国&#xff0c;直到被一居民拍照无意间发现&#xff0c;漂亮国才反应过来。多次派战斗机拦截无果&#xff0c;在气球降到15km后&#xff0c;F2…

【云原生】Docker容器服务更新与发现之consul

1.consul的相关知识 1.1 什么是注册与发现 服务注册与发现是微服务架构中不可或缺的重要组件。起初服务都是单节点的&#xff0c;不保障高可用性&#xff0c;也不考虑服务的压力承载&#xff0c;服务之间调用单纯的通过接口访问。直到后来出现了多个节点的分布式架构&#xff0…

day8 栈顶的种类与应用

目录 多寄存器访问指令与寻址方式 多寄存器内存访问指令 多寄存器内存访问指令的寻址方式 ​编辑 栈的种类与使用 栈的概念 栈的分类 栈的应用举例 叶子函数的调用过程举例 多寄存器访问指令与寻址方式 多寄存器内存访问指令 MOV R1, #1 MOV R2, #2 MOV R3, #3 MOV R…

PL2303HXA自2012已停产,请联系供货商的解决办法

一、概述 PL2303 是Prolific 公司生产的一种高度集成的接口转换器&#xff0c;可提供一个RS232 全双工异步串行通信装置与USB 功能接口便利连接的解决方案。PL2303具有多个历史版本&#xff0c;早期的版本是PL2303HX, 近年有PL2303HXA、PL2303HXC、PL2303HXD&#xff08;D版本…

详解Java中static的使用及其注意事项

1.可以用来修饰的结构&#xff1a; 主要用来修饰类的内部结构 属性、方法、代码块、内部类 2.static修饰属性&#xff1a;静态变量&#xff08;或类变量&#xff09; ​ 2.1 属性&#xff0c;是否使用static修饰&#xff0c;又分为&#xff1a;静态属性 vs 非静态属性(实例…

Java中方法的重载与重写

文章目录 前言方法重载方法重写 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 方法的重载与重写容易混&#xff0c;所以单独拿出来比较 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 方法重载 在同一个类中&#xff0c;允…

注解、原生Spring、SchemaBased三种方式实现AOP【附详细案例】

目录 一、注解配置AOP 1. 开启注解支持 2. 在类和方法加入注解 3. 测试 4. 为一个类下的所有方法统一配置切点 二、原生Spring实现AOP 1. 引入依赖 2. 编写SpringAOP通知类 3. 编写配置类bean2.xml 4 测试 三、SchemaBased实现AOP 1. 配置切面 2. 测试 往期专栏…

【二十七】springboot之通过threadLocal+参数解析器实现同session一样保存当前登录信息的功能

springboot篇章整体栏目&#xff1a; 【一】springboot整合swagger&#xff08;超详细 【二】springboot整合swagger&#xff08;自定义&#xff09;&#xff08;超详细&#xff09; 【三】springboot整合token&#xff08;超详细&#xff09; 【四】springboot整合mybatis…

5.部署LVS-DR群集

文章目录 部署LVS-DR群集LVS-DR数据包流向分析LVS-DR中的ARP问题问题一问题二 LVS-DR部署调度器配置节点服务器配置NFS服务器配置 ipvsadm 部署LVS-DR群集 LVS-DR数据包流向分析 为方便进行原理分析&#xff0c;将Client与群集机器放在同一网络中&#xff0c;数据包流经的路线…

代码随想录第55天

1.判断子序列&#xff1a; 动态规划五部曲分析如下&#xff1a; 确定dp数组&#xff08;dp table&#xff09;以及下标的含义 dp[i][j] 表示以下标i-1为结尾的字符串s&#xff0c;和以下标j-1为结尾的字符串t&#xff0c;相同子序列的长度为dp[i][j]。 注意这里是判断s是否…

OneFormer:规则通用图像分割的一个Transformer

文章目录 OneFormer: One Transformer to Rule Universal Image Segmentation摘要本文方法实验结果 OneFormer: One Transformer to Rule Universal Image Segmentation 摘要 通用图像分割并不是一个新概念。过去统一图像分割的尝试包括场景解析、全景分割&#xff0c;以及最…