百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

第三天:让简历有点色彩

普通

人数2009人在学习该课程,有1309人已经完成该课程

时间平均用时2.2

关键词HTMLcss

课程概述

作业提交截止时间:09-01

第三天:让简历有点色彩

课程目标

今天我们会安排一些学习和练习,来初步了解什么是CSS,掌握基本的CSS概念,语法,学习如何设置一些简单的样式

任务描述

首先简单动下手,打开昨天编辑的 Codepen,在中间CSS的窗口,加上下面的代码

h1 {
    font-size: 32px;
}
p {
    color: orange;
}

如果你之前的HTML没有用到这些标签,可以把h1或者p换成你使用到的标签

然后你应该发现下面的预览区域发生了一些变化,这就是你通过CSS代码,对你页面的样式进行了设置。接下来,我们边读边做。

阅读

我们先跳着阅读一下,关于使用CSS来设置字体,阅读MDN的文字样式,先看看字体颜色,种类几个基础的属性设置。或者阅读W3School中的文字样式部分W3School字体部分

编码

把刚才学习到的文字样式的相关属性,在codepen中实践,我希望你至少实践以下几个样式:

  • color
  • font-weight
  • font-size

阅读

上面的阅读和练习主要是让你认真地体会一下写CSS的感觉,接下来,我们需要按部就班一些。希望你认真阅读以下几个内容:

然后可以暂时跳过伪类选择器,开始重新仔细看文本相关的样式

当然,你也可以选择阅读其它网站,比如W3School等上面相应的内容。

编码

现在,来用学到的样式来涂满你的简历吧,在你的codepen中实践以下CSS属性,将每个属性的每种值的效果都写出来看看。同时,确保你会使用到简单选择器和属性选择器。

  • color
  • font-family
  • font-style
  • font-weight
  • font-size
  • text-align
  • text-decoration
  • text-indent
  • line-height
  • text-shadow

提交

把你的 codepen 地址提交到作业里,因为是codepen,所以代码地址和预览地址一样即可。

验证

今天代码部分其实比较简单,主要是多尝试,学习之后,回顾以下自己是否已经掌握以下概念:

  • 什么是CSS,CSS是如何工作的
  • CSS的基本语法是怎样的
  • CSS选择器是什么概念,简单选择器和属性选择器是什么
  • 文本样式都有哪些相关属性,对应哪些值

总结

依然把今天的学习用时,收获,问题进行记录

扩展阅读

如果有同学觉得太简单,不妨花上3个小时来阅读 CSS 的标准文档,至于看标准规范有什么用,欢迎移步看CSS专家顾轶灵的知乎回答,以及貘吃馍香的回答。另外HTML也是,有时间可以读一下规范,这样你也可以像这样回答问题

明天预告

明天将进一步学习CSS的其他更加复杂的选择器,还有更多的样式设置属性

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记
标题发布时间浏览量点赞量
使用字体与文本属性时的一点小技巧2018-04-27 02:562441104
百度前端技术学院(IFE)2018第三课2018-04-27 00:19106917
点击查看更多课程优秀笔记