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

CSS 快速上手

news 来源：原创 2025/5/12 20:57:52

一. CSS概念

二. CSS语法

1. 基本语法规范

2. CSS的三种引入方式

(1) 行内样式

(2) 内部样式表

(3) 外部样式表

3. CSS选择器

(1) 标签选择器

(2) 类选择器

(3) id选择器

(4) 通配符选择器

(5) 复合选择器

<1> 空格

<2> 没有空格

<3> ","

<4> ">"

">" 表示父子关系 (不能隔代)

4. 常用CSS

一. CSS概念

什么是CSS? CSS, 全称 "Cascading Style Sheet" (层叠样式表). 用来控制页面的样式.

HTML描述了页面要显示什么内容, 而CSS就是要给这些内容加上不同的样式, 使其更加美观.

二. CSS语法

1. 基本语法规范

选择器 + n条声明

选择器说明对谁进行修改.
声明决定修改什么.
声明用键值对来表示. ( ":" 区分键和值)

下面我们来看一个例子:

首先需要注意的一点是, 样式的声明我们一般放到<head>标签内. 然后我们这里看到要对p标签进行修改, 把color改为red. 所以p标签内的内容将变成red. 我们来看效果:

2. CSS的三种引入方式

(1) 行内样式

这种方式直接将CSS写在HTML标签的style属性中. 这种方式简单直接, 但是会导致HTML文档变得冗长且难以维护.

(2) 内部样式表

内部样式表是将CSS代码写在HTML文档的<head>部分, 通过<style>标签定义. <style>标签内指定哪些标签分别有哪些样式. 上面"1.基本语法规范"哪里的代码就是内部样式表.

(3) 外部样式表

外部样式表是将CSS代码保存在一个独立的.css文件中, 然后在HTML文档的<head>部分通过<link>标签引入. 这种方式是开发中最常见的, 它可以将样式与HTML内容分离, 便于维护和复用.

3. CSS选择器

(1) 标签选择器

以标签作为标识来选中想要修饰的内容.

(2) 类选择器

以类作为标识来选中想要修饰的内容.

[注]: 以 class 作为选择器时, 要以 "." 开头.

(3) id选择器

以 id 作为标识来选中想要修饰的内容.

[注]: 以 id 作为选择器时, 要以 "#" 开头.

(4) 通配符选择器

通配符选择器, 顾名思义, 就是同时设置页面内所有元素.

(5) 复合选择器

<1> 空格

空格表示后代关系 (可以隔代)

如上图, 表示 ul 标签下的 a 标签.

<2> 没有空格

没有空格表示交集, 两个要同时具备.

如上图, 表示要同时满足 p标签和 first类.

<3> ","

逗号 "," 表示并集, 两个满足一个即可.

如上图, 表示要同时满足 first类和 second类.

<4> ">"

">" 表示父子关系 (不能隔代)

如上图, 表示 ul 下的 li 下的 a 标签.

4. 常用CSS

(1) color 设置字体颜色

(2) font-size 设置字体大小

(3) border 设置边框

(4) width/ height 设置宽度/高度

(5) padding/ margin 设置内边距/ 外边距

CSS 快速上手

目录一. CSS概念二. CSS语法 1. 基本语法规范 2. CSS的三种引入方式 (1) 行内样式 (2) 内部样式表 (3) 外部样式表 3. CSS选择器 (1) 标签选择器 (2) 类选择器 (3) id选择器 (4) 通配符选择器 (5) 复合选择器 <1> 空格 <2> 没有空格 <3> &q…...

编程日记 2025/5/12 20:57:52

51c视觉~YOLO~合集4

我自己的原文哦~ https://blog.51cto.com/whaosoft/12512597 1、Yolo8 1.1、检测PCB元件技术世界正在以惊人的速度发展，而这种转变的核心是一个革命性的工具 — 计算机视觉。它最有趣的应用之一是电子印刷电路板 （PCB） 的检测和分析。本文…...

