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

CSS基础知识学习指南

news 2025/5/28 3:44:29

CSS基础知识学习指南

1. 介绍

CSS（层叠样式表）是用于描述HTML文档的呈现样式的语言。通过CSS，可以控制网页的布局、颜色、字体等各种样式，使得网页更加美观和用户友好。

2. CSS基础语法

CSS由选择器和声明块组成。选择器用于选择要应用样式的HTML元素，声明块则包含样式的属性和值。

选择器 {属性: 值;
}

例如：

p {color: blue;font-size: 14px;
}

上述CSS规则将所有<p>元素的文本颜色设置为蓝色，字体大小设置为14像素。

3. 引入CSS

有三种方式可以将CSS引入到HTML文档中：内联样式、内部样式表和外部样式表。

3.1. 内联样式

内联样式使用style属性直接在HTML元素中定义样式。

<p style="color: blue; font-size: 14px;">这是一个段落。</p>

3.2. 内部样式表

内部样式表使用<style>标签在HTML文档的<head>部分定义样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>p {color: blue;font-size: 14px;}</style><title>CSS基础学习</title>
</head>
<body><p>这是一个段落。</p>
</body>
</html>

3.3. 外部样式表

外部样式表将CSS规则定义在单独的文件中，通过<link>标签将其引入HTML文档。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>CSS基础学习</title>
</head>
<body><p>这是一个段落。</p>
</body>
</html>

styles.css文件内容：

p {color: blue;font-size: 14px;
}

4. 选择器

CSS选择器用于选择要应用样式的HTML元素。

4.1. 元素选择器

元素选择器根据HTML标签名选择元素。

p {color: blue;
}

4.2. 类选择器

类选择器根据HTML元素的class属性选择元素，使用.符号。

.intro {color: green;
}

<p class="intro">这是一个带有类选择器的段落。</p>

4.3. ID选择器

ID选择器根据HTML元素的id属性选择元素，使用#符号。

#unique {color: red;
}

<p id="unique">这是一个带有ID选择器的段落。</p>

4.4. 属性选择器

属性选择器根据HTML元素的属性选择元素。

a[href] {color: orange;
}

<a href="https://www.example.com">这是一个带有属性选择器的链接。</a>

4.5. 组合选择器

组合选择器用于选择多种条件的元素。

/* 后代选择器 */
div p {color: blue;
}/* 子选择器 */
div > p {color: green;
}/* 相邻兄弟选择器 */
h1 + p {color: red;
}/* 普通兄弟选择器 */
h1 ~ p {color: purple;
}

<div><p>这是一个段落，属于div的后代。</p><p>这是一个段落，属于div的子元素。</p>
</div>
<h1>这是一个标题。</h1>
<p>这是一个段落，属于h1的相邻兄弟元素。</p>
<p>这是一个段落，属于h1的普通兄弟元素。</p>

5. 颜色

CSS允许使用颜色名称、十六进制值、RGB、RGBA、HSL和HSLA定义颜色。

/* 颜色名称 */
p {color: red;
}/* 十六进制 */
h1 {color: #00ff00;
}/* RGB */
h2 {color: rgb(0, 0, 255);
}/* RGBA */
div {background-color: rgba(255, 0, 0, 0.5);
}/* HSL */
span {color: hsl(120, 100%, 50%);
}/* HSLA */
section {background-color: hsla(240, 100%, 50%, 0.3);
}

6. 字体

CSS提供了多种字体相关的属性。

6.1. 字体系列

font-family属性指定元素的字体系列。

p {font-family: Arial, sans-serif;
}

6.2. 字体大小

font-size属性指定元素的字体大小。

h1 {font-size: 2em;
}p {font-size: 16px;
}

6.3. 字体样式

font-style属性指定元素的字体样式。

p {font-style: italic;
}

6.4. 字体粗细

font-weight属性指定元素的字体粗细。

