寒假提升｜ Day4 CSS 第二部分 #632

2022-12-15T17:17:54Z

giscus[bot]
bot Dec 15, 2022

寒假提升｜ Day4 CSS 第二部分

本系列文章将会记录寒假期间的学习计划，主要是知识点和同学们当前进度的检查。

https://icodeq.com/2022/95788126e90d/

zkeq · 2022-12-15T17:18:16Z

zkeq
Dec 15, 2022 — with giscus
Maintainer

今日打卡

- 一. 完成课堂所有代码（总结、整理）
- 二. 具体说明text-align居中的条件
- 三. line-height为什么可以让文字居中？
- 四. 总结目前所学过的所有选择器？思考它们的应用场景。
- 五. 预习结构伪类的使用方法。
- 六. 使用所学的HTML、CSS知识查找一个案例练习

0 replies

wslsy12 · 2022-12-16T07:22:55Z

wslsy12
Dec 16, 2022 — with giscus

第二题

1.text-align是给块级元素使用的，其作用为让块级元素里面的文本或行内块元素对齐（img标签的图片可以被居中，p和h不能被居中，因为他们属于块级元素）。

2.如果块级元素1里面含有块级元素p，那么这个被含有的块级元素p不会被控制居中。

第三题

line-height 是行高，即行与行基线之间的距离。. line-height 与 font-size 的计算值之差（也就是两行的“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。. 所以当我们设置单行文本的 line-height 为所需要 box 的高度，即可实现垂直居中对齐。

第四题

通用选择器（universal selector）
元素选择器（type selectors）
类选择器（class selectors）
id选择器（id selectors）
属性选择器（attribute selectors）
组合（combinators）
伪类（pseudo-classes）
伪元素（pseudo-elements）

第五题

伪类是选择器的一种，它用于选择处于特定状态的元素; 比如我们经常会实现的: 当手指放在一个元素上时, 显示另外一个颜色

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

很不错，下次记得联系代码部分

lhaa1 · 2022-12-16T10:36:33Z

lhaa1
Dec 16, 2022 — with giscus

二. 具体说明text-align居中的条件

text-align用来设置元素中的的文本对齐方式，例如：如果需要设置图片的对齐方式，需要设置图片的父元素的text-align属性

text-align只对文本有效，对元素无效，不能设置元素的对齐方式

三. line-height为什么可以让文字居中？

首先行高是文字的字符大小和字符上下的边距决定的，关键就是这个上下的边距是相等的，你可以把行高想象是两条看不见的水平平行线，而在平行线内，字符与平行线上下的边距总是相等的，就是垂直居中的意思

四. 总结目前所学过的所有选择器？思考它们的应用场景。

通用选择器（universal selector）
元素选择器（type selectors）
类选择器（class selectors）
id选择器（id selectors）
属性选择器（attribute selectors）
组合（combinators）
伪类（pseudo-classes）
伪元素（pseudo-elements）

五. 预习结构伪类的使用方法。

为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。

它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

可以的很不错下次记得练习代码部分

AAAikun · 2022-12-16T10:58:32Z

AAAikun
Dec 16, 2022 — with giscus

我也来学习下！

2 replies

Future330 Dec 16, 2022

日常打卡！

zkeq Dec 20, 2022 — with giscus
Maintainer

行

Future330 · 2022-12-16T11:55:09Z

Future330
Dec 16, 2022

一.

二. 具体说明text-align居中的条件

text-align是给块级元素使用的，其作用为让块级元素里面的文本或行内块元素对齐
- img标签的图片可以被居中

三. line-height为什么可以让文字居中？

line-height 是行高，即行与行基线之间的距离。
line-height 与 font-size 的计算值之差（也就是两行的“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。所以当我们设置单行文本的 line-height 为所需要 box 的高度，即可实现垂直居中对齐。
- 行高-文本高度=行距

四. 总结目前所学过的所有选择器？思考它们的应用场景。

通用选择器
简单选择器
- 元素选择器：div
- 类选择器：.class
- id选择器：#id
属性选择器
- [att]
- [att=val]
后代选择器
- 全后代选择器
  - 间接/直接
  - 以空格分隔
