当前位置： 首页 > news >正文

CSS样式基础样式选择器(案例+代码实现+效果图)

news 文章来源：https://blog.csdn.net/2301_76862031/article/details/142678158 2025/5/14 21:34:06

目录

1.css样式的规则

2.引入css样式的方式

1)行内式

2)内嵌式

3)外链式

1-link导入

2-@import导入

4)总

3.css基础选择器

1)标签选择器

案例：使用标签选择器编写一个圆

1.代码

2.效果

2)类选择器 

案例：使用类选择器为div添加背景色

1.代码 

2.效果

3)id选择器

案例使用id选择器做一个三角形

1.代码

2.效果

1.css样式的规则

css的作用是对页面的样式进行修改,这就需要我们能够找到对应的标签，引入选择器概念，选择器作用就是标记标签，标记之后可以用css进行对标签进行修饰

注: div是盒子模型,color属性是控制字体的颜色，font-size是控制字体的大小

2.引入css样式的方式

1)行内式

  通过style属性设置标签样式.

2)内嵌式

将css写在head标签中，并且使用style标签

效果图:

3)外链式

1-link导入

通过link标签引入外部的css样式对标签进行修改

效果图

2-@import导入

在style标签通过 @import 导入外部文件

<style type="text/css">

    @import "css路径"

</style>

<style type="text/css">

    @import url(css路径)

</style>

4)总

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Css引入的方式</title>

    <style>

        p{

            color: blue;

        }

    </style>

    <!-- 使用link标签 -->

    <link rel="stylesheet" href="./style.css"></link>

</head>

<body>

    <!-- 内联样式    -->

     <h2>内联式</h2>

    <div style="

        width: 200px;

        height: 200px;

        background-color: cadetblue;

        ">

    </div>

    <hr color="red" size="5" />

    <!-- 内嵌式 -->

     <p >这是内嵌式的p标签</p>

     <hr color="green" size="5" />

     <!-- 外链式 -->

     <h1>这是外联式的标签h1</h1>



 

</body>

</html>

h1{

    color: aqua;

}

效果图

3.css基础选择器

1)标签选择器

        通过标签名字进行标记，并且进行修饰

案例：使用标签选择器编写一个圆

1.代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>标签选择器</title>

    <style>

        div{

            background-color: aqua;

            border: 50%;

            width: 200px;

            height: 200px;

           

        }

    </style>

</head>

<body>

    <div >

    </div>

   

</body>

</html>

注： border-radius: 50%; 这个是边框的弯曲程度

        background-color这个属性是标签的背景颜色        

2.效果

2)类选择器 

        通过标签的class属性进行标注

案例：使用类选择器为div添加背景色

1.代码 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>类选择器</title>

    <style>

        .myBox{

            width: 200px;

            height: 200px;

            background-color: cadetblue;

        }

    </style>

</head>

<body>

    <!-- 这是一个正方形 -->

    <div class="myBox">

    </div>

   

</body>

</html>

2.效果

3)id选择器

      通过标签的id属性进行选择标注  

注：id选择器使用#进行标识，后面是名字

案例使用id选择器做一个三角形

1.代码

注: border-left 是左边的边框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>id选择器</title><style>#myDiv {width: 0px;height: 0px;border-left: 100px solid transparent;border-right: 100px solid transparent;border-top: 200px solid rgb(25, 128, 231);}#myDiv2 {width: 0px;height: 0px;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 200px solid rgb(25, 128, 231);}#myDiv3{width: 0px;height: 0px;border-top: 100px solid transparent;border-bottom: 100px solid transparent; border-left: 200px solid rgb(248, 129, 32);}#myDiv4{width: 0px;height: 0px;border-top: 100px solid transparent;border-bottom: 100px solid transparent; border-right: 200px solid rgb(248, 129, 32);}</style>
</head>
<body><!-- 倒三角 --><div id="myDiv"></div><!-- 正三角 --><div id="myDiv2"></div><!-- 左三角 --><div id="myDiv3"></div><!-- 右三角 --><div id="myDiv4"></div>
</body>
</html>

2.效果

相关文章：

CSS样式基础样式选择器(案例+代码实现+效果图)

目录 1.css样式的规则 2.引入css样式的方式 1)行内式 2)内嵌式 3)外链式 1-link导入 2-import导入 4)总 3.css基础选择器 1)标签选择器 案例&#xff1a;使用标签选择器编写一个圆 1.代码 2.效果 2)类选择器 案例&#xff1a;使用类选择器为div添加背景色 1.代码 2.效果 3)id…...