编程日记 2025/5/9 2:02:02

深入浅出：PHP函数的定义与使用

文章目录前言什么是函数定义函数语法示例调用函数示例参数传递按值传递示例按引用传递示例默认参数示例可变数量的参数示例返回值示例变量作用域全局作用域示例局部作用域示例静态作用域示例匿名函数示例闭包示例递归函数示例内置函数常见内置函数示例用户自定义函数示…...

编程日记 2025/5/8 6:34:43

前端调试实践

作者：效能研发部黄泽平前言在日常调试问题中，相信我们很多人都是用console去排查相关的问题，虽然问题也可以排查出来，但是有时它的效率并不高。这篇文章主要讲解关于断点和一些日常调试技巧的内容，方便你在日后调…...

编程日记 2025/5/12 3:32:06

芯科科技突破性超低功耗Wi-Fi 6和低功耗蓝牙5.4模块加速设备部署

致力于以安全、智能无线连接技术，建立更互联世界的全球领导厂商Silicon Labs（亦称“芯科科技”，今日宣布推出SiWx917Y超低功耗Wi-Fi 6和低功耗蓝牙（Bluetooth LE）5.4模块。作为成功的第二代无线开发平台的新产品&…...

编程日记 2025/5/10 13:12:17

Matlab自学笔记四十三：使用函数拆分日期时间型数据的子信息：年、月、日、时、分、秒

使用函数拆分日期时间型数据的子信息：年、月、日、时、分、秒，函数包括年year，季度quarter，月month，周week，日day，时hour，分minute，秒second，年月日ymd&#…...

编程日记 2025/5/12 20:56:32

【NLP高频面题 - LLM架构篇】大模型使用SwiGLU相对于ReLU有什么好处？

【NLP高频面题 - LLM架构篇】大模型使用SwiGLU相对于ReLU有什么好处？ 重要性：★★★ 💯 NLP Github 项目： NLP 项目实践：fasterai/nlp-project-practice 介绍：该仓库围绕着 NLP 任务模型的设计、训练、优化…...

编程日记 2025/5/12 20:44:30

【Python爬虫实战】轻量级爬虫利器：DrissionPage之SessionPage与WebPage模块详解

🌈个人主页：易辰君-CSDN博客 🔥 系列专栏：https://blog.csdn.net/2401_86688088/category_12797772.html 目录前言一、SessionPage （一）SessionPage 模块的基本功能 （二）基本使…...

编程日记 2025/5/12 8:01:29

python查找大文件

完整代码，不仅会捕获错误，还会输出大于 1MB 文件的大小（以 MB 为单位），并跳过访问受限或已删除的文件。代码 import os# 查找当前目录及子目录下大于 1MB 的文件，并输出文件大小 for root, dirs, files in os.walk(.):for name in files:...

编程日记 2025/5/12 20:26:44

秒懂：使用js验证hash, content hash , chunk hash的区别

一、使用js验证hash, content hash , chunk hash的区别 1、计算一般的 Hash（以简单字符串为例） 使用crypto-js库来进行哈希计算，需提前引入npm install crypto-js库。 crypto-js： 是一个JavaScript加密算法库，用于实…...

编程日记 2025/5/12 15:28:46

RabbitMQ消息可靠性保证机制6--可靠性分析

在使用消息中间件的过程中，难免会出现消息错误或者消息丢失等异常情况。这个时候就需要有一个良好的机制来跟踪记录消息的过程（轨迹溯源），帮助我们排查问题。在RabbitMQ中可以使用Firehose实现消息的跟踪，Firehose可…...

编程日记 2025/5/2 4:11:40

【NoSQL数据库】MongoDB数据库——集合和文档的基本操作（创建、删除、更新、查询）

目录一、MongoDB数据库原理二、MongoDB数据库和集合基本操作（增删改查） 三、MongoDB数据库的文档基本操作（增删改） 四、学习笔记往期文章：【NoSQL数据库】MongoDB数据库的安装与卸载-CSDN博客一、MongoDB数据…...

