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

Web-CSS入门

news 来源：原创 2025/6/21 2:29:44

WEB前端，三部分：HTML部分、CSS部分、Javascript部分。

1.HTML部分：主要负责网页的结构层

2.CSS部分：主要负责网页的样式层

3.JS部分：主要负责网页的行为层

**基本概念**

层叠样式表，Cascading Style Sheet （CSS）也叫级联样式表，主要用来控制网页样式和布局。实现网页内容与样式分离，提高网页开发效率和可维护性，便于统一管理网页风格。

**引入方式**

- 行内样式：主要就是通过标签的style属性来进行设置。每个标签都要写，且可能出现大量重复的问题。优先级高。
- 内部样式：将CSS代码写在网页内，在head标签的style标签内。规避了一些重复的行内样式，作用进在于当前页面。
- 外部样式：将CSS代码以一个独立的文件存在`xxx.css`，在HTML中用`link`标签来进行引入。

一.CSS选择器：

1.基础选择器

2.复合选择器

3.属性选择器

4.伪类选择器

1. 链接伪类选择器

2.结构伪类选择器

3.目标伪类选择器

4.表单相关伪类选择器

5.否定伪类选择器

6.焦点相关伪类选择器

5.伪元素选择器

6.优先级的计算规则

二.CSS的常见样式

1.形状相关

2.阴影效果

3.文本效果

4.超出处理方案

5.隐藏和显示

6.背景样式

7.定位问题

8.CSS3新特性

9.媒体查询

10.@font-face 字体

11.过渡效果

12.变幻效果

一.CSS选择器：

1.基础选择器

- 标签选择器：通过HTML的标签名进行选择；

标签名称{样式代码}

- 类选择器：通过标签的class属性进行选择；(可以重名的ID)

typeA {

background-color: aqua;

}

- ID选择器：通过标签的id属性进行选择；

<p id = "p1">一个带有ID的段落</p>

- 通配符选择器（不用）清除所有的标签的边距

优先级：ID选择器>类选择器>标签选择器（有相同属性时如果没有相同属性则共同作用）

2.复合选择器

- 后代选择器：选择某个元素内部的所有层级的子元素 `祖先选择器后代选择器`

- 子选择器：选择某个元素内部的下一级特定子元素 `父选择器 > 子选择器`

- 相邻兄弟选择器：选择紧接着某一个元素的且同时具有相同父元素的兄弟元素 `前一个 + 后一个`

- 后续兄弟选择器：选择某一个元素之后且同时具有相同父元素的所有兄弟元素 `前一个元素 ~ 后一个元素`

- 交集选择器：选择同时满足多个选择器的元素，多个选择器之间没有分隔连着写即可

- 并集选择器：选择满足任意一个选择器条件的元素，多个选择器之间用逗号分隔即可 `选择器,选择器,选择器`

## 优先级的计算规则

CSS选择器优先级的计算遵循 **特殊性** 规则：

- 选择器的特殊性由四个值表示（从左到右重要性依次递减） `[0,0,0,0]`

- 内联样式：一个内联样式提供一个 `[1,0,0,0]`

- ID选择器：一个ID选择器提供一个 `[0,1,0,0]`

- 类选择器、属性选择器、伪类选择器：每一个提供 `[0,0,1,0]`

- 标签选择器：一个标签选择器提供一个 `[0,0,0,1]`

- 通配符选择器：`[0,0,0,0]`

- 继承属性：比上述所有更低，最低的

举例子来看：

- `body div p`：`[0,0,0,3]`

- `ol p`：`[0,0,0,2]`

- `.type p`：`[0,0,1,1]`

- `#main ~ p`：`[0,1,0,1]`

- `div.text ~ p `：`[0,0,1,2]`

- 按照特殊性从左到右比较 `[0,1,0,0]` > `[0,0,0,1000]`

- 如果优先级一样的话，后定义的覆盖先定义的（相同属性，不相同则共同作用）

3.属性选择器

允许根据元素的属性或属性值来进行选择

- 存在属性选择器：选择具有指定属性的元素，无论元素的值是什么 `[属性名]`

