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

【前端基础】Day 2 CSS层叠样式表

article 2026/3/29 20:16:31

目录

1.CSS简历

2.CSS 基础选择器

2.1标签选择器

2.2类选择器

2.3 id选择器

2.4通配符选择器

2.5总结 

3.CSS字体属性

字体属性总结 

4.CSS文本属性

4.1颜色

4.2对齐文本

4.3装饰文本

4.4文本缩进

4.5行间距

4.6文本属性总结

5.CSS的引入方式

5.1内部样式表

5.2行内样式表

5.3外部样式表

7.Chrome调试工具

7.1打开调试工具

7.2使用调试工具

1.CSS简历

网页美容师，也是一种标记语言

作用：选择标签+设置这些标签的样式

书写位置在head标签间，在style标签间书写想要的样式

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS语法规范</title><style>/* 选择器 {样式}给谁改样式 {改什么样式} */p {color: red;font-size: 12px;/* 修改了文字大小为12像素 */}</style>
</head>

推荐代码风格：

1.展开格式

2.小写字母

3.空格规范：选择器（标签）和大括号中间保留空格；属性值前面，冒号后面，保留一个空格

2.CSS 基础选择器

2.1标签选择器

2.2类选择器

2.3 id选择器

2.4通配符选择器

2.5总结 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>/* 标签选择器 */p {color: blue;}/* 类选择器: 样式点定义，结构类(class)调用，一个或多个，开发最常用*/.red {color: red;}.box {width: 100px;height: 100px;font-size: 30px;}.green {background-color: green;}.pink {background-color: pink;}/* id选择器:样式#定义，结构id调用，只能调用一次，别人切勿使用 */#pink {color: pink;}/* 把html body div span li等等标签都更改了 */* {margin: 0;padding: 0;}</style>
</head><body><p>男</p><p>男</p><ul><li class="red">桃花</li><li>蔷薇</li></ul><div class="box green">绿色</div><div class="box pink">粉色</div><div id="pink">id选择器</div>
</body></html>

3.CSS字体属性


字体属性总结 

    <style>body {font-family: 'Microsoft yahei', Arial, Helvetica;font-size: 16px;font-weight: 700;/* 700后不跟单位，等价于bold,400等价于normal,提倡用数字 */font-style: normal;/*  复合属性：简写的方式  font: italic 700 16px 'Microsoft yahei';    */}/* 标题标签比较特殊，需要单独指定文字大小 */h2 {font-size: 16px;}</style>

4.CSS文本属性

4.1颜色

4.2对齐文本

4.3装饰文本

4.4文本缩进

4.5行间距

4.6文本属性总结

    <style>h1 {text-align: center;}div {color: deeppink;text-decoration: line-through;}a {/* 取消a默认的下划线 */text-decoration: none;}p {text-indent: 2em;}</style>

5.CSS的引入方式

5.1内部样式表

5.2行内样式表

5.3外部样式表

6.综合案例

7.Chrome调试工具

7.1打开调试工具

打开Chrome浏览器，按下F2键或者右击页面空白处再点击检查。

7.2使用调试工具

相关文章：

【前端基础】Day 2 CSS层叠样式表

目录 1.CSS简历 2.CSS 基础选择器 2.1标签选择器 2.2类选择器 2.3 id选择器 2.4通配符选择器 2.5总结 3.CSS字体属性 字体属性总结 4.CSS文本属性 4.1颜色 4.2对齐文本 4.3装饰文本 4.4文本缩进 4.5行间距 4.6文本属性总结 5.CSS的引入方式 5.1内部样式表 …...

编程日记 2026/3/28 12:47:58

建易WordPress

建易WordPress是一家专业的WordPress建站服务提供商&#xff0c;专注于为企业和个人提供一站式的WordPress网站建设、维护、托管、运营推广以及搜索引擎优化(SEO)服务。 服务内容 1. 网站建设 提供模板建站和定制开发两种服务&#xff0c;满足不同客户的需求。模板建站价格为…...

编程日记 2026/3/25 23:56:42

