html+css教程,html css怎么用 收藏 0

HTML/CSS自学指南：小白如何用代码搭建属于自己的酷炫网页？

HTML/CSS是什么？简单来说，HTML是网页的“骨架”，CSS是网页的“化妆师”。有了HTML，你能让网页有内容；加上CSS，你能让网页美到爆炸！它们是前端开发的入门必修课，也是搭建静态网页的基石。今天，我们就用最简单、最幽默的方式告诉你：HTML/CSS怎么学？具体能干啥？在哪学？学完后你能变成什么样的“网页大神”？

用HTML写内容，用CSS美化样式，你能轻松搭建一个个人主页，展示你的简历、作品，甚至写个博客。

你可以设计一个酷炫的静态网页，比如产品展示页、活动页面，甚至模仿苹果官网的高大上风格。

HTML/CSS是前端开发的基础，学会它们后，你可以继续学习JavaScript，让网页“动起来”，甚至开发复杂的Web应用。

学会HTML/CSS后，你可以接一些简单的网页设计项目，帮别人做网站，轻松赚点零花钱！

• HTML是什么？
• HTML（超文本标记语言）是用来写网页内容的，比如文字、图片、按钮、表单等。
• 它的语法非常简单，基本就是“标签+内容”，比如：
• <h1>这是一个标题</h1> <p>这是一段文字。</p>
• CSS是什么？
• CSS（层叠样式表）是用来美化网页的，比如字体颜色、背景图片、布局样式等。
• 它的语法也很直观，比如：
• h1 { color: red; font-size: 24px; }
• 准备工具：
• 推荐使用VS Code（免费又好用）作为代码编辑器。
• 安装一个浏览器（比如Chrome），用来预览你的网页效果。

• HTML基础知识：
• 常用标签：标题：<h1>到<h6>，用来写标题。段落：<p>，用来写正文内容。图片：<img>，插入图片。链接：<a>，跳转到其他页面。列表：<ul>（无序列表）、<ol>（有序列表）。表格：<table>，展示数据。表单：<form>，用来收集用户输入的数据。
• 学习资源：
• 在线教程：菜鸟教程HTML（简单易懂）。
• 视频教程：B站搜索“HTML入门教程”，跟着视频敲代码。
• 学习时间：1-2周，重点是多写、多试，比如用HTML写一个简单的个人简历页面。

• CSS基础知识：
• 选择器：选择网页中的元素，比如h1、p、.class、#id。
• 样式属性：字体：font-size、color、font-family。背景：background-color、background-image。布局：margin、padding、border。定位：position、flexbox（弹性布局）。
• 引入CSS：用<style>标签写在HTML里，或者用外部CSS文件链接。
• 学习资源：
• 在线教程：菜鸟教程CSS（图文并茂）。
• 视频教程：B站搜索“CSS入门教程”，学会用CSS给网页“化妆”。
• 学习时间：2-3周，边学边练，比如给你的简历页面加上颜色、布局、背景图。

• 学会HTML/CSS后，赶紧动手做点小项目：
• 项目1：个人简历页面 —— 用HTML写内容，用CSS美化样式。
• 项目2：产品展示页 —— 插入图片、文字，设计一个简单的产品页面。
• 项目3：静态博客页面 —— 模拟一个博客，展示文章列表和内容页。
• 项目4：活动宣传页 —— 用CSS设计酷炫的背景、按钮、动画效果。
• 目标：通过项目巩固知识，掌握HTML/CSS的实际应用。

• 进阶内容：
• 响应式设计：用媒体查询（@media）适配不同屏幕尺寸，让网页在手机上也好看。
• CSS动画：用@keyframes制作网页动效，比如按钮点击效果、图片轮播。
• CSS框架：学习Bootstrap，用现成的组件快速搭建网页。
• 网页优化：学会精简代码、优化加载速度。
• 学习资源：
• B站或YouTube搜索“CSS进阶教程”，学点高级技巧。
• 参考优秀的开源网页设计，比如在GitHub上搜索HTML/CSS项目。

