HTML5与CSS3

不会大量的详解，因为写出来完全没办法跟W3C和MDN进行对比，所以具体的语法属性还是需要去这两个网站查阅，还可以在网站上编写实时效果

MDN Web Docs (mozilla.org)

CSS前置知识

元素的语义化

• 元素的语义化：用正确的元素做正确的事情
• 标签语义化的好处
  • 方便代码维护
  • 减少让开发者之间的沟通成本
  • 能让语音合成工具正确识别网页元素的用途，以便作出正确的反应
  • 有利于SEO

什么是SEO？

• 搜索引擎优化（英语：search engine optimization，缩写为SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式

认识字符编码

• 计算机是干什么的?
  • 计算机一开始发明出来时是用来解决数字计算问题的，后来人们发现，计算机还可以做更多的事，例如文本处理。
  • 但计算机其实挺笨的，它只“认识”010110111000…这样由0和1两个数字组成的二进制数字
  • 这是因为计算机的底层硬件实现就是用电路的开和闭两种状态来表示0和1两个数字的
  • 因此，计算机只可以直接存储和处理二进制数字
• 为了在计算机上也能表示、存储和处理像文字、符号等等之类的字符，就必须将这些字符转换成二进制数字
  • 当然，肯定不是我们想怎么转换就怎么转换，否则就会造成同一段二进制数字在不同计算机上显示出来的字符不一样的情况，因此必须得定一个统一的、标准的转换规则

• 字符编码的发展历史可以阅读coderwhy的简书一篇文章：https://www.jianshu.com/p/899e749be47c

邂逅CSS

认识CSS

• CSS表示层叠样式表（Cascading Style Sheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表）
  是为网页添加样式的代码

CSS如何编写呢？

• 声明（Declaration）一个单独的CSS规则，如 color: red; 用来指定添加的CSS样式。
  • 属性名（Property name）：要添加的css规则的名称
  • 属性值（Property value）：要添加的css规则的值；

如何将CSS样式应用到元素上？

• CSS提供了3种方法，可以将CSS样式应用到元素上：
  • 内联样式（inline style）
  • 内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）
  • 外部样式表（external style sheet）

内联样式（inline style）

• 内联样式（inline style），也有人翻译成行内样式

  • 内联样式表存在于HTML元素的style属性之中

  

• CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号;

• 很多资料不推荐这种写法：

• 在原生的HTML编写过程中确实这种写法是不推荐的

• 在Vue的template中某些动态的样式是会使用内联样式的

• 所以，内联样式的写法依然需要掌握

内部样式表（internal style sheet）

将CSS放在HTML文件元素里的

• 在Vue的开发过程中，每个组件也会有一个style元素，和内部样式表非常的相似（原理并不相同）

外部样式表（external style sheet）

• 外部样式表（external style sheet） 是将css编写一个独立的文件中，并且通过元素引入进来；
• 使用外部样式表主要分成两个步骤：
  • 第一步：将css样式在一个独立的css文件中编写（后缀名为.css）
  • 第二步：通过元素引入进来

@import

可以在style元素或者CSS文件中使用@import导入其他的CSS文件

必须掌握的CSS属性

CSS属性的官方文档

• CSS官方文档地址

  • https://www.w3.org/TR/?tag=css

• CSS推荐文档地址：

  • CSS 参考 - CSS：层叠样式表 | MDN (mozilla.org)

• 由于浏览器版本、CSS版本等问题，查询某些CSS是否可用：

  • 可以到https://caniuse.com/查询CSS属性的可用性；

CSS颜色的表示方法

• 在CSS中，颜色，有以下几种表示方法：

• 颜色关键字（color keywords）：

  • 是不区分大小写的标识符，它表示一个具体的颜色
  • 可以表示哪些颜色呢？
  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value#语法

• RGB颜色：

  • RGB是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色

  也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色；

  • RGB各个原色的取值范围是 0~255

RGB的表示方法

• RGB颜色可以通过以#为前缀的十六进制字符和函数（rgb()、rgba()）标记表示

• 方式一：十六进制符号：#RRGGBB[AA]

  • R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；A是可选的
  • 比如，#ff0000等价于#ff0000ff

• 方式二：十六进制符号：#RGB[A]

  • R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）

  • 三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版

    比如，#f09和#ff0099表示同一颜色

  • 四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版

    比如，#0f38和#00ff3388表示相同颜色

• 方式三：函数符： rgb[a](R, G, B[, A])
• R（红）、G（绿）、B （蓝）可以是（数字），或者（百分比），255相当于100%
• A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）

CSS属性-文本

CSS属性 – text-decoration(常用)

• text-decoration用于设置文字的装饰线

  • decoration是装饰/装饰品的意思;

• text-decoration有如下常见取值:

  • none：无任何装饰线

    可以去除a元素默认的下划线

  • underline：下划线

  • overline：上划线

  • line-through：中划线（删除线）

text-transform(一般)

text-indent(一般)

text-align(重要)

• text-align: 直接翻译过来设置文本的对齐方式
• MDN: 定义行内内容（例如文字）如何相对它的块父元素对齐(但也不是完全准确，如果div里面还有div，对内部块级元素居中不了)

如何解决这个问题：

• 加上display:inline-block将元素呈递为行内块状元素，同时又保留了块状元素可以设置宽高的特性

• 既能够设置宽高，又不独自占据一行。

• 保留上下外边距/内边距。

• 不添加换行符，因此该元素可以位于其他元素旁边。

• 内容撑开宽度。

• 使用margin:0 auto

• 常用的值

  • left：左对齐
  • right：右对齐
  • center：正中间显示
  • justify：两端对齐

• W3C中的解释:

  