计算机毕业设计SpringBoot+Vue.js汽车资讯网站(源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2026/3/29 12:54:57

nuxt常用组件库html-validator、@nuxtjs/i18n、@nuxt/image、@unocss/nuxt使用解析

html-validator 主要用于自动验证nuxt服务器呈现的HTML(SSR和SSG)&#xff0c;以检测可能导致水合错误的HTML常见问题&#xff0c;有助于减少水合错误&#xff0c;检测常见的可访问性错误。 安装 npx nuxilatest module add html-validator配置 若自动更新nuxt.config.ts配置文…...

编程日记 2026/3/28 18:36:28

Leetcode-最大矩形（单调栈）

一、题目描述 给定一个仅包含 0 和 1 、大小为 rows x cols 的二维二进制矩阵&#xff0c;找出只包含 1 的最大矩形&#xff0c;并返回其面积。 输入&#xff1a;matrix [["1","0","1","0","0"],["1","0&…...

编程日记 2026/3/25 17:17:10

Vue核心知识：动态路由实现完整方案

在Vue中实现动态路由&#xff0c;并结合后端接口和数据库表设计&#xff0c;是一个复杂的项目&#xff0c;需要多个技术栈和步骤的配合。以下将详细描述整个实现过程&#xff0c;包括数据库设计、后端接口设计、前端路由配置以及如何实现动态路由的功能。 目录 一、需求分析二…...

编程日记 2026/3/26 7:43:21

【Docker】使用Docker搭建-MySQL数据库服务

零、更换Docker镜像源 因为国内现在封锁了Docker默认拉取镜像的站点&#xff08;DockerHub&#xff09;&#xff0c;而且国内大部分Docker镜像站已全部下线&#xff0c;导致现在很多朋友在拉取镜像的时候会出现无法拉取的现象&#xff0c;这时候就需要进行更换Docker镜像源。 可…...

编程日记 2026/3/28 6:08:00

DHCP配置和地址

DHCP&#xff1a;动态主机配置协议 DHCP系统组成 DHCP报文结构 DHCP报文类型 DHCP工作流程 DHCP租期更新 DHCP重绑定 自动保留IP 租期设置建议 IP地址释放 DHCP地址池 DHCP配置 DHCP接口地址池配置 DHCP全局地址池配置...

编程日记 2026/3/26 8:03:54

基于trl复现DeepSeek-R1的GRPO训练过程

1. 引入 huggingface开发了强化学习训练Transformer的库trl&#xff08;参考3&#xff09;&#xff0c;借助这个trl&#xff0c;可以用来做GRPO的强化学习训练。魔搭ModelScope社区的文章&#xff08;参考2&#xff09;给出了基于Qwen基座模型Qwen2.5-0.5B-Instruct&#xff0…...

编程日记 2026/3/28 6:07:58

常用的 pip 命令

pip 是 Python 的包管理工具&#xff0c;可用于安装、卸载、更新和管理 Python 包。以下是一些常用的 pip 命令&#xff1a; 1. 安装包 安装最新版本的包 pip install package_namepackage_name 是你要安装的 Python 包的名称&#xff0c;例如 pip install requests 可以安装…...

编程日记 2026/3/28 18:12:38

基于C#的CANoe CLR Adapter开发指南

一、引言 CANoe 是一款广泛应用于汽车电子开发和测试的工具&#xff0c;它支持多种编程接口&#xff0c;方便开发者进行自定义扩展。CANoe CLR Adapter 允许我们使用 C# 语言与 CANoe 进行交互&#xff0c;充分利用 C# 的强大功能和丰富的类库。本文将详细介绍如何基于 C# 进行…...

编程日记 2026/3/25 3:45:27

eMMC安全简介

1. 引言 术语“信息安全”涵盖多种不同的设计特性。一般而言&#xff0c; 信息安全是指通过实践防止信息遭受未经授权的访问、使用、披露、中断、篡改、检查、记录或销毁。 信息安全的三大核心目标为 机密性&#xff08;Confidentiality&#xff09;、完整性&#xff08;Integr…...

编程日记 2026/3/28 18:32:00

从零开始用react + tailwindcss + express + mongodb实现一个聊天程序(六) 导航栏 和 个人信息设置

1.导航栏&#xff08;navbar&#xff09; 在components下面 创建NavBar.jsx import { MessageSquare,Settings,User,LogOut} from "lucide-react" import {Link} from "react-router-dom" import { useAuthStore } from "../store/useAuthStore&qu…...

编程日记 2026/3/25 18:56:06

c#实现modbus rtu定时采集数据

以下是使用C#实现Modbus RTU定时采集数据的完整代码示例，包含定时任务、数据采集和异常处理： csharp 复制 using System; using System.IO.Ports; using System.Timers;public class ModbusRtuCollector : IDisposable {private readonly SerialPort _serialPort;private …...

编程日记 2026/1/19 5:10:35

【Python 语法】Python 数据结构

线性结构&#xff08;Linear Structures&#xff09;1. 顺序存储列表&#xff08;List&#xff09;元组&#xff08;Tuple&#xff09;字符串&#xff08;String&#xff09; 2. 线性存储栈&#xff08;Stack&#xff09;队列&#xff08;Queue&#xff09;双端队列&#xff08…...

编程日记 2025/9/16 4:19:14

数据库MySQL，在终端输入后，提示不是内部命令等

【解决问题】mysql提示不是内部或外部命令&#xff0c;也不是可运行的程序 一般这种问题是因为没有在系统变量里面添加MySQL的可执行路径 以下是添加可执行路径的方法&#xff1a; 第一步&#xff1a;winR输入services.msc 然后找到MySQL&#xff0c;右击属性并复制MySQL的可执…...

编程日记 2026/3/28 9:38:46

docker和containerd从TLS harbor拉取镜像

私有镜像仓库配置了自签名证书&#xff0c;https访问&#xff0c;好处是不需要处理免费证书和付费证书带来的证书文件变更&#xff0c;证书文件变更后需要重启服务&#xff0c;自签名证书需要将一套客户端证书存放在/etc/docker/cert.d目录下&#xff0c;或者/etc/containerd/c…...

编程日记 2025/12/15 7:45:52

《从0到1：用Python在鸿蒙系统开发安防图像分类AI功能》

在人工智能与移动应用深度融合的当下，类目标签AI功能成为众多行业提升效率和用户体验的关键技术。本文聚焦于HarmonyOS NEXT API 12及以上版本，以图像分类在智能家居安防领域的应用为例，为开发者详细阐述如何利用Python开发类目标签AI功能，助力鸿蒙技术在该领域的创新应用。…...

编程日记 2026/1/1 0:52:01

C语言生成二维码

1. 效果 2. 需要的代码&#xff08;QRCode&#xff09; qrcode.cqrcode.h 代码 3. 代码 #include <stdio.h> #include "qrcode.h"int main() {//拓展编码SetConsoleOutputCP(437);QRCode qrcode;uint8_t qrcodeBytes[qrcode_getBufferSize(3)];qrcode_initT…...

编程日记 2026/3/25 10:24:52

Spring Boot 消息队列（以RabbitMQ为例）

文章目录 RabbitMQ 简介与安装1. RabbitMQ 简介2. RabbitMQ 安装 Spring Boot 集成 RabbitMQ1. 创建 Spring Boot 项目2. 配置 RabbitMQ3. 定义消息队列和交换机4. 发送消息5. 接收消息6. 测试消息发送和接收 RabbitMQ 简介与安装 1. RabbitMQ 简介 RabbitMQ 是一个开源的消息…...

编程日记 2025/12/14 15:10:45

[Web 安全] PHP 反序列化漏洞 —— POP 链构造思路

关注这个专栏的其他相关笔记&#xff1a;[Web 安全] 反序列化漏洞 - 学习笔记-CSDN博客 0x01&#xff1a;什么是 POP 链&#xff1f; POP 链&#xff08;Payload On Purpose Chain&#xff09;是一种利用 PHP 中的魔法方法进行多次跳转以获取敏感数据的技术。它通常出现在 CTF…...

编程日记 2026/3/28 1:05:50

商城源码的框架

商城源码的框架通常是基于某种Web开发框架或者电子商务平台来构建的。以下是一些常见的商城源码框架&#xff1a; WooCommerce&#xff1a;基于WordPress的电子商务插件&#xff0c;适用于小型到中型的在线商店。 Magento&#xff1a;一个功能强大和灵活的开源电子商务平台&am…...

编程日记 2025/12/17 15:26:13

记录深度学习中有用的终端命令

1 查看 CUDA 版本 如果你安装了 CUDA 开发工具包&#xff0c;你可以使用 nvcc 命令来查看 CUDA 的版本。 打开终端&#xff08;或命令提示符&#xff09;&#xff0c;运行&#xff1a; nvcc --version 2. 监控 GPU 状态 使用 nvidia-smi 命令&#xff0c;nvidia-smi 是一个…...

编程日记 2025/12/17 22:13:05

深度探索推理新境界：DeepSeek-R1如何用“自学”让AI更聪明？

今天我们要聊从1月初火到现在的AI模型——DeepSeek-R1。它就像一个“自学成材的学霸”&#xff0c;不用老师手把手教&#xff0c;就能在数学、编程、逻辑推理等领域大显身手&#xff01;仔细阅读了深度求索发表的R1论文&#xff0c;发现它不仅揭秘了它的成长秘籍&#xff0c;还…...

编程日记 2026/3/28 14:47:11

2025春新生培训数据结构（树，图）

教学目标&#xff1a; 1&#xff0c;清楚什么是树和图&#xff0c;了解基本概念&#xff0c;并且理解其应用场景 2&#xff0c;掌握一种建图&#xff08;树&#xff09;方法 3&#xff0c;掌握图的dfs和树的前中后序遍历 例题与习题 2025NENU新生培训&#xff08;树&#…...

编程日记 2026/3/26 1:32:44

keil主题（vscode风格）

#修改global.prop文件&#xff0c;重新打开keil即可 # Keil uVision Global Properties File # This file is used to customize the appearance of the editor# Editor Font editor.font.nameConsolas editor.font.size10 editor.font.style0# Editor Colors editor.backgro…...

编程日记 2026/2/28 22:20:01

使用Hydra进行AI项目的动态配置管理

引言：机器学习中的超参数调优挑战 在机器学习领域，超参数调优是决定模型性能的关键环节。不同的模型架构，如神经网络中的层数、节点数，决策树中的最大深度、最小样本分割数等；以及各种训练相关的超参数，像学习率、优化器类型、批量大小等，其取值的选择对最终模型的效果…...

编程日记 2026/3/25 15:15:27

低代码与开发框架的一些整合[3]

1.基本说明 审批流程是企业内部运营的运行流程&#xff0c;与业务板块进行关联&#xff0c;在企业数智化过程中启动业务串联的作用&#xff0c;与AI业务模型及业务agent整合后&#xff0c;将大大提升企业的运行效率以及降低运营风险。 近期对开源的近40个携带流程平台的项目进…...

编程日记 2026/3/22 18:12:41

深入了解 K-Means 聚类算法：原理与应用

引言 在数据科学和机器学习的世界中&#xff0c;聚类是一项非常重要的技术&#xff0c;它帮助我们根据数据的相似性将数据划分为不同的组或簇。聚类算法在许多领域中得到了广泛的应用&#xff0c;如图像处理、市场细分、基因研究等。K-Means 聚类算法作为最常见的无监督学习算…...

编程日记 2026/3/25 10:10:48

AVFormatContext

1. AVFormatContext 的通用性 1.1 通用结构 AVFormatContext 是 FFmpeg 中的一个通用结构体&#xff0c;用于描述多媒体文件或流的上下文信息。它既可以用于输入文件/流&#xff0c;也可以用于输出文件/流。关键字段&#xff08;如 iformat 和 oformat&#xff09;决定了 AVF…...

编程日记 2025/8/11 18:45:53