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

Web开发 -前端部分-CSS

news 2025/9/18 7:11:41

CSS

CSS（Cascading Style Sheet）:层叠样式表，用于控制页面的样式（表现）。

一 基础知识

1 标题格式

标题格式一：  行内样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个前端代码</title>
</head><body><!-- 第一种方式 --><h1 style="color: red;">图片图集:</h1><h2>第一张图片</h2><img src="./QQ图片20240919174729.jpg" width="10%"><hr>2024年12月8号<hr><h1>第二张照片</h1><img src="./QQ图片20240919174738.jpg" width="10%"><hr>2024年12月8号<hr></body></html>

标题样式二：内嵌样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个前端代码</title><!-- 内嵌样式 --><style>h1{color: orange}h2{color:brown}</style>
</head><body><h1>图片图集:</h1><h2>第一张图片</h2><img src="./QQ图片20240919174729.jpg" width="10%"><hr>2024年12月8号<hr><h1>第二张照片</h1><img src="./QQ图片20240919174738.jpg" width="10%"><hr>2024年12月9号<hr></body></html>

标题样式三：外联样式

创建一个css文件用于存储对应格式

h1{color: brown;}
h2{color: blue;
}

外联导入

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个前端代码</title><link rel="stylesheet" href="./CSS/news.css">
</head><body><h1>图片图集:</h1><h2>第一张图片</h2><img src="./QQ图片20240919174729.jpg" width="10%"><hr>2024年12月8号<hr><h1>第二张照片</h1><img src="./QQ图片20240919174738.jpg" width="10%"><hr>2024年12月9号<hr></body></html>

 2 颜色属性表示

color

3 字体大小属性表示

font-size（需要加px）

.cls {color: rgb(21, 0, 255);font-size: 12px;
}

 4 实现首行缩进 ，列间距

        p{/* 首行缩进 */text-indent: 35px;/* 设置行高 */line-height: 25px;    }

二 CSS选择器

1 基础的三个选择器

用来选取需要设置样式的元素（标签）批量的更改

优先级 类选择器 > id选择器 > 元素选择器

代码实现：

/* 元素选择器 */
h1{color: brown;}
h2{color: blue;
}
/* id选择器 */
#ax1{color: yellow;
}
/* 类选择器 */
.cls{color: rgb(0, 255, 8);
}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个前端代码</title><link rel="stylesheet" href="./CSS/news.css">
</head><body><!-- 元素选择器 --><h1>图片图集:</h1><h2>第一张图片</h2><img src="./QQ图片20240919174729.jpg" width="10%"><hr>2024年12月8号<hr><h1>第二张照片</h1><img src="./QQ图片20240919174738.jpg" width="10%"><hr><!-- id选择器 --><span id="ax1">year: </span><hr><!-- 类名选择器 --><span class="cls">2024年12月9号</span><hr></body></html>

2 通配选择器

作用：可以选中所有的HTML元素

代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h2 {color: green;font-size: 30px;}*{color: red;}</style><!-- <link rel="stylesheet" href="/HTML/CSS/news.css"> --></head><body><h2>欢迎来到我的世界</h2><p>草莓，蓝莓，溜溜梅，你想我了没？</p>
</body></html>

图形化展示：

3 复合选择器

交集选择器

作用：选中同时符合多个条件的元素。

并集选择器：

作用：选中多个选择器对应的元素，又称：分组选择器。

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.rich {color: gold;}.bea {color: red;}.dog {color: blue;}.pig {color: green;}/* 并集选择器  用于添加重复的属性 （也可以在原有的类中再添加一个共有类）*/#ax,.rich,.bea,.dog,.pig {font-size: 40px;background-color: yellow;width: 180px;}</style>
</head><body><h2 class="rich">土豪张三</h2><h2 class="bea">明星李四</h2><h2>破产王五（不添加任何样式）</h2><hr><p class="dog">小狗旺财</p><p class="pig">小猪佩奇</p><p id="ax">小羊肖恩</p></body></html>

