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

【前端】【CSS3】基础入门知识

news 2025/11/8 18:30:36

目录

如何学习CSS

1.1什么是CSS​编辑

1.2发展史

1.三种导入方式

1.1、行内样式

1.2、外部样式

1.3、嵌入方式

2.选择器

2.1、基本选择器

（1）元素选择器

（2）类选择器

（3）id选择器：必须唯一

2.2层次选择器

（1）后代选择器

（2）子选择器

（3）相邻兄弟选择器

（4）通用选择器

2.3结构伪类选择器 

（1）ul的第一个子元素

（2）ul的最后一个子元素

2.4属性选择器

如何学习CSS

1、什么是CSS

2、CSS怎么用（快速入门）

3、CSS选择器（重点+难点）

4、美化网页（文字、阴影、超链接、列表、渐变）

6、盒子模型

7、定位

8、网页动画

什么是CSS

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

发展史

  • CSS1（1996年推出）：CSS1是第一版的CSS规范，它引入了一套基本的样式属性和选择器，使得开发者可以通过样式表将样式应用于HTML文档。CSS1提供了对字体、颜色、背景、边框等基本样式的控制。它为网页布局和样式提供了一些基础，但功能相对有限。

  • CSS2（1998年推出）：CSS2是CSS的第二版规范，引入了更多的功能和选择器，增强了样式控制的能力。它引入了浮动、定位和层叠等特性，使得开发者能够更好地控制和布局网页元素。CSS2还引入了伪类和伪元素选择器，允许开发者根据元素的状态或位置选择应用样式。

  • CSS3（2001年开始，持续发展）：CSS3是CSS的下一代规范，由一系列模块组成，每个模块引入了新的特性和功能。CSS3引入了更多的选择器、盒模型属性、颜色和背景属性、文本效果、过渡和动画效果、多列布局等。它还引入了媒体查询（Media Queries），允许开发者根据设备的属性和特征应用不同的样式，从而实现响应式设计。CSS3的发展是渐进式的，新的模块和特性不断被添加和标准化。

1.三种导入方式

1.1、行内样式

<div style="background: red"></div>

1.2、外部样式

（1）链接式

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

（2）导入式

<style>@import url(style.css);
</style>

1.3、嵌入方式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

<head><style>.content {background: red;}</style>
</head>

2.选择器

  • 元素选择器（Element Selector）：通过元素名称选择 HTML 元素。例如，p 选择器将选择所有 <p> 元素。

  • 类选择器（Class Selector）：通过类别名称选择具有特定类别的 HTML 元素。类选择器以 . 开头，后面跟着类别名称。例如，.highlight 选择器将选择所有具有类别为 "highlight" 的元素。

  • ID 选择器（ID Selector）：通过元素的唯一标识符（ID）选择 HTML 元素。ID 选择器以 # 开头，后面跟着 ID 名称。例如，#logo 选择器将选择具有 ID 为 "logo" 的元素。

  • 属性选择器（Attribute Selector）：通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。例如，input[type="text"] 选择器将选择所有 type 属性为 "text" 的 <input> 元素。

  • 后代选择器（Descendant Selector）：通过指定元素的后代关系选择 HTML 元素。后代选择器使用空格分隔元素名称。例如，div p 选择器将选择所有在 <div> 元素内的 <p> 元素。

  • 子元素选择器（Child Selector）：通过指定元素的直接子元素关系选择 HTML 元素。子元素选择器使用 > 符号分隔父元素和子元素。例如，ul > li 选择器将选择所有 <ul> 元素的直接子元素中的 <li> 元素。

  • 相邻兄弟选择器（Adjacent Sibling Selector）：通过指定元素之间的相邻兄弟关系选择 HTML 元素。相邻兄弟选择器使用 + 符号分隔两个相邻元素。例如，h2 + p 选择器将选择紧接在 <h2> 元素后的 <p> 元素。

  • 通用选择器（Universal Selector）：选择所有 HTML 元素。通用选择器使用 * 符号。例如，* 选择器将选择页面上的所有元素。