- 精确属性值选择器：选择具有指定属性名和指定属性值的元素 `[属性名="属性值"]`

- 包含单词属性选择器：选择具有指定属性名，但该属性的值是一个以空格分隔的单词列表（多属性值），其中包含指定单词的元素。`[属性名~="属性值"]`

- 以指定字符串开头的属性值选择器：选择具有指定属性名，并且该属性值以指定字符串开头的元素 `[属性名^="属性值"]`

- 以指定字符串结尾的属性值选择器：选择具有指定属性名，并且该属性值以指定字符串结尾的元素 `[属性名$="属性值"]`

- 包含指定字符串属性选择器：选择具有指定属性名，并且该属性值包含指定字符串的元素 `[属性名*="属性值"]`

4.伪类选择器

1. 链接伪类选择器
主要用于处理链接元素在不同交互状态下的样式。

- `:link`：用于选择未被访问的状态

- `:visited`：用于选择被访问的状态

- `:hover`：用于选择鼠标悬停时的状态

- `:active`：用于选择正在被激活（鼠标点击）的元素的状态

2.结构伪类选择器
根据元素在文档树（document）中的位置来选择的。

- `:first-child`：选择作为其父元素中第一个子元素的元素

- `:last-child`：选择作为其父元素中最后一个子元素的元素

- `:nth-child(n)`：选择作为其父元素中第n个子元素，n可以是数字，可以是关键字（even偶数 odd奇数）、也可以是公式（`2n+1`）

- `:nth-last-child(n)`：将上面这个`:nth-child(n)`倒过来。

- `:first-of-type`：选择作为其父元素中第一个指定类型的子元素

- `:last-of-type`：选择作为其父元素中最后一个指定类型的子元素

- `:nth-of-type(n)`：选择作为其父元素中第n个指定类型的子元素

- `:nth-last-of-type(n)`：将上面这个`:nth-of-type(n)`倒过来。

- `:only-child`：选择作为其父元素中唯一一个的子元素

- `:only-of-type`：选择作为其父元素中唯一一个指定类型的子元素

3.目标伪类选择器
选择当前活动的目标元素，通常用于URL的锚点链接

4.表单相关伪类选择器
用于选择表单元素的不同状态

- `:enable`：选择可用的表单元素

- `:disable`：选择不可用的表单元素

- `:checked`：选择被选中的表单元素

- `:required`：选择具有`required`属性的元素

- `:optinal`：选择没有`required`属性的元素

- `:valid`：选择符合表单验证的元素

- `:invalid`：选择不符合表单验证的元素

- `:in-range`：选择数据在表单范围内的元素

- `:out-of-range`：选择数据不在表单范围内的元素

5.否定伪类选择器
选择不匹配的选择器的元素

6.焦点相关伪类选择器

- `:focus`：选择当前获得焦点的元素

- `:focus-within`：选择包含获得焦点的子元素的父元素

- `:focur-visible`：选择当前获得焦点且焦点可见的元素

5.伪元素选择器
用于选取元素中的特定部分，这些部分在文档树中并不真实存在，只是通过CSS来进行的虚拟创建和样式化的内容。

- `::before` 和 `::after`：在选定元素的内容之前或之后添加额外的内容，content属性指定添加的内容。

- `::first-letter`：选定元素的内容的第一个字符

- `::first-line`：选定元素的内容的第一行文字

- `::selection`：选定元素的内容被选中时

- `::placeholder`：设置表单输入框提示文字的样式

二.CSS的常见样式

## css常见样式参考表

1.形状相关

宽、高、边线、字体相关的样式

2.阴影效果

阴影效果主要有文本阴影和盒子阴影

3.文本效果

4.超出处理方案

5.隐藏和显示

针对本身，可以实现标签的隐藏和显示。

在CSS中，`display`属性控制标签的隐藏和显示。

`display`不仅仅能够隐藏或者显示标签，而且可以修改标签默认属性，如将块标签修改为行内标签，或者将行内标签修改为块标签。

6.背景样式

7.定位问题