- 直接后代选择器
  - 必须直接
  - >符号分隔
兄弟选择器
- 相邻兄弟：+
- 普遍兄弟：~
选择器组
- 交集选择器
  - div.box
  - 即是一个div，也必须有一个class为box
- 并集选择器
  - div,p,h1{}

五. 预习结构伪类的使用方法。

略

六.

<html lang="en"> 
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    .header, .main {
      font-size: 30px; 
      line-height: 100px;
      width: 100%;
      height: 100px;
    }
    .header {
      text-align: center;
      background-color: lightblue;
    }
      .main {
background-color: lightgreen;
    }
    a:hover {
      color: red;
    }
  </style>
</head>
<body>
<div class="header">
   <a href="https://music.163.com">网易云音乐</a>
  </div>
  <div class="main">
    <a href="https://www.baidu.com">百度</a>
  </div>
</body>

</html>

2 replies

AAAikun Dec 16, 2022 — with giscus

6别复制我的

Future330 Dec 16, 2022 — with giscus

你小子

Wanderlus · 2022-12-16T11:55:59Z

Wanderlus
Dec 16, 2022 — with giscus

二. 具体说明text-align居中的条件

1.text-align是给块级元素使用的，其作用为让块级元素里面的文本或行内块元素对齐（img标签的图片可以被居中，p和h不能被居中，因为他们属于块级元素）。

2.如果块级元素1里面含有块级元素p，那么这个被含有的块级元素p不会被控制居中。

三. line-height为什么可以让文字居中？

line-height 是行高，即行与行基线之间的距离。. line-height 与 font-size 的计算值之差（也就是两行的“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。. 所以当我们设置单行文本的 line-height 为所需要 box 的高度，即可实现垂直居中对齐。

四. 总结目前所学过的所有选择器？思考它们的应用场景。

通用选择器（universal selector）
元素选择器（type selectors）
类选择器（class selectors）
id选择器（id selectors）
属性选择器（attribute selectors）
组合（combinators）
伪类（pseudo-classes）
伪元素（pseudo-elements）

五. 预习结构伪类的使用方法。

伪类是选择器的一种，它用于选择处于特定状态的元素; 比如我们经常会实现的: 当手指放在一个元素上时, 显示另外一个颜色

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

很不错，记得练习代码部分，加油！

Aueve · 2022-12-16T12:49:33Z

Aueve
Dec 16, 2022 — with giscus

day04 作业布置

一. 完成课堂所有代码（总结、整理）

完成

二. 具体说明text-align居中的条件

text-align是给块级元素使用的，其作用为让块级元素里面的文本或行内块元素对齐（img标签的图片可以被居中，p和h不能被居中，因为他们属于块级元素）。

如果块级元素1里面含有块级元素p，那么这个被含有的块级元素p不会被控制居中。

第三题

line-height 是行高，即行与行基线之间的距离。. line-height 与 font-size 的计算值之差（也就是两行的“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。. 所以当我们设置单行文本的 line-height 为所需要 box 的高度，即可实现垂直居中对齐。

三. line-height为什么可以让文字居中？

line-height 是行高，即行与行基线之间的距离。. line-height 与 font-size 的计算值之差（也就是两行的“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。. 所以当我们设置单行文本的 line-height 为所需要 box 的高度，即可实现垂直居中对齐

四. 总结目前所学过的所有选择器？思考它们的应用场景。

通用选择器（universal selector）
元素选择器（type selectors）
类选择器（class selectors）
id选择器（id selectors）
属性选择器（attribute selectors）
组合（combinators）
伪类（pseudo-classes）
伪元素（pseudo-elements）

五. 预习结构伪类的使用方法。

六. 使用所学的HTML、CSS知识查找一个案例练习

笔记：

css属性-文本

text-decoration用于设置文字的装饰线
- 常见取值
  - none 无任何装饰线
  - underline：下划线
  - overline：上划线
  - line-through：中划线(删除线)
a元素有下划线的本质是被浏览器添加了默认的txte-feciration属性

txet-transform用于设置文字的大小写转换