图形化展示：

4 后代选择器（儿子 孙子~）

作用：选中指定元素中，古河要求的后代元素。

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title><style>/* 在父类元素后面加一个#nbsp(空格)再加上后代（几代都行）  */ul li {color: red;}ul li a {color: orange;}/* 将ol中的特殊id 的元素属性更改 */.subject #front-end {color: blue;}/* ol中的li为绿色  */ol li {color: gray;}/* p选择器中不能放h1-h6 */</style>
</head><body><ul><li>抽烟</li><li>喝酒</li><li><a href="#">烫头</a></li></ul><br><ol><li>张三</li><li>李四</li><li>王五</li></ol><ol class="subject"><li id="front-end">前端</li><li>后端</li><li>大数据</li><li>UI</li></ol>
</body></html>

图形化展示

5子代选择器（儿子）

作用：选中指定元素中符合要求的子元素（儿子元素）。（先写父再写子）

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>/* 子代选择器是一种组合关系（一个父与一个子而组成的一个组合搭配） */div>a {color: red;}div>p>a {color: green;}.ax>a {color: chocolate;}</style>
</head><body><div><a href="#">张三</a><a href="#">李四</a><a href="#">王五</a><p><a href="#">刘六</a><div><a href="#">孙七</a></div><br><div class="ax"><a href="#">吴八</a></div></p></div>
</body></html>

图形化展示

6 兄弟选择器

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>兄弟选择器</title><style>/* 紧紧相邻的兄弟 跟div紧紧相邻（间隔为一）的元素*/div+p {color: red;}/* 旁边的兄弟 (所有的兄弟元素) *//* 后来者居上 颜色为brown */div~p{color: brown;}</style>
</head><body><div>尚硅谷</div><p>前端</p><p>java</p><p>大数据</p><p>UI</p></body></html>

图形化展示：

7 属性选择器

作用：选中属性值符合一定要求的元素

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 第一种写法 选中具有title属性的元素*/[title] {color: red;}/* 第二种写法 选中具有title属性且指定属性值的特定元素*/[title="home1"] {color: brown;}/* 第三种写法 选中具有title属性且属性值以指定值为开头的特定元素 */[title^="a"] {color: green;}/* 第四种元素 选中具有title属性且属性值以指定值为结尾的特定元素 */[title$="b"] {font-size: 30px;}/* 第五种写法 选中具有title属性且属性值包含指定值的特定元素*/[title*="a"] {background-color: yellow;}</style>
</head><body><div title="home1">这是一个属性选择器的实例1</div><div title="home2">这是一个属性选择器的实例2</div><div title="a_home3">这是一个属性选择器的实例3</div><div title="a_home4">这是一个属性选择器的实例4</div><div title="a_home5b">这是一个属性选择器的实例4</div></body></html>

图形化展示

三 盒子模型

盒子模型组成：内容区域（content）,内边距区域（padding），边框区域（border）,外边距区域（margin）

相关文章：

Web开发 -前端部分-CSS

CSS CSS&#xff08;Cascading Style Sheet&#xff09;:层叠样式表&#xff0c;用于控制页面的样式&#xff08;表现&#xff09;。 一 基础知识 1 标题格式 标题格式一&#xff1a; 行内样式 <!DOCTYPE html> <html lang"en"><head><meta…...

编程日记 2024/12/17 21:30:35

用 Python Turtle 绘制流动星空：编程中的璀璨星河

用 Python Turtle 绘制流动星空&#xff1a;编程中的璀璨星河 &#x1f438; 前言 &#x1f438;&#x1f41e;往期绘画>>点击进所有绘画&#x1f41e;&#x1f40b; 效果图 &#x1f40b;&#x1f409; 代码 &#x1f409; &#x1f438; 前言 &#x1f438; 夜空中繁星…...

编程日记 2024/12/17 21:29:34

Java从入门到工作2 - IDEA