2.1、基本选择器

（1）元素选择器

h1选择器将选择所有 <h1> 元素。

（2）类选择器

.head选择器选择所有类别为 "head" 的元素。

好处：可以将多个标签归类，是同一个class的可以复用 

（3）id选择器：必须唯一

如下代码，#runoob 选择器将选择具有 ID 为 "runoob" 的元素。 

#runoob {width: 200px;
}

 优先级：id>class>标签

2.2层次选择器

（1）后代选择器

body p 选择器将选择所有在 <body> 元素内的 <p> 元素。

（2）子选择器

body > p 选择器将选择所有 <body> 元素的直接子元素中的 <p> 元素。

（3）相邻兄弟选择器

h2 + p 选择器将选择紧接在 <h2> 元素后的一个 <p> 元素。

（4）通用选择器

* 选择器将选择页面上的所有元素。

2.3结构伪类选择器 

:first-child 所有兄弟元素中的第一个

:last-child 所有兄弟元素中的最后一个

:nat-child 所有兄弟元素中的第n个

:first-of-type 所有 同类型 兄弟元素中的第一个

:last-of-type 所有 同类型 兄弟元素中的最后一个

:nth-of-type(n) 所有 同类型 兄弟元素中的第 n 个

2.4属性选择器

（1）a[id] 

选择含有id属性的<a>元素

（2）a[id="first"]

选择id属性值为first 的<a>属性

（3）a[id*="links"] 

选中id属性值中包含“links”的<a>元素

 （4） a[href^=http]

选中href属性中以http开头的<a>元素

（5）a[href$=png]

选中href属性中以png结尾的<a>元素

其他

选择器示例示例说明CSS
.class.intro选择所有class="intro"的元素1
#id#firstname选择所有id="firstname"的元素1
**选择所有元素2
elementp选择所有<p>元素1
element,elementdiv,p选择所有<div>元素和 <p> 元素1
element.classp.hometown选择所有 class="hometown" 的 <p> 元素1
element elementdiv p选择<div>元素内的所有<p>元素1
element>elementdiv>p选择所有父级是 <div> 元素的 <p> 元素2
element+elementdiv+p选择所有紧跟在 <div> 元素之后的第一个 <p> 元素2
[attribute][target]选择所有带有target属性元素2
[attribute=value][target=-blank]选择所有使用target="-blank"的元素2
[attribute~=value][title~=flower]选择标题属性包含单词"flower"的所有元素2
[attribute|=language][lang|=en]选择 lang 属性等于 en，或者以 en- 为开头的所有元素2
:linka:link选择所有未访问链接1
:visiteda:visited选择所有访问过的链接1
:activea:active选择活动链接1
:hovera:hover选择鼠标在链接上面时1
:focusinput:focus选择具有焦点的输入元素2
:first-letterp:first-letter选择每一个<p>元素的第一个字母1
:first-linep:first-line选择每一个<p>元素的第一行1
:first-childp:first-child指定只有当<p>元素是其父级的第一个子级的样式。2
:beforep:before在每个<p>元素之前插入内容2
:afterp:after在每个<p>元素之后插入内容2
:lang(language)p:lang(it)选择一个lang属性的起始值="it"的所有<p>元素2
element1~element2p~ul选择p元素之后的每一个ul元素3
[attribute^=value]a[src^="https"]选择每一个src属性的值以"https"开头的元素3
[attribute$=value]a[src$=".pdf"]选择每一个src属性的值以".pdf"结尾的元素3
[attribute*=value]a[src*="runoob"]选择每一个src属性的值包含子字符串"runoob"的元素3
:first-of-typep:first-of-type选择每个p元素是其父级的第一个p元素3
:last-of-typep:last-of-type选择每个p元素是其父级的最后一个p元素3
:only-of-typep:only-of-type选择每个p元素是其父级的唯一p元素3
:only-childp:only-child选择每个p元素是其父级的唯一子元素3
:nth-child(n)p:nth-child(2)选择每个p元素是其父级的第二个子元素3
:nth-last-child(n)p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素，从最后一个子项计数3
:nth-of-type(n)p:nth-of-type(2)选择每个p元素是其父级的第二个p元素3
:nth-last-of-type(n)p:nth-last-of-type(2)选择每个p元素的是其父级的第二个p元素，从最后一个子项计数3
:last-childp:last-child选择每个p元素是其父级的最后一个子级。3
:root:root选择文档的根元素3
:emptyp:empty选择每个没有任何子级的p元素（包括文本节点）3
:target#news:target选择当前活动的#news元素（包含该锚名称的点击的URL）3
:enabledinput:enabled选择每一个已启用的输入元素3
:disabledinput:disabled选择每一个禁用的输入元素3
:checkedinput:checked选择每个选中的输入元素3
:not(selector):not(p)选择每个并非p元素的元素3
::selection::selection匹配元素中被用户选中或处于高亮状态的部分3
:out-of-range:out-of-range匹配值在指定区间之外的input元素3
:in-range:in-range匹配值在指定区间之内的input元素3
:read-write:read-write用于匹配可读及可写的元素3
:read-only:read-only用于匹配设置 "readonly"（只读） 属性的元素3
:optional:optional用于匹配可选的输入元素3
:required:required用于匹配设置了 "required" 属性的元素3
:valid:valid用于匹配输入值为合法的元素3
:invalid:invalid用于匹配输入值为非法的元素3
:has:has允许根据其后代元素来选择一个元素。3
:is:is接收任何数量的选择器作为参数，并且返回这些选择器匹配的元素的并集。3