常见的值
- capitalize：(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写
- uppercase：(大写字母)将每个单词的所有字符变为大写
- lowercase：(小写字母)将每个单词的所有字符变为小写
- none：没有任何影响

text-indent用于设置第一行内容的缩进

text-align(重要)

text-align:直接翻译过来设置文本的对齐方式
MDN：定义行内内容(例如文字) 如何相对它的块父元素对齐；
常用的值
- left：左对齐
- right：右对齐
- center：正中间显示
- justify(不常用)：两端对齐

css属性-文字

font-size

font-size决定文字的大小
常用的设置
- px
- em
- 百分比

font-family

font-family
- 可以设置一个或者多个字体名称
- 浏览器会选择列表中第一个该计算机上安装的字体
- 或者通过@font-face指定的可以下载的字体

font-weight(重要)

font-weight用于设置文字的粗细(重量)
常见的取值
- 100|200|300|400|500|600|700|800|900：每一个数字代表一个重量
- noraml：等于400
- bold：等于700
strong、b、h1-h6等标签的font-weight默认就是bold

font-style(一般)

font-style用于设置文字的常规、斜体显示
- normal：常规显示
- italic(斜体)：用字体的斜体显示(通常会有专门的字体)
- oblique(倾斜)：文本倾斜显示(仅仅是让文字倾斜)

font-variant(了解)

font-variant可以影响小写字母的显示方式
- variant是变形的意思
可以设置的值如下
- normal：常规显示
- small-caps：将小写字母替换为缩小过的大小写字母

line-height(常用)

应用实例：例如div中有一段文字，如何将这行文字在div内部垂直居中
- 让line-hight等同于height

font(缩写属性)

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写;
font-style font-variant font-weight font-size/line-height font-family

规则：

font-style、font-variant、font-weight可以随意调换顺序，也可以省略
/line-height可以省略，如果不省略，必须跟在font-size后面
font-size、font-family不可以调换顺序，不可以省略

css选择器

选择器的种类繁多，大概可以这么归结
- 通用选择器（universal selector）
- 元素选择器（type selectors）
- 类选择器（class selectors）
- id选择器（id selectors）
- 属性选择器（attribute selectors）
- 组合（combinators）
- 伪类（pseudo-classes）
- 伪元素（pseudo-elements）

选择器

通用选择器

简单选择器(重要)

元素选择器（type selectors）, 使用元素的名称;
类选择器（class selectors）, 使用 .类名 ;
id选择器（id selectors）, 使用 #id;

属性选择器

[att]
[att=val]

后代选择器(重要)

全后代选择器
- 选择器之间以空格分割
- 直接/间接

直接后台选择器
- 必须直接
- >符号

兄弟选择器

相邻兄弟
- 如.one+div
普遍兄弟
- ~
- 如.one~div

选择器组(重要)

交集选择器
- div.box
- 既是一个div，也必须有一个class为box
并集选择器
- div，p，span，h1{}

伪类

伪类的由来
动态伪类
使用：
- hover
- 了解
  - link
  - visited
  - focus
  - hover
  - active

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

很棒好详细啊加油！

MGwaanjai · 2022-12-16T12:59:44Z

MGwaanjai
Dec 16, 2022 — with giscus

Day04

二. 具体说明text-align居中的条件

text-align是给块级元素使用的,定义行内内容如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

三. line-height为什么可以让文字居中？

line-height是两行文字基线（baseline）之间的间距,可以设置元素中每一行文字所占据的高度,使之垂直居中

四. 总结目前所学过的所有选择器？思考它们的应用场景。

通用选择器（universal selector）
元素选择器（type selectors）
类选择器（class selectors）
id选择器（id selectors）
属性选择器（attribute selectors）
组合（combinators）
伪类（pseudo-classes）
伪元素（pseudo-elements）

五. 预习结构伪类的使用方法。

伪类是选择器的一种，它用于选择处于特定状态的元素;

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

很不错，加油记得课下练习代码部分

ljltd · 2022-12-16T13:11:32Z

ljltd
Dec 16, 2022

二. 具体说明text-align居中的条件

条件：只对于行内级元素有效，对于块级元素无效

三. line-height为什么可以让文字居中？

line-height-文本的高度=行距

四. 总结目前所学过的所有选择器？思考它们的应用场景。

通用选择器（universal selector）

一般用来给所有元素作一些通用性的设置

比如内边距、外边距

比如重置一些内容;

元素选择器（type selectors）

使用元素的名称

类选择器（class selectors）

使用 .类名

id选择器（id selectors）

使用 #id

属性选择器（attribute selectors）

拥有某一个属性 [att]

属性等于某个值 [att=val]

后代选择器（descendant combinator)