• letter-spacing、word-spacing(一般)

  • letter-spacing、word-spacing分别用于设置字母、单词之间的间距。默认是0，可以设置为负数

CSS属性-字体

font-size(重要)

• font-size决定文字的大小

• 常用的设置

  • 具体数值+单位(比如100px)

    也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50%

  • 百分比

    基于父元素的font-size计算，比如50%表示等于父元素font-size的一半

font-family (重要, 不过一般仅设置一次)

• font-family用于设置文字的字体名称

  • 可以设置1个或者多个字体名称;

  • 浏览器会选择列表中第一个该计算机上有安装的字体;

  • 或者是通过 @font-face 指定的可以直接下载的字体

    比如你们公司设置了字体，但是用户的电脑上是没有这个字体，显示不了的，那就可以通过加载网页的时候直接将字体一起从网上下载下来使用

font-weight(重要)

• font-weight用于设置文字的粗细（重量）

• 常见的取值:

  • **100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：**每一个数字表示一个重量
  • normal：等于400
  • bold：等于700

• strong、b、h1~h6等标签的font-weight默认就是bold

font-style(一般)

font-variant(了解)

font-variant(了解)

line-height(常用)

• line-height用于设置文本的行高
  • 行高可以先简单理解为一行文字所占据的高度

• 行高的严格定义是：两行文字基线（baseline）之间的间距
• 基线（baseline）：与小写字母x最底部对齐的线

• 注意区分height和line-height的区别
  • height：元素的整体高度
  • line-height：元素中每一行文字所占据的高度
• 应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中
  • 让line-height等同于div的height

font

• 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常见选择器

CSS选择器（selector）

• 开发中经常需要找到特定的网页元素进行设置样式
  • 思考：如何找到特定的那个元素？
• 什么是CSS选择器
  • 按照一定的规则选出符合条件的元素，为之添加CSS样式
• 选择器的种类繁多，大概可以这么归类
  • 通用选择器（universal selector）
  • 元素选择器（type selectors）
  • 类选择器（class selectors）
  • id选择器（id selectors）
  • 属性选择器（attribute selectors）
  • 组合（combinators）
  • 伪类（pseudo-classes）
  • 伪元素（pseudo-elements）

通用选择器

• 通用选择器（universal selector）
  • 所有的元素都会被选中;使用*
• 一般用来给所有元素作一些通用性的设置
  • 比如内边距、外边距;
  • 比如重置一些内容
• 效率比较低，尽量不要使用

简单选择器

• 简单选择器是开发中用的最多的选择器:
  • 元素选择器（type selectors）, 使用元素的名称;
  • 类选择器（class selectors）, 使用 .类名
  • id选择器（id selectors）, 使用 #id;

id注意事项

• 一个HTML文档里面的id值是唯一的，不能重复
  • id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
  • 最好不要用标签名作为id值
• 中划线又叫连字符（hyphen）

属性选择器(attribute selectors)

• 拥有某一个属性 [att]
• 属性等于某个值 [att=val]

后代选择器（descendant combinator）

• 后代选择器一: 所有的后代(直接/间接的后代)
  • 选择器之间以空格分割

• 后代选择器二: 直接子代选择器(必须是直接子代)
  • 选择器之间以 > 分割;

兄弟选择器(sibling combinator)

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

• 兄弟选择器二: 普遍兄弟选择器 ~
  • 使用符号 ~ 连接

选择器组 – 交集选择器

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

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

如下的div.one，既是一个div也得是一个类名为one的(div和.one之间没有空格，是连着写的)。而不是说div下的one

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

认识伪类

• 什么是伪类呢?
  • Pseudo-classes: 翻译过来是伪类
  • 伪类是选择器的一种，它用于选择处于特定状态的元素;
• 比如我们经常会实现的: 当手指放在一个元素上时, 显示另外一个颜色

伪类(pseudo-classes)

常见的伪类
动态伪类（dynamic pseudo-classes）	:link、:visited、:hover、:active、:focus
目标伪类（target pseudo-classes）	:target
语言伪类（language pseudo-classes）	:lang( )
元素状态伪类（UI element states pseudo-classes）	:enabled、:disabled、:checked
结构伪类（structural pseudo-classes）(后续学习)	:nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last- >of-type( ) :first-child、:last-child、:first-of-type、:last-of-type :root、:only-child、:only-of-type、:empty
否定伪类（negation pseudo-classes）(后续学习)	:not()

• 所有的伪类: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

动态伪类（dynamic pseudo-classes)

• 使用举例

a:link	未访问的链接(从来没访问过)
a:visited	已访问的链接(之前有访问过)
a:hover	鼠标挪动到链接上(重要)
a:active	激活的链接（鼠标在链接上长按住未松开）

• 使用注意

  • :hover必须放在:link和:visited后面才能完全生效
  • :active必须放在:hover后面才能完全生效
  • 所以建议的编写顺序是 :link、:visited、:hover、:active

• 除了a元素，:hover、:active也能用在其他元素上

动态伪类 - :focus

• :focus指当前拥有输入焦点的元素（能接收键盘输入）
• 文本输入框一聚焦后，背景就会变红色(例子)
• 因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
• 动态伪类编写顺序建议为
  • :link、:visited、:focus、:hover、:active
• 直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了
  • 相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red

伪元素（pseudo-elements）

• 常用的伪元素有(推荐使用两个冒号，跟伪类进行区分)
  • :first-line、::first-line
  • :first-letter、::first-letter
  • :before、::before
  • :after、::after
• 为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line

伪元素 - ::first-line - ::first-letter(了解)

• ::first-line可以针对首行文本设置属性
• ::first-letter可以针对首字母设置属性

伪元素 - ::before和::after(常用)

• ::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)
  • 常通过 content 属性来为一个元素添加修饰性的内容