2.1、项目启动 从git获取到项目代码后&#xff0c;用idea打开。 安装依赖完成Marven/JDK等配置检查数据库配置启动相关服务 安装依赖 如果个别依赖从私服下载不了&#xff0c;可以去maven官网下载补充。 如果run时提示程序包xx不存在&#xff0c;在项目目录右键Marven->Re…...

编程日记 2024/12/17 21:27:30

fastadmin批量压缩下载远程视频文件

后端代码 // 批量下载并压缩 public function downloadAll(){$ids input(ids);$row $this->model->where(id, in, $ids)->field(id,title,video_url)->select();if (!$row) {$this->error(记录不存在);}$arr [];$tempFiles []; // 用来存储临时下载的视频文…...

编程日记 2024/12/17 21:26:29

【保姆级】Mac如何安装+切换Java环境

本文从如何下载不同版本的JDK，到如何丝滑的切换JDK，以及常见坑坑的处理方法，应有尽有，各位看官走过路过不要错过～～～ 下载⏬ 首先上官网： https://www.oracle.com/ 打不开的话可以使用下面👇这个中文的 https://www.oracle.com/cn/java/technologies/downloads/a…...

编程日记 2024/12/17 21:22:25

2024首届世界酒中国菜国际地理标志产品美食文化节成功举办篇章

2024首届世界酒中国菜国际地理标志产品美食文化节成功举办&#xff0c;开启美食文化交流新篇章 近日&#xff0c;首届世界酒中国菜国际地理标志产品美食文化节在中国国际地理标志大厦成功举办&#xff0c;这场为期三天的美食文化盛会吸引了来自世界各地的美食爱好者、行业专家…...

编程日记 2024/12/17 21:19:23

Springboot静态资源

默认位置 静态资源访问目录下的资源可以直接访问&#xff0c;默认的四个位置 classpath:/META-INF/resources/&#xff08;默认加载&#xff0c;不受自定义配置的影响&#xff09; classpath:/resources/ classpath:/static/ classpath:/public/ 如果在静态目录下存在favic…...

编程日记 2024/12/17 21:18:21

MTK修改配置更改产品类型ro.build.characteristics

文章目录 需求场景实际问题 参考资料解决方案MTK 修改方案修改点一&#xff1a;build\core\product_config.mk修改点二&#xff1a;build\make\core\main.mk修改是否成功&#xff0c;adb 验证 实战项目中解决案例 需求场景 更改产品设备属性 table-phone-device&#xff0c;使…...

编程日记 2024/12/17 21:16:19

SQL 查询中的动态字段过滤

这段代码是一个 SQL 查询中的动态字段过滤部分&#xff0c;使用了 MyBatis 的 标签和 标签。以下是逐步的解释&#xff1a; <!-- 动态字段过滤 --><if test"parameters ! null and parameters.size() > 0"><foreach collection"parameters&qu…...

编程日记 2024/12/17 21:10:13

数字IC后端零基础入门基础理论（Day1）

数字IC后端设计导入需要用到的input数据如下图所示。 数字后端零基础入门系列 | Innovus零基础LAB学习Day9 Netlist: 设计的Gate level&#xff08;门级&#xff09;网表。下图所示为一个计数器设计综合后的门级netlist。 从这个netlist中我们看到这个设计顶层的名字叫counte…...

编程日记 2024/12/17 21:09:13

【LC】240. 搜索二维矩阵 II

题目描述&#xff1a; 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,4,7,11,15],[2,5,8,12,19],[3,6,…...

编程日记 2024/12/17 21:07:11

Redis应用—4.在库存里的应用

大纲 1.库存模块设计 2.库存缓存分片和渐进式同步方案 3.基于缓存分片的下单库存扣减方案 4.商品库存设置流程与异步落库的实现 6.库存入库时"缓存分片写入 渐进式写入 写入失败进行MQ补偿"的实现 7.库存扣减时"基于库存分片依次扣减 合并扣减 扣不了…...

编程日记 2024/12/17 21:02:06

