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

30 分钟从零开始入门 CSS

news 2026/2/10 2:23:14

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空格，保持统一。

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

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

创建一个HTML文件，用外部样式表引入CSS。
使用类选择器为标题添加金色背景。
用盒模型调整段落的内外边距，让布局更舒适。

效果参考：

<!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 指南：从入门到实战开发-CSDN博客前言最近也是在复习，把之前没写的博客补起来，之前给大家介绍了 html，现在是 CSS 咯…...

编程日记 2025/2/28 17:32:52

C语言综合案例：学生成绩管理系统

C语言综合案例：学生成绩管理系统需求 1.存储最多50名学生的信息（不使用结构体） 2.每个学生包含： 学号（字符数组）姓名（字符数组）3门课程成绩（一维数组） …...

编程日记 2025/2/28 17:30:48

使用python做http代理请求

有这样一个需求现在有两台A，B两台电脑组成了一个局域网，在A电脑上开发webjava应用，需要调用第三方接口做http请求，但是这个请求只能在B电脑上请求。一种解决方案：自定义一个中间服务，在电脑B上运行一个简…...

编程日记 2025/2/28 17:29:46

数据库事务的基本要素（ACID）

数据库事务的基本要素（ACID） 在数据库管理系统（DBMS）中，事务（Transaction）是一个或多个数据库操作的集合，这些操作要么全部成功，要么全部失败。事务的目标是保证数据的一…...

编程日记 2025/2/28 17:25:39

DeepSeek R1满血+火山引擎详细教程

DeepSeek R1满血火山引擎详细教程一、安装Cherry Studio。 Cherry Studio AI 是一款强大的多模型 AI 助手,支持 iOS、macOS 和 Windows 平台。可以快速切换多个先进的 LLM 模型,提升工作学习效率。下载地址 https://cherry-ai.com/ 认准官网，无强制注册。这…...

编程日记 2025/2/28 17:23:36

大型语言模型技术对比：阿里Qwen qwq、DeepSeek R1、OpenAI o3与Grok 3

1. 引言在人工智能（AI）领域中，大型语言模型（Large Language Models，简称LLM）近年来取得了显著的突破。从早期的GPT-3到如今的各种高级模型，这些技术不仅推动了自然语言处理（NLP&am…...

编程日记 2025/2/28 17:22:33

ArcGIS Pro可见性分析：精通地形视线与视域分析

在地理信息系统（GIS）的广泛应用中，可见性分析作为一项关键技术，发挥着不可替代的作用。无论是城市规划、环境监测，还是军事侦察、景观设计，可见性分析都能提供精确的数据支持，帮助我们更好地理…...

编程日记 2025/2/28 17:20:27

计算机工具基础(五)——Vim

Vim MIT《Missing in CS Class(2020):Class 3》笔记 Vim是终端环境中常用的纯文本编辑器。Vim的默认配置文件位于~/.vimrc 模式 Vim有如下5种模式： 常规模式(Normal)：进入Vim后的默认模式，用于阅读文件。以Esc自其他模式中退至此模式插入模…...

编程日记 2025/2/28 17:17:22

Android应用app实现AI电话机器人接打电话

Android应用app实现AI电话机器人接打电话 --安卓AI电话机器人一、前言【Dialer3.0智能拨号器】Android版手机app，由于采用蓝牙电话的方式来调用手机SIM卡发起呼叫、接听来电，并接收和处理通话的声音，通常我们以“蓝牙电话方案”来称呼它。 …...

编程日记 2025/2/28 17:16:18

切换文件夹 cd path # for example, cd /gpu03/deeplearning/进入不同GPU ssh mgmt ssh gpu01 ssh gpu03寻找文件位置 find /path -name file_name #for example, find / -name lib #在根目录下搜寻名为lib文件 #for example, find /home/deeplearning -name "lib"…...

编程日记 2025/2/28 17:13:14

Android14窗口管理自适应投屏分辨率

环境 console:/ # cat /proc/version Linux version 6.1.57 (机密信息) (Android (10087095, pgo, bolt, lto, -mlgo, based on r487747c) clang version 17.0.2 (https://android.googlesource.com/toolchain/llvm-project d9f89f4d16663d5012e5c09495f3b30ece3d2362), LLD 17…...

编程日记 2025/2/28 17:12:11

Shot Studio for macOS 发布 1.0.2

Shot Studio 是一个 macOS 的 app，专门为开发者设计，主要用于各大 app 应用商店的预览图设计。提供了非常多的模板，也预设了很多尺寸。可以直接一键使用在 1.0.2 这个版本中新增了： 文本渐变图层：边框、颜色、圆…...

编程日记 2025/2/28 17:09:07

《深度学习实战》第4集：Transformer 架构与自然语言处理（NLP）

《深度学习实战》第4集：Transformer 架构与自然语言处理（NLP） 在自然语言处理（NLP）领域，Transformer 架构的出现彻底改变了传统的序列建模方法。它不仅成为现代 NLP 的核心，还推动了诸如 BERT、…...

