30 分钟从零开始入门 CSS
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 咯…...
C语言综合案例:学生成绩管理系统
C语言综合案例:学生成绩管理系统 需求 1.存储最多50名学生的信息(不使用结构体) 2.每个学生包含: 学号(字符数组)姓名(字符数组)3门课程成绩(一维数组) …...
使用python做http代理请求
有这样一个需求现在有两台A,B两台电脑组成了一个局域网,在A电脑上开发webjava应用,需要调用第三方接口做http请求,但是这个请求只能在B电脑上请求。 一种解决方案:自定义一个中间服务,在电脑B上运行一个简…...
数据库事务的基本要素(ACID)
数据库事务的基本要素(ACID) 在数据库管理系统(DBMS)中,事务(Transaction)是一个或多个数据库操作的集合,这些操作要么全部成功,要么全部失败。事务的目标是保证数据的一…...
DeepSeek R1满血+火山引擎详细教程
DeepSeek R1满血火山引擎详细教程 一、安装Cherry Studio。 Cherry Studio AI 是一款强大的多模型 AI 助手,支持 iOS、macOS 和 Windows 平台。可以快速切换多个先进的 LLM 模型,提升工作学习效率。下载地址 https://cherry-ai.com/ 认准官网,无强制注册。 这…...
大型语言模型技术对比:阿里Qwen qwq、DeepSeek R1、OpenAI o3与Grok 3
1. 引言 在人工智能(AI)领域中,大型语言模型(Large Language Models,简称LLM)近年来取得了显著的突破。从早期的GPT-3到如今的各种高级模型,这些技术不仅推动了自然语言处理(NLP&am…...
ArcGIS Pro可见性分析:精通地形视线与视域分析
在地理信息系统(GIS)的广泛应用中,可见性分析作为一项关键技术,发挥着不可替代的作用。 无论是城市规划、环境监测,还是军事侦察、景观设计,可见性分析都能提供精确的数据支持,帮助我们更好地理…...
计算机工具基础(五)——Vim
Vim MIT《Missing in CS Class(2020):Class 3》笔记 Vim是终端环境中常用的纯文本编辑器。Vim的默认配置文件位于~/.vimrc 模式 Vim有如下5种模式: 常规模式(Normal):进入Vim后的默认模式,用于阅读文件。以Esc自其他模式中退至此模式插入模…...
Android应用app实现AI电话机器人接打电话
Android应用app实现AI电话机器人接打电话 --安卓AI电话机器人 一、前言 【Dialer3.0智能拨号器】Android版手机app,由于采用蓝牙电话的方式来调用手机SIM卡发起呼叫、接听来电,并接收和处理通话的声音,通常我们以“蓝牙电话方案”来称呼它。 …...
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"…...
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…...
Shot Studio for macOS 发布 1.0.2
Shot Studio 是一个 macOS 的 app,专门为开发者设计,主要用于各大 app 应用商店的预览图设计。 提供了非常多的模板,也预设了很多尺寸。可以直接一键使用 在 1.0.2 这个版本中新增了: 文本渐变 图层:边框、颜色、圆…...
《深度学习实战》第4集:Transformer 架构与自然语言处理(NLP)
《深度学习实战》第4集:Transformer 架构与自然语言处理(NLP) 在自然语言处理(NLP)领域,Transformer 架构的出现彻底改变了传统的序列建模方法。它不仅成为现代 NLP 的核心,还推动了诸如 BERT、…...
Starrocks入门(二)
1、背景:考虑到Starrocks入门这篇文章,安装的是3.0.1版本的SR,参考:Starrocks入门-CSDN博客 但是官网的文档,没有对应3.0.x版本的资料,却有3.2或者3.3或者3.4或者3.1或者2.5版本的资料,不要用较…...
银河麒麟高级服务器操作系统在线调整/pro/{PID}/limits文件中nofile的软限制和硬限制参数值操作方法
银河麒麟高级服务器操作系统在线调整/pro/{PID}/limits文件中nofile的软限制和硬限制参数值操作方法 一 系统环境二 使用场景三 操作步骤 一 系统环境 [rootlocalhost ~]# nkvers ############## Kylin Linux Version ################# Release: Kylin Linux Advanced Server…...
html css js网页制作成品——HTML+CSS甜品店网页设计(5页)附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
Open WebUI项目源码学习记录(从0开始基于纯CPU环境部署一个网页Chat服务)
感谢您点开这篇文章:D,鼠鼠我是一个代码小白,下文是学习开源项目Open WebUI过程中的一点笔记记录,希望能帮助到你~ 本人菜鸟,持续成长,能力不足有疏漏的地方欢迎一起探讨指正,比心心~…...
【Python 入门基础】—— 人工智能“超级引擎”,AI界的“瑞士军刀”,
欢迎来到ZyyOvO的博客✨,一个关于探索技术的角落,记录学习的点滴📖,分享实用的技巧🛠️,偶尔还有一些奇思妙想💡 本文由ZyyOvO原创✍️,感谢支持❤️!请尊重原创…...
蓝桥杯练习代码
一、最长公共前缀 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀,返回空字符串 ""。 示例 1: 输入:strs ["flower","flow","flight"] 输出:"fl"示例…...
Imagination通过最新的D系列GPU IP将效率提升至新高度
Imagination DXTP GPU IP在加速移动设备和其他电力受限设备上的图形和计算工作负载时,能够延长电池续航时间。 英国伦敦 – 2025年2月25日 – 今日,Imagination Technologies(“Imagination”)宣布推出其最新的GPU IP——Imagina…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
鱼香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…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...
大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型(LLM)参数规模的增长,推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长,而KV缓存的内存消耗可能高达数十GB(例如Llama2-7B处理100K token时需50GB内存&a…...
VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式,然后找到相应的网卡(可以查看自己本机的网络连接) windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置,选择刚才配置的桥接模式 静态ip设置: 我用的ubuntu24桌…...
如何更改默认 Crontab 编辑器 ?
在 Linux 领域中,crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用,用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益,允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...
2.3 物理层设备
在这个视频中,我们要学习工作在物理层的两种网络设备,分别是中继器和集线器。首先来看中继器。在计算机网络中两个节点之间,需要通过物理传输媒体或者说物理传输介质进行连接。像同轴电缆、双绞线就是典型的传输介质,假设A节点要给…...
Cursor AI 账号纯净度维护与高效注册指南
Cursor AI 账号纯净度维护与高效注册指南:解决限制问题的实战方案 风车无限免费邮箱系统网页端使用说明|快速获取邮箱|cursor|windsurf|augment 问题背景 在成功解决 Cursor 环境配置问题后,许多开发者仍面临账号纯净度不足导致的限制问题。无论使用 16…...
