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

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

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


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

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

矩阵的奇异值(SVD)分解和线性变换

矩阵的奇异值&#xff08;SVD&#xff09;分解和线性变换 SVD定义 奇异值分解&#xff08;Singular Value Decomposition&#xff0c;简称 SVD&#xff09;是一种重要的线性代数工具&#xff0c;能够将任意矩阵 ( A ∈ R m n \mathbf{A} \in \mathbb{R}^{m \times n} A∈Rmn…...

Kubernetes与Docker:区别与优劣总结

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

表单验证和正则表达式

表单验证 表单&#xff1a;收集用户信息&#xff0c;并把信息发送给服务器程序进行处理 what 验证数据的格式&#xff0c;将符合标准数据格式要求的数据&#xff0c;发送给后台。 对用户的输入做格式校验&#xff0c;确保能够发送到后台服务器的数据一定是正确的。降低服务器…...

汽车免拆诊断案例 | 保时捷车发动机偶发熄火故障 2 例

案例1 2008款保时捷卡宴车行驶中发动机偶发熄火 故障现象  一辆2008款保时捷卡宴车&#xff0c;搭载4.8 L 自然吸气发动机&#xff0c;累计行驶里程约为21万km。车主反映&#xff0c;该车行驶中发动机偶发熄火&#xff1b;重新起动&#xff0c;发动机能够起动着机&#xff…...

mongodb【实用教程】

MongoDB 是一个开源的文档型数据库管理系统 下载安装 Windows 系统 https://blog.csdn.net/weixin_41192489/article/details/126777309 GUI工具 【推荐】MongoDB Compass https://www.mongodb.com/zh-cn/docs/compass/current/ Robo 3T https://blog.csdn.net/weixin_4119248…...

Javaweb后端数据库多表关系一对多,外键,一对一

多表关系 一对多 多的表里&#xff0c;要有一表里的主键 外键 多的表上&#xff0c;添加外键 一对一 多对多 案例...

React(10)

项目实践--创建项目 在store的modules中创建相关的子仓库暴露到仓库index文件中 导入creatSlice和axios 创建仓库 和数据的异步修改方法 // 编写store // 导入createSlice和axios import { createSlice } from "reduxjs/toolkit"; import axios from "axios&…...

JAVA实战开源项目:靓车汽车销售网站(Vue+SpringBoot) 附源码

本文项目编号 T 093 &#xff0c;文末自助获取源码 \color{red}{T093&#xff0c;文末自助获取源码} T093&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…...

【大语言模型】【整合版】DeepSeek 模型提示词学习笔记(散装的可以看我之前的学习笔记,这里只是归纳与总结了一下思路,内容和之前发的差不多)

以下是个人笔记的正文内容: 原文在FlowUs知识库上&#xff0c;如下截图。里面内容和这里一样&#xff0c;知识排版好看一点 一、什么是 DeepSeek 1. DeepSeek 简介 DeepSeek 是一家专注于通用人工智能&#xff08;AGI&#xff09;的中国科技公司&#xff0c;主攻大模型研发与…...

网络安全扫描--基础篇

前言 1、了解互联网安全领域中日趋重要的扫描技术 2、了解在不同网络场景下扫描技术手段 3、熟悉linux下系统内核防护策略并能大件一个有效的系统防护体系 4、增强工作安全意识&#xff0c;并能有效的实践于工作场景中 目录 1、熟悉主机扫描工具&#xff08;fping&#xff0c;…...

Python网络安全脚本

&#x1f345; 点击文末小卡片 &#xff0c;免费获取网络安全全套资料&#xff0c;资料在手&#xff0c;涨薪更快 前言 睡不着&#xff0c;那就起来学习其实base64模块很早之前用过今天做爬虫的时候有个URL需要用它来编码一下 所以百度又学了一下遇到最大的问题就是python3和p…...

ElasticSearch查询指南:从青铜到王者的骚操作

