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

30 分钟从零开始入门 CSS

news 2026/4/10 7:34:33

  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 咯…...

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

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

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

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

使用python做http代理请求

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mobaxterm服务器常用命令（持续更新）

切换文件夹 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&#xff0c;专门为开发者设计&#xff0c;主要用于各大 app 应用商店的预览图设计。 提供了非常多的模板&#xff0c;也预设了很多尺寸。可以直接一键使用 在 1.0.2 这个版本中新增了&#xff1a; 文本渐变 图层&#xff1a;边框、颜色、圆…...

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

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

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

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

Starrocks入门（二）

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

编程日记 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页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

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

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

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

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

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

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

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

蓝桥杯练习代码

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

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

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

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

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

值类型与引用类型：别再只背“栈和堆”了，看这 个实际影响颜

基础示例&#xff1a;单工作表 Excel 转 TXT 以下是将一个 Excel 文件中的第一个工作表转换为 TXT 的完整步骤&#xff1a; 1. 加载并读取Excel文件 from spire.xls import * from spire.xls.common import * workbook Workbook() workbook.LoadFromFile("示例.xlsx"…...

编程新知 2026/4/10 7:08:22

行李包安检的设计（论文+CAD图纸+proe三维+SolidWorks三维图+ANSYS源文件+论文答辩PPT）

行李包安检系统是保障公共安全的关键环节&#xff0c;其设计需兼顾检测效率、结构稳定性与操作便捷性。通过系统整合CAD图纸、ProE三维模型、SolidWorks三维图及ANSYS源文件&#xff0c;可实现从二维布局到三维结构再到力学性能的全方位优化。CAD图纸用于精准规划设备整体轮廓与…...

编程新知 2026/4/10 6:49:49

【教学类-160-02】20260409 AI视频培训-练习2“豆包AI视频《小班-抢玩具》+豆包图片风格：手办”

背景需求&#xff1a; 【教学类-160-01】20260408 AI视频培训-练习1“豆包AI视频”https://mp.csdn.net/mp_blog/creation/editor/159965108 不是前面孩子的衣服了&#xff0c;从两女变成一男一女了 详细的人物特征描述&#xff08;衣服颜色等&#xff09;控制人物尽量相似。 …...

编程新知 2026/4/10 5:24:51

QCustomPlot 深度解析：从渲染架构到源码内幕

一、QCustomPlot 是什么&#xff0c;不是什么QCustomPlot 是一个 Qt 绘图库&#xff0c;核心就两个文件&#xff1a;qcustomplot.h qcustomplot.cpp。不是 Qt 官方库&#xff0c;不属于 Qt 模块&#xff0c;但做得比 Qt Charts 干净得多。设计哲学&#xff1a;扩展 Qt 的 QPai…...

编程新知 2026/4/10 4:34:53

OpenClaw浏览器自动化：Qwen3.5-9B爬取带图片的学术资料

OpenClaw浏览器自动化&#xff1a;Qwen3.5-9B爬取带图片的学术资料 1. 为什么需要自动化学术资料采集 上周我在研究量子计算的最新进展时&#xff0c;遇到了一个典型痛点&#xff1a;需要在十几个学术平台手动翻页、下载PDF、截图关键图表&#xff0c;再手工整理参考文献。这…...

编程新知 2026/4/10 3:51:31

PyCharm 2026.1 高效配置指南：从零打造极致顺滑的 Python 开发环境

PyCharm 2026.1 高效配置指南&#xff1a;从零打造极致顺滑的 Python 开发环境 网盘下载 0. 前言 在 2026 年&#xff0c;PyCharm 2026.1 依然是 Python 开发领域的“天花板”。无论是对 Python 3.13 新特性的完美支持&#xff0c;还是深度集成的本地 AI 代码预测引擎&#…...

编程新知 2026/4/10 3:47:30

OpenClaw安全实践：Qwen3-14b_int4_awq操作权限精细控制方案

OpenClaw安全实践&#xff1a;Qwen3-14b_int4_awq操作权限精细控制方案 1. 为什么需要权限控制&#xff1f; 去年夏天&#xff0c;我差点因为一个自动化脚本酿成大祸。当时我让OpenClaw帮我整理财务报告&#xff0c;结果模型误将包含敏感数据的临时文件上传到了云存储。这次经…...

编程新知 2026/4/10 3:33:15

开源组件审计：OpenClaw+SecGPT-14B自动生成SBOM报告

开源组件审计&#xff1a;OpenClawSecGPT-14B自动生成SBOM报告 1. 为什么需要自动化SBOM生成 作为一名长期在开源生态中摸爬滚打的开发者&#xff0c;我经历过太多次"依赖地狱"——某个深夜部署时突然发现项目引用的老旧库存在高危漏洞&#xff0c;或是收到法务部门…...

编程新知 2026/4/10 3:31:14

Keep平台API开发实战指南：从设计理念到生产落地

Keep平台API开发实战指南&#xff1a;从设计理念到生产落地 【免费下载链接】keep The open-source AIOps and alert management platform 项目地址: https://gitcode.com/GitHub_Trending/kee/keep 一、API设计理念&#xff1a;构建灵活的告警管理生态 在现代运维体系…...

编程新知 2026/4/10 3:04:48

AI写论文软件哪个最好？精选7款AI论文生成神器，轻松掌握毕业论文！

你是否曾在深夜面对空白文档&#xff0c;为论文框架和文献综述绞尽脑汁&#xff1f;从本科生到博士生&#xff0c;从职场评职称到科研发表&#xff0c;论文写作始终是绕不开的挑战。别担心&#xff01;如今AI论文写作工具已成为提升效率的利器&#xff0c;尤其是一些专业工具能…...

编程新知 2026/4/10 1:44:06