1️⃣ 在线教程：

• 菜鸟教程HTML
• 菜鸟教程CSS

2️⃣ 视频学习：

• B站搜索“HTML/CSS零基础教程”，推荐“手把手写代码”的系列。

3️⃣ 练习平台：

• CodePen：在线写HTML/CSS，实时预览效果。
• FreeCodeCamp：免费的前端学习平台。

4️⃣ 参考网站：

• CSS Tricks：CSS相关技巧和案例。
• Web.dev：学习网页优化和设计规范。

1️⃣ 搭建自己的网页：你可以设计一个个人主页、静态博客、产品展示页，秀出你的才华！

2️⃣ 打牢前端开发基础：HTML/CSS是前端的第一步，学完后可以继续学习JavaScript，让网页“动起来”。

3️⃣ 自由职业机会：学会HTML/CSS后，可以接一些简单的网页设计项目，赚点零花钱！

4️⃣ 提升审美和设计能力：学HTML/CSS的过程中，你会慢慢掌握网页设计的美感和布局技巧。

HTML/CSS简单易学，却能让你快速搭建出自己的网页。别犹豫了，打开VS Code，写下你的第一行HTML代码吧！未来的你一定会感谢现在努力的自己！

评论区见！说说你想用HTML/CSS做什么网页，或者学习中遇到的“神坑”，咱们一起讨论！

CSS入门详解——看完这篇，你就可以自学CSS了

CSS的代码是类似 json 数据的键值对，也就是key : value，当然，每一句都必须以分号（；）结束，切记，没有分号会出问题的。

其实类似 json 数据在我们生活中很常见，比如以下例子：

姓名：小明

性别：男

班别：19计机预师班

在以上例子中，“姓名”可以称为字段或者属性，姑且叫它“属性”吧，而后面的“小明”则是属性值，这样子就形成了一种明确的数据组，同样道理，先看一下CSS代码：

发现没有？其实这两种方式是差不多一样的，“background-color”是属性（property），而它的值（value）则是“red”，用这种方式，就设定了背景颜色为红色。只不过CSS代码后面必须要加分号（;）结束，在这里再次提醒。

当然，还有一点要提醒初学者，在计算机程序设计中，所有的标点符号的输入必须切换到英文输入的状态，不然，也会出现一些莫名其妙错误出来。

好了，上面介绍了CSS代码长啥样，那么接下来就要明确一个问题：代码写出来后，我们怎么应用到HTML中去？也就是说，怎么用CSS控制HTML的显示效果。

在具体的应用中，我们引入“选择器（selector）”这个概念。

什么是选择器（selector）？其实按照我们的理解，你写好了CSS代码以后，那你要把这些写好的代码应用到某个地方去对吧，而这些受体就是选择器。

CSS有三种选择器，分别是标签（tag）、类（class）和ID.

• 标签（tag）

