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

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

news 2025/9/16 21:32:51

目录

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

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/8/23 5:51:08

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/9/14 12:35:26

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/9/3 18:59:01

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/8/22 3:28:52

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/9/9 10:10:46

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2025/9/9 10:09:41

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

编程新知 2025/7/9 9:17:56

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

编程新知 2025/8/8 6:07:28

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/8/3 15:16:26

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...

编程新知 2025/9/11 6:56:11