ElasticSearch查询指南&#xff1a;从青铜到王者的骚操作 本文来源于笔者的CSDN原创&#xff0c;由于掘金>已经去掉了转载功能&#xff0c;所以只好重新上传&#xff0c;以下图片依然保持最初发布的水印&#xff08;如CSDN水印&#xff09;。&#xff08;以后属于本人原创均…...

四、详细解释:网络与连接操作命令

1. ping – 测试网络连通性 用途&#xff1a;检查与目标主机之间的网络连接是否通畅。 语法&#xff1a; ping [选项] 目标IP或域名常用选项&#xff1a; -c 次数&#xff1a;指定发送数据包的次数&#xff08;默认无限次&#xff0c;需手动 CtrlC 终止&#xff09;。-i 秒数&…...

前端关于Cursor编辑器的了解与深度使用及对工作的便利

1. 什么是 Cursor 编辑器? Cursor 是一款基于 AI 的现代代码编辑器,类似于 VS Code,但内置了强大的 AI 功能。它的核心目标是帮助开发者更快、更智能地编写代码。 主要特点: AI 驱动的代码补全:提供上下文相关的智能代码建议。代码生成与修复:通过自然语言描述生成代码…...

Java Junit框架

JUnit 是一个广泛使用的 Java 单元测试框架&#xff0c;用于编写和运行可重复的测试。它是 xUnit 家族的一部分&#xff0c;专门为 Java 语言设计。JUnit 的主要目标是帮助开发者编写可维护的测试代码&#xff0c;确保代码的正确性和稳定性。 JUnit 的主要特点 注解驱动&…...

高级自动化测试常见面试题(Web、App、接口)

一、Web自动化测试 1.Selenium中hidden或者是display &#xff1d; none的元素是否可以定位到&#xff1f; 不能,可以写JavaScript将标签中的hidden先改为0&#xff0c;再定位元素 2.Selenium中如何保证操作元素的成功率&#xff1f;也就是说如何保证我点击的元素一定是可以…...

京准电钟解读:为何不能用网络上的NTP时间源服务器

京准电钟解读&#xff1a;为何不能用网络上的NTP时间源服务器 京准电钟解读&#xff1a;为何不能用网络上的NTP时间源服务器 通常是因为以下几个方面的原因&#xff1a; 安全性问题&#xff1a; NTP服务器可能被黑客操纵或成为攻击的目标&#xff0c;如果服务器被攻破&…...

Android OpenGLES2.0开发(十一):渲染YUV

人生如逆旅&#xff0c;我亦是行人 Android OpenGLES开发&#xff1a;EGL环境搭建Android OpenGLES2.0开发&#xff08;一&#xff09;&#xff1a;艰难的开始Android OpenGLES2.0开发&#xff08;二&#xff09;&#xff1a;环境搭建Android OpenGLES2.0开发&#xff08;三&am…...

7种内外网数据交换方案全解析 哪种安全、高效、合规?

内外网数据交换方案主要解决了企业跨网络数据传输中的安全、效率与合规性问题。通过采用先进的加密技术、高效的数据传输协议以及严格的审批和审计机制&#xff0c;该方案确保了数据在内外网之间的安全交换&#xff0c;同时提高了传输效率&#xff0c;并满足了企业对数据合规性…...

详解:事务注解 @Transactional

创作内容丰富的干货文章很费心力&#xff0c;感谢点过此文章的读者&#xff0c;点一个关注鼓励一下作者&#xff0c;激励他分享更多的精彩好文&#xff0c;谢谢大家&#xff01; Transactional 是 Spring Framework 中常用的注解之一&#xff0c;它可以被用于管理事务。通过使…...

2025最新Flask学习笔记(对照Django做解析)