编程日记 2025/2/28 17:03:58

Starrocks入门（二）

1、背景：考虑到Starrocks入门这篇文章，安装的是3.0.1版本的SR，参考：Starrocks入门-CSDN博客但是官网的文档，没有对应3.0.x版本的资料，却有3.2或者3.3或者3.4或者3.1或者2.5版本的资料，不要用较…...

编程日记 2025/2/28 16:57:46

银河麒麟高级服务器操作系统在线调整/pro/{PID}/limits文件中nofile的软限制和硬限制参数值操作方法

银河麒麟高级服务器操作系统在线调整/pro/{PID}/limits文件中nofile的软限制和硬限制参数值操作方法一系统环境二使用场景三操作步骤一系统环境 [rootlocalhost ~]# nkvers ############## Kylin Linux Version ################# Release: Kylin Linux Advanced Server…...

编程日记 2025/2/28 16:48:31

html css js网页制作成品——HTML+CSS甜品店网页设计（5页）附源码

目录一、👨‍🎓网站题目二、✍️网站描述三、📚网站介绍四、🌐网站效果五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目七、🎁更多干货一、👨‍&#x1f…...

编程日记 2025/2/28 16:44:24

Open WebUI项目源码学习记录（从0开始基于纯CPU环境部署一个网页Chat服务）

感谢您点开这篇文章:D，鼠鼠我是一个代码小白，下文是学习开源项目Open WebUI过程中的一点笔记记录，希望能帮助到你～ 本人菜鸟，持续成长，能力不足有疏漏的地方欢迎一起探讨指正，比心心&#xff5e…...

编程日记 2025/2/28 16:41:20

【Python 入门基础】—— 人工智能“超级引擎”，AI界的“瑞士军刀”，

欢迎来到ZyyOvO的博客✨，一个关于探索技术的角落，记录学习的点滴📖，分享实用的技巧🛠️，偶尔还有一些奇思妙想💡 本文由ZyyOvO原创✍️，感谢支持❤️！请尊重原创&#x1…...

编程日记 2025/2/28 16:40:18

蓝桥杯练习代码

一、最长公共前缀编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀，返回空字符串 ""。示例 1： 输入：strs ["flower","flow","flight"] 输出："fl"示例…...

编程日记 2025/2/28 16:39:17

Imagination通过最新的D系列GPU IP将效率提升至新高度

Imagination DXTP GPU IP在加速移动设备和其他电力受限设备上的图形和计算工作负载时，能够延长电池续航时间。英国伦敦 – 2025年2月25日 – 今日，Imagination Technologies（“Imagination”）宣布推出其最新的GPU IP——Imagina…...

编程日记 2025/2/28 16:38:14

【Java学习笔记】Arrays类

Arrays 类 1. 导入包：import java.util.Arrays 2. 常用方法一览表方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序（自然排序和定制排序）Arrays.binarySearch()通过二分搜索法进行查找（前提：数组是…...

编程新知 2025/12/3 9:38:15

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。然而，互联网…...

编程新知 2025/8/18 9:54:31

剑指offer20_链表中环的入口节点

链表中环的入口节点给定一个链表，若其中包含环，则输出环的入口节点。若其中不包含环，则输出null。数据范围节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。节点 val 值各不相同。链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2026/1/31 6:09:22

Matlab | matlab常用命令总结

常用命令一、基础操作与环境二、矩阵与数组操作（核心）三、绘图与可视化四、编程与控制流五、符号计算 (Symbolic Math Toolbox)六、文件与数据 I/O七、常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/8/11 1:05:59

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败网络不同，需要使用镜像源按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

数据库分批入库

今天在工作中，遇到一个问题，就是分批查询的时候，由于批次过大导致出现了一些问题，一下是问题描述和解决方案： 示例： // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2026/1/8 11:38:36

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI（https://spring.io/projects/spring-ai）作为Spring生态中的AI集成框架，其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似，但特别为多语…...

编程新知 2025/12/14 17:38:21

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...

编程新知 2026/1/7 1:29:19

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器（ADC），支持8kHz~96kHz采样率，集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器，适用于高保真音频采集场景。 2. 核心特性高精度：24位分辨率&#xff0c…...

编程新知 2026/1/27 4:58:14

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/9/9 21:28:16

前言

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

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

三、引入CSS的三种方式

四、CSS选择器：精准定位目标元素

1. 标签选择器：批量操作

2. 类选择器（.class）：精准定制

3. ID选择器（#id）：独一无二

4. 复合选择器：组合出击

5. 通配符选择器（*）：全员生效

五、常用CSS属性：让你的页面活起来

1. 文字与颜色

2. 边框（border）：元素的“外衣”

3. 宽高（width/height）：控制元素尺寸

4. 盒模型：理解元素的“地盘”

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

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

相关文章：

**5. 通配符选择器（*）：全员生效**