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

news2024/11/25 23:28:38

     欢迎来到博主 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 专栏系列将持续更新 ,,,,,,

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IP组播6_PIM-SM(SSM)详解

目录 1.PIM-SM&#xff08;SSM&#xff09;简介 2.PIM-SM&#xff08;ASM&#xff09;工作原理 3.PIM-SM&#xff08;SSM&#xff09;实验 3.1 PIM-SM&#xff08;SSM&#xff09;常用配置命令 3.2 PIM-SM&#xff08;ASM&#xff09;实验配置步骤 3.3 PIM-SM&#xff08…

HTMLCSS Day01 功能元素与HTTP请求协议详解

文章目录 1.功能元素1.1.列表标签- HTML中列表标签的分类 1.1.1.无序列表:- 无序列表格式:- 无序列表样式- 注意点:- 无序列表应用场景: 1.1.2.有序列表- 有序列表格式:- 有序列表样式 1.1.3.定义列表- 定义列表的格式:- 定义列表的应用场景- 定义列表的注意点 1.2.表格标签- 什…

【算法】手写题

文章目录 画一个三角形实现三栏布局通过position和margin通过float和margin通过flex实现 变量提升题实现边框0.5px深拷贝快速排序手写发布订阅/事件总线 画一个三角形 .box1 {width: 0;height: 0;border: 10px solid;border-color: red transparent transparent transparent;}实…

window编写redis服务启动脚本

日常工作中&#xff0c;每次启动项目总会忘记开启redis服务&#xff0c;并收货一天中的第一个项目报错&#xff0c;然后经历繁琐的文件查找redis所在目录&#xff0c;并点击redis-server.exe&#xff0c;启动服务&#xff0c;于是笔者在想&#xff0c;如果在桌面写个脚本一键启…

新项目,不妨采用这种架构分层,很优雅

在专栏开篇提到过DDD&#xff08;Domain-Driven Design&#xff0c;领域驱动设计&#xff09;学习起来较为复杂&#xff0c;一方面因为其自身涉及的概念颇多&#xff0c;另一方面&#xff0c;我们往往缺乏实战经验和明确的代码模型指导。今天&#xff0c;我们将专注于DDD的分层…

机器学习笔记 - EANet 外部注意论文简读及代码实现

一、论文简述 论文作者提出了一种新的轻量级注意力机制&#xff0c;称之为外部注意力。如图所示&#xff0c;计算自注意力需要首先通过计算自查询向量和自关键字向量之间的仿射关系来计算注意力图&#xff0c;然后通过用该注意力图加权自值向量来生成新的特征图。外部关注的作用…

条款29:假定移动操作不存在、成本高、未使用

移动语义可以说在C11的所有语言特性中占据着首要中的首要地位。“移动容器现在和复制指针一样成本低廉了&#xff01;”这是你很可能听说过的&#xff0c;类似说法还有“复制临时对象现在已经如此高效&#xff0c;如果刻意在撰写代码总避免它&#xff0c;就无异于犯了过早优化的…

java SSM 程序在线评判系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM 程序在线评判系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采…

PDCA循环

PDCA循环 由美国质量管理专家沃特阿曼德休哈特&#xff08;Walter A. Shewhart&#xff09;首先提出的&#xff0c;由戴明采纳、宣传&#xff0c;获得普及&#xff0c;所以又称戴明环。 模型介绍 戴明是一位美国的质量管理大师&#xff0c;却成名于日本。在他的帮助下&#xf…

JQuery 操作Class实现前段交互方案(推荐)

一、JQuery基础控制图片宽度实现动画交互 1.html页面声明周期 //页面生命周期 //页面的数据html&#xff0c;加载完成&#xff0c; 图片ajax视频 在异步加载中 //document.ready---DOMContentLoaded ----小程序onload ---Vue created() //页面加载完成 //window.onload…

二叉树的相关操作