前言&#xff1a;如果还没学Django的同学&#xff0c;可以看Django 教程 | 菜鸟教程&#xff0c;也可以忽略下文所提及的Django内容&#xff1b;另外&#xff0c;由于我们接手的项目大多都是前后端分离的项目&#xff0c;所以本文会跳过对模板的介绍&#xff0c;感兴趣的朋友可…...

大模型面试问题准备

1. BERT的多头注意力为什么需要多头&#xff1f; 为了捕捉不同子空间的语义信息&#xff0c;每个头关注不同的方面&#xff0c;增强模型的表达能力 2. 什么是softmax上下溢出问题&#xff1f; 问题描述&#xff1a; 上溢出&#xff1a;ye^x中&#xff0c;如果x取非常大的正数…...

FFmpeg 命令行全解析:高效音视频处理从入门到精通

FFmpeg FFmpeg 是一款开源的多媒体处理工具集,支持音视频编解码、格式转换、流媒体处理等全链路操作。核心功能与工具: 多媒体全链路支持 支持 1000+ 音视频编解码格式(如 H.264、HEVC、AV1)和协议(RTMP、RTSP、HLS),覆盖录制、转码、流化等全流程。提供三大核心工具: …...

在使用LomBok时编译器弹出java: 错误: 不支持发行版本 5该怎么解决的四种方案

你遇到的错误 java: 错误: 不支持发行版本 5 表明你的代码正在尝试使用 Java 5 或更早版本的编译器&#xff0c;而这些版本已经不再受支持&#xff0c;并且可能与你当前使用的 JDK 版本不兼容。以下是解决此问题的步骤&#xff1a; 1. 检查项目语言级别 确保你的项目配置为使…...

【数据结构】(12) 反射、枚举、lambda 表达式

一、反射 1、反射机制定义及作用 反射是允许程序在运行时检查和操作类、方法、属性等的机制&#xff0c;能够动态地获取信息、调用方法等。换句话说&#xff0c;在编写程序时&#xff0c;不需要知道要操作的类的具体信息&#xff0c;而是在程序运行时获取和使用。 2、反射机制…...

在VSCode中安装jupyter跑.ipynb格式文件

个人用vs用的较多&#xff0c;不习惯在浏览器单独打开jupyter&#xff0c;看着不舒服&#xff0c;直接上教程。 1、在你的环境中pip install ipykernel 2、在vscode的插件中安装jupyter扩展 3、安装扩展后&#xff0c;打开一个ipynb文件&#xff0c;并且在页面右上角配置内核 …...

WordPress网站502错误全面排查与解决指南

502 Bad Gateway错误是WordPress站长最常遇到的服务器问题之一,它意味着服务器作为网关或代理时,未能从上游服务器获取有效响应。针对WP可能出现的502问题,本文提供一些基础到进阶的解决方案供大家参考:) 一、502错误的本质和核心诱因 502错误属于HTTP状态码中的5xx系列,…...

锂电池保护板测试仪:电池安全的守护者与创新驱动力

在新能源产业蓬勃发展的今天&#xff0c;锂电池以其高能量密度、长循环寿命和环保特性&#xff0c;成为电动汽车、无人机、便携式电子设备等领域不可或缺的能量来源。然而&#xff0c;锂电池的安全性和稳定性一直是行业关注的焦点。为了确保锂电池在各种应用场景下的可靠运行&a…...

flowable-ui 的会签功能实现

场景&#xff1a;在进行智慧保时通开发时&#xff0c;有个协作合同入围功能&#xff0c;这个功能的流程图里有个评审小组&#xff0c;这个评审小组就需要进行会签操作&#xff0c;会签完成后&#xff0c;需要依据是否有不通过的情况选择下一步走的流程 思考步骤&#xff1a; 首…...

Python学习第十七天之PyTorch保姆级安装

PyTorch安装与部署 一、准备工作二、pytorch介绍三、CPU版本pytorch安装1. 创建虚拟环境2. 删除虚拟环境1. 通过环境名称删除2. 通过环境路径删除 3. 配置镜像源4. 安装pytorch1. 首先激活环境变量2. 进入pytorch官网&#xff0c;找到安装指令 5. 验证pytorch是否安装成功 四、…...