h1 {font-weight: bold;
}p {font-weight: 700;
}

6.5. 文本对齐

text-align属性指定元素的文本对齐方式。

p {text-align: center;
}

6.6. 文本装饰

text-decoration属性用于添加文本装饰，如下划线、上划线和删除线。

a {text-decoration: none;
}p {text-decoration: underline;
}

6.7. 文本变换

text-transform属性用于控制文本的大小写。

p {text-transform: uppercase;
}

6.8. 字母间距和行高

letter-spacing属性用于控制字母间距，line-height属性用于控制行高。

p {letter-spacing: 2px;line-height: 1.5;
}

7. 背景

CSS提供了多种背景相关的属性。

7.1. 背景颜色

background-color属性指定元素的背景颜色。

div {background-color: lightblue;
}

7.2. 背景图像

background-image属性指定元素的背景图像。

body {background-image: url('background.jpg');
}

7.3. 背景重复

background-repeat属性指定背景图像的重复方式。

body {background-image: url('background.jpg');background-repeat: no-repeat;
}

7.4. 背景位置

background-position属性指定背景图像的位置。

body {background-image: url('background.jpg');background-position: center;
}

7.5. 背景尺寸

background-size属性指定背景图像的尺寸。

body {background-image: url('background.jpg');background-size: cover;
}

8. 边框

CSS提供了多种边框相关的属性。

8.1. 边框样式

border-style属性指定边框的样式。

div {border-style: solid;
}

8.2. 边框宽度

border-width属性指定边框的宽度。

div {border-width: 2px;
}

8.3. 边框颜色

border-color属性指定边框的颜色。

div {border-color: blue;
}

8.4. 简写属性

border属性用于简写边框的样式、宽度和颜色。

div {border: 2px solid blue;
}

8.5. 圆角边框

border-radius属性指定圆角边框的半径。

div {border-radius: 10px;
}

9. 外边距和内边距

外边距（margin）和内边距（padding）用于控制元素的外部和内部空间。

9.1. 外边距

margin属性指定元素的外部空间。外边距可以单独设置，也可以使用简写属性。

/* 单独设置 */
div {margin-top: 10px;margin-right: 20px;margin-bottom: 10px;margin-left: 20px;
}/* 简写属性 */
div {margin: 10px 20px;
}

上述代码将元素的上下外边距设置为10像素，左右外边距设置为20像素。

9.2. 内边距

padding属性指定元素的内部空间。内边距也可以单独设置或使用简写属性。

/* 单独设置 */
div {padding-top: 10px;padding-right: 20px;padding-bottom: 10px;padding-left: 20px;
}/* 简写属性 */
div {padding: 10px 20px;
}

上述代码将元素的上下内边距设置为10像素，左右内边距设置为20像素。

10. 布局

CSS提供了多种布局方式，用于控制网页元素的排列和显示。

10.1. 浮动布局

float属性用于将元素从正常的文档流中移出，并将其浮动到容器的左侧或右侧。

img {float: left;margin-right: 10px;
}

<img src="example.jpg" alt="示例图像">
<p>这是一个带有浮动图像的段落。</p>

10.2. 定位布局

CSS提供了四种定位方式：静态定位、相对定位、绝对定位和固定定位。

/* 静态定位（默认） */
div {position: static;
}/* 相对定位 */
div {position: relative;top: 10px;left: 10px;
}/* 绝对定位 */
div {position: absolute;top: 50px;left: 50px;
}/* 固定定位 */
div {position: fixed;bottom: 0;right: 0;
}

10.3. Flexbox布局

Flexbox布局是一种一维布局模型，用于创建灵活和高效的布局。

.container {display: flex;justify-content: center;align-items: center;height: 100vh;
}.item {background-color: lightcoral;padding: 20px;margin: 10px;
}

<div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div>
</div>

10.4. Grid布局

Grid布局是一种二维布局模型，用于创建复杂的布局。