定位：css的定位效果是，重新调整标签的位置关系

position：static 默认效果

绝对定位：将标签确定在某一个位置

父相子绝（如果某一个子元素需要做绝对定位，参照的父元素必须做相对定位）

8.CSS3新特性

CSS3诞生于2010年前后，W3C在12年左右发布了C3标准。

+ 媒体查询

+ 字体设置

+ 动画、过渡、变换等动画效果

+ avg等icon的使用

+ ……

9.媒体查询

媒体查询在CSS2时，就已经存在了。

媒体查询:指的是CSS对于当前展示页面的设备的查询能力，**适配对应的屏幕分辨率。**

CSS2：
@media 查询，在css2就出现了，最开始用来指定对应的设备，如tv表示电视（tv）、screen表示电脑、print表示打印机，后来随着移动端的发展，设备的更新，为了响应现在日异月新的显示屏设备展示数据，css3提供了媒体查询，主要针对不同分辨率的屏幕。在2010年前，移动互联网的发展，促使大量各种分辨率的屏幕出现。CSS2提供的媒体就不满足时代的发展了，因此C3正式推出了符合当前时代发展的媒体查询，是以分辨率为媒体的查询标准了。

10.@font-face 字体

可以使用@font-face，通过自定义的字体文件，实现任意字体在页面文字中的使用。

11.过渡效果

过渡，是CSS3提供的，用来让CSS样式，实现补间动画的一种手段，在规定的时间内，从开始到结束这个区间内，实现动画的自动补齐。

12.变幻效果

Web-CSS入门

WEB前端，三部分：HTML部分、CSS部分、Javascript部分。 1.HTML部分：主要负责网页的结构层 2.CSS部分：主要负责网页的样式层 3.JS部分：主要负责网页的行为层 **基本概念** 层叠样式表，Cascading Style Sh…...

编程日记 2025/6/21 2:29:44

Qt/C++编写音视频实时通话程序/画中画/设备热插拔/支持本地摄像头和桌面

一、前言近期有客户提需求，需要在嵌入式板子上和电脑之间音视频通话，要求用Qt开发，可以用第三方的编解码组件，能少用就尽量少用，以便后期移植起来方便。如果换成5年前的知识储备，估计会采用纯网络通信收发…...

编程日记 2025/5/29 20:12:00

Ubuntu快速安装Python3.11及多版本管理

之前文章和大家分享过，将会出一篇专栏（从电脑装ubuntu系统，到安装ubuntu的常用基础软件：jdk、python、node、nginx、maven、supervisor、minio、docker、git、mysql、redis、postgresql、mq、ollama等），目前…...

编程日记 2025/6/1 8:10:21

Qt功能区：Ribbon使用

Ribbon使用 1. Ribbon功能区介绍1.1 样式 2. 基本功能区设置2.1 安装动态库（推荐）2.2 在MainWindow中使用Ribbon2.3 在QWidget中使用SARibbonBar2.4 创建Category和Pannel2.5 ContextCategory 上下文标签创建 2.6 ApplicationButton2.7 QuickAccessBar和…...

编程日记 2025/5/29 14:43:34

【学习心得】Jupyter 如何在conda的base环境中其他虚拟环境内核

如果你在conda的base环境运行了jupyter lab打开了一个ipynb文本，此时选择的内核是base虚拟环境的Python内核，如果我想切换成其他conda虚拟环境来运行这个文件该怎么办？下面我们试着还原一下问题，并且解决问题。【注】这个问题出…...

编程日记 2025/5/26 10:43:16

在微创手术中使用Kinova轻型机械臂进行多视图图像采集和3D重建

在微创手术中，Kinova轻型机械臂通过其灵活的运动控制和高精度的操作能力，支持多视图图像采集和3D重建。这种技术通过机械臂搭载的光学系统实现精准的多角度扫描，为医疗团队提供清晰且详细的解剖结构模型。其核心在于结合先进的传感器配置与重…...

编程日记 2025/5/29 22:50:00

[Java][Leetcode middle] 238. 除自身以外数组的乘积

