小白学编程之HTML/CSS Day 004

从此妈妈再也不用担心我不懂编程了

往期回顾

Level 1 HTML
小白学编程之HTML/CSS Day001
小白学编程之HTML/CSS Day002
小白学编程之HTML/CSS Day003

本期概览

这一篇是学习HTML/CSS的第四天，从这篇开始要学习Level 2 CSS，主要内容有

2.01 CSS是什么？
2.02 Selector是什么？
2.03 Selector书写语法规范
2.04 一个selector可定义多个属性
2.05 一个selector可包含多个标签

---

2.01 CSS是什么？

CSS 全称 Cascading Style Sheets，用来指定HTML的外表(appearance)。但是HTML里面有些类似于给一个房子搭主要架构(structure)，而CSS则是刷墙、贴墙纸决定这房子看起来(looks)是怎样的。

e.g.

2.02 Selector是什么？

选中tags来创建一些东西，就叫做selector。

Tags are selected by creating something called a selector.

2.03 Selector书写语法规范

Selector的书写语法规范(syntax)——按照以下格式来写selector。

例如最简单的selector写法如下，即不带<>的 p 。text-decoration是属性(property); underline是你赋予这个属性的值(value)。在下面的例子中，CSS语法翻译为白话文就是：给p标签里的文字加下划线。

2.04 一个selector可定义多个属性

一个selector可以定义多个属性(properties)，如下图所示，在p selector里不仅定义了文字装饰(text-decoration)要加下划线(underline)这个属性，还定义了文字颜色(color)这个属性为红色(red)。

2.05 一个selector可包含多个标签

Selectors会自动选择所有相同标签并应用定义的属性，下图中所有li标签内的文字都变成了红色。

如果只想指定ul标签(parent tag)内的li内容为红色，要把parent tag 也写到selector里，如下图所示，这样只有ul里面列表的文字变成了红色，而ol里的列表没有改变。

贪多嚼不烂，练习练习再练习。

---

下期预告

• 基于动作和条件定义selector属性
• pseudo-selectors
• 在一个selector里加多个properites
• selector、CSS什么的放在哪里
• 扩展知识之Hexadecimal colors

欢迎来纠错，也欢迎提意见和任何问题~~~