后代选择器一: 所有的后代(直接/间接的后代)

后代选择器二: 直接子代选择器(必须是直接自带)

 选择器之间以 > 分割

兄弟选择器(sibling combinator)

兄弟选择器一:相邻兄弟选择器

 使用符号 + 连接

兄弟选择器二: 普遍兄弟选择器 ~

 使用符号 ~ 连接

选择器组 – 交集选择器

交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)

 在开发中通常为了精准的选择某一个元素;

并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)

 在开发中通常为了给多个元素设置相同的样式;

伪类（pseudo-classes）

伪类是选择器的一种，它用于选择处于特定状态的元素;

伪元素（pseudo-elements）

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

很不错，加油记得课下练习代码部分

penndu · 2022-12-16T16:34:42Z

penndu
Dec 16, 2022 — with giscus

过来看看！

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

杜老师好！

W-princess · 2022-12-17T04:15:48Z

W-princess
Dec 17, 2022 — with giscus

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

下次记得直接复制 markdown 代码到评论区而不是导出图片哈很不错加油

HyggeJohn · 2022-12-17T12:59:44Z

HyggeJohn
Dec 17, 2022 — with giscus

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

很不错，下次直接交 markdown 代码而不是截图哈，加油

Tqrepeoti · 2022-12-18T08:44:29Z

Tqrepeoti
Dec 18, 2022 — with giscus

二. 具体说明text-align居中的条件

定义行内内容 (例如文字,图片) 相对它的块父元素对齐

三. line-height为什么可以让文字居中？

四. 总结目前所学过的所有选择器？思考它们的应用场景。

通用选择器（universal selector）

一般用来给所有元素作一些通用性的设置（内边距、外边距，重置一些内容;

元素选择器（type selectors）使用元素的名称
类选择器（class selectors）使用 .类名
id选择器（id selectors）使用 #id
属性选择器（attribute selectors）
- 拥有某一个属性 [att]
- 属性等于某个值 [att=val]
后代选择器（descendant combinator)
- 后代选择器一: 所有的后代(直接/间接的后代)
- 后代选择器二: 直接子代选择器(必须是直接自带)
  
  选择器之间以 > 分割
兄弟选择器(sibling combinator)
- 兄弟选择器一:相邻兄弟选择器
  使用符号 + 连接
- 兄弟选择器二: 普遍兄弟选择器 ~

使用符号 ~ 连接

选择器组 – 交集选择器
交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)

在开发中通常为了精准的选择某一个元素;

并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)

在开发中通常为了给多个元素设置相同的样式;

伪类（pseudo-classes）

伪类是选择器的一种，它用于选择处于特定状态的元素;

伪元素（pseudo-elements）

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

很不错很详细加油

Beeyll · 2022-12-19T03:31:16Z

Beeyll
Dec 19, 2022 — with giscus

一. 完成课堂所有代码（总结、整理）

二. 具体说明text-align居中的条件

center：正中间显示

justify：两端对齐

text-align在块级元素中不起作用

三. line-height为什么可以让文字居中？

1.行高的严格定义是：两行文字基线（baseline）之间的间距

基线（baseline）：与小写字母x最底部对齐的线

四. 总结目前所学过的所有选择器？思考它们的应用场景。

通用选择器（universal selector）

所有的元素都会被选中;

一般用来给所有元素作一些通用性的设置

比如内边距、外边距;

比如重置一些内容;

简单选择器

元素选择器（type selectors），使用元素的名称；
类选择器（class selectors），使用 .类名 ;
id选择器（id selectors），使用 #id;

属性选择器（attribute selectors）

拥有某一个属性 [att]

属性等于某个值 [att=val]