selenium获取请求头

【原创】Selenium获取请求头、响应头-腾讯云开发者社区-腾讯云 selenium 4.0.0 selenium-wire 5.1.0 python 3.10 from seleniumwire import webdriver import time from selenium.webdriver.common.by import By import re def get_request_headers(driver):"""…...

编程日记 2024/12/17 21:00:04

Rust中自定义Debug调试输出

在 Rust 中&#xff0c;通过为类型实现 fmt::Debug&#xff0c;可以自定义该类型的调试输出。fmt::Debug 是标准库中的一个格式化 trait&#xff0c;用于实现 {:?} 格式的打印。这个 trait 通常通过自动派生&#xff08;#[derive(Debug)]&#xff09;来实现&#xff0c;但你也…...

编程日记 2024/12/17 20:58:02

docker离线安装、linux 安装docker

之前写过一篇docker的离线安装&#xff0c;现在从头再看繁琐了&#xff0c;服务器换了&#xff0c;既然要重搭一遍就要改进一下了。下面步入正题&#xff1a; 1.下载离线软件包 https://download.docker.com/linux/static/stable/x86_64/docker-20.10.6.tgz 2.下载安装工具包…...

编程日记 2024/12/17 20:57:01

卓易通：鸿蒙Next系统的蜜糖还是毒药？

哈喽&#xff0c;我是老刘 最近很多人都在问鸿蒙next系统新上线的卓易通和出境易两款应用。 老刘分析了一下这个软件的一些细节&#xff0c;觉得还是蛮有意思的&#xff0c;我觉得可以从使用体验、底层原理和对鸿蒙生态的影响这三个角度来分析一下。 使用体验 性能 看到了一些测…...

编程日记 2024/12/17 20:55:00

AI大模型学习笔记｜神经网络与注意力机制（逐行解读）

来源分享链接&#xff1a;通过网盘分享的文件&#xff1a;详解神经网络是如何训练的 链接: https://pan.baidu.com/s/12EF7y0vJfH5x6X-0QEVezg 提取码: k924 内容摘要&#xff1a;本文深入探讨了神经网络与注意力机制的基础&#xff0c;以及神经网络参数训练的过程。以鸢尾花数…...

编程日记 2024/12/17 20:53:59

Linux 操作系统中的管道与共享内存

目录 一、匿名管道 &#xff08;一&#xff09;基本概念 &#xff08;二&#xff09;关键现象 &#xff08;三&#xff09;管道特性 二、命名管道 &#xff08;一&#xff09;基本概念 &#xff08;二&#xff09;关键特性 三、共享内存 &#xff08;一&#xff09;基…...

编程日记 2024/12/17 20:51:57

恢复删除的文件:6个免费Windows电脑数据恢复软件

数据恢复软件可帮助您从众多存储设备中恢复损坏或删除的数据。您可以使用这些文件恢复软件来检索文件、文档、视频、图片等。这些应用程序支持多种标准文件格式&#xff0c;如 PNG、RTF、PDF、HTML、JPG、MP3 等。 经过超过 75 小时的研究&#xff0c;我分析了 25 最佳免费数据…...

编程日记 2024/12/17 20:50:56

linux网络编程 | c | select实现多路IO转接服务器

select实现多路IO转接服务器 基于该视频完成 15-select实现多路IO转接设计思路_哔哩哔哩_bilibili 通过响应式–多路IO转接实现 文章目录 select实现多路IO转接服务器1.思路&功能2.代码实现warp.hwarp.cmulti_select_sever.c运行图 3.代码解释&#xff08;细节&#xf…...

编程日记 2024/12/17 20:49:54

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/6/15 22:22:18

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2025/8/26 15:36:54

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/9/13 0:08:53

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/7/26 19:10:34

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2025/9/7 8:50:46

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/7/9 4:55:48

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/9/2 17:48:08

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/7/27 0:38:54

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

编程新知 2025/9/7 8:49:20

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

编程新知 2025/8/9 4:55:19