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

CSS 基础【快速掌握知识点】

news 2026/2/8 21:15:18

目录

一、什么是CSS

二、CSS发展史

三、CSS基本语法结构

1、语法

2、例如

四、style标签

五、HTML中引入CSS样式

1、行内样式

2、内部样式表

3、外部样式表

六、CSS基本选择器

1、标签选择器

2、类选择器

3、ID选择器

4、总结

5、基本选择器的优先级

七、CSS的高级选择器

1、层次选择器

2、结构伪类选择器

3、属性选择器

一、什么是CSS

对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

二、CSS发展史

三、CSS基本语法结构

1、语法

选择器{ 声明1;

            声明2;

                … }

2、例如

h1 {font-size:12px;color:#F00;
}

四、style标签

style标签的作用是用来说明所要定义的样式

<style type="text/css">
h1 {font-size:12px;color:#F00;
}
</style>

五、HTML中引入CSS样式

1、行内样式

<h1 style="color:red;">style属性的应用</h1>

<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

2、内部样式表

CSS代码写在<head>的<style>标签中

<style>
h1{color: green; }
</style>

优点：方便在同页面中修改样式

缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

3、外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式

链接式：

<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>

导入式：

<head>
……
<style type="text/css">
<!--@import url("style.css");-->
</style>
</head>

CSS样式优先级：行内样式>内部样式表>外部样式表，就近原则

六、CSS基本选择器

1、标签选择器

HTML标签作为标签选择器的名称：<h1>…<h6>、<p>、<img/>

2、类选择器

<标签名 class= "类名称">标签内容</标签名>

3、ID选择器

#id { font-size:16px;}

4、总结

标签选择器直接应用于HTML标签

类选择器可在页面中多次使用

ID选择器在同一个页面中只能使用一次

5、基本选择器的优先级

ID选择器>类选择器>标签选择器

七、CSS的高级选择器

1、层次选择器

选择器

类 型

功能描述

E F

后代选择器

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

E>F

子选择器

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

E+F

相邻兄弟选择器

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

E~F

通用兄弟选择器

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

后代选择器: body p{ background: red; }

子选择器: body>p{ background: pink; }

通用兄弟选择器:.active~p{ background: yellow; }

相邻兄弟选择器: .active+p { background: green; }

2、结构伪类选择器

选择器

功能描述

E:first-child

作为父元素的第一个子元素的元素E

E:last-child

作为父元素的最后一个子元素的元素E

E F:nth-child(n)

选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd

E:first-of-type

选择父元素内具有指定类型的第一个E元素

E:last-of-type

选择父元素内具有指定类型的最后一个E元素

E F:nth-of-type(n)

选择父元素内具有指定类型的第n个F元素

ul li:first-child{ background: red;}

ul li:last-child{ background: green;}

p:nth-child(1){ background: yellow;}

p:nth-of-type(2){ background: blue;}

3、属性选择器

属性选择器

功能描述

E[attr]

选择匹配具有属性attr的E元素

E[attr=val]

选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）

E[attr^=val]

选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串

E[attr$=val]

选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串

E[attr*=val]

选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

E[attr]属性选择器：a[id] { background: yellow; }

E[attr=val]属性选择器：a[id=first] { background: red; }

E[attr*=val]属性选择器：a[class*=links] { background: red; }

E[attr^=val]属性选择器：a[href^=http] { background: red; }

E[attr$=val]属性选择器：a[href$=png] { background: red; }

相关文章：

CSS 基础【快速掌握知识点】

目录 一、什么是CSS 二、CSS发展史 三、CSS基本语法结构 1、语法 2、例如 四、style标签 五、HTML中引入CSS样式 1、行内样式 2、内部样式表 3、外部样式表 六、CSS基本选择器 1、标签选择器 2、类选择器 3、ID选择器 4、总结 5、基本选择器的优先级 七、CSS的…...

编程日记 2023/2/24 15:20:01

Linux 驱动基础

注册驱动模块时给模块传递参数 在一些情况下&#xff0c;我们要动态的改变驱动中某个变量的值&#xff0c;那么就可以在注册时给驱动模块传递参数。 给驱动模块中传递参数&#xff0c;需要定义好接受参数值的全局变量&#xff0c;并调用module_param 来引用它&#xff0c;具体…...

编程日记 2023/2/24 15:18:55

linux 共享内存操作（shm_open、mmap、编译链接库：-lz -lrt -lm -lc都是什么库）