编程日记 2024/10/9 2:09:20

Linux系统编程—I/O缓冲区(C语言实现)

I/O缓冲区 进程的I/O缓冲区机制是计算机操作系统中一个重要的概念&#xff0c;它涉及到数据在内存和外设之间的传输。以下是关于进程的I/O缓冲区机制的详细解释&#xff1a; 1.定义与作用 定义&#xff1a;I/O缓冲区是指在内存里开辟的一块区域&#xff0c;用来存放接收用户输…...

编程日记 2024/10/9 2:05:15

MySQL多表查询：行子查询

先看我的表数据 dept表 emp表 行子查询 子查询返回的结果是一行&#xff08;可以是多列&#xff09;, 这种子查询称为行子查询 常用的操作符: , <>, IN, NOT IN 例子1. 查询与“张无忌” 的薪资及直属领导相同的员工信息 拆解成两个问题 a. 查询"张无忌"…...

编程日记 2024/10/9 2:03:10

.NET CORE程序发布IIS后报错误 500.19

发布IIS后浏览时报错误500.19&#xff0c;同时配置文件web.config的路径中也存在问号“?”。 可能原因&#xff1a;没有安装运行时...

编程日记 2024/10/9 2:02:10

Qt 6 相比 Qt 5 的主要提升与更新

自从 Qt 6 发布以来&#xff0c;作为 Qt 框架的一个重大版本更新&#xff0c;它在多个核心方面进行了深度优化和改进。与 Qt 5 相比&#xff0c;Qt 6 不仅提升了性能&#xff0c;还改进了对现代硬件和图形 API 的支持&#xff0c;并增强了开发者的工作流程。本文将详细介绍 Qt …...

编程日记 2024/10/9 2:01:09

【数据结构】介绍

介绍数据结构 数据结构是计算机科学中重要的概念&#xff0c;是指组织和管理数据的方式。它涉及到数据的存储、操作和访问等操作。数据结构可以分为线性结构、树形结构和图形结构等。 线性结构是最简单的数据结构之一(本玄也是这样觉得(*&#xffe3;▽&#xffe3;*))&#…...

编程日记 2024/10/9 2:00:08

论医疗类系统全国运营推广策略

一、线上推广 搜索引擎优化&#xff08;SEO&#xff09;- 重点策略 持续更新网站内容&#xff0c;包括系统功能介绍、成功案例、行业新闻等&#xff0c;提高网站的权重和流量。进行搜索引擎优化&#xff08;SEO&#xff09;&#xff0c;确定与医疗机构辅助系统相关的关键词&a…...

编程日记 2024/10/9 1:58:04

Redis入门第一步：认识Redis与快速安装配置

认识Redis与快速安装配置&#x1f343; Redis是什么&#x1f432; 1.Redis的背景&#x1f38d; Redis&#xff08;Remote Dictionary Server&#xff09;译为"远程字典服务"&#xff0c;它是一款基于内存实现的键值型 NoSQL 数据库&#xff0c; 通常也被称为数据结…...

编程日记 2024/10/9 1:55:01

ES postman操作全量修改，局部修改，删除

全量修改 修改需要调用的url 地址是http://192.168.1.108:9200/shopping/_doc/1001&#xff0c;调用方法使用put 只修改指定的需求的内容的请求方式 post方式就是局部修改 http://192.168.1.108:9200/shopping/_update/1001&#xff0c;请求方式post 上图是只修改id 为1001数…...

编程日记 2024/10/9 1:51:58

社区交流礼仪 | 提问的艺术

唠唠闲话 2021 年通过 Julia 社区了解到开源&#xff0c;自此开始融入开源社区&#xff0c;学习和体验这种独特的协作模式与交流文化&#xff0c;受益良多。本篇文章为开源新手必读&#xff0c;文章中探讨的交流模式&#xff0c;不仅对参与开源项目的协作有所帮助&#xff0c;…...

编程日记 2024/10/9 1:49:57

极客兔兔Gee-Cache Day5

HTTPPool 既可以是服务端&#xff0c;也可以是客户端&#xff0c;这取决于特定的使用场景和上下文&#xff1a; 作为客户端&#xff1a;当本地缓存没有找到需要的数据时&#xff0c;HTTPPool 需要作为客户端&#xff0c;通过 httpGetter &#xff08;实现了 PeerGetter 接口&am…...