标签，指的是HTML标签，也就是说，所有的HTML标签都是标签选择器。要注意的是，如果要用标签选择器，必须是HTML标签，不允许自定义。先看以下例子(大家可以把以下代码保存为html文件，然后用浏览器打开看效果）：

以上代码中，第4~8行是标签选择器的应用方式，格式很简单，就是直接写HTML标签（上面的例子中用了p标签），然后后面跟着一对大括号（{}），大括号里面写具体的CSS代码，以上案例的功能就是，给HTML中所有的p标签内容（第12~13行）应用上“红色背景、绿色字和2em的字体大小”的效果，而第14行中是b标签，没有该效果。

• 类（class）和ID

我们有这么一个场景：在以下代码中，我们给p标签加上了绿色的字体颜色，也就是说第12~13行的文字是绿色的，那如果我需要给“注意这里显示的颜色”和“再留意显示这里的颜色”这两行文本添加不同的颜色，怎么办呢？

有两种方法，分别是类和ID可以解决。

先用类的方法：我们可以手动地在两个p标签中都加上类，或者为其中一个加上即可。具体做法如下。

在以上代码中，我在第15行的p标签内加了一个class属性，属性值为“yellow”，然后第9~11行则是对yellow类的具体实现，像这样就可以给“注意这里显示的颜色”这行文本加了黄色（yellow）的效果了。

总结一下类的语法：.<类名>{<具体的CSS代码>}。

注意：类名是自定义的，你喜欢用什么类名就什么类名，但是，你所起的类名也要符合一些规则：一是必须以字母或者下划线（_）作为开头，后面可以加数字，不能加其他符号；二是类名是对大小写敏感的，也就是说一个字母的大写和小写状态是两个不一样的类名。

好了，接下来是另外一种实现方法，用ID.

ID方法的实现在形式上跟类（class）差不多，在CSS选择器中，类的语法是，在类名前面加一个点（.），而ID的不一样的地方在于，它在ID名前面加的是一个#号，具体做法如下：

以上案例中，通过ID的方法，也可以把“注意这里显示的颜色”文本修改成黄色（yellow）显示效果。

大家可以对比类和ID的实现方法，两者只是在符号和引用方式上存在不一样，那真的只是在形式上不一样吗？

并不是这样的，之所以存在这两种方式，因为这两者它们有各自的特性。

类的特性：类的最大特征是可复用，可以在多个不同的标签中应用同一个类。比如以下这个案例：

在以上代码中，我定义了一个yellow类（第9~11行），然后分别应用到“注意这里显示的颜色”（第15行）和“好吧，再次留意这里的颜色”（第17行）文本上。

ID的特性：ID，顾名思义，就是身份标识，身份标识具有唯一性，而ID的作用，就是标识唯一性，也就是说，只要在某个标签上应用一个ID，那就不能再在其他标签上使用该ID了。

至于这三种选择器的优先级，这里直接说结论，ID优先级最高，类其次，标签优先级最低。大家可以运行以下代码看结果：

符号选择器，严格来讲，不能称之为“选择器”，它指的是在使用选择器的时候，用上一些符号，使得选择器的功能更加丰富。在这里介绍三个。

• 星号（*）
• 空格（ ）
• 逗号（,）

1.星号（*）：星号代表“包含所有”的意思，比如：

2.空格：空格在这里有限定作用。

比如以下例子，我现在有这么一个需求，我需要把基础科目中的三个科目（语文、数学、英语）设置为蓝色显示，并加粗；而专业科目中两个科目（计算机和幼儿教育）文本设置成绿色，并加粗，那怎么处理呢？

假如我对“li”标签设置CSS，那所有的“li”标签都是同一个样式，那就没有基础科目和专业科目的区别了。在这里，我可以这样解决：

• 给各自的“ul”添加类，用这个“li”的父元素来限定各自的子元素（如第15行和第21行所示）。
• 用“空格”限定（如第4~11行所示）。

解决方法如下代码：

特别说明：在HTML标签中，每个标签都称为“节点（node）”，每个节点随着HTML标签的包含关系，存在着相对的父子节点之分，包含元素的称为父节点，被包含元素被称为子节点。在以上代码中，ul和li的关系，ul是父节点，li是子节点。

3.逗号：对多个选择器应用同样的CSS样式。

在对多个选择器，无论是标签选择器、类选择器还是ID选择器，如果把这些选择器冠以同样的CSS样式，则可以用逗号分隔，把多个选择器写在一起，代码如下：

在以上代码的第4~7行中，用逗号把p、b、.cl以及#ii这四个选择器都应用上了同样的CSS样式。

VS Code一些常用快捷键

CTRL+？：添加注释

CTRL+Enter：强制换行，无论光标在不在末端。

好了，当你看到这里，你对CSS是什么应该有详尽的了解了，那就开始先相关技术文档自学吧！

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com