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

CSS设计器的使用

news 2025/9/14 14:18:46

目录

css的概念

css的优势

css的基本语法

html中引入css样式

CSS基本选择器

    选择器的使用

初级选择器：

    标签选择器

        类选择器

        id选择器

高级选择器(结构选择器）

①后代选择器(E F)

②子选择器(E>F)

③相邻兄弟选择器(E+F)

④通用兄弟选择器(E~F)

属性选择器：

css的概念

美化网页，（对字体，颜色，边距，高宽度，背景图片等设定）

css的优势

内容与表现分离，网页表现统一，易修改
丰富的样式，使页面布局更加灵活
减少网页代码量

css的基本语法

选择器{                                     
声明属性；值
}
例如：
<style type="css">
h1{
font-size:14px;
color;#5c5c5c;
}
</style>

html中引入css样式

CSS样式作用
css优先级行内样式>内部样式>外部样式；就近原则
行内样式使用style属性引入css样式；直接在标签中设置样式：<h1 style="color:颜色"></h1>
内部样式css代码写在<head>的<style>标签中；<style>h1{color;grren;}</style>
优点方便在同页面修改
缺点不利于在多页面共享代码以及维护，对内容样式分离的不够彻底
外部样式链接式，导入式

链接式：
导入式：

CSS基本选择器

id选择器>类选择器>标签选择器

不遵守就近原则

标签选择器<h1>-<h6>,<p>，<img>     语法：标签选择器{属性；值}
类选择器.class{font-size:16px}      语法：<标签名 class>内容</标签名>
id选择器#id{属性：值}

    选择器的使用

初级选择器：

①ID选择器(#id{})

②类选择器(.class{})

③标签选择器(p{})

    标签选择器
      p{font-size: 15px;color: aqua;}
        类选择器
     .bbb{font-size: 10px;color: #4d4d4d;}<span class="bbb">也是要花力气去</span>
        id选择器
   #aaa{font-size: 20px;color: chartreuse;}<span id="aaa">日照香炉生紫烟</span>

1,标签选择器直接应用HTML标签

2,类选择器可以在页面多次使用

3,id选择器在一个页面只能使用一次

高级选择器(结构选择器）

选择器类型功能描述

E F

后代选择器

选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内

E>F子选择器

选择匹配的F元素,且匹配的F元素是四配的E元素的子元素

E+F相邻兄弟选择器

选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面

E~F通用兄弟选择器

选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

①后代选择器(E F)

后代选择器  所有的有血缘关系的后代

<head><meta charset="UTF-8"><title>Title</title><style>    /*后代选择器  所有的有血缘关系的后代 */body p{background: crimson}</style>
</head>
<body>
<p>111111</p>
<p>11111</p>
<p>111111</p>
<ul><li><p>2222</p></li>    //注意这里有个p标签<li>2222</li><li>222222</li>
</ul>
</body>

        运行结果如下：

②子选择器(E>F)

子选择器 他的儿子 但是不包括孙子

<style>/*子选择器 他的儿子 不包括孙子 */body>p{background: pink}
</style>
<body>
<p>111111</p>
<p>11111</p>
<p>111111</p>
<ul><li><p>2222</p></li><li>2222</li><li>222222</li>
</ul>

        运行结果如下：

③相邻兄弟选择器(E+F)

相邻兄弟选择器 同级（同一个地方）的后面的一个邻居

 <style>/*相邻兄弟选择器  同级（同一个地方）的后面的一个邻居 */.bbb+p{background: aqua}</style>
</head>
<body>
<p>111111</p>
<p class="bbb">11111</p> //他的后一位
<p>111111</p>
<p>111111</p>
<ul><li><p>2222</p></li><li>2222</li><li>222222</li>
</ul>
<p>111111</p>

        运行结果如下：

④通用兄弟选择器(E~F)

通用兄弟选择器; 后面所有的元素

  <style>/*通用兄弟选择器; 后面所有的元素*/.aaa~p{background: gold}</style>
</head>
<body>
<p>111111</p>
<p class="aaa">11111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<ul><li><p>2222</p></li><li>2222</li><li>222222</li>
</ul>
<p>111111</p>
</body>

        运行结果如下：

属性选择器：

属性选择器功能描述
E[attr]选择匹配具有属性attr的E元素
E[attr=val]选择匹配具有属性attr的E元素，并且属性值为cal(区分大小写)
E[attr^=val]选择匹配元素E，且E元素定义属性attr，属性值以val开头的字符
E[attr$=val]选择匹配元素E，且E元素定义属性attr,属性值以val结尾的字符
E[attr*=val]

选择匹配元素E，且E元素定义属性attr，其属性值包含val，

字符val与属性值任意位置相匹配

  <style>p[id]{color: blue}p[id=红色]{color: red}p[id^="绿色"]{color: green}p[class$="黄色"]{color: yellow}p[class*="粉色"]{color: pink}</style>
</head>
<body>
<p id="属性值">具有id属性的数据值变为蓝色!</p >
<p id="红色">具有id属性且属性值为"红色"的数据值变为红色!</p >
<p id="绿色的蔬菜">具有id属性且属性值以"绿色"开头的数据值变为绿色!</p >
<p class="菠萝是黄色">具有class属性且属性值以"黄色"结尾的数据值变为黄色!</p >
<p class="花瓣中有粉色的并且I like!">具有class属性且属性值中包含"粉色"的数据值变为粉色!</p >
</body>

        运行代码如下：

相关文章：

CSS设计器的使用

目录 css的概念 css的优势 css的基本语法 html中引入css样式 CSS基本选择器 选择器的使用 初级选择器&#xff1a; 标签选择器 类选择器 id选择器 高级选择器(结构选择器&#xff09; ①后代选择器(E F) ②子选择器(E>F) ③相邻兄弟选择器(EF) ④通用兄弟选择器(…...

编程日记 2023/12/21 21:11:08

3d渲染太慢怎么办？2024效果图云渲染AI加速来袭

在不断变革的数码技术世界中&#xff0c;三维渲染技术在影视制作、游戏开发以及建筑设计等多个领域得到了广泛运用。然而&#xff0c;高清质量的三维项目的离线渲染时间长久一直是困扰 CG 工作者的一大难题。通常来讲&#xff0c;渲染一帧画面可能需要几分钟到几小时&#xff0…...

编程日记 2023/12/21 21:10:07

指针函数函数指针回调函数相关知识

指针函数&#xff1a; 本质上是一个函数&#xff0c;返回值是一个指针类型&#xff1b;不能返回局部变量的地址&#xff0c;因为其所存储在栈区&#xff0c;在函数调用结束时&#xff0c;被OS回收了&#xff1b;可以返回的情况&#xff1a;全局变量的地址、static修饰的局部变…...

编程日记 2023/12/21 21:09:06

软件设计模式：六大设计原则

文章目录 前言一、开闭原则二、里氏替换原则三、依赖倒转原则四、接口隔离五、迪米特法则六、合成复用原则总结 前言 在软件开发中&#xff0c;为了提高软件系统的可维护性和可复用性&#xff0c;增加软件的可扩展性和灵活性&#xff0c;程序员要尽量根据6条原则来开发程序&am…...

编程日记 2023/12/21 21:07:04

Unity闪屏Logo去除

1.新建一个C#脚本&#xff0c;命名为 “SkipSplashScreen” &#xff08;代码如下&#xff09;。 using System.Collections; using System.Collections.Generic; using System; using UnityEngine; using UnityEngine.UI;#if !UNITY_EDITOR using UnityEngine; using UnityEn…...

编程日记 2023/12/21 21:04:02

Git账户密码http方式的配置

Git账户密码http方式的配置 入门 git在提交时每次都需要输入密码和账号信息&#xff0c;可以将账号和密码进行持久化存储&#xff0c; 当git push的时候输入一次用户名和密码就会被记录&#xff0c; 不需要每次输入&#xff0c;提高效率&#xff0c;进行一下配置&#xff1…...

编程日记 2023/12/21 20:56:54

【JUC】三十二、邮戳锁StampedLock

文章目录 1、邮戳锁2、锁饥饿问题的解决思路3、邮戳锁的特点4、代码演示&#xff1a;邮戳锁的传统读写用法5、代码演示&#xff1a;邮戳锁之乐观读6、邮戳锁的缺点7、终章回顾 前面提到了从无锁 ⇒ 独占锁 ⇒ 读写锁&#xff0c;但读写锁存在写锁饥饿的情况。 &#x1f4d5;【读…...

编程日记 2023/12/21 20:53:51

城市里的“蛋壳运动空间”

近年来&#xff0c;秉承"发展群众体育&#xff0c;服务健康中国”的理念&#xff0c;全国各地持续推进全民健身与全民健康的融合发展。越来越多的口袋公园、户外运动设施出现在城市各个角落&#xff0c;一定程度上提升了全民运动的便利性和幸福感。 但是&#xff0c;遇到…...

编程日记 2023/12/21 20:52:50

Linux宝塔面板本地部署Discuz论坛发布到公网访问【无需公网IP】

文章目录 前言1.安装基础环境2.一键部署Discuz3.安装cpolar工具4.配置域名访问Discuz5.固定域名公网地址6.配置Discuz论坛 前言 Crossday Discuz! Board&#xff08;以下简称 Discuz!&#xff09;是一套通用的社区论坛软件系统&#xff0c;用户可以在不需要任何编程的基础上&a…...

编程日记 2023/12/21 20:51:49

Android Canvas状态save与restore，Kotlin

Android Canvas状态save与restore&#xff0c;Kotlin private fun f1() {val bitmap BitmapFactory.decodeResource(resources, R.mipmap.pic).copy(Bitmap.Config.ARGB_8888, true)val canvas Canvas(bitmap)val paint Paint(Paint.ANTI_ALIAS_FLAG)paint.color Color.RED…...

编程日记 2023/12/21 20:49:47

python爬取网页图片并下载

python爬取网页图片并下载之GET类型 准备工作 【1】首先需要准备好pycharm&#xff0c;并且保证环境能够正常运行 【2】安装request模块 pip install requestsimport request导入request内置模块 【3】安装lxml模块 pip install lxmlfrom lxml import etree导入lxml.etre…...

编程日记 2023/12/21 20:48:47

亚马逊prime会员日活动是免费的吗？prime day怎么选产品促销？——站斧浏览器

亚马逊prime会员日活动是免费的吗&#xff1f; 实际上&#xff0c;亚马逊prime会员日活动并不是免费的。亚马逊prime会员日是亚马逊推出的一项会员特权服务&#xff0c;只有成为亚马逊prime会员的消费者才能享受该项服务。而成为亚马逊prime会员需要支付一定的费用&#xff0c…...

编程日记 2023/12/21 20:47:46

二叉树题目：输出二叉树

文章目录 题目标题和出处难度题目描述要求示例数据范围 前言解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;输出二叉树 出处&#xff1a;655. 输出二叉树 难度 6 级 题目描述 要求 给定二叉树的根结点 root \textt…...

编程日记 2023/12/21 20:46:45

apache poi_5.2.5 实现对表格单元格的自定义变量名进行图片替换

apache poi_5.2.5 实现对表格单元格的自定义变量名进行图片替换 实现思路 1.首先定位到自定义变量名 2.然后先清除自定义变量名&#xff0c;可利用setText(null,0)来清除 3.在自定义变量名的位置添加图片&#xff0c;使用下面的代码 4.对于图片布局有要求的&#xff0c;利用C…...

编程日记 2023/12/21 20:45:44

Kafka--Kafka日志索引详解以及生产常见问题分析与总结

一、Kafka的Log日志梳理 ​ 这一部分数据主要包含当前Broker节点的消息数据(在Kafka中称为Log日志)。这是一部分无状态的数据&#xff0c;也就是说每个Kafka的Broker节点都是以相同的逻辑运行。这种无状态的服务设计让Kafka集群能够比较容易的进行水平扩展。比如你需要用一个新…...

编程日记 2023/12/21 20:44:43

Vue3-23-组件-依赖注入的使用详解

什么是依赖注入 个人的理解 &#xff1a; 依赖注入&#xff0c;是在 一颗 组件树中&#xff0c;由 【前代组件】 给 【后代组件】 提供 属性值的 一种方式 &#xff1b;这种方式 突破了 【父子组件】之间通过 props 的方式传值的限制&#xff0c;只要是 【前代组件】提供的 依…...

编程日记 2023/12/21 20:42:41

css 美化滚动条

当div内容溢出容器定义的高度时,滚动条显示,并美化默认的滚动条样式 div 容器 <divclass"content">内容 </div>css 样式 /* 问话区域 滚动条 */ .content {overflow: auto;height: 662px;padding: 25px;scrollbar-width: thin; /* 设置滚动条宽度 */bo…...

编程日记 2023/12/21 20:39:38

Tomcat介绍及使用：构建强大的Java Web应用服务器

引言&#xff1a; 在现代软件开发中&#xff0c;Web应用已经成为了不可或缺的一部分。而为了构建高效、稳定的Web应用服务器&#xff0c;选择合适的工具和技术至关重要。Tomcat作为一款开源的Java Web应用服务器&#xff0c;凭借其丰富的功能和灵活的配置&#xff0c;成为了开发…...

编程日记 2023/12/21 20:38:37

怎么定义一套完成标准的JAVA枚举类型

一、背景 在java代码中&#xff0c;接口返回有各种各样的状态&#xff0c;比如400 401 200 500 403等常见的http状态码&#xff0c;也有我们自定义的很多业务状态码。如果系统比较复杂&#xff0c;制定一套完整的标准的状态码是非常有必要的&#xff0c;这样比较方面BUG排查。…...

编程日记 2023/12/21 20:36:35

Apache Seatunnel本地源码构建编译运行调试

Apache Seatunnel本地源码构建编译运行调试 文章目录 1. 环境准备1.1 Java环境1.2 Maven1.3 IDEA1.4 Docker环境1.5 Mysql8.0.281.6 其它环境准备 2. 源码包下载3. idea项目配置3.1 项目导入3.2 maven配置3.3 项目JDK配置3.4 项目启动参数配置3.4.1 seatunnel项目启动参数配置3…...

编程日记 2023/12/21 20:35:34

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2025/9/12 22:07:42

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/9/14 12:21:33

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

目录 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…...

编程新知 2025/8/30 19:47:38

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/8/5 19:18:33

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2025/7/6 18:33:10

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2025/8/5 9:30:07

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2025/9/14 5:50:03

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/8/27 0:04:53

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

编程新知 2025/9/2 1:07:37