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

30 分钟从零开始入门 CSS

article 2026/4/3 7:16:42

  HTML  CSS  JS

30分钟从零开始入门拿下 HTML_html教程-CSDN博客

30 分钟从零开始入门 CSS-CSDN博客

JavaScript 指南：从入门到实战开发-CSDN博客

前言

最近也是在复习，把之前没写的博客补起来，之前给大家介绍了 html，现在是 CSS 咯。

一、CSS简介：给网页“化妆”的神器

CSS（层叠样式表）就像“化妆“，能让HTML页面瞬间焕然一新。

  • 功能：控制网页元素的位置、颜色、字体等样式，实现“样式与结构分离”。

  • 效果对比：


    CSS前 → CSS修饰后

二、CSS基础语法：精准定位，精细操作

口诀：选谁？干啥？

选择器 {属性: 值;   /* 声明 */
}

  • 示例：

    p {color: red;          /* 文字变红 */font-size: 20px;     /* 字号20像素 */
}

    选中所有<p>标签，设置文字颜色和大小。

三、引入CSS的三种方式
方式语法适用场景
行内样式<div style="color: red">快速调试，简单样式
内部样式<style> p { color: red; } </style>小型项目，代码量少
外部样式<link rel="stylesheet" href="style.css">企业开发，样式复用

💡 小贴士：

  • 外部样式是主流选择，便于维护和复用！

  • 行内样式就像“临时补妆”，用完即弃。

四、CSS选择器：精准定位目标元素
1. 标签选择器：批量操作
a { color: blue; }  /* 所有<a>标签变蓝 */
2. 类选择器（.class）：精准定制
<div class="highlight">VIP用户</div>

运行 HTML

.highlight { background: gold; }  /* 所有class为highlight的元素 */
3. ID选择器（#id）：独一无二
<button id="submit">提交</button>

运行 HTML

#submit { width: 100px; }  /* 仅作用于id="submit"的元素 */
4. 复合选择器：组合出击
ul li a { color: green; }  /* 选中ul下的li下的所有<a> */
5. 通配符选择器（*）：全员生效
* { margin: 0; }  /* 所有元素的外边距清零 */
五、常用CSS属性：让你的页面活起来
1. 文字与颜色
.text {color: #ff0000;       /* 红色（十六进制） */font-size: 18px;      /* 字号 */font-family: Arial;   /* 字体 */
}
2. 边框（border）：元素的“外衣”
.box {border: 2px dashed #000;  /* 2像素黑色虚线边框 *//* 分解设置：*/border-width: 2px;border-style: dashed;border-color: black;
}
3. 宽高（width/height）：控制元素尺寸
.block {width: 200px;   /* 宽度 */height: 100px;  /* 高度 */display: block; /* 转为块级元素（独占一行） */
}
4. 盒模型：理解元素的“地盘”

  • Padding（内边距）：内容与边框的距离

    .box { padding: 20px; }  /* 四周内边距20px */

  • Margin（外边距）：元素与其他元素的距离

    .box { margin: 10px; }   /* 四周外边距10px */

六、代码规范：写出优雅的CSS

  • 命名：使用小写字母（如 .main-title）。

  • 缩进：2空格或4空格，保持统一。

  • 注释：用 /* 注释 */ 说明复杂逻辑。

动手练习：打造你的第一个美化页面

  1. 创建一个HTML文件，用外部样式表引入CSS。

  2. 使用类选择器为标题添加金色背景。

  3. 用盒模型调整段落的内外边距，让布局更舒适。

效果参考：

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="style.css">
</head>
<body><h1 class="title">欢迎来到CSS世界！</h1><p class="content">学习CSS，让网页焕然一新~</p>
</body>
</html>

运行 HTML

/* style.css */
.title {background: gold;padding: 20px;
}
.content {margin: 15px;border: 1px solid #ccc;
}

🚀 总结：CSS就像网页的“化妆师”，通过选择器和属性精准控制样式。掌握基础后，你就可以给你的网页化妆，装饰咯，感谢阅览！！

相关文章：

30 分钟从零开始入门 CSS

HTML CSS JS 30分钟从零开始入门拿下 HTML_html教程-CSDN博客 30 分钟从零开始入门 CSS-CSDN博客 JavaScript 指南&#xff1a;从入门到实战开发-CSDN博客 前言 最近也是在复习&#xff0c;把之前没写的博客补起来&#xff0c;之前给大家介绍了 html&#xff0c;现在是 CSS 咯…...