Kibana:Spotify Wrapped 第二部分:深入挖掘数据

作者&#xff1a;来自 Elastic Philipp Kahr 我们将比以往更深入地探究你的 Spotify 数据并探索你甚至不知道存在的联系。 在由 Iulia Feroli 撰写的本系列的第一部分中&#xff0c;我们讨论了如何获取 Spotify Wrapped 数据并在 Kibana 中对其进行可视化。在第 2 部分中&#…...

半导体晶圆精控:ethercat转profient网关数据提升制造精度

数据采集系统通过网关连接离子注入机&#xff0c;精细控制半导体晶圆制造过程中的关键参数。 在半导体制造中&#xff0c;晶圆制造设备的精密控制是决定产品性能的关键因素。某半导体工厂采用耐达讯Profinet转EtherCAT协议网关NY-PN-ECATM&#xff0c;将其数据采集系统与离子注…...

CMake小结2(PICO为例)

1 前言 之前写过一篇cmake&#xff0c;不过很简单&#xff1a;CMake小结_cmake ${sources}-CSDN博客 构建系统现在真的太多了&#xff0c;完全学不过来的感觉&#xff0c;meson&#xff0c;gardle&#xff0c;buildroot&#xff0c; Maven。。。我是真的有点放弃治疗了。之前…...

5. Go 方法(结构体的方法成员)

Go语言没有传统的 class &#xff0c;为了让函数和结构体能够关联&#xff0c;Go引入了“方法”的概念。 当普通函数添加了接收者&#xff08;receiver&#xff09;后&#xff0c;就变成了方法。 一、函数和方法示例 // 普通函数 func Check(s string) string {return s }//…...

Linux查看和处理文件内容

1.文本文件 有字符集编码的文件 如&#xff1a;ASCII、UTF-8、Unicode、ANSI等 常见的文本文件 txt、xml、conf、properties、yml等配置文件、日志文 件、源代码 2.二进制文件 除文本文件外的文件 如&#xff1a;可执行程序、图片、音频、视频 3.cat 格式&#xff1a;…...

关于网络端口探测:TCP端口和UDP端口探测区别

网络端口探测是网络安全领域中的一项基础技术&#xff0c;它用于识别目标主机上开放的端口以及运行在这些端口上的服务。这项技术对于网络管理和安全评估至关重要。在网络端口探测中&#xff0c;最常用的两种协议是TCP&#xff08;传输控制协议&#xff09;和UDP&#xff08;用…...

Spring IoC和DI

Spring IoC和DI 1 IOC1.1 什么是IoC&#xff1f;1.2 IoC 介绍1.2.1 传统程序开发1.2.2 问题分析1.2.3 IoC程序开发1.2.3 IoC 优势 1.3 DI 介绍 2. IoC & DI 使⽤IoC 详解Bean的存储1.1 Controller&#xff08;控制器存储&#xff09; 1.2 Service&#xff08;服务存储&…...

centos9之ESXi环境下安装

一、centos9简介 CentOS Stream 9是一个基于RHEL&#xff08;Red Hat Enterprise Linux&#xff09;的开源操作系统。它是CentOS Stream系列的最新版本。CentOS Stream是一个中间发行版&#xff0c;位于RHEL和Fedora之间&#xff0c;旨在提供更及时的软件更新和新功能。CentOS …...

【论文学习】基于规模化Transformer模型的低比特率高质量语音编码

以下文章基于所提供的文档内容撰写&#xff0c;旨在对该论文“Scaling Transformers for Low-Bitrate High-Quality Speech Coding”进行较为系统和深入的分析与总结。 论文地址&#xff1a;https://arxiv.org/pdf/2411.19842 一、研究背景与动机 自20世纪70年代以来&#xff…...

