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

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

news 2026/2/10 20:28:33

目录

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

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2026/2/8 4:32:38

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2026/2/7 23:18:28

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2026/2/8 6:37:39

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/12/16 4:45:38

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2026/1/26 21:57:45

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2026/1/24 22:33:33

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/12/19 20:46:15

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2026/1/28 8:25:28

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2026/2/7 1:51:12