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

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

news 2026/2/10 20:02:35

目录

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 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)标签选择器案例：使用标签选择器编写一个圆 1.代码 2.效果 2)类选择器案例：使用类选择器为div添加背景色 1.代码 2.效果 3)id…...

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

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

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

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

MySQL多表查询：行子查询

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

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

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

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

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

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

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

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

【数据结构】介绍

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

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

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

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

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

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

认识Redis与快速安装配置🍃 Redis是什么🐲 1.Redis的背景🎍 Redis（Remote Dictionary Server）译为"远程字典服务"，它是一款基于内存实现的键值型 NoSQL 数据库， 通常也被称为数据结…...

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

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

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

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

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

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

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

极客兔兔Gee-Cache Day5

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

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

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

IPv6地址格式 IPv6 地址从 IPv4 地址的 32 bits 扩展到 128 bits，IPv6 地址的表示、书写方式也从 IPv4 的点分十进制，修改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）Linux系统重要数据： ①/root/目录，管理员家目录 ②/home/目录，普通用户家目录 ③/etc/目录 ，系统重要的配置文件保存目录 2）安装服务的数据：例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年来的数据模型方案，分成9个不同的时代，讨论了每个时代的方案。我们指出，…...

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

SimpleFoc以及SVPWM学习补充记录

SimpleFoc SimpleFOC移植STM32（一）—— 简介 FOC控制的过程是这样的： 对电机三相电流进行采样得到 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 各版本离线帮助使用和介绍概要在线帮助下载离线文档包：解压离线文档：访问离线文档：导航使用：目录介绍Install and Upgrade（安装和升级）：Administration（管理&#…...

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

刷题二叉树

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

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

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

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

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

var let const 之间的区别

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

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

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

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

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

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令范围操作示例指定行范围处理复合命令示例实用技…...

编程新知 2025/11/16 8:24:16

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2026/2/5 21:34:41

条件运算符

C中的三目运算符（也称条件运算符，英文：ternary operator）是一种简洁的条件选择语句，语法如下： 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true，则整个表达式的结果为“表达式1”…...

编程新知 2025/12/6 22:50:48

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2026/1/28 9:04:29

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种系统属性定义文件（System Property Definition File），用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

相机从app启动流程

一、流程框架图二、具体流程分析 1、得到cameralist和对应的静态信息目录如下：重点代码分析：启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2026/1/31 5:09:19

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中，电磁频谱已成为继陆、海、空、天之后的 “第五维战场”，雷达作为电磁频谱领域的关键装备，其干扰与抗干扰能力的较量，直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器，凭借数字射…...

编程新知 2026/2/1 7:18:47

ios苹果系统，js 滑动屏幕、锚定无效

现象：window.addEventListener监听touch无效，划不动屏幕，但是代码逻辑都有执行到。 scrollIntoView也无效。原因：这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作，从而会影响…...

编程新知 2026/2/4 19:47:03

ip子接口配置及删除

配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25

A2A JS SDK 完整教程：快速入门指南

目录什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

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.效果

相关文章：