编程日记 2024/10/9 1:47:54

【IPv6】IPv6地址格式及地址分类（组播、单播、任播）整理

IPv6地址格式 IPv6 地址从 IPv4 地址的 32 bits 扩展到 128 bits&#xff0c;IPv6 地址的表示、书写方式也从 IPv4 的点分十进制&#xff0c;修改16进制的冒号分割 IPv4 点分格式(.) 192.168.11.11 IPv6 冒号分割(:) 2408:8459:3032:0000:0000:0000:0001:a9fd IPv6 的规范…...

编程日记 2024/10/9 1:44:52

Linux数据备份

1、Linux服务器中哪些数据需要备份 1&#xff09;Linux系统重要数据&#xff1a; ①/root/目录&#xff0c;管理员家目录 ②/home/目录&#xff0c;普通用户家目录 ③/etc/目录 &#xff0c;系统重要的配置文件保存目录 2&#xff09;安装服务的数据&#xff1a;例apache①…...

编程日记 2024/10/9 1:43:50

回到原点再出发

原文What Goes Around Comes Around作者Michael Stonebraker & Joseph M. Hellerstein其他译文https://zhuanlan.zhihu.com/p/111322429 1. 摘要 本文总结了近35年来的数据模型方案&#xff0c;分成9个不同的时代&#xff0c;讨论了每个时代的方案。我们指出&#xff0c;…...

编程日记 2024/10/9 1:42:49

SimpleFoc以及SVPWM学习补充记录

SimpleFoc SimpleFOC移植STM32&#xff08;一&#xff09;—— 简介 FOC控制的过程是这样的&#xff1a; 对电机三相电流进行采样得到 Ia,Ib,Ic。将 Ia,Ib,Ic 经过Clark变换得到 I_alpha I_beta。将 I_alpha I_beta 经过Park变换得到 Id,Iq。计算 Id,Iq 和其设定值 Id_ref 和…...

编程日记 2024/10/9 1:41:48

免费 Oracle 各版本 离线帮助使用和介绍

文章目录 Oracle 各版本 离线帮助使用和介绍概要在线帮助下载离线文档包&#xff1a;解压离线文档&#xff1a;访问离线文档&#xff1a;导航使用&#xff1a;目录介绍Install and Upgrade&#xff08;安装和升级&#xff09;&#xff1a;Administration&#xff08;管理&#…...

编程日记 2024/10/9 1:40:46

刷题 二叉树

二叉树的核心思想 - 递归 - 将问题分解为子问题 题型 递归遍历迭代遍历层序遍历 bfs&#xff1a;队列各种递归题目&#xff1a;将问题分解为子问题二叉搜索树 - 中序遍历是递增序列 TreeNode* &prev 指针树形dp 面试经典 150 题 - 二叉树 104. 二叉树的最大深度 广度优…...

编程日记 2024/10/9 1:38:44

操作系统 | 学习笔记 | 王道 | 4.1 文件系统基础

4.文件管理 4.1 文件系统基础 4.1.1 文件的基本概念 定义 文件是以计算机硬盘为载体的存储在计算机上的信息集合&#xff0c;在用户进行的输入、输出中&#xff0c;以文件位基本单位。 文件管理系统是实现的文件的访问、修改和保存&#xff0c;对文件维护管理的系统。 文件的…...

编程日记 2024/10/9 1:37:43

var let const 之间的区别

在JavaScript中&#xff0c;var、let 和 const 是用于声明变量的三种关键字。它们之间有几个重要的区别&#xff1a; 1. 作用域 var: 声明的变量具有函数作用域&#xff0c;即在整个函数内都可以访问。如果在代码块内&#xff08;如if或for&#xff09;使用var&#xff0c;该…...

编程日记 2024/10/9 1:34:40

【springboot】简易模块化开发项目整合Swagger2

接上一项目【springboot】简易模块化开发项目整合MyBatis-plus&#xff0c;进行拓展项目 1.新建模块 右键项目→New→Module&#xff0c;新建一个模块 父项目选择fast-demo&#xff0c;命名为fast-demo-config&#xff0c;用于存放所有配置项 添加后&#xff0c;项目结构如图…...

编程日记 2024/10/9 1:33:39

