Day3前端学习之路——CSS基本知识

课程目标

初步了解什么是CSS，掌握基本的CSS概念，语法，针对选择器特殊性的计算处理，以及学习如何设置一些简单的样式

任务一：回答问题

1.什么是CSS，CSS是如何工作的？

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

2.CSS的基本语法是怎样的？

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

3.CSS选择器是什么概念，简单选择器和属性选择器是什么？

选择器通常是您需要改变样式的 HTML 元素。

简单选择器：

• 类型选择弃(p,div)
• 类选择器(.)
• ID选择器(#)
• 通用选择器(*)
• https://www.w3school.com.cn/cssref/css_selectors.asp

属性选择器：

• 简单属性选择：选择有某个或多个属性的元素

a[href][title] {color:red;}

• 根据具体属性值选择：选择有一个或者多个特定属性值的

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

• 根据部分属性值选择：根据属性值中的某个词进行选择，需要使用波浪号（～）

p[class~="important"] {color: red;}

img[title~="Figure"] {border: 1px solid gray;}

• 子串匹配属性选择器

类型	描述
[abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素

• 特定属性选择类型

*[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

4.文本样式都有哪些相关属性，对应哪些值？

CSS 文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。left、right 和 center、justify（两端对齐）
text-decoration	向文本添加修饰。
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母大小写。
unicode-bidi	设置文本方向。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。

CSS 字体属性

属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

任务二：选择器特殊性的计算方法

选择器的特殊性由选择器本身的组件确定。特殊性值表述为 4 个部分，如：0, 0, 0, 0。一个选择器的具体特殊性如下确定：

• 对于选择器中给定的各个 ID 属性值，加 0, 1, 0, 0。
• 对于选择器中给定的各个类属性值、属性选择或伪类，加 0, 0, 1, 0。
• 对于选择器中给定的各个元素和伪元素，加 0, 0, 0, 1。伪元素是否有特殊性？在这方面 CSS2 有些自相矛盾，不过 CSS2.1很清楚地指出，伪元素有特殊性，百且特殊性为 0, 0, 0, 1。
• 结合符和通配符选择器对特殊性没有任何贡献(后面还会更多地介绍这些值)。

div ul li              /* 0,0,0,3    3个元素选择器 */

div.aside ol li        /* 0,0,1,3    1个类选择器，3个元素选择器 */

a:hover                /* 0,0,1,1    1个伪类选择器，1个元素选择器 */

div.navlinks a:hover   /* 0,0,2,2    1个类选择器，1个伪类选择器，2个元素选择器 */

.affix.top             /* 0,0,2,0    多类选择器 注 */

input[type="text"]     /* 0,0,1,1    1个属性选择器，1个元素选择器 */

input[name="sex"][type="radio"]
                       /* 0,0,2,1    2个属性选择器，1个元素选择器 */

#title em              /* 0,1,0,1    1个 ID 选择器，1个元素选择器 */

h1#title em            /* 0,1,0,2    1个 ID 选择器，2个元素选择器 */

*                      /* 0,0,0,0    1个通用选择器 */

参考链接：http://www.mybbchina.net/zhongyaoxing/172482.html

任务三：修改第二天的简历，添加一些样式

https://codepen.io/cttv2/pen/gObvBrv?editors=1100