3.样式

3.1文字样式：

风格/粗细/大小/颜色

 

 合并一起写：

.p1{font: oblique 100 16px "楷体";}

3.2 文本样式

颜色

排版

段落缩进

高度

相关文章：

【前端】【CSS3】基础入门知识

目录 如何学习CSS 1.1什么是CSS​编辑 1.2发展史 1.三种导入方式 1.1、行内样式 1.2、外部样式 1.3、嵌入方式 2.选择器 2.1、基本选择器 &#xff08;1&#xff09;元素选择器 &#xff08;2&#xff09;类选择器 &#xff08;3&#xff09;id选择器&#xff1a;必…...

编程日记 2025/1/10 19:33:32

计算机网络之---RIP协议

RIP协议的作用 RIP (Routing Information Protocol) 协议是一个基于距离矢量的路由协议&#xff0c;它在网络中用来动态地交换路由信息。RIP 是最早的路由协议之一&#xff0c;通常用于小型和中型网络中。它的工作原理简单&#xff0c;易于实现&#xff0c;但在一些大型网络中效…...

编程日记 2025/1/10 19:29:29

【LeetCode Hot100 贪心算法】 买卖股票的最佳时机、跳跃游戏、划分字母区间

贪心算法 买卖股票的最佳时机买卖股票的最佳时机II跳跃游戏跳跃游戏II划分字母区间 买卖股票的最佳时机 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的…...

编程日记 2025/1/10 19:28:28

互联网架构变迁：从 TCP/IP “呼叫” 到 NDN “内容分发” 的逐浪之旅

本文将给出关于互联网架构演进的一个不同视角。回顾一下互联网的核心理论基础产生的背景&#xff1a; 左边是典型的集中控制通信网络&#xff0c;很容易被摧毁&#xff0c;而右边的网络则没有单点问题&#xff0c;换句话说它很难被全部摧毁&#xff0c;与此同时&#xff0c;分…...

编程日记 2025/1/10 19:23:24

git相关操作笔记

git相关操作笔记 1. git init git init 是一个 Git 命令&#xff0c;用于初始化一个新的 Git 仓库。执行该命令后&#xff0c;Git 会在当前目录创建一个 .git 子目录&#xff0c;这是 Git 用来存储所有版本控制信息的地方。 使用方法如下&#xff1a; &#xff08;1&#xff…...

编程日记 2025/1/10 19:21:22

jenkins 使用 ssh-agent向windows进行部署

