【1小时学会CSS】第一课:CSS是什么?如何快速学会CSS?

262 阅读4分钟

课程概述

本课程为0基础课程,css大神请绕道!

我也带过很多小白和应届生,所以这次的课程就从最简单的css开始,一步步教你最快速的方式获得经验。

作为熟悉js的你,自己能改css,自己能写美丽的ui不香么。

对于小白来说,这个课程更适合你,省的你网上看一堆莫名其妙的视频课程,最终还是糊里糊涂不知如何下手。

本课程不同于其他课程,算是我的一次尝试,我希望通过简单高效的方式做到下面三点:

  1. 我抛个砖引个玉
  2. 让你学会举一反三
  3. 最终达到学以致用

简单一句话概括,这是我写课程的目标:

只学真本事,专治学不会!

本课程适用人群

  • 0基础,想学前端的
  • 自学前端,苦逼,费时,走弯路的
  • js虽牛逼,却写不好css的
  • 培训机构学完,啥都不会做的
  • 热爱技术,厨师,挖掘机专业想转行的

CSS是什么?

你是否在学校学过或听说过C语言,C++,现在比较流行的python等那些都是编程语言,是逻辑和条件语言

学起来比较费劲。

CSS是唯一一门非编程语言,也是整个计算机语言里面入门最简单的语言!

CSS非常适合大众学习,而我这套课程通俗易懂,能让你更快速了解CSS的魔力!

在了解CSS能做什么之前,

给你介绍一下CSS的兄弟语言:HTML

CSS必须和HTML结合使用,因为他们是亲兄弟

举个例子来了解一下他们的关系:

把HTML当做一个个砖头,钢筋,水泥

CSS 就能够控制这些砖头、钢筋、水泥的颜色,大小,形状,放的位置等等。

CSS和HTML结合可以做出一个个网页了,也就类似一个魔法控制一堆砖头建成了一个个房子

CSS就是这个魔法,能够让一堆图片,文字,视频等排版出来一个个的更好看更漂亮的网页!

CSS能做什么?

简单是说CSS就是做网页用的

你在是在浏览器里面打开的网站

比如你经常逛的 淘宝,京东,爱奇艺,今日头条等等 这些都是电脑端上的浏览器打开的网站

你在淘宝网站里面,点击一个产品跳转到产品详情页面

你在爱奇艺网站里面点击视频,跳转到视频播放页面

你在今日头条网站里面点击一条新闻,跳转到了新闻详情页

所以,你要记住,一个网站是有多个页面组成的!

那么手机上的很多应用其实也是网页组成的

比如一些 APP,小程序,微信里面打开的H5的页面

这些都可以用CSS做出来的

简单的说

你在屏幕上看到的页面,界面,都可以用CSS来实现!

是不是觉得CSS很厉害,能做这么多东西!

如何快速学会CSS?

想要快速的学会CSS,首先要有一个学习目标。

虽然CSS可以建别墅,那么我们入门的时候先盖个建议的厕所吧 -_-!

既然是入门,我们就定一个入门目标

脱离目标的学习都是迷茫的,俗话说,方向不对,努力白费!

那我们这1小时的课程的目标呢,很简单

就是教你入门,学到知识的同时,还能动手实践,做出几个简单的模块和页面

目标

学会做出一个包含轮播图、导航、列表的H5手机首页

这个首页包含的知识点可不少,如果你学会这个一个页面,你基本上就能做出来更多类似的模块和页面。

目标如下

iPhone 12 Pro Max – 1@3x.png

学习内容

  • 学会CSS语法和常用的属性
  • 学会HTML标签规范用法和class命名规范
  • 学会做出详情模块,列表模块
  • 学会做一个简单的H5首页

学习模式

  • 案例教学,通过案例了解基础知识和核心知识点
  • 模仿练手,通过把案例代码抄一遍,理解代码的结构和语法套路
  • 抛砖引玉,通过把抄完的案例代码改动,去体会CSS的魔力和变化
  • 举一反三,通过吸收到的知识点和套路方法,去做一个新的模块
  • 总结精华,通过作业巩固知识点,真正的做到学会一个,就会更多

接下来的课程安排

  1. 什么是模块?为什么要从模块开始学?
  2. 一个小例子了解CSS和HTML是如何运行的?
  3. 只学精髓,只需不到20个单词就能掌握CSS html 80%核心?
  4. 一个案例了解CSS的基本属性
  5. 详情页模块
  6. 单行文本列表模块
  7. 左图右文模块
  8. 轮播滚动模块
  9. 模块整合,完成一个首页
  10. 课后答疑