.container {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 10px;
}.item {background-color: lightseagreen;padding: 20px;
}

<div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div>
</div>

11. 过渡与动画

CSS提供了过渡和动画，用于实现元素的动态效果。

11.1. 过渡

transition属性用于定义元素的过渡效果。

button {background-color: blue;transition: background-color 0.5s ease;
}button:hover {background-color: green;
}

<button>鼠标悬停按钮</button>

11.2. 动画

animation属性用于定义元素的动画效果。

@keyframes example {0% {background-color: red;left: 0px;top: 0px;}100% {background-color: yellow;left: 200px;top: 200px;}
}div {position: absolute;animation: example 5s infinite;
}

<div style="width:100px;height:100px;background-color:red;"></div>

12. 媒体查询

媒体查询用于根据设备的特性（如宽度、高度）应用不同的样式，实现响应式设计。

body {background-color: lightblue;
}@media screen and (max-width: 600px) {body {background-color: lightgreen;}
}

<p>调整浏览器窗口的宽度查看背景颜色的变化。</p>

13. 伪类和伪元素

CSS伪类和伪元素用于选择元素的特定状态或部分。

13.1. 伪类

伪类用于选择元素的特定状态。

a:link {color: blue;
}a:visited {color: purple;
}a:hover {color: red;
}a:active {color: green;
}

13.2. 伪元素

伪元素用于选择元素的特定部分。

p::first-line {color: blue;font-weight: bold;
}p::first-letter {color: red;font-size: 2em;
}

14. 表格样式

CSS提供了多种属性用于美化表格。

table {width: 100%;border-collapse: collapse;
}th, td {border: 1px solid black;padding: 8px;text-align: left;
}th {background-color: lightgray;
}

<table><tr><th>姓名</th><th>年龄</th><th>城市</th></tr><tr><td>John Doe</td><td>30</td><td>New York</td></tr><tr><td>Jane Smith</td><td>25</td><td>Los Angeles</td></tr>
</table>

15. 表单样式

CSS提供了多种属性用于美化表单元素。

input[type="text"], input[type="password"], textarea {width: 100%;padding: 10px;margin: 5px 0 10px 0;border: 1px solid #ccc;box-sizing: border-box;
}button {background-color: #4CAF50;color: white;padding: 14px 20px;margin: 8px 0;border: none;cursor: pointer;
}button:hover {background-color: #45a049;
}

<form><label for="username">用户名:</label><input type="text" id="username" name="username" required><label for="password">密码:</label><input type="password" id="password" name="password" required><button type="submit">登录</button>
</form>

16. 图像和媒体

CSS提供了多种属性用于控制图像和其他媒体元素的显示。

16.1. 图像大小

width和height属性用于控制图像的大小。

img {width: 100px;height: auto;
}

16.2. 媒体查询

使用媒体查询可以根据屏幕大小调整图像的显示。

img {width: 100%;height: auto;
}@media screen and (max-width: 600px) {img {width: 50%;}
}

16.3. 背景图像

background-image属性用于为元素设置背景图像。

div {width: 300px;height: 200px;background-image: url('background.jpg');background-size: cover;
}

17. CSS预处理器

CSS预处理器如Sass和LESS提供了更高级的功能，使CSS开发更加高效。

17.1. Sass示例

$primary-color: #333;body {font: 100% Helvetica, sans-serif;color: $primary-color;
}.alert {padding: 10px;margin: 10px;border: 1px solid red;@extend .message;
}.message {border: 1px solid #ccc;
}

17.2. LESS示例

@primary-color: #333;body {font: 100% Helvetica, sans-serif;color: @primary-color;
}.alert {padding: 10px;margin: 10px;border: 1px solid red;.message;
}.message {border: 1px solid #ccc;
}

18. 实践示例