背景&#xff1a; jenkins在linux的docker环境内&#xff0c;应用服务部署在windows。需要使用jenkins实现自动化部署。 实现方式&#xff1a; jenkins上构建pipeline任务&#xff0c;脚本如下&#xff1a; 遇到问题&#xff1a; 1、问题&#xff1a;jenkins 调用部署bat脚…...

编程日记 2025/1/10 19:20:21

MySQL入门学习笔记

第一章 数据库系统概述 数据库的4个基本概念 数据、数据库、数据库管理系统、数据库系统是与数据库技术密切相关的4个基本概念 数据 数据是数据库中存储的基本对象&#xff0c;描述事物的符号记录称为数据&#xff0c;数据的表现形式还不能完全表达其内容&#xff0c;需要…...

编程日记 2025/1/10 19:17:18

机器学习全流程解析：数据导入到服务上线全阶段介绍

目录 1. 数据导入 2. 数据预处理 3. 超参数搜索与优化 4. 模型训练 5. 模型评估 6. 模型压缩与优化 7. 模型注册与版本管理 8. 服务上线与部署 总结 1. 数据导入 数据源&#xff1a;数据库、文件系统、API等。数据格式&#xff1a;CSV、JSON、SQL 数据库表、Parquet …...

编程日记 2025/1/10 19:14:14

C#从“Hello World！“开始

是时候一览C#的庐山真面目了。现在&#xff0c;让我们从"Hello World"开始吧&#xff0c;出发&#xff01; 1. 一个简单的C#程序 先来看一段最简单的示例代码&#xff0c;如代码清单2-1所示。 代码清单2-1　HelloWorldClass.cs using System;namespace Programmi…...

编程日记 2025/1/10 19:11:11

LVS 支持 UDP 协议代理

在现代网络架构中，负载均衡技术是保证高可用性和高性能的关键组成部分。Linux Virtual Server（LVS）作为一个高效、稳定的负载均衡解决方案，广泛应用于处理 TCP 流量的场景。然而，随着实时通信、视频流和在线游戏等应用的不断发展，UDP 协议的支持成为了 LVS 负载均衡的重要…...

编程日记 2025/1/10 19:10:08

【C++经典例题】求1+2+3+...+n，要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a; 期待您的关注 题目描述&#xff1a; 原题链接&#xff1a; 求123...n_牛客题霸_牛客网 (nowcoder.com) 解题思路&#xff1a; …...

编程日记 2025/1/10 19:09:07

Rabbitmq 具体怎么做到削峰的，是丢弃部分消费吗，有的实际场景是不允许丢弃

在高并发场景中&#xff0c;RabbitMQ 可以通过几种策略来实现 削峰&#xff08;缓解瞬时负载激增&#xff09;&#xff0c;而这些策略并不一定需要丢弃消息。在一些业务场景下&#xff0c;丢弃消息显然是不允许的&#xff0c;因此在这种情况下&#xff0c;可以使用以下方法来确…...

编程日记 2025/1/10 19:04:01

Linux渗透实战之Nullbyte靶场提权

0x1 前言 一、浅谈 哈喽师傅们&#xff0c;这次又到了给师傅们分享文章的时候了&#xff0c;这篇文章呢主要是给师傅们以vulnhub中的Nullbyte靶场来给师傅们演示下通过Hydra表单暴力破解等操作拿到账户密码&#xff0c;然后中间以四种sql注入的方式给大家非常详细的操作了sql…...

编程日记 2025/1/10 19:03:00

（STM32笔记）十二、DMA的基础知识与用法 第三部分

我用的是正点的STM32F103来进行学习&#xff0c;板子和教程是野火的指南者。 之后的这个系列笔记开头未标明的话&#xff0c;用的也是这个板子和教程。 DMA的基础知识与用法 三、DMA程序验证1、DMA 存储器到存储器模式实验&#xff08;1&#xff09;DMA结构体解释&#xff08;2…...

编程日记 2025/1/10 19:00:58

品牌账号矩阵如何打造？来抄作业