编程日记 2026/4/3 7:16:42

threejs：document.createElement创建标签后css设置失效

vue3threejs&#xff0c;做一个给模型批量CSS2D标签的案例&#xff0c;在导入模型的js文件里&#xff0c;跟着课程写的代码如下&#xff1a; import * as THREE from three; // 引入gltf模型加载库GLTFLoader.js import { GLTFLoader } from three/addons/loaders/GLTFLoader.…...

编程日记 2026/4/2 11:10:09

【GESP】C++三级练习 luogu-p1567, 统计天数

GESP三级&#xff0c;一维数组&#xff0c;多层循环和分支练习&#xff0c;难度★✮☆☆☆。 题目题解详见&#xff1a;https://www.coderli.com/gesp-3-luogu-p1567/ 【GESP】C三级练习 luogu-p1567, 统计天数 | OneCoderGESP三级&#xff0c;一维数组&#xff0c;多层循环和…...

编程日记 2026/4/3 15:03:24

springboot集成deepseek4j

1、文档地址 快速开始 - 零基础入门Java AI 免费的模型 Models 2、pom文件依赖 parent依赖 <dependency><groupId>com.squareup.okhttp3</groupId><artifactId>okhttp</artifactId><version>4.12.0</version></dependency>&…...

编程日记 2026/2/15 22:21:31

SpringBoot中报错：JSON parse error: Unrecognized filed 异常原因和解决方案

问题描述 当使用Spring Boot或其他JSON解析库&#xff08;如Jackson&#xff09;将JSON字符串反序列化为Java对象时&#xff0c;可能会遇到以下异常&#xff1a; JSON parse error: Unrecognized field "<fieldName>" (class <ClassName>), not marked…...

编程日记 2026/2/15 1:01:00

【数据分析】4 商业数据分析技能模型总结

优秀的商业分析师需要具备的能力 数据分析能力逻辑思维能力赢得结果能力 一、数据分析能力扩展&#xff1a;工具链生态与进阶场景 1. 数据获取技术升级 企业级数据源管理&#xff1a; 数据湖架构&#xff08;AWS S3/阿里云OSS&#xff09;与数据仓库&#xff08;Snowflake/R…...

编程日记 2026/2/13 17:26:23

vue+element-dialog：修改关闭icon / 遮罩层不能挡住弹窗 / 遮罩层不能遮挡元素

