小白学编程之HTML/CSS Day004

小白学编程之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写法如下,即不带<>ptext-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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,179评论 0 40
  • ——读《做一个刚刚好的女子》有感 近日读晚情的《做一个刚刚好的女子:不攀附,不将就》,有些惋惜,...
    向日葵sunflower79阅读 614评论 0 2
  • 时间:12月9日 内容:第二章 地点:寝室 进入第二章才能够真正的领略这本书的精髓所在,也正是通过第二章的学习我开...
    铁家军贝贝阅读 585评论 0 2
  • 古有清明上河图, 今有春社雎踩桥。 十万乡民欢颜新, ...
    如梦尘缘阅读 496评论 6 7