在讲究全域营销的当下&#xff0c;目前企业都在各自搭建品牌矩阵号&#xff0c;以提升自己在不同渠道上的影响力。虽然不同平台之间有诸多细节值得深究&#xff0c;但也不妨碍我们先了解如何搭建品牌矩阵。接下来&#xff0c;就让我们一同来了解下该如何搭建。 一、一个主账号 …...

编程日记 2025/1/10 18:57:55

基于vue的商城小程序的毕业设计与实现(源码及报告)

环境搭建 ☞☞☞ ​​​Vue入手篇(一)&#xff0c;防踩雷(全网最详细教程)_vue force-CSDN博客 目录 一、功能介绍 二、登录注册功能 三、首页 四、项目截图 五、源码获取 一、功能介绍 用户信息展示&#xff1a;页面顶部设有用户头像和昵称展示区&#xff0c;方便用户识别…...

编程日记 2025/1/10 18:54:53

NineData云原生智能数据管理平台新功能发布｜2024年12月版

本月发布 7 项更新&#xff0c;其中重点发布 2 项、功能优化 5 项。 重点发布 数据库 Devops - Oracle 非表对象支持可视化创建与管理 Oracle 非表对象&#xff0c;包括视图&#xff08;View&#xff09;、包&#xff08;Package&#xff09;、存储过程&#xff08;Procedur…...

编程日记 2025/1/10 18:48:46

【Vue.js 组件化】高效组件管理与自动化实践指南

文章目录 摘要引言组件命名规范与组织结构命名规范目录组织 依赖管理工具自动化组件文档生成构建自动引入和文档生成的组件化体系代码结构自动引入组件配置使用 Storybook 展示组件文档自动生成 代码详解QA 环节总结参考资料 摘要 在现代前端开发中&#xff0c;组件化管理是 V…...

编程日记 2025/1/10 18:45:43

Clojure语言的并发编程

Clojure语言的并发编程 引言 在现代软件开发中&#xff0c;并发编程成为了处理多个任务、提高应用效率和响应速度的重要手段。尤其是在多核处理器逐渐成为主流的今天&#xff0c;如何高效利用这些计算资源是每个开发者面临的挑战。Clojure作为一种函数式编程语言&#xff0c;…...

编程日记 2025/1/10 18:43:41

RabbitMQ-SpringAMQP使用介绍

RabbitMQ 1. Spring AMQP1.1 引入依赖1.2 消息发送1.3 消息接收1.4 WorkQueue模型1.4.1 实例代码1.4.2 能者多劳1.4.3 总结 1.5交换机1.6 Fanout交换机&#xff08;广播&#xff09;1.7 Direct交换机&#xff08;订阅&#xff09;1.8 Topic交换机&#xff08;通配符订阅&#x…...

编程日记 2025/1/10 18:41:38

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2025/11/7 20:03:55

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/10/20 5:24:23

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/9/30 12:05:28

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/11/7 11:43:54

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

编程新知 2025/11/7 15:37:10

探索Selenium：自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/7/17 22:23:49

uniapp 小程序 学习（一）

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

编程新知 2025/11/7 19:15:54

PydanticAI快速入门示例

参考链接&#xff1a;https://ai.pydantic.dev/#why-use-pydanticai 示例代码 from pydantic_ai import Agent from pydantic_ai.models.openai import OpenAIModel from pydantic_ai.providers.openai import OpenAIProvider# 配置使用阿里云通义千问模型 model OpenAIMode…...

编程新知 2025/11/7 20:31:54

如何做好一份技术文档？从规划到实践的完整指南

如何做好一份技术文档&#xff1f;从规划到实践的完整指南 &#x1f31f; 嗨&#xff0c;我是IRpickstars&#xff01; &#x1f30c; 总有一行代码&#xff0c;能点亮万千星辰。 &#x1f50d; 在技术的宇宙中&#xff0c;我愿做永不停歇的探索者。 ✨ 用代码丈量世界&…...

编程新知 2025/11/7 19:13:36