【Linux第五课-进程概念下】环境变量、程序地址空间

目录 环境变量main参数 --- 命令行参数环境变量环境变量特性 --- 命令行操作main函数的参数获取环境变量environ获取环境变量getenv()获取环境变量unset移除本地变量或环境变量set显示本地变量 代码获取和设置环境变量 本地变量 程序地址空间什么是进程地址空间为什么有地址空间…...

编程日记 2024/10/9 1:30:36

mysql学习教程，从入门到精通，SQL 临时表（37）

1、SQL 临时表 在SQL中&#xff0c;临时表&#xff08;Temporary Table&#xff09;是一种在会话或连接期间临时存储数据的表。它们对于存储中间结果、简化复杂查询以及提高性能非常有用。以下是一个创建和使用临时表的示例。 假设我们有一个名为 employees 的表&#xff0c;…...

编程日记 2024/10/9 1:29:35

算法闭关修炼百题计划（四）

仅供个人复习 1.两数相加2.寻找峰值6.岛屿的最大面积3.最大数4.会议室5.最长连续序列6.寻找两个正序数组的中位数 1.两数相加 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请…...

编程日记 2024/10/9 1:28:34

头歌实践教学平台 大数据编程 实训答案（二）

第三阶段 Spark算子综合案例 Spark算子综合案例 - JAVA篇 第1关：WordCount - 词频统计 任务描述 本关任务：使用 Spark Core 知识编写一个词频统计程序。 相关知识 略 编程要求 请仔细阅读右侧代码，根据方法内的提示，在Begin - End区域内进行代码补充，具体任务如下： …...

编程日记 2024/10/9 1:27:33

路由交换实验指南

案例 01&#xff1a;部署使用 eNSP 平台实验需求&#xff1a; 安装华为 eNSP 网络模拟平台打开 eNSP 平台&#xff0c;新建拓扑并绘制网络能够成功启动交换机、计算机设备 实验步骤&#xff1a; 安装华为 eNSP 网络模拟平台启动安装程序 配置安装内容 防护墙允许 eNSP 程序的…...

编程日记 2024/10/9 1:25:31

了解网页 blob 链接

blob 链接 自从 HTML5 提供了 video 标签&#xff0c;在网页中播放视频变得非常简单&#xff0c;只要在代码中插入一个 video 标签&#xff0c;再将 video 标签的 src 属性设置为视频的链接就可以了。由于 src 指向的是视频文件真实的地址&#xff0c;所以当我们通过浏览器的调…...

编程日记 2024/10/9 1:23:28

OpenGL笔记之事件驱动设计将相机控制类和应用程序类分离

OpenGL笔记之事件驱动设计将相机控制类和应用程序类分离 —— 2024-10-02 下午 bilibili赵新政老师的教程看后笔记 code review! 文章目录 OpenGL笔记之事件驱动设计将相机控制类和应用程序类分离1.代码图片2.分析3.UML4.代码 1.代码图片 运行 Mouse button 1 pressed at (1…...

编程日记 2024/10/9 1:22:27

低代码时代的企业信息化：规范与标准化的重要性

在当今数字化转型的浪潮中&#xff0c;企业的信息化建设正逐步向低代码平台倾斜。低代码不仅仅是简化开发过程&#xff0c;更是对企业内部流程、规范和标准化的深刻理解与应用。本文将探讨低代码在企业信息化中的重要性&#xff0c;特别是在运维和开发流程中的标准化&#xff0…...

编程日记 2024/10/9 1:20:20

理解无监督学习、无监督图像分割

系列文章目录 文章目录 系列文章目录一、无监督学习如何学习 能不能举一个非常具体的例子&#xff0c;带着运算过程的例子总结 二、在图像分割中呢&#xff0c;具体怎样实现无监督示例&#xff1a;使用自编码器和k-means进行无监督图像分割1. **数据准备**2. **构建自编码器**3…...

编程日记 2024/10/9 1:16:17

C语言— exec系列函数

exec系列函数 在C语言编程中&#xff0c;exec 系列函数用于在当前进程中执行一个新程序&#xff0c;从而替换当前进程的映像。这些函数不会返回&#xff0c;除非发生错误。exec 系列函数有多个变体&#xff0c;其中最常用的包括 execl, execle, execlp, execv, execve, execvp…...

编程日记 2024/10/9 1:13:15