组合（combinators）

兄弟选择器

兄弟选择器一:相邻兄弟选择器

使用符号 + 连接

**兄弟选择器二: 普遍兄弟选择器 ~**

使用符号 ~ 连接

选择器组

交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)

在开发中通常为了精准的选择某一个元素;

并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)

在开发中通常为了给多个元素设置相同的样式;

伪类（pseudo-classes）

什么是伪类呢?

Pseudo-classes: 翻译过来是伪类;

伪类是选择器的一种，它用于选择处于特定状态的元素;

常见的伪类有

1.动态伪类（dynamic pseudo-classes） :link、:visited、:hover、:active、:focus

使用举例

 a:link 未访问的链接

 a:visited 已访问的链接

 a:hover 鼠标挪动到链接上(重要)

 a:active 激活的链接（鼠标在链接上长按住未松开）

使用注意

 :hover必须放在:link和:visited后面才能完全生效

 :active必须放在:hover后面才能完全生效

 所以建议的编写顺序是 :link、:visited、:hover、:active

2.目标伪类（target pseudo-classes）

 :target

3.语言伪类（language pseudo-classes） :lang( )

4.元素状态伪类（UI element states pseudo-classes）

 :enabled、:disabled、:checked 伪类(pseudo-classes)

5.结构伪类（structural pseudo-classes）(后续学习)

 :nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-lastof-type( )  :first-child、:last-child、:first-of-type、:last-of-type  :root、:only-child、:only-of-type、:empty

6.否定伪类（negation pseudo-classes）(后续学习)

 :not()

所有的伪类: https://developer.mozilla.org/zhCN/docs/Web/CSS/Pseudo-cla

伪元素（pseudo-elements）

常用的伪元素有

 :first-line、::first-line （针对首行文本设置属性）

 :first-letter、::first-letter（针对首字母设置属性）

 :before、::before

 :after、::after

::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

很不错好详细加油 gogogo

zhixu001 · 2022-12-19T17:48:05Z

zhixu001
Dec 19, 2022 — with giscus

内容回顾

一. CSS属性 - 文本

1.1. text-decoration

装饰线：

【a标签浏览器会默认添加一个下划线所以需要添加一个{text-decoration：none}

1.2. text-transform(了解)

形变：【控制文本的大小写】
JS

1.3. text-indent

首行缩进：【属性规定 文本块 中首行文本的缩进】
10px;：【10个像素点】
2em;：【以父级元素字体大小为标准，缩进2倍】

1.4. text-align(重要)

案例: 文字的居中(字面理解)
案例: 图片的居中(MDN)
案例: div元素的居中(W3C inline-level)
- 特性
  
  只针对于行内级元素
- 或者其他方法

diapiay:inline-block【把块级元素改成行内级了】

1.5. letter-word-spacing

主要用于改变字母，单词【英文】之间的间距

二. CSS属性 - 字体

2.1. font-size【设置字体大小】

20px;【20像素】
2em;【以父级元素字体大小为标准，扩大2倍】
200%；以父级元素字体大小为标准，扩大2倍】

2.2. font-family【设置字体样式如：宋体】

原理: 读取操作系统
- 网络字体;
1个或者多个值

一般一个网站设置一个就可以【也可以设置多个】

2.3. font-style【设置：粗体/斜体】

2.4. font-varient

PS：基本不用了

小写字母以大写显示, 但是高度保持小写的高度

2.5. line-height【设置文本行高的】

两个基线(baseline)距离
一行文本 -> line-height
行高 - 文本高度 = 行距

2.6. font缩写属性

font-size/line-height font-family;

三. CSS选择器

3.1. 统配选择器

通配符：*【一下选中所有元素】

3.2. 简单选择器(重要)

元素 div

<html>
    <head>
        <style>
            div{
                color:red
            }
        </style>
    </head>
    <body>
        <div>
            我是一个div元素
        </div>
    </body>
</html>

类 .class

<html>
    <head>
        <style>
            .one{
                color:red
            }
        </style>
    </head>
    <body>
        <div class="one">
            我是一个div元素
        </div>
    </body>
</html>

id #id【全局唯一】