文章目录linux 共享内存操作&#xff08;shm_open&#xff09;一、背景二、函数使用说明shm_openftruncate&#xff08;改变文件大小&#xff09;mmap共享内存三、示例代码创建内存共享文件并写入数据打开内存共享文件读数据四、问题总结shm_write.c:(.text0x18): undefined re…...

编程日记 2023/2/24 15:17:49

做出改变：农业科技和区块链在为地球的未来而战中的力量

到2050年&#xff0c;全球有100亿人需要养活&#xff0c;全世界都在关注区块链和农业信息化&#xff0c;以推动发展中国家的技术革新。 自成立以来&#xff0c;区块链技术已经找到了多样化和有价值的应用&#xff0c;以帮助提高效率和激励社区在不同领域和行业的参与。 农业是…...

编程日记 2023/2/24 15:16:45

树莓派介绍

文章目录一.树莓派介绍二.树莓派分类一.树莓派介绍 树莓派&#xff0c;&#xff08;英语&#xff1a;Raspberry Pi&#xff0c;简写为RPi&#xff0c;别名为RasPi / RPI&#xff09;是为学习计算机编程教育而设计&#xff0c;只有信用卡大小的微型电脑&#xff0c;其系统基于L…...

编程日记 2023/2/24 15:15:39

[神经网络]基干网络之VGG、ShuffleNet

一、VGG VGG是传统神经网络堆叠能达到的极限深度。 VGG分为VGG16和VGG19&#xff0c;其均有以下特点&#xff1a; ①按2x2的Pooling层&#xff0c;网络可以分成若干段 ②每段之内由若干same卷积操作构成&#xff0c;段内Feature Map数量固定不变&#xff1b; ③Feature Map按2的…...

编程日记 2023/2/24 15:14:33

Java 日期时间与正则表达式，超详细整理，适合新手入门

目录 1、java.time.LocalDate类表示日期&#xff1b; 2、java.time.LocalTime类表示时间&#xff1b; 3、java.time.LocalDateTime类表示日期和时间&#xff1b; 4、java.time.format.DateTimeFormatter类用于格式化日期和时间&#xff1b; 5、创建正则表达式对象 6、匹配…...

编程日记 2023/2/24 15:13:27

用Netty实现物联网04：自定义通信协议

上一讲咱们澄清了Netty的一些基本概念，然后也写了一个服务端与客户端通信的简单应答程序。从这一讲开始，就来一步步搭建一个Netty物联网应用。 大多数硬件电子产品，都自带了嵌入式软件，或者说固件。这些嵌入式软件/固件基本上都是用C/C++编写的。由于这些小微电子设备资源极…...

编程日记 2023/2/24 15:12:21

「smardaten」上架钉钉应用中心！让进步再一次发生

使用钉钉的团队小伙伴们&#xff0c;smardaten给您送来福利啦~为了给更多团队提供更优质的应用开发体验&#xff0c;方便用户在线、快速使用无代码&#xff0c;数睿数据近期在【钉钉应用中心】发布smardaten在线版本。继与华为云、亚马逊云建立战略合作之后&#xff0c;smardat…...

编程日记 2023/2/24 15:11:15

3、Maven安装

前言&#xff1a;工具下载地址阿里云盘&#xff1a;Maven&#xff1a;https://www.aliyundrive.com/s/SgHKjQ5doSp提取码: ml40一、什么是maven?Apache Maven是个项目管理和自动构建工具&#xff0c;基于项目对象模型&#xff08;POM&#xff09;的概念。作用&#xff1a;完成…...

编程日记 2023/2/24 15:10:10

tkinter

# 隐藏控件 tl.pack_forget() tb.pack_forget() # 显示控件 tl.pack() tb.pack() 如果您使用 grid 布局管理器&#xff0c;则可以使用 grid_remove() 方法将控件隐藏&#xff0c;使用 grid() 方法将控件显示。例如&#xff1a; # 隐藏控件 tl.grid_remove() tb.grid_remove() #…...

编程日记 2023/2/24 15:09:04

Servlet笔记（6）：HTTP状态码

1、状态码 代码消息描述100 Continue只有请求的一部分已经被服务器接收&#xff0c;但只要它没有被拒绝&#xff0c;客户端应继续该请求。101 Switching Protocols服务器切换协议。200 OK请求成功。201 Created该请求是完整的&#xff0c;并创建一个新的资源。202 Accepted该请…...