结合以上内容，通过实践示例来巩固学习。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS实践示例</title><style>body {font-family: Arial, sans-serif;line-height: 1.6;margin: 0;padding: 0;background-color: #f4f4f4;}.container {width: 80%;margin: auto;overflow: hidden;}header {background: #333;color: #fff;padding-top: 30px;min-height: 70px;border-bottom: #0779e4 3px solid;}header a {color: #fff;text-decoration: none;text-transform: uppercase;font-size: 16px;}nav {float: right;margin-top: 10px;}nav ul {margin: 0;padding: 0;list-style: none;}nav ul li {display: inline;margin-left: 5px;}#showcase {min-height: 400px;background: url('showcase.jpg') no-repeat 0 -400px;text-align: center;color: #fff;}#showcase h1 {margin-top: 100px;font-size: 55px;margin-bottom: 10px;}#showcase p {font-size: 20px;}section {padding: 20px;margin: 20px 0;background: #fff;}footer {background: #333;color: #fff;text-align: center;padding: 10px 0;margin-top: 20px;}@media(max-width: 600px) {nav ul {text-align: center;float: none;}nav ul li {display: block;margin: 0;}#showcase h1 {margin-top: 50px;font-size: 30px;}}</style>
</head>
<body><header><div class="container"><div id="branding"><h1>学习CSS</h1></div><nav><ul><li><a href="#showcase">展示区</a></li><li><a href="#section1">部分1</a></li><li><a href="#section2">部分2</a></li></ul></nav></div></header><div id="showcase"><div class="container"><h1>欢迎学习CSS</h1><p>掌握网页设计的基本技能</p></div></div><section id="section1" class="container"><h2>部分1</h2><p>这是CSS基础知识的第一部分内容。</p></section><section id="section2" class="container"><h2>部分2</h2><p>这是CSS基础知识的第二部分内容。</p></section><footer><p>学习CSS &copy; 2024</p></footer>
</body>
</html>

19. 结论

通过本指南，我们深入了解了CSS的基础知识、语法和应用。CSS是一门非常强大的语言，通过不断实践和探索，可以设计出美观且功能强大的网页。

20. 参考资料

W3Schools CSS Tutorial
MDN Web Docs - CSS
CSS-Tricks

这篇博客详细介绍了CSS基础知识及其实践应用，旨在帮助初学者掌握CSS的核心概念和技巧。如果有任何问题或建议，请在评论区留言。

CSS基础知识学习指南

CSS基础知识学习指南 1. 介绍 CSS（层叠样式表）是用于描述HTML文档的呈现样式的语言。通过CSS，可以控制网页的布局、颜色、字体等各种样式，使得网页更加美观和用户友好。 2. CSS基础语法 CSS由选择器和声明块组成。选择器用于选…...

编程日记 2024/7/2 12:38:40

力扣hot100 -- 贪心算法

👂 ▶ 逍遥叹 - 胡歌&沈以城【Mashup】 (163.com) 👂 庐州月 - 许嵩 - 单曲 - 网易云音乐 2.7 小时，加上写博客，4 道题，😂 -- 希望二刷时，可以 3 小时，8 道题.... 目录 &…...

编程日记 2024/7/2 12:36:38

P2P文件传输协议介绍

P2P文件传输协议是一种基于对等网络（Peer-to-Peer，简称P2P）的文件共享和传输技术。以下是关于P2P文件传输协议的详细介绍： 一、定义与原理 P2P文件传输协议允许网络中的各个节点（即计算机或其他设备）之间…...

编程日记 2024/7/2 12:35:37

Spring Boot集成Spring Mobile快速入门Demo

1.什么是Spring Mobile？ Spring Mobile是一个基于Spring Web MVC框架扩展的一个针对不同移动终端的应用开发框架。通过它我们在适配不同终端方面，就不用费劲心思了。 Spring Mobile的主要功能自动设备检测: Spring Mobile在 server端内置了一个设备解…...

编程日记 2024/7/2 12:33:35

走进开源企业 | 湖南大学OpenHarmony技术实训活动在开鸿智谷顺利举办！

6月24日-6月26日，2024开放原子校源行之湖南大学信息科学与工程学院师生走进开源企业实训交流活动顺利落下帷幕。湖南大学信息科学与工程学院的师生代表团一行90人参与了湖南开鸿智谷数字产业有限公司（以下简称“开鸿智谷”）与母公司拓维信息系…...

编程日记 2024/7/2 12:32:34

TCP单进程循环服务器程序与单进程客户端程序

实验目的理解并掌握以下内容：网络进程标识(即套接字地址)在Linux中的数据结构与地址转换函数。网络字节序与主机字节序的定义、转换以及相关函数在网络编程中的应用。数据结构内存对齐的基本规则，以及基于数据结构构建PDU的基本方法。TCP单进程循环服务器与单进程客户端的…...

编程日记 2024/7/2 12:28:31

QT+winodow 代码适配调试总结（二）

已经好多年了， linux环境下不同版本的QT程序开发和部署，突然需要适配window环境程序调试，一堆大坑，还真是一个艰巨的任务，可是kpi下的任务计划，开始吧！！ 1、首先我们自定义的动态库…...

编程日记 2024/7/2 12:26:29

百家讲坛 | 裴伟伟：企业中安全团队应当如何反馈漏洞

作者简介：裴伟伟，洞源实验室创始人，国家网安基地网络安全行业专家，网安加社区特聘专家，持有CISSP、PMP证书，曾在HITCON、可信云大会、开源产业大会等安全论坛发表演讲。曾任国内某安全实验室负责人、某互金…...

编程日记 2024/7/2 12:25:28

巧用Fiddler中的Comments提升接口测试效率

有没有同学在使用Fiddler时跟我遇到了同样的问题，就是想给某个抓包的请求进行注释！！！但是奇怪的是，根本没有Comments相关信息呀？ 设置Comments 设置Comments非常容易，选中一个请求&#xff0c…...

编程日记 2024/7/2 12:23:26

停车场车牌识别计费系统，用Python如何实现？

关注星标，每天学习Python新技能前段时间练习过的一个小项目，今天再看看，记录一下~ 项目结构说明： datefile文件夹：保存车辆信息表的xlsx文件 file文件夹：保存图片文件夹。ic_launcher.jpg是窗体的右上角…...

编程日记 2024/7/2 12:22:25

Linux内核——Linux内核体系模式（二）

1 Linux系统的中断机制 Linux内核将中断分为两类：硬件中断和软件中断（异常）。每个中断是由0-255之间的一个数字进行标识。中断int0-int31（0x00-0x1f）作为异常int32-int255由用户自己设定 int32-int47对应与8259A中断…...

编程日记 2024/7/2 12:17:20

Spring MVC的高级功能——异常处理（一）简单异常处理器

一、HandlerExceptionResolver接口如果希望对Spring MVC中所有异常进行统一处理，可以使用Spring MVC提供的异常处理器HandlerExceptionResolver接口。Spring MVC内部提供了HandlerExceptionResolver的实现类SimpleMappingExceptionResolver。它实现了简单的异常处理…...

编程日记 2024/7/2 12:15:18

【面试干货】Static关键字的用法详解

【面试干货】Static关键字的用法详解 1、Static修饰内部类2、Static修饰方法3、Static修饰变量4、Static修饰代码块5、总结 💖The Begin💖点点关注，收藏不迷路💖 在Java编程语言中，static是一个关键字，它可…...

编程日记 2024/7/2 12:13:16

软件工程实验

实验环境和需求用户可以对相片进行按类别管理，用户可以设定不同的类别，然后上传照片到相应的类别中，并能进行照片的删除，注释运行运行并访问 localhost 8090,图片在数据库中的信息是D：/upgrade 后面的内容 se…...

编程日记 2024/7/2 12:11:14

对于复杂的网页布局，如多列布局和网格布局，CSS 有哪些最佳实践和技巧？

对于复杂的网页布局，如多列布局和网格布局，以下是一些CSS的最佳实践和技巧： 使用Flexbox或CSS Grid布局：Flexbox和CSS Grid是两个强大的CSS布局模型，可用于实现复杂的网页布局。Flexbox适用于单行或单列布局&#xff0…...

编程日记 2024/7/2 12:10:12

Spring Boot中集成Redis实现缓存功能

Spring Boot中集成Redis实现缓存功能大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！今天我们将深入探讨如何在Spring Boot应用程序中集成Redis，实现…...

编程日记 2024/7/2 12:08:11

arco disign vue 日期组件的样式穿透

问题描述: 对日期组件进行样式穿透. 原因分析: 如图,日期组件被展开时它默认将dom元素挂载到body下, 我们的页面在idroot的div 里层, 里层想要穿透外层是万万行不通的. 解决问题: 其实官网提供了参数,但是并没有提供例子, 只能自己摸索着过河. 对于日期组件穿透样式,我们能…...

编程日记 2024/7/2 12:07:09

【深度学习】pytorch训练中的一个大坑

使用的命令：iostat -x 5 可以看到 ssd的利用率已经满了。之前在的数据集放在了 hdd上，训练结果特别慢。所以我把它移动到了ssd上，然后训练参数用的 resume， 但是！！！！它把历史记住…...

编程日记 2024/7/2 12:06:08

python全局解释器锁（GIL）

文章目录 1.cpu工作方式2.python全局解释器锁与多线程3.其他语言的多线程4.如何解决假的多线程 1.cpu工作方式先来先服务（First Come, First Served，FCFS）： 最简单的调度算法，按照作业或进程到达的顺序依次执行。没有…...

编程日记 2024/7/2 12:04:06

无人机的起源

无人机起源于20世纪初的早期实验阶段，并随着技术进步逐步发展。无人机，作为现代科技领域中的一项重要创新，已经在全球范围内展现出其巨大的潜力和应用价值。无人机的历史可以追溯到1917年，美国人艾德温.奥斯特林发明了“飞行训练…...

编程日记 2024/7/2 12:03:05

专题六：Spring源码之初始化容器BeanFactory

上一篇咱们通过一个例子介绍初始化容器上下文相关内容，并通过两个示例代码看到了Spring在设计阶段为我预留的扩展点，和我们应该如何利用这两个扩展点在Spring初始化容器上下文阶段为我们提供服务。这一篇咱们接着往下看。老这样子下回到refresh方法上来…...

编程日记 2024/7/2 12:02:04

缓存双写一致性（笔记）

缓存更新方案旁路缓存模式这是比较多的旁路缓存模式：缓存有就返回，没有数据库查询，放入缓存返回。还有些常用缓存策略读穿透模式读穿透和旁路很相似，程序不需要关注从哪里读取数据，它只需要从缓存查询数据。…...

编程日记 2024/7/2 12:01:03

运动馆预约管理系统设计

设计一个运动馆预约管理系统，需要考虑到用户需求、系统功能、技术实现和用户体验等多个方面。以下是一个基本的设计框架： 1. 系统目标提供便捷的运动场地预约服务。实现运动馆资源的有效管理和利用。支持在线支付，提高交易效率。提供数…...

编程日记 2024/7/2 11:59:00

第五届计算机、大数据与人工智能国际会议（ICCBD+AI 2024）

随着科技的飞速发展，计算机、大数据和人工智能等前沿技术已成为推动社会进步的重要力量。为了加强这一领域的学术交流与合作，促进技术创新与发展，第五届计算机、大数据与人工智能国际会议（ICCBDAI 2024）将于2024年11月…...

编程日记 2024/7/2 11:56:58

高效的向量搜索算法——分层可导航小世界图（HNSW）

最近在接触大模型相关内容，发现一种高效的向量搜索算法HNSW，这里做一下记录。在之前自己也接触过一段时间的复杂网络（网络科学），没想到，将网络科学的思想引入到向量搜索算法中，可以产生令人眼前…...

编程日记 2024/7/2 11:55:56

【MySQL备份】Percona XtraBackup全量备份实战篇

目录 1. 前言 2.准备工作 2.1.环境信息 2.2.创建备份目录 2.3.配置/etc/my.cnf文件 2.4.授予root用户BACKUP_ADMIN权限 3.全量备份 4.准备备份 5.数据恢复 6.总结 "实战演练：利用Percona XtraBackup执行MySQL全量备份操作详解" 1. 前言本文…...

编程日记 2024/7/2 11:54:54

港口危险货物安全管理人员考试题库(含答案)

一、单选题 1.化学品安全标签内容中警示词有( )种分别进行危害程度的警示。 A、3 B、4 C、5 参考答案:A 2.运输放射性物品，应当使用( )的放射性物品运输包装容器(以下简称运输容器)。 A、专业 B、专用 C、统一 D、定制参考答案:B 3.库区仪表及计算机监控管理系…...

编程日记 2024/7/2 11:49:47

什么是 JVM（ Java 虚拟机），它在 Java 程序执行中扮演什么角色？

JVM，全称Java Virtual Machine，中文译作“Java虚拟机”，它是运行Java程序的软件环境，也是Java语言的核心部分之一。想象一下，如果你是一位环球旅行家，每到一个新的国家，都需要学习当地的语言才…...

编程日记 2024/7/2 11:47:44

Python容器之列表--下标和切片

列表的切片得到是新的列表字符串的切片得到是新的字符串如果下标不存在会报错 list1 [1, 3.14, "hello", False] print(list1)# 获取列表中第一个数据 print(list1[0]) # 1# 获取列表中的最后一个数据 print(list1[-1]) # [False]# 获取中间两个数即 3.1…...

编程日记 2024/7/2 11:46:42

Docker 运行Nacos无法访问地址解决方法

参考我的上一篇文章去配置好镜像加速器，镜像加速器不是配置越多越好，重试次数多了会失败 Dockerhub无法拉取镜像配置阿里镜像加速器-CSDN博客错误的尝试最开始按照网上的方式去配了一大堆，发现下不下来。镜像源地址：https:…...

编程日记 2024/7/2 11:45:41

CSS基础知识学习指南

1. 介绍

2. CSS基础语法

3. 引入CSS

3.1. 内联样式

3.2. 内部样式表

3.3. 外部样式表

4. 选择器

4.1. 元素选择器

4.2. 类选择器

4.3. ID选择器

4.4. 属性选择器

4.5. 组合选择器

5. 颜色

6. 字体

6.1. 字体系列

6.2. 字体大小

6.3. 字体样式

6.4. 字体粗细

6.5. 文本对齐

6.6. 文本装饰

6.7. 文本变换

6.8. 字母间距和行高

7. 背景

7.1. 背景颜色

7.2. 背景图像

7.3. 背景重复

7.4. 背景位置

7.5. 背景尺寸

8. 边框

8.1. 边框样式

8.2. 边框宽度

8.3. 边框颜色

8.4. 简写属性

8.5. 圆角边框

9. 外边距和内边距

9.1. 外边距

9.2. 内边距

10. 布局

10.1. 浮动布局

10.2. 定位布局

10.3. Flexbox布局

10.4. Grid布局

11. 过渡与动画

11.1. 过渡

11.2. 动画

12. 媒体查询

13. 伪类和伪元素

13.1. 伪类

13.2. 伪元素

14. 表格样式

15. 表单样式

16. 图像和媒体

16.1. 图像大小

16.2. 媒体查询

16.3. 背景图像

17. CSS预处理器

17.1. Sass示例

17.2. LESS示例

18. 实践示例

19. 结论

20. 参考资料

相关文章：