<html>
    <head>
        <style>
            #home{
                color:red
            }
        </style>
    </head>
    <body>
        <div id="home">
            我是一个div元素
        </div>
    </body>
</html>

3.3. 属性选择器

[att]
[att=val]

3.4. 后代选择器(重要)

全后代选择器
- 直接/间接
- 以空格分隔
直接后台选择器
- 必须直接
- >符号

3.5. 兄弟选择器

相邻兄弟
普遍兄弟(后面)
- ~

3.6. 选择器组(重要)

交集选择器
- div.box
- 既是一个div, 也必须有一个class为box
并集选择器【用（，）隔开】
- div, p, h1 {}

3.7. 伪类

伪类的由来(概念)
动态伪类
- hover【鼠标悬停在上面时所显示的效果】
- 了解
  - link
  - visited
  - focus
  - hover
  - active

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

好棒很不错好详细啊加油

AAAikun · 2022-12-20T12:26:12Z

AAAikun
Dec 20, 2022 — with giscus

通用选择器（universal selector）

一般用来给所有元素作一些通用性的设置

比如内边距、外边距

比如重置一些内容;

元素选择器（type selectors）

使用元素的名称

类选择器（class selectors）

使用 .类名

id选择器（id selectors）

使用 #id

属性选择器（attribute selectors）

拥有某一个属性 [att]

属性等于某个值 [att=val]

后代选择器（descendant combinator)

后代选择器一: 所有的后代(直接/间接的后代)

后代选择器二: 直接子代选择器(必须是直接自带)

选择器之间以 > 分割

兄弟选择器(sibling combinator)

兄弟选择器一:相邻兄弟选择器

使用符号 + 连接

兄弟选择器二: 普遍兄弟选择器 ~

使用符号 ~ 连接

选择器组 – 交集选择器

交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)

在开发中通常为了精准的选择某一个元素;

并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)

在开发中通常为了给多个元素设置相同的样式;

伪类（pseudo-classes）

伪类是选择器的一种，它用于选择处于特定状态的元素;

伪元素（pseudo-elements）

2 replies

AAAikun Dec 20, 2022 — with giscus

我觉得吧这些是新知识

zkeq Dec 21, 2022 — with giscus
Maintainer

行

vionchina · 2022-12-22T02:09:18Z

vionchina
Dec 22, 2022

DAY4

具体说明text-align居中的条件

text-align只对文本有效，对元素无效，不能设置元素的对齐方式,text-align用来设置元素中的的文本对齐方式.

line-height为什么可以让文字居中

行高相当于是水平线，上下边距相等

总结目前所学过的所有选择器？思考它们的应用场景

通用选择器（universal selector）
元素选择器（type selectors）
类选择器（class selectors）
id选择器（id selectors）
属性选择器（attribute selectors）
组合（combinators）
伪类（pseudo-classes）
伪元素（pseudo-elements）

预习结构伪类的使用方法

为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。

它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

0 replies

ybrxy · 2022-12-22T06:39:16Z

ybrxy
Dec 22, 2022

day04 作业布置

一. 完成课堂所有代码（总结、整理）

ok

二. 具体说明text-align居中的条件

将行内级元素设置为居中，对块级元素无效，如想对块级元素生效需先改变其特性，将其变为行内元素

三. line-height为什么可以让文字居中？

它用于设置行高，可以使文字，文字上，下三块空间内的高度一致，既是水平居中对齐

四. 总结目前所学过的所有选择器？思考它们的应用场景。

通用选择器（universal selector）
一般用来给所有元素作一些通用性的设置（内边距、外边距，重置一些内容;

元素选择器（type selectors）使用元素的名称

类选择器（class selectors）使用 .类名

id选择器（id selectors）使用 #id

属性选择器（attribute selectors）

拥有某一个属性 [att]

属性等于某个值 [att=val]

后代选择器（descendant combinator)

后代选择器一: 所有的后代(直接/间接的后代)

后代选择器二: 直接子代选择器(必须是直接自带)

选择器之间以 > 分割

兄弟选择器(sibling combinator)

兄弟选择器一:相邻兄弟选择器
使用符号 + 连接