一、是否显示操作按钮 二、修改dialog默认关闭icon .el-dialog__headerbtn {top: 15px !important;width: 18px;height: 18px;background: url(~assets/img/formworkManagement/close-button.png) left no-repeat;background-size: cover; } .el-dialog__headerbtn i {content…...

编程日记 2026/4/3 3:50:10

Linux系统之DHCP网络协议

目录 一、DHCP概述 二、DHCP部署实操 2.1、安装DHCP软件 2.2、拷贝配置文件 2.3、配置文件详解 2.4、重启软件服务 2.5、新开一台服务器&#xff0c;查看dhcp地址获取 一、DHCP概述 DHCP&#xff08;Dynamic Host Configuration Protocol&#xff09;是一种应用层网络协…...

编程日记 2026/4/3 7:52:29

夜莺监控 - 边缘告警引擎架构详解

前言 夜莺类似 Grafana 可以接入多个数据源&#xff0c;查询数据源的数据做告警和展示。但是有些数据源所在的机房和中心机房之间网络链路不好&#xff0c;如果由 n9e 进程去周期性查询数据并判定告警&#xff0c;那在网络链路抖动或拥塞的时候&#xff0c;告警就不稳定了。所…...

编程日记 2026/4/2 23:24:09

DeepSeek-R1-671B大模型满血版私有化部署高可用教程-SparkAi系统集成图文教程

DeepSeek官网服务器繁忙的主要原因是由于用户数量激增导致的服务器资源紧张。‌为了解决这一问题&#xff0c;DeepSeek团队已经暂停了API服务充值&#xff0c;以避免对用户造成业务影响。目前&#xff0c;存量充值金额仍可继续调用&#xff0c;但充值功能暂时不可用‌。 DeepSe…...

编程日记 2026/4/2 19:26:38

kubernetes 初学命令

基础命令 kubectl 运维命令常用&#xff1a; #查看pod创建过程以及相关日志 kubectl describe pod pod-command -n dev #查看某个pod&#xff0c;以yaml格式展示结果 kubectl get pod nginx -o yaml #查看pod 详情 以及对应的集群IP地址 kubectl get pods -o wide 1. kubetc…...

编程日记 2026/3/31 4:03:13

学习笔记05——HashMap实现原理及源码解析（JDK8）

HashMap实现原理及源码解析&#xff08;JDK8&#xff09; 一、核心设计思想 数组链表红黑树&#xff1a;桶数组存储Node节点&#xff0c;哈希冲突时形成链表&#xff0c;链表长度≥8且桶数量≥64时转红黑树扰动函数&#xff1a;(h key.hashCode()) ^ (h >>> 16) 消除…...

编程日记 2026/2/14 22:12:36

React面试（一）

文章目录 1.vue和react有什么异同2.useEffect中为什么不能使用异步3.useEffect和useLayoutEffect的区别4.react的生命周期5.state和prop的区别6.受控组件和非受控组件7.为什么react16之后不把事件挂载到document上了8.讲一下react的hoc&#xff0c;它可以用来做什么&#xff1f…...

编程日记 2026/3/30 21:15:28

Redis分布式缓存面试题

为什么使用分布式缓存&#xff1f; 1. 提升性能 降低延迟&#xff1a;将数据缓存在离应用更近的地方&#xff0c;减少数据访问时间。减轻数据库压力&#xff1a;缓存频繁访问的数据&#xff0c;减少对后端数据库的请求&#xff0c;提升系统响应速度。 2. 扩展性 水平扩展&a…...

编程日记 2026/3/30 16:35:13

AI 编码 2.0 分析、思考与探索实践：从 Cursor Composer 到 AutoDev Sketch

在周末的公司【AI4SE 效能革命与实践&#xff1a;软件研发的未来已来】直播里&#xff0c;我分享了《AI编码工具 2.0 从 Cursor 到 AutoDev Composer》主题演讲&#xff0c;分享了 AI 编码工具 2.0 的核心、我们的思考、以及我们的 AI 编码工具 2.0 探索实践。 在这篇文章中&am…...

编程日记 2026/3/30 23:08:46

图扑 HT for Web 总线式拓扑图的可视化实现

在图形用户界面&#xff08;GUI&#xff09;设计中&#xff0c;自定义连线技术不仅提升了用户体验&#xff0c;还为复杂数据可视化开辟了新的可能性。该功能点允许用户灵活地在界面元素之间创建视觉连接&#xff0c;使流程图、思维导图和网络拓扑图等信息呈现更加直观和动态。 …...

编程日记 2026/4/3 6:09:52

domain 网络安全 网络安全域

&#x1f345; 点击文末小卡片 &#xff0c;免费获取网络安全全套资料&#xff0c;资料在手&#xff0c;涨薪更快 文章目录 1、域的概述 1.1、工作组与域1.2、域的特点1.3、域的组成1.4、域的部署概述1.5、活动目录1.6、组策略GPO 2、域的部署实验 2.1、建立局域网&#xf…...

编程日记 2026/4/4 0:15:12

IDEA 2024.1 最新永久可用（亲测有效）

今年idea发布了2024.1版本&#xff0c;这个版本带来了一系列令人兴奋的新功能和改进。最引人注目的是集成了更先进的 AI 助手&#xff0c;它现在能够提供更复杂的代码辅助功能&#xff0c;如代码自动补全、智能代码审查等&#xff0c;极大地提升了开发效率。此外&#xff0c;用…...

编程日记 2026/3/30 23:53:24

android计算屏幕尺寸dpi

说明&#xff1a; 我计划用一个Android程序&#xff0c;打印出平板屏幕的尺寸&#xff0c;大小&#xff0c;dpi等参数信息 效果图&#xff1a; 分辨率: 1280x752DPI: 213物理尺寸(英寸): 对角线 9.4step1: package com.example.myapplication;import android.os.Bundle; impor…...

编程日记 2026/4/1 21:24:30

deepseek-r1-centos-本地服务器配置方法

参考&#xff1a; 纯小白 Centos 部署DeepSeek指南_centos部署deepseek-CSDN博客 https://blog.csdn.net/xingxin550/article/details/145574080 手把手教大家如何在Centos7系统中安装Deepseek&#xff0c;一文搞定_centos部署deepseek-CSDN博客 https://blog.csdn.net/soso67…...

编程日记 2026/4/3 4:24:05

nginx 配置https

参考文档&#xff1a;nginx 文档 -- nginx官网|nginx下载安装|nginx配置|nginx教程 配置 HTTPS 服务器 HTTPS 服务器优化 SSL 证书链 单个 HTTP/HTTPS 服务器 基于名称的 HTTPS 服务器 具有多个名称 的 SSL 证书 服务器名称指示 兼容性 要配置 HTTPS 服务器&#xff0c;ssl…...

编程日记 2026/4/2 17:58:23

mapbox添加自定义图片绑定点击事件，弹窗为自定义组件

一、首先构建根据后端返回的数据构建geojson格式的数据&#xff0c;点位的geojson数据格式&#xff1a; {"type": "FeatureCollection","features": [{"type": "Feature","geometry": {"type": "…...

编程日记 2026/4/2 13:49:31

【Python爬虫(84)】当强化学习邂逅Python爬虫：解锁高效抓取新姿势

【Python爬虫】专栏简介：本专栏是 Python 爬虫领域的集大成之作，共 100 章节。从 Python 基础语法、爬虫入门知识讲起，深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑，覆盖网页、图片、音频等各类数据爬取，还涉及数据处理与分析。无论是新手小白还是进阶开发…...

编程日记 2026/4/1 6:09:39

车载DoIP诊断框架 --- 连接 DoIP ECU/车辆的故障排除

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 简单，单纯，喜欢独处，独来独往，不易合同频过着接地气的生活，除了生存温饱问题之外，没有什么过多的欲望，表面看起来很高冷，内心热情，如果你身…...

编程日记 2026/3/30 19:02:08

嵌入式开发：傅里叶变换（4）：在 STM32上面实现FFT（基于STM32L071KZT6 HAL库+DSP库）

目录 步骤 1&#xff1a;准备工作 步骤 2&#xff1a;创建 Keil 项目&#xff0c;并配置工程 步骤 3&#xff1a;在MDK工程上添加 CMSIS-DSP 库 步骤 5&#xff1a;编写代码 步骤 6&#xff1a;配置时钟和优化 步骤 7&#xff1a;调试与验证 步骤 8&#xff1a;优化和调…...

编程日记 2026/4/3 3:07:19

Uniapp 小程序接口封装与使用

深入理解 Uniapp 小程序接口封装与使用 在 Uniapp 小程序开发中&#xff0c;接口请求是获取和交互数据的关键部分。合理地封装接口不仅能提高代码的可维护性&#xff0c;还能增强项目的健壮性。今天&#xff0c;我们就来详细探讨一下如何在 Uniapp 中进行接口封装、引入以及使…...

编程日记 2026/2/28 1:46:34

Python入门 — 类

面向对象编程中&#xff0c;编写表示现实世界中的事物和情景的类&#xff08;class&#xff09;&#xff0c;并基于这些类来创建对象&#xff08;object&#xff09;。根据类来创建对象称为实例化&#xff0c;这样就可以使用类的实例&#xff08;instance&#xff09; 一、创建…...

编程日记 2026/2/16 6:49:14

vscode/cursor+godot C#中使用socketIO

在 Visual Studio Code(VS Code)中安装 NuGet 包&#xff08;例如SocketIOClient&#xff09;&#xff0c;你可以通过以下几种方法&#xff1a; 方法 1&#xff1a;使用dotnet cli 打开终端&#xff1a;在 VS Code 中按下Ctrl 或者通过菜单View -> Terminal打开终端。 导…...

编程日记 2026/3/30 21:41:47

应用的负载均衡

概述 负载均衡&#xff08;Load Balancing&#xff09; 调度后方的多台机器&#xff0c;以统一的接口对外提供服务&#xff0c;承担此职责的技术组件被称为“负载均衡”。 负载均衡器将传入的请求分发到应用服务器和数据库等计算资源。负载均衡是计算机网络中一种用于优化资源利…...

编程日记 2026/4/2 3:21:57

Kubernetes与Docker：区别与优劣总结

在云原生技术栈中&#xff0c;Docker和Kubernetes是两大核心工具&#xff0c;但它们的功能定位和使用场景截然不同。本文将从技术原理、架构设计、功能特性及适用场景等角度&#xff0c;深入分析两者的区别与优劣&#xff0c;并结合实际应用场景说明如何协同使用。 一、核心技术…...

编程日记 2026/4/2 21:10:38