一.二叉树 本文的数据结构基于C语言练习。 C语言中的二叉树是一种数据结构&#xff0c;用于表示具有层次关系的数据集合。它由一个根节点开始&#xff0c;每个节点最多有两个子节点&#xff0c;分别称为左子节点和右子节点。 二叉树有许多相关性质&#xff0c;其中一些重要的包…

记录一下idea黄色警戒线问题

记录一下idea黄色警戒线问题 一、通用文件中解决黄色波浪线问题1.选中File中的Settings进入2.点击Editor&#xff0c;选中Inspections&#xff0c;找到General&#xff0c;找到Dulicated code fragment点击取消 二、SQL文件中黄色警告线 一、通用文件中解决黄色波浪线问题 1.选…

jvm之7种垃圾回收器解读(下)

目录 G1回收器&#xff1a;区域化分代式 G1回收器的特点&#xff08;优势&#xff09; 空间整合 可预测的停顿时间模型&#xff08;即&#xff1a;软实时soft real-time&#xff09; G1垃圾收集器的缺点 G1回收器的参数设置 G1收集器的常见操作步骤 G1收集器的适用场景 分…

Spring SpringMVC Mybatis 整合 SSM整合 一篇就够了!

SSM详细整合教程 因为XML注解方式实现更加方便&#xff0c;所以我门选用它 文章目录 SSM详细整合教程一、整合思路二、整合步骤0. 前期准备引入Jar包与Web目录创建1. Spring框架编写1.1 创建Application配置文件 2. SpringMvc框架编写2.1 创建Springmvc-config文件2. 2 配置前端…

用栈模拟实现队列(c语言版)

前言 用"栈实现队列",力扣中一道oj题,可以帮助刚接触"栈"和"队列"的新手更好的理解栈和队列这两种结构. 题目来源于力扣: 题目链接:https://leetcode.cn/problems/implement-queue-using-stacks/ 难度:简单 目录 前言一、队列的各接口:1.1 类型…

机器学习实战六步法之数据收集方法(四)

要落地一个机器学习的项目&#xff0c;是有章可循的&#xff0c;通过这六个步骤&#xff0c;小白也能搞定机器学习。 看我闪电六连鞭&#xff01;&#x1f923; 数据收集 数据是机器学习的基础&#xff0c;没有数据一切都是空谈&#xff01;数据集的数据量和数据的质量往往决…

潮牌搭配APP的设计与实现

摘 要&#xff1a;本文开发过程以android为中心&#xff0c;通过数据库进行的数据访问操作。软件以面向对象的思维进行开发和设计&#xff0c;针对于广大群众进行下载使用&#xff0c;对用户提供了时尚的搭配&#xff0c;带领用户形成自己的一套搭配系统&#xff0c;做自己搭配…

C++ std::thread 与Qt qthread多线程混合编程

C与Qt深度融合&#xff1a;高效设计多线程应用框架 1. C与Qt线程的混合使用1.1 C线程与Qt线程的基本概念1.2 线程间的相互依赖关系1.3 设计合理的代码框架 二、深入理解C和Qt线程模型2.1 C线程模型2.2 Qt线程模型2.3 C和Qt线程模型的比较 三、C和Qt线程间的互操作性3.1 std::th…

Web应用技术(第十六周/END)

本次练习基于how2j的教程完成对SpringBoot的初步学习。 初识Springboot 学习导入&#xff1a;1.第一个基于SpringBoot的项目&#xff1a;&#xff08;1&#xff09;application.java&#xff1a;该文件中的核心代码&#xff1a; &#xff08;2&#xff09;HelloController.java…

浅结代码混淆2

文章目录 SMC 自解码什么是SMC&#xff1f;原理示例动调 &#xff4d;ov混淆 SMC 自解码 什么是SMC&#xff1f; 简而言之&#xff0c;就是程序中的部分代码在运行之前被加密成一段数据&#xff0c;不可反编译&#xff0c;通过程序运行后执行相关的解码功能&#xff0c;对加密…