兄弟选择器二: 普遍兄弟选择器 ~

使用符号 ~ 连接

选择器组 – 交集选择器

交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)

在开发中通常为了精准的选择某一个元素;

并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)
在开发中通常为了给多个元素设置相同的样式;

伪类（pseudo-classes）
伪类是选择器的一种，它用于选择处于特定状态的元素;

伪元素（pseudo-elements）

并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)
在开发中通常为了给多个元素设置相同的样式;

伪类（pseudo-classes）
伪类是选择器的一种，它用于选择处于特定状态的元素;

伪元素（pseudo-elements）

五. 预习结构伪类的使用方法。

六. 使用所学的HTML、CSS知识查找一个案例练习

0 replies

寒假提升 ｜ Day4 CSS 第二部分 #632

Uh oh!

giscus[bot] bot Dec 15, 2022

寒假提升 ｜ Day4 CSS 第二部分

Replies: 17 comments · 16 replies

Uh oh!

zkeq Dec 15, 2022 — with giscus Maintainer

Uh oh!

wslsy12 Dec 16, 2022 — with giscus

Uh oh!

zkeq Dec 20, 2022 — with giscus Maintainer

Uh oh!

lhaa1 Dec 16, 2022 — with giscus

二. 具体说明text-align居中的条件

三. line-height为什么可以让文字居中？

四. 总结目前所学过的所有选择器？思考它们的应用场景。

五. 预习结构伪类的使用方法。

Uh oh!

zkeq Dec 20, 2022 — with giscus Maintainer

Uh oh!

AAAikun Dec 16, 2022 — with giscus

Uh oh!

Future330 Dec 16, 2022

Uh oh!

zkeq Dec 20, 2022 — with giscus Maintainer

Uh oh!

Future330 Dec 16, 2022

一.

二. 具体说明text-align居中的条件

三. line-height为什么可以让文字居中？

四. 总结目前所学过的所有选择器？思考它们的应用场景。

五. 预习结构伪类的使用方法。

略

六.

Uh oh!

AAAikun Dec 16, 2022 — with giscus

Uh oh!

Future330 Dec 16, 2022 — with giscus

Uh oh!

Wanderlus Dec 16, 2022 — with giscus

二. 具体说明text-align居中的条件

三. line-height为什么可以让文字居中？

四. 总结目前所学过的所有选择器？思考它们的应用场景。

五. 预习结构伪类的使用方法。

Uh oh!

zkeq Dec 20, 2022 — with giscus Maintainer

Uh oh!

Aueve Dec 16, 2022 — with giscus

day04 作业布置

一. 完成课堂所有代码（总结、整理）

二. 具体说明text-align居中的条件

三. line-height为什么可以让文字居中？

四. 总结目前所学过的所有选择器？思考它们的应用场景。

五. 预习结构伪类的使用方法。

六. 使用所学的HTML、CSS知识查找一个案例练习

css属性-文本

text-align(重要)

css属性-文字

font-size

font-family

font-weight(重要)

font-style(一般)

font-variant(了解)

line-height(常用)

font(缩写属性)

css选择器

选择器

简单选择器(重要)

属性选择器

后代选择器(重要)

兄弟选择器

选择器组(重要)

伪类

Uh oh!

zkeq Dec 20, 2022 — with giscus Maintainer

Uh oh!

MGwaanjai Dec 16, 2022 — with giscus

Day04

二. 具体说明text-align居中的条件

三. line-height为什么可以让文字居中？

寒假提升｜ Day4 CSS 第二部分 #632

giscus[bot]
bot Dec 15, 2022

寒假提升｜ Day4 CSS 第二部分

Replies: 17 comments 16 replies

zkeq
Dec 15, 2022 — with giscus
Maintainer

wslsy12
Dec 16, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

lhaa1
Dec 16, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

AAAikun
Dec 16, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

Future330
Dec 16, 2022

Wanderlus
Dec 16, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

Aueve
Dec 16, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

MGwaanjai
Dec 16, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

ljltd
Dec 16, 2022

zkeq Dec 20, 2022 — with giscus
Maintainer

penndu
Dec 16, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

W-princess
Dec 17, 2022 — with giscus