编程日记 2025/5/12 20:34:03

IDL学习笔记（二）IDL处理卫星数据

IDL处理卫星数据 HDF文件数据集属性通用属性常用HDF4操作函数常用的HDF5操作函数读取HDF文件的一般步骤 HDF4文件读取-----数据信息查询HDF4文件读取示例-----目标数据TIFF输出提取modis产品中数据，与某一点经纬度最接近的点有效结果，并按每行内容为日期…...

编程日记 2025/5/10 17:28:02

用点云信息来进行监督目标检测

🍑个人主页：Jupiter. 🚀 所属专栏：传知代码欢迎大家点赞收藏评论😊 目录概述问题分析Making Lift-splat work well is hard深度不准确深度过拟合不准确的BEV语义模型总体框架显性深度监督深度细化模块演示效果核心…...

编程日记 2025/5/8 3:19:11

Python编写api接口读取电商商品详情数据示例

以下是一个使用 Python 的 Flask 框架来编写一个简单的 API 接口，用于读取模拟的电商商品详情数据的示例代码。这里假设商品详情数据是存储在一个简单的字典中模拟数据库存储，实际应用中你需要连接真正的数据库（如 MySQL、MongoDB 等&#xf…...

编程日记 2025/4/29 5:47:23

用纯 CSS 实现网格背景

是不是在日常开发中经常遇到实现网格的需求，网格通常对网页中展示的元素能起到很好的定位和对齐作用。这里介绍如何只通过 CSS 来实现这个需求？ 使用背景图这里我们的背景图使用 SVG 来创建，首先，创建绘出一个正方形&#xff…...

编程日记 2025/5/9 0:58:47

CNN+LSTM+AM研究方向初尝试

CNNLSTMAM研究方向初尝试简单介绍 CNN CNN 的基本结构卷积层（Convolutional Layer）： 该层通过卷积操作提取输入数据的特征。卷积操作使用多个卷积核（滤波器）对输入图像进行局部感知，从而识别出边缘、纹…...

编程日记 2025/5/12 19:57:58

对比 LiveData 和 Flow 的实现方式

前一段忙完了鸿蒙，现在又开始 Android 开发了。由于之前公司都是都是偏传统开发方式，基本都是 Java 开发 Android 那一套。现在开始学习现代 Android 开发了。对比 LiveData 和 Flow 的实现方式在 Android 开发中，LiveData 和 Flow 都可以用来管理异步数据流和实现 UI 的…...

编程日记 2025/4/26 8:13:35

React.memo 和useMemo 的区别

React.memo 和 useMemo 都是 React 中的性能优化工具，但它们的用途和工作原理不同。以下是它们的主要区别： 1. React.memo React.memo 是一个高阶组件（HOC），用于优化组件的渲染，防止不必要的重新渲染。当组…...

编程日记 2025/5/7 20:53:52

视频码率到底是什么？详细说明

视频码率（Video Bitrate）是指在单位时间内（通常是每秒）传输或处理的视频数据量，用比特（bit）表示。它通常用来衡量视频文件的压缩程度和质量，码率越高，视频质量越好&#…...

编程日记 2025/5/12 20:56:32

CentOS7停更后，如何配置国内Yum源、镜像源

CentOS7停更后，如何配置国内Yum源、镜像源 yum介绍步骤1. 备份原有的yum源文件2. 下载国内Yum源文件3. 清除缓存并更新Yum源4. 使用国内Yum源 yum介绍 Yum（Yellowdog Updater Modified）是一个在CentOS和Red Hat Enterprise Linux&#xff08…...

编程日记 2025/5/9 17:35:04

黑石云｜Linux-基础口令

在Linux系统中，设置和管理口令（密码）是确保系统安全性的重要环节。以下是一些关于Linux基础口令的详细解释和操作指南： 一、口令设置命令 passwd命令功能：用于更改当前用户的密码。使用方法：在终端中输…...