第一个想法是： 想求出所有元素乘积，然后除以i对应的元素本书；这个想法是完全错误的： nums[I] 可能有0题目要求了不能用除法第二个想法是： 其实写之前就知道会超时，但是我什么都做不到啊！ 双…...

编程日记 2025/5/27 7:02:18

【leetcode】144. 二叉树的前序遍历

给你二叉树的根节点 root ，返回它节点值的前序遍历。示例 1： 输入：root [1,null,2,3] 输出：[1,2,3] 解释： 示例 2： 输入：root [1,2,3,4,5,null,8,null,null,6,7,9] 输出&#xff1a…...

编程日记 2025/5/29 11:33:21

SpringBoot常用注解详解

文章目录 1. 前言2. 核心注解2.1 SpringBootApplication2.2 Configuration2.3 EnableAutoConfiguration2.4 ComponentScan2.5 Bean2.6 Autowired2.7 Qualifier2.8 Primary2.9 Value2.10 PropertySource2.11 ConfigurationProperties2.12 Profile 3. Web开发相关注解3.1 Control…...

编程日记 2025/5/26 11:36:08

中文分词与数据可视化02

jieba 库简介 jieba（结巴分词）是一个高效的中文分词工具，广泛用于中文自然语言处理（NLP）任务。它支持以下功能： 分词：将句子切分为独立的词语。自定义词典：添加专业词汇或新词&am…...

编程日记 2025/5/27 15:22:02

SSH主机密钥验证失败：全面解决方案与技术手册

一、问题本质与安全机制解析 SSH(Secure Shell)的主机密钥验证是安全通信的核心机制，当出现"Host key verification failed"错误时，表明客户端检测到服务器身份异常。这种设计可有效防范中间人攻击(Man-in-the-Middle)，其工作原理…...

编程日记 2025/5/29 0:42:28

buuctf Crypto-鸡藕椒盐味1

1.题目： 公司食堂最新出了一种小吃，叫鸡藕椒盐味汉堡，售价八块钱，为了促销，上面有一个验证码，输入后可以再换取一个汉堡。但是问题是每个验证码几乎都有错误,而且打印的时候倒了一下。小明买到了一个汉堡&a…...

编程日记 2025/5/29 10:20:52

真题卷001——算法备赛

蓝桥杯2024年C/CB组国赛卷 1.合法密码问题描述小蓝正在开发自己的OJ网站。他要求用户的密码必须符合一下条件： 长度大于等于8小于等于16必须包含至少一个数字字符和至少一个符号字符请计算一下字符串，有多少个子串可以当作合法密码。字符串为&am…...

编程日记 2025/5/27 8:22:44

基于MCP的桥梁设计规范智能解析与校审系统构建实践

引言在腾讯云开发者社区中，有多种MCP工具可以用于本系统的开发和优化中，以下是一些潜在的应用场景： ‌PDF解析工具‌：如pdfplumber等，可以用于规范文件的预处理，提取文本和图像信息。‌自然语言处理工具…...

编程日记 2025/5/22 2:16:27

matlab与python问题解析

Python requests乱码的五种解决办法 Python requests乱码的五种解决办法_requests.get乱码-CSDN博客 requests库post请求参数data、json和files的使用 requests库post请求参数data、json和files的使用_requests post data-CSDN博客如何在浏览器中查看POST请求提交的数据内…...

编程日记 2025/5/29 16:59:09

【分布式锁通关指南 10】源码剖析redisson之MultiLock的实现

引言本期我们将把目光聚焦在 Redisson 中另一个颇具代表性的分布式锁实现——MultiLock。它的核心思想是：一次性对多个独立的 RLock 进行加锁或解锁操作，只有当多个锁都成功加锁时才算真正完成锁的获取，一旦有任何一个失败，整体操…...

编程日记 2025/5/29 13:11:49

MySQL 8.0 OCP 1Z0-908 131-140题

Q131.You have upgraded the MySQL binaries from 5.7.28 to 8.0.18 by using an in-place upgrade. Examine the message sequence generated during the first start of MySQL 8.0.18: 。。。[System]。。。/usx/sbin/mysqld (mysqld 8.0.18-commercial) starting as process…...

