web ⑨:Cascading Style Sheets (Review) #回来要看哪

到现在为止呢,咱们文章的HTML学习可以暂时告一段落啦。
这篇文章开始,主要学习另外一大块内容CSS 样式(style)

一、

CSS样式,以往的有一篇文章提到过,作为基础,咱们先来复习一下叭:

web ⑨:Cascading Style Sheets (Review) #回来要看哪_第1张图片

**“选择器”**这个概念有点儿特别,可以简单理解为被“选中”打算为其添加CSS样式的HTML元素

二、

CSS样式用来定义HTML元素的外观,那么,这些样式放在网页的什么位置呢?

样式可以放在以下三个位置

(1).
web ⑨:Cascading Style Sheets (Review) #回来要看哪_第2张图片

(2).
web ⑨:Cascading Style Sheets (Review) #回来要看哪_第3张图片

(3).
web ⑨:Cascading Style Sheets (Review) #回来要看哪_第4张图片

建议:
把样式声明统一放在单独的“样式表”文件中,或至少集中放在网页的部分里面。

三、

以下是咱们要开始学习的新内容啦,首先粗略看一下目录:

web ⑨:Cascading Style Sheets (Review) #回来要看哪_第5张图片

以上两部分(目录)的内容,其主题密切相关,所以把它们放在同一篇文章里学习,大家学习时可以两部分互相参考

web ⑨:Cascading Style Sheets (Review) #回来要看哪_第6张图片

四、

上面涉及到了== id 和 类 的概念==,通过一个例子,简单回顾一下
web ⑨:Cascading Style Sheets (Review) #回来要看哪_第7张图片
给HTML元素定义id、类,都是为了便于后续指代和提及,比如为其定义样式

五、

“选择器” :

web ⑨:Cascading Style Sheets (Review) #回来要看哪_第8张图片

web ⑨:Cascading Style Sheets (Review) #回来要看哪_第9张图片
“类” 选择器……

id 选择器……

属性 选择器:
web ⑨:Cascading Style Sheets (Review) #回来要看哪_第10张图片

六、

伪类:HTML元素的特定状态,比如**鼠标指针在其上(hover)、正在被点击(活动的,active)==等等:

请大家自行观看如图部分,捂脸)

web ⑨:Cascading Style Sheets (Review) #回来要看哪_第11张图片

伪元素:HTML元素的特定部分或位置,比如段落的首行、首字母、之前、之后

web ⑨:Cascading Style Sheets (Review) #回来要看哪_第12张图片

七、

本篇文章的内容包括目录中的两部分,但关键词只有一个选择器
大家一定要自己好好看一看W3S读书、“亲自试一试”呀……

练习:

列出本篇文章所学部分相关的至少5个重要或“有难度”的概念,并给出定义或自己的理解。

hhh结束啦~
咳咳,先结束,等下我再来写这个小练习~

你可能感兴趣的:(web ⑨:Cascading Style Sheets (Review) #回来要看哪)