编程日记 2023/2/24 15:07:57

RocketMQ 延迟队列

什么是延迟队列指消息发送到某个队列后&#xff0c;在指定多长时间之后才能被消费。应用场景RocketMQ 延迟队列定时消息&#xff08;延迟队列&#xff09;是指消息发送到broker后&#xff0c;不会立即被消费&#xff0c;等待特定时间投递给真正的topic。broker有配置项messageD…...

编程日记 2023/2/24 15:06:52

【精准计时】北斗GPS卫星时钟同步改变精准计时年代

【精准计时】北斗GPS卫星时钟同步改变精准计时年代 【精准计时】北斗GPS卫星时钟同步改变精准计时年代 北斗GPS成精确计时先锋 　　北斗GPS精确时间自动校准技术&#xff0c;是一种简便的获取北斗GPS精确时间信息的专利技术&#xff0c;具有灵敏度高、不受时间及地域限制等特点…...

编程日记 2023/2/24 15:05:47

【C#基础】C# 面向对象编程

序号系列文章5【C#基础】C# 运算符总结6【C#基础】C# 常用语句讲解7【C#基础】C# 常用数据结构文章目录前言面向对象的 C#1&#xff0c;类的概念2&#xff0c;类的定义3&#xff0c;类成员4&#xff0c;对象5&#xff0c;继承6&#xff0c;多态性结语前言 &#x1f60a;大家好&…...

编程日记 2023/2/24 15:04:42

数据结构与算法入门

目录数据结构概述逻辑结构存储结构算法概述如何理解“大O记法”时间复杂度空间复杂度数据结构概述 数据结构可以简单的理解为数据与数据之间所存在的一些关系&#xff0c;数据的结构分为数据的存储结构和数据的逻辑结构。 逻辑结构 集合结构&#xff1a;数据元素同属于一个集…...

编程日记 2023/2/24 15:03:37

【OpenAI】基于 Gym-CarRacing 的自动驾驶练习项目 | 路径训练功能的实现 | GYM-Box2D CarRacing

限时开放&#xff0c;猛戳订阅&#xff01; &#x1f449; 《一起玩蛇》&#x1f40d; &#x1f4ad; 写在前面&#xff1a; 本篇是关于多伦多大学自动驾驶专业项目的博客。GYM-Box2D CarRacing 是一种在 OpenAI Gym 平台上开发和比较强化学习算法的模拟环境。它是流行的 Box2…...

编程日记 2023/2/24 15:02:31

亚马逊、沃尔玛测评自养号测评、退款、撸卡撸货怎么做？

大家好&#xff0c;有很多的测评工作室做亚马逊测评、沃尔玛测评自养号大额退款&#xff0c;撸卡撸货的找到我&#xff0c;问我有什么方式可以解决成本&#xff0c;效率&#xff0c;纯净度&#xff0c;便捷性等问题&#xff0c;测评养号系统从最早的模拟器&#xff0c;虚拟机到…...

编程日记 2023/2/24 15:01:27

Apollo 2.1.0最新版docker 部署多环境 与java spring boot 接入demo （附带一键部署脚本）

最新Apollo 版本发布2.1.0 https://www.apolloconfig.com/#/zh/design/apollo-design 环境说明 ecs 主机一台数据库mysql 8.0docker 环境 apollo 是内网可信应用&#xff0c;最好是部署在内网里面&#xff0c;外网不可使用&#xff0c;避免配置信息泄漏&#xff0c;这里为了方…...

编程日记 2023/2/24 15:00:20

分布式算法 - 一致性Hash算法

一致性Hash算法是个经典算法&#xff0c;Hash环的引入是为解决单调性(Monotonicity) 的问题&#xff1b;虚拟节点的引入是为了解决 平衡性(Balance) 问题。一致性Hash算法引入在分布式集群中&#xff0c;对机器的添加删除&#xff0c;或者机器故障后自动脱离集群这些操作是分布…...

编程日记 2023/2/24 14:59:15

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2026/1/20 19:54:35

51c自动驾驶~合集58

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

编程新知 2026/2/5 4:25:15

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

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

编程新知 2026/2/5 4:17:31

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2026/1/15 1:34:10

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

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

编程新知 2025/11/28 5:32:31

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2026/1/23 10:51:19

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2026/2/6 21:43:26

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2026/1/25 10:16:57

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2026/1/26 13:29:47