编程日记 2025/5/29 13:38:04

实战解析MCP-使用本地的Qwen-2.5模型-AI协议的未来？

文章目录目录文章目录前言一、MCP是什么？ 1.1MCP定义 1.2工作原理二、为什么要MCP？ 2.1 打破碎片化的困局 2.2 实时双向通信，提升交互效率 2.3 提高安全性与数据隐私保护三、MCP 与 LangChain 的区别 3.1 目标定位不同 3.…...

编程日记 2025/5/29 12:00:03

从零开始学习three.js（20）：three.js实现天气与时间动态效果（白天，黑夜，下雨，下雪）

基于Three.js的天气与时间动态效果实现本文将通过代码解析，介绍如何使用Three.js实现动态天气（下雨、下雪）和时间（白天、黑夜）切换效果。完整代码基于一个交互式天气模拟项目，支持粒子密度、速度和环境亮…...

编程日记 2025/5/17 5:58:50

sqli-labs靶场23-28a关（过滤）

目录 less23（--过滤） less24（二次注入） less25（or过滤） less25a（or过滤） less26（--和空格过滤报错） less26a（--空格过滤盲注） …...

编程日记 2025/5/22 0:30:54

Sigmoid与Softmax：从二分类到多分类的深度解析

Sigmoid与Softmax：从二分类到多分类的深度解析联系函数性质：二者都是非线性函数，也都是指数归一化函数，可将输入值映射为0到1之间的实数，都能把输出转化成概率分布的形式，在神经网络中常作为激活函数使用。Softmax是Sigmoid的推广：从功能角度看，Softmax函数可视为…...

编程日记 2025/5/29 16:52:55

uni-app x正式支持鸿蒙原生应用开发

DCloud发布的HBuilderX 4.64正式版，支持编译uni-app x项目到鸿蒙平台，实现跨平台开发鸿蒙原生应用。至此，uni-app x 已经完成Android、iOS、鸿蒙、Web、微信小程序等主流平台全覆盖。 uni-app x，是下一代 uni-app，是一…...

编程日记 2025/5/28 22:40:30

【软件推荐——pdf2docx】

pdf2docx Open source Python library for converting PDF to DOCX. https://github.com/ArtifexSoftware/pdf2docx Install pip install pdf2docx使用 from pdf2docx import Converterpdf_file D:\my\c4611_sample_explain.pdf docx_file D:\my\c4611_sample_explain.d…...

编程日记 2025/5/27 0:13:48

一.CSS选择器：

1.基础选择器

2.复合选择器

3.属性选择器

4.伪类选择器

1. 链接伪类选择器 主要用于处理链接元素在不同交互状态下的样式。

2.结构伪类选择器 根据元素在文档树（document）中的位置来选择的。

3.目标伪类选择器 选择当前活动的目标元素，通常用于URL的锚点链接

4.表单相关伪类选择器 用于选择表单元素的不同状态

5.否定伪类选择器 选择不匹配的选择器的元素

6.焦点相关伪类选择器

5.伪元素选择器 用于选取元素中的特定部分，这些部分在文档树中并不真实存在，只是通过CSS来进行的虚拟创建和样式化的内容。

二.CSS的常见样式

1.形状相关

2.阴影效果

3.文本效果

4.超出处理方案

5.隐藏和显示

6.背景样式

7.定位问题

8.CSS3新特性

9.媒体查询

10.@font-face 字体

11.过渡效果

12.变幻效果

相关文章：

1. 链接伪类选择器
主要用于处理链接元素在不同交互状态下的样式。

2.结构伪类选择器
根据元素在文档树（document）中的位置来选择的。

3.目标伪类选择器
选择当前活动的目标元素，通常用于URL的锚点链接

4.表单相关伪类选择器
用于选择表单元素的不同状态

5.否定伪类选择器
选择不匹配的选择器的元素

5.伪元素选择器
用于选取元素中的特定部分，这些部分在文档树中并不真实存在，只是通过CSS来进行的虚拟创建和样式化的内容。