小白学编程之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
欢迎来纠错,也欢迎提意见和任何问题~~~