Docker 2025/2/24

用来快速构建、运行和管理应用的工具。帮助部署。 快速入门 代码略 解释 docker run :创建并运行一个容器&#xff0c;-d是让容器在后台运行 --name mysql :给容器起个名字&#xff0c;必须唯一 -p 3306:3306 :设置端口映射 -e KEYVALUE :是设置环境变量 mysql :指定运行的…...

Rust语言基础知识详解【一】

1.在windows上安装Rust Windows 上安装 Rust 需要有 C 环境&#xff0c;以下为安装的两种方式&#xff1a; 1. x86_64-pc-windows-msvc&#xff08;官方推荐&#xff09; 先安装 Microsoft C Build Tools&#xff0c;勾选安装 C 环境即可。安装时可自行修改缓存路径与安装路…...

Kronecker分解(K-FAC):让自然梯度在深度学习中飞起来

Kronecker分解&#xff08;K-FAC&#xff09;&#xff1a;让自然梯度在深度学习中飞起来 在深度学习的优化中&#xff0c;自然梯度下降&#xff08;Natural Gradient Descent&#xff09;是一个强大的工具&#xff0c;它利用Fisher信息矩阵&#xff08;FIM&#xff09;调整梯度…...

Ubutu部署WordPress

前言 什么是word press WordPress是一种使用PHP语言开发的建站系统&#xff0c;用户可以在支持PHP和MySQL数据库的服务器上架设WordPress。它是一个开源的内容管理系统&#xff08;CMS&#xff09;&#xff0c;允许用户构建动态网站和博客。现在的WordPress已经强大到几乎可以…...

请解释 React 中的 Hooks,何时使用 Hooks 更合适?

一、Hooks 核心理解 1. 什么是 Hooks&#xff1f; Hooks 是 React 16.8 引入的函数式编程范式&#xff0c;允许在函数组件中使用状态管理和生命周期能力。就像给函数组件装上了"智能芯片"&#xff0c;让原本只能做简单展示的组件具备了处理复杂逻辑的能力。 2. 类…...

在Linux桌面上创建Idea启动快捷方式

1、在桌面新建idea.desktop vim idea.desktop [Desktop Entry] EncodingUTF-8 NameIntelliJ IDEA CommentIntelliJ IDEA Exec/home/software/idea-2021/bin/idea.sh Icon/home/software/idea-2021/bin/idea.svg Terminalfalse TypeApplication CategoriesApplication;Developm…...

如何在netlify一键部署静态网站

1. 准备你的项目 确保你的静态网站文件&#xff08;如 HTML、CSS、JavaScript、图片等&#xff09;都在一个文件夹中。通常&#xff0c;项目结构如下&#xff1a; my-static-site/ ├── index.html ├── styles/ │ └── styles.css └── scripts/└── script.js…...

网页制作09-html,css,javascript初认识のhtml如何使用表单

表单主要用来收集客户端提供的相关信息。,使网页具有交互作用。在网页制作的过程中&#xff0c;常常需要使用表单&#xff0c;如进行会员注册&#xff0c;网上调查和搜索等 访问者可以使用如文本域列表框&#xff0c;复选框以及单选按钮之类的表单对象输入信息&#xff0c;然后…...

Linux 命令大全完整版(03)

1. 系统管理命令 screen 功能说明&#xff1a;多重视窗管理程序。语  法&#xff1a;screen [-AmRvx -ls -wipe][-d <作业名称>][-h <行数>][-r <作业名称>][-s <shell>][-S <作业名称>]补充说明&#xff1a;screen 为多重视窗管理程序。此处…...

【新人系列】Python 入门专栏合集

✍ 个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4dd; 专栏地址&#xff1a;https://blog.csdn.net/newin2020/category_12801353.html &#x1f4e3; 专栏定位&#xff1a;为 0 基础刚入门 Python 的小伙伴提供详细的讲解&#xff0c;也欢迎大佬们…...