编程日记 2025/5/12 19:53:57

如何配置Github并在本地提交代码

前提: 可以流畅访问github, 需要一些上网技巧, 这就自行处理了申请一个github账号 Github官网地址首先就是邮箱注册啦, github没有对邮箱的限制, 只要是能收邮件的就ok, qq邮箱, 163等都可以使用. 然后和普通注册账号一样, 一路填写需要的信息, 验证邮箱即可. 如何新增代…...

编程日记 2025/5/12 20:02:41

UiPath API接口说明

Swagger网址私有云网址（企业版） https://企业/swagger/index.html 公有云网址（社区版） https://cloud.uipath.com/linan/LinanZhang/orchestrator_/swagger/index.html#/ 常见问题 Swagger页面测试请求时报错“You are not a…...

编程日记 2025/5/12 15:57:57

Ubuntu22.04上kdump和crash的使用

0.前言 1.引用： 解决Linux内核问题实用技巧之 - Crash工具结合/dev/mem任意修改内存-腾讯云开发者社区-腾讯云解决Linux内核问题实用技巧之-dev/mem的新玩法-腾讯云开发者社区-腾讯云 ubuntu内核转储分析——kdump和crash的下载和使用_ubuntu kdump-CSDN博客 U…...

编程日记 2025/5/12 5:08:30

【2025最新计算机毕业设计】基于SSM+Vue中华传统文化吟诵知识学习系统

作者简介：✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容：🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…...

编程日记 2025/5/12 4:21:26

智能社区服务小程序+ssm(lw+演示+源码+运行）

摘要随着信息技术在管理上越来越深入而广泛的应用，管理信息系统的实施在技术上已逐步成熟。本文介绍了智能社区服务小程序的开发全过程。通过分析智能社区服务小程序管理的不足，创建了一个计算机管理智能社区服务小程序的方案。文章介绍了智能社区服务…...

编程日记 2025/5/12 20:30:25

windows10电脑缺少dll文件的解决方案，系统缺少dll修复指南

在使用Windows 10操作系统时，有时会遇到由于缺少某些动态链接库（Dynamic Link Library, 简称DLL）文件而导致程序无法正常运行的问题。本指南将介绍几种解决此类问题的方法。什么是DLL文件？ DLL文件是Windows系统中的一种特殊类型…...

编程日记 2025/5/4 12:32:24

【设计模式系列】工厂方法模式（二十一）

一、什么是工厂方法模式工厂方法模式（Factory Method Pattern）是一种创建型设计模式，其核心目的是定义一个创建对象的接口，但让实现这个接口的子类来决定实例化哪一个类。工厂方法模式让类的实例化推迟到子类中进行，…...

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

etcd资源超额

集群内apiserver一直重启，重启kubelet服务后查看日志发现一下报错： Error from server: etcdserver: mvcc: database space exceeded 报错原因： etcd服务未设置自动压缩参数（auto-compact） etcd 默认不会自动 compa…...

编程日记 2025/5/12 19:57:58

数据结构与算法学习笔记----DFS

数据结构与算法学习笔记----DFS author: 明月清了个风 first publish time: 2024.12.4 revised: 2024.12.5 - 加了Acwing 843. n-皇后问题。 ps⛹感觉DFS的题基本的思想就是递归，但是每题都有不一样的地方，每一题的思路和模拟过程都单独写在每一题里…...

编程日记 2025/5/11 7:32:00

力扣54.螺旋矩阵

题目描述题目链接54. 螺旋矩阵给你一个 m 行 n 列的矩阵 matrix ，请按照顺时针螺旋顺序 ，返回矩阵中的所有元素。示例 1： 输入：matrix [[1,2,3],[4,5,6],[7,8,9]] 输出：[1,2,3,6,9,8,7,4,5]示例 2：…...

编程日记 2025/5/8 11:47:58

【原生js案例】webApp实现一个分享到的功能

这种分享到的效果很常见，在我们的网站上。鼠标滑入展示，滑出就隐藏。现在我们使用定时器功能来实现这种滑动效果。感兴趣的可以关注下我的系列课程【webApp之h5端实战】，里面有大量的css3动画效果制作原生知识分析，讲解&#xf…...

编程日记 2025/5/7 13:34:43

iPhone手机清理软件：相册清理大师推荐

随着智能手机成为我们日常生活的必需品，手机中的数据日益膨胀，尤其是照片和视频这类容易积累的文件。对于iPhone用户来说，管理这些文件，特别是清理相册变得尤为重要。本文将介绍一款备受推崇的iPhone手机清理软件——CleanMyPhone…...

编程日记 2025/5/11 21:58:01

Javaweb梳理21——Servlet

Javaweb梳理21——Servlet 21 Servlet21.1 简介21.3 执行流程21.4 生命周期4.5 方法介绍21.6 体系结构21.7 urlPattern配置21.8 XML配置 21 Servlet 21.1 简介 Servlet是JavaWeb最为核心的内容，它是Java提供的一门动态web资源开发技术。使用Servlet就可以实现&…...

编程日记 2025/5/9 5:31:30

Serverless 时代

前端的边界探索，从客户端展开，以跨端为目标，用一套 JavaScript 代码生成多端平台，以此来实现大前端的统一。虽然在这条路上还不算尽善尽美，但各家公司的跨端方案已基本趋于成熟，并且已经运用到生产环境中。…...

编程日记 2025/5/7 15:24:09

docker安装clickhouse副本集群

docker安装clickhouse副本集群 1、clickhouse副本集群搭建1.1、docker安装zookeeper集群1.1.1、zookeeper第一个节点安装1.1.2、zookeeper第二个节点安装1.1.3、zookeeper第三个节点安装1.1.4、zookeeper客户端命令 2、Clickhouse副本集群搭建2.1、clickhouse搭建2.2、验证集群…...

编程日记 2025/5/12 19:57:57

详解AI网关助力配电房实现智能化管控应用

对于一些建设年份久远的老旧配电房，由于配套降温散热设施设备不完善、线路设备老化等因素，极易出现因环境过热而影响设备正常稳定运行，进而导致电气故障甚至火灾等事故产生。基于AI网关的配电房智能监控及管理针对配电房的实时安全监测及…...

编程日记 2025/5/11 3:01:49

uniapp调用腾讯定位api

1、注册腾讯地址api接口，创建应用获取key WebService API | 腾讯位置服务 2、配置获取方法getCity // 定位服务getCity(latitude, longitude) {const key XXXX-XXXX-XXXX-XXXX-XXXX; // 替换为你的腾讯位置服务密钥const url /apis.map.qq.com/ws/geocoder/v1/…...

编程日记 2025/5/12 19:49:11

映射vim键位,基本功能键位表(未更完)

键位映射：建议使用jj代替esc,毕竟esc离手那么远 linux下修改方法是：vim /etc/vim/vimrc 在该文件尾添加inoremap jj <Esc>该方法可以同样可以用到其他键位映射上 i：表示这个映射是在插入模式（insert mode）下有效…...

编程日记 2025/5/4 17:22:29

【Python】爬虫实战03：自动化抢票脚本【某麦网】

1. 脚本介绍 1.1 背景介绍在这个数字化时代，演唱会、体育赛事和各种活动的门票销售往往在线上进行。由于热门活动的高需求和门票的有限供应，抢票成为了一场激烈的竞争。许多粉丝和爱好者经常因为手速不够快或网络延迟而错失购票机会。为了提高抢票的成…...

编程日记 2025/5/11 23:25:38

继承System.Web.Http.ApiController的Action的Model如果被[Serializable]定义，会导致Model的字段无法绑定。 Microsoft.AspNet.WebApi.Core.5.2.3\lib\net45\System.Web.Http.dll [Serializable] public class Model {public string id { get; set; } }public MyA…...

编程日记 2025/5/6 8:21:28

ISAAC SIM踩坑记录--添加第三方3D场景

ISAAC SIM仿真首先就是要有合适的3D场景，官方提供了一些场景，如果不能满足要求，那就只能自己建。对于我这种不会3D建模的菜鸟，只能到网上下载了，sketchfab就是一个不错的平台，有不少免费资源可以下载。 …...

编程日记 2025/5/11 0:24:17

Linux中Crontab（定时任务）命令详解

文章目录 Linux中Crontab（定时任务）命令详解一、引言二、Crontab的基本使用1、Crontab命令格式2、Crontab常用操作三、Crontab的配置与服务管理1、配置Crontab2、服务管理四、使用示例1、每天凌晨2点备份网站数据2、每周一凌晨3点清理临时文件3、每月的…...

编程日记 2025/5/11 14:59:29

在Ubuntu中运行和管理AppImage

文章目录什么是AppImage？如何在Ubuntu中运行AppImage？如何管理AppImage？安装AppImageLauncher如何添加AppImage到系统？如何从系统中移除AppImage？ 总结什么是AppImage？ AppImage是一种将应用程序打包为单…...

编程日记 2025/5/10 14:15:46

2024年12月大语言模型最新对比：GPT-4、Claude 3、文心一言等详细评测

前言随着人工智能技术的快速发展，大语言模型(LLM)已经成为了技术领域最热门的话题。本文将详细对比目前主流的大语言模型，帮助大家选择最适合的工具。一、OpenAI GPT系列 1. GPT-4 核心优势： 多模态理解能力强逻辑推理能力出色创造…...

编程日记 2025/5/3 4:32:15

上下位关系自动检测方法

✨✨ 欢迎大家来访Srlua的博文（づ￣3￣）づ╭❤～✨✨ 🌟🌟 欢迎各位亲爱的读者，感谢你们抽出宝贵的时间来阅读我的文章。我是Srlua小谢，在这里我会分享我的知识和经验。&am…...

编程日记 2025/5/8 22:59:07

Linux入门攻坚——40、Linux集群系统入门-lvs（1）

Cluster，集群，为了解决某个特定问题将多台计算机组合起来形成的单个系统。这个单个集群系统可以扩展，系统扩展的方式：scale up，向上扩展，更换更好的主机；scale out，向外扩展&…...

编程日记 2025/4/29 21:59:26

结构篇| 浅析LLaMA网络架构

01 前言 LLaMA（Large Language Model Meta AI）是由Meta AI 发布的一个开放且高效的大型基础语言模型。为什么突然讲这个模型，主要LLaMA 已经成为了最受欢迎的开源大语言模型之一，LLaMA 系列模型在学术界和工业界引起了广泛的关注，对于推动大语言模型技术的开源发展做出了…...

编程日记 2025/5/6 5:49:47

CTF-PWN: 全保护下格式化字符串利用 [第一届“吾杯”网络安全技能大赛如果能重来] 赛后学习(不会)

通过网盘分享的文件：如果能重来.zip 链接: https://pan.baidu.com/s/1XKIJx32nWVcSpKiWFQGpYA?pwd1111 提取码: 1111 --来自百度网盘超级会员v2的分享漏洞分析格式化字符串漏洞,在printf(format); __int64 sub_13D7() {char format[56]; // [rsp10h] [rbp-40h]…...

编程日记 2025/5/5 23:59:22

一. CSS概念

二. CSS语法

1. 基本语法规范

2. CSS的三种引入方式

(1) 行内样式

(2) 内部样式表

(3) 外部样式表

3. CSS选择器

(1) 标签选择器

(2) 类选择器

(3) id选择器

(4) 通配符选择器

(5) 复合选择器

<1> 空格

<2> 没有空格

<3> ","

<4> ">"

">" 表示父子关系 (不能隔代)

4. 常用CSS

相关文章：