Web基础01-HTML+CSS

行内语义性元素：

主要完成 Web 页面具体内容的引用和表述，是丰富内容展示的基础，这类元素包括以下几个：

• meter：表示特定范围内的数值，可用于工资、数量、百分比等；
• time：表示时间值。
• mark：定义带有记号的文本。
• progress：用来表示进度条，可通过对其 max 属性进行控制，完成对进度的表示和监视。
• video：视频元素，用于支持和实现视频（含视频流）文件的直接播放，支持缓冲预载和多种视频媒体格式，如 MPEG-4、OggV 和 WebM 等。
• audio：音频元素，用于支持和实现音频（音频流）文件的直接播放，支持缓冲预载和多种音频媒体格式。

交互性元素：

主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础，这类元素包括以下几个：

• details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 <legend> 交互才会显示出来。
• datalist：定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
• menu：主要用于交互菜单。注释：所有主流浏览器均不支持 menu 元素。
• command：用来处理命令按钮。

3.HTML5页面结构

4.audio常用属性

< audio> 元素中的常见的属性有：

• src 属性：规定音频文件的 URL。
• controls 属性：如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
• autoplay 属性：如果出现该属性，则音频在就绪后马上播放。
• loop 属性：如果出现该属性，则每当音频结束时重新开始播放。

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

5.video常用属性

< video> 元素提供了播放、暂停和音量控件来控制视频。

< video> 元素和 < audio> 元素一样，都有 src，controls，autoplay 和 loop 属性。

同时，

< video>

元素元素也提供了

width

和

height

属性控制视频的尺寸。

<video width="320" height="240" controls autoplay loop>
  <source src="/statics/demosource/movie.mp4" type="video/mp4">
  <source src="/statics/demosource/movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>

6.< progress> 标签

<progress>

标签定义运行中的任务进度（进程）。

<progress>

标签的属性有：

• max：规定需要完成的值。
• value：规定进程的当前值。

<progress value="30" max="100"></progress>

7.HTML5表单

HTML5 为 Web 表单创建带来了很多新特性，添加了多个新属性和输入类型，这些新特性提供了更好的输入控制和验证。

HTML5 中的表单创建方式与 HTML 一样

新属性：

placeholder 属性

HTML5 添加了

placeholder

的新属性。在

<input>

和

<textarea>

元素上，此属性提供一种提示，描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

autofocus 属性

autofocus 属性

规定在页面加载时，域自动地获得焦点。

8.SVG

什么是 SVG？

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用于定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
• SVG 是万维网联盟的标准

在 HTML5 中，你能够直接将

SVG 元素

嵌入 HTML 页面中。

（1）svg圆形

要使用 SVG 绘制图形，你首先需要创建一个

<svg>

标签。

<svg width="1000" height="1000"></svg>

要创建一个圆形，需要添加一个

<circle>

标签

<svg width="1000" height="1000">    
    <circle cx="100" cy="50" r="40" fill="blue" />
</svg>

• cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为 (0, 0)。
• r 属性定义圆的半径。

（2）矩形 < rect>

<svg width="1000" height="1000">    
    <rect width="400" height="200"       x="20" y="20" fill="red" />
</svg>

• x 属性定义了矩形左侧的位置。

• y 属性定义了矩形顶部的位置。

（3）直线< line>

<svg width="500" height="510">
    <line x1="20" y1="20" x2="300" y2="200" 
        style="stroke:#000000; stroke-linecap:round; 
        stroke-width:20"  />
</svg>

• x1 属性定义了 x 轴上线条的开始位置。

• y1 属性定义了 y 轴上线条的开始位置。

• x2 属性定义了 x 轴上线条的结束位置。

• y2 属性定义了 y 轴上线条的结束位置。

（4）曲线 < polyline>

<svg width="2000" height="500">
    <polyline style="stroke-linejoin:miter; stroke:black; 
        stroke-width:12; fill: none;"
        points="100 100, 150 150, 200 100" />
</svg>

• points 属性每两个数字为一组，定义一个坐标点位置。
• stroke-width 属性定义了图形边框的宽度。
• stroke 属性定义了图形边框的颜色。

（5）椭圆 < ellipse>

<svg width="500" height="250">
   <ellipse cx="200" cy="100" rx="150" ry="70" style="fill:red" />
</svg>

• cx 属性定义了圆心在 x 轴上的位置。

• cy 属性定义了圆心在 y 轴上的位置。

• rx 属性定义了 x 轴上的半径长度。

• ry 属性定义了 y 轴上的半径长度。

（6）多边形 < polygon>

<svg width="1000" height="1000">
<polygon points="100 100, 200 200, 300 0" 
      style="fill: red; stroke:black;" />
</svg>

points 属性

每两个数字为一组，定义一个坐标点位置。

（7）svg动画

SVG 动画可以使用

<animate>

元素创建。

<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
  <animate attributeName="x" from="0" to="300"
    dur="3s" fill="freeze" repeatCount="2"/> 
</rect>
</svg>

attributeName

：指定哪个属性需要产生动画效果

from

：指定属性的起始值

to

：指定属性的结束值

dur

：指定动画运行的时间（持续时间）

fill=“freeze|remove”

：指定动画播放完毕后是停留在播放的终点还是回到起始位置

repeatCount

：指定动画的重复播放次数

要无限重复动画，请使用值 “indefinite” 作为

repeatCount 属性

。

（8）svg路径

<path> 元素

用于定义一个路径。

下面的命令可用于路径数据：

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

<svg width="500" height="500">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

上面的例子定义了一条路径，它开始于位置（M）150 0，到达位置（L）75 200，然后从那里开始到（L）225 200，最后在150 0关闭路径（Z）。

9.< canvas> 元素

HTML5

<canvas> 元素

用于图形的绘制，通过脚本 (通常是JavaScript)来完成。

<canvas> 标签

只是图形容器，您必须使用脚本来绘制图形。

getContext() 方法

可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

你可以通过多种方法使用 Canvas 绘制路径、盒、圆、字符以及添加图像。

<canvas id="myCanvas" width="200" height="100">
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";//填充矩形的颜色
    ctx.fillRect(0,0,150,75);//绘制一个矩形，fillRect(x,y,width,height)
</script>

<canvas> 标签

通常需要指定一个

id 属性

(脚本中经常引用)，

width

和

height

属性定义的画布的大小。

了解和使用 Canvas 需要基本了解 JavaScript 的基本知识。

Canvas 坐标：

canvas

是一个二维网格。

canvas

的左上角坐标为 (0,0)。

X 坐标

向右增加。

Y 坐标

向着画布底部增加。

使用后面再说，就先到这。

三、CSS

1.概述

CSS 是一门语言，用于控制网页表现CSS(Cascading Style Sheet)：层叠样式表

2.三种导入方式

（1）内联样式：

在标签内部使用style属性，属性值是CSS属性键值对

<h2 style="属性：值">标题2</h2>

（2）内部样式

定义< style>标签，在标签内部定义css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h2 {
            属性：值;
        }
    </style>
</head>
<body>
    <h2>h2文本内容,<span>h2内span文本</span></h2>
</body>
</html>

（3）外部样式

定义link标签，引入外部css文件

css文件

 h2 {
        属性：值;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css文件">
</head>
<body>
    <h2>h2文本内容,<span>h2内span文本</span></h2>
</body>
</html>

3.CSS选择器

选择器是选取需设置样式的元素(标签)

（1）元素选择器

格式：属性名 {}

div{color: red;}

（2）类选择器

  <style>
        .h2{
            color: red;
        }
    </style>
 <h2 class="h2">h2文本内容,<span>h2内span文本</span></h2>

一个元素上可以同时应用多个class，通过使用空格来分隔。

例子： < img class="class1 class2">

（3）id选择器

格式：#id属性值{color：red}

<style>
        #h2{
            color: red;
        }
</style>
<h2 id="h2">h2文本内容,<span>h2内span文本</span></h2>

每一个 HTML 元素都可以具有 id 属性。

id 属性规定 HTML 元素的唯一的 id。

id 属性是唯一的。虽然浏览器不会强制唯一，但这是被广泛认可的。

所以同一个页面不要给一个以上的元素相同的 id 属性。

id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。

和 class 一样，也可以使用 id 属性设定元素样式，

并且id不可以重用，只应用于一个元素上。

不要使用数字开头的 id 属性！在某些浏览器中可能出问题。

在 CSS 里，id的优先级要高于class，如果一个元素同时应用了class和id，并设置样式有冲突，会优先应用id的样式。

在声明 id 的时候，必须在名字前插入#符号。

（4）属性选择器

属性选择器，可以让我们给特定的元素设置样式。

格式：[属性名 过滤符号 属性值] {}

属性选择器分两类：

• 存在和值属性选择器 (匹配精确的属性值)

2. [attr=val]：选择属性attr被赋值为val的所有元素

• 子串值属性选择器 (伪正则选择器)

[type='radio'] {
  margin: 20px 0px 20px 0px;
}

改变所有元素中包含type属性且值为radio的元素的外边距。

（5）后代选择器

后代选择器： 选中某个父级下对应的所有子级，并针对该子级设置CSS样式。

后代标签只要是当前标签里面的任意一个标签都行不一定非要亲儿子

• 后代选择器设置的CSS样式不会影响到父级。
• 父级和子级之间需要用空格隔开。
• 后代选择器可以存在多层级父级，并不局限在单一父子级之间，层级越深所设置的CSS样式优先级越高。

（6）子元素选择器

子元素选择器： 子元素选择器与后代选择器较为类似。相对于后代选择器，子元素选择器所涉及的范围会更小。

• 后代选择器可以跨层级影响，而子元素选择器要求父元素和子元素一定为上下级关系，中间如果隔着其他元素则会失效。
• 父元素和子元素之间需要用 > (子结合符) 隔开。

（7）相邻选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

相邻选择器： 选中对应元素的下一个兄弟元素。

• 所涉及的相邻兄弟元素必须是该元素的同级元素。
• 所涉及的相邻兄弟元素必须是相邻兄弟元素，中间若有其他元素隔开也将导致失效。
• 元素A和对应的相邻兄弟元素之间需要用 + 隔开。

（8）选择器分组

选择器分组：当需要多个元素同时使用同一套CSS样式时，可以使用选择器分组，这样可以避免为每个元素单独设置样式而造成不必要的冗余。

选择器分组通过 , （逗号）将需要复用同一套样式的多个元素进行分隔。如下图所示，将选择HTML页面中的a元素，p元素，div元素；并为其设置相同的CSS样式。

（5）样式规则

• 各个属性与属性值间以“键值对”形式出现
• 所有的属性设置都用花括号括起来
• 属性名与属性值间用冒号连接
• 多个键值对之间用分号分开

4.CSS属性（常用）

（1）设置字体颜色

通过修改元素的style属性的color值来改变文本颜色。

行内style最好以;来结束。

<h2 style="color: red;">标题2</h2>

在 CSS 里面还可以使用十六进制编码 (hex) 方式来代表颜色。

十六进制数是一种简单表示数字信号的计数方式。

在十六进 制数中，每一位由0〜9、A、B、C、D、E、F十六个数码中的一个构成，

计数的基数是16,超过15的数必须用多位数表示， 其中相邻间的关系是“逢十六进一”。

总的来说，0 到 F 在十六进制里代表着数字，提供了 16 种可能性。

在 CSS 里面，我们可以用使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R），绿（G），蓝（B）。

通过三原色，我们可以创建 1600 万种不同颜色！

例如：橘色是纯红色混合一些绿色而成的，没有蓝色的参与。

在十六进制编码里面，它被转译为#FFA500。

0是十六进制里面最小的数字，表示着没有颜色。

F是十六进制里面最大的数字，表示着最高的亮度。

CSS 十六进制编码颜色也支持缩写的方法。

例如，红色的#FF0000十六进制编码可以缩写成#F00。

在这种缩写形式里，三个数字分别代表着红（R），绿（G），蓝（B）颜色。

这样，颜色的可能性减少到了大约 4000 种。

另一种可以在 CSS 中表示颜色的方法是使用 RGB 值。

RGB 即红色、绿色、蓝色（英语：Red, Green, Blue）。

• 红色（R）0 到 255 间的整数，代表颜色中的红色成分。。
• 绿色（G）0 到 255 间的整数，代表颜色中的绿色成分。
• 蓝色（B）0 到 255 间的整数，代表颜色中的蓝色成分。

黑色的 RGB 值声明如下：

rgb(0, 0, 0)

白色的 RGB 值声明如下：

rgb(255, 255, 255)

我们可以类似使用十六进制编码一样，通过不同值的组合，来混合得到不同的 RGB 颜色。

rgb(R,G,B)，取值可以是 0-255 的整数或百分比。

（2）设置字体大小

在CSS中，通过 font-size 属性来设置元素中所包含文本的字体大小。

如果一个元素没有显式定义font-size属性，则会自动继承父元素的 font-size属性的计算结果。

定义 font-size 时，可以使用预定义关键字、绝对尺寸、相对尺寸：

预定义关键字

有 xx-small、x-small、small、medium、large、x-large、xx-large，尺寸按顺序依次增大，类似于衣服的尺寸。

绝对尺寸

有px（像素）、pt（点，1pt 相当于 1/72in）、in（英寸）、cm（厘米）、mm（毫米）等。

相对尺寸

有 em、%、rem，它们都是相对于某个参考基准的字体大小，来计算当前字体的大小，只是参考基准不同而已。

常用的单位有 px， rem；

px特点：

1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

em（font size of the element）是指相对于父元素的字体大小的单位。em是相对长度单位。相对于当前对象内文本的字体尺寸。 如果您没有在页面上的任何位置设置字体大小，那么这是浏览器的默认大小，即16px。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。

要计算em大小，只需使用以下公式：**em = px /**16，即 1em = 16px。

EM特点：

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

（3）设置字体样式

通过font-family属性，可以设置元素里面的字体样式。

font-family ：属性指定元素的字体，语法格式如下：

font-family: 字体1,字体2,...;

有两种字体系列名称：

• 字体系列：特定的字体系列（如Times New Roman或Arial）
• 通用族：一组具有相似外观的字体族（如Serif或Monospace）

font-family 可以把设置多个字体名称。如果浏览器不支持第一个字体，则会尝试下一个。

除了大多数系统提供的默认字体以外，我们也可以使用自定义字体。

我们可以通过在 CSS 里面设置字体的 URL 来引用。

<link href="https://fonts.loli.net/css?family=Lobster" rel="stylesheet" type="text/css">
    <style>
        .h2{
            color: red;
            font-family: Lobster;
        }
    </style>

注意：字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。如"Open Sans"字体需要添加引号，而Lobster字体则不需要。

几乎所有浏览器都有支持几种通用字体。比如: monospace，serif和sans-serif。

当字体不可用，浏览器可以 “降级” 去使用其他字体。

如果电脑已经安装了较高优先级的字体，你将看不到这个降级过程，因为浏览器会找到该字体并使用。

font-style属性用于定义字体风格，加设置斜体、倾斜或正常字体，其可用属性如下：

font-style : normal | italic | oblique

font-style: normal : 正常的字体 font-style: italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique,通常用于指定斜体文本 font-style: oblique : 倾斜的字体 使用​< i>​标签，同样可以达到​倾斜​的效果

font-weight控制文本的粗细。 值可以设置为normal (默认)，bold，bolder，和lighter。

根据文本的厚度，也可以使用从100（细）到900（粗）的数字来定义字体粗细。400与normal相同，700与bold相同。

各个属性值如下所示：

font-variant属性允许您将字体转换为所有小型大写字母。 这也是针对英文而言，因为中文不存在大小写之分。这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-variant属性的值可以设置为normal，small-caps，和 inherit。

注意：不是每个字体都支持CSS字体变体！

（4）设置元素的宽高

CSS 的width属性和 height属性 可以控制元素的宽度和高度。

图片的width宽度单位类似于字体的px（像素)值。

（5）设置元素边框

CSS边框属性允许你指定一个元素边框的样式和颜色, 和边框宽度。

可以使用 border 属性将边框样式,颜色,和宽度 一起设置。

如果不设置其中的某个值，也不会出问题，比如 border: solid #ff0000; 也是允许的。

边框样式属性指定要显示什么样的边界。

除了在 border 属性里面设置边框样式，

还可以使用border-style属性来定义边框的样式

<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
​
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>

边框的颜色设置：

border-color属性用于设置边框的颜色。可以设置的颜色：

• name - 指定颜色的名称，如 "red"
• RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
• Hex - 指定16进制值, 如 "#ff0000"

您还可以设置边框的颜色为 "transparent"(继承父亲)。

注意：border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

边框的宽度设置：

你可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：

可以指定长度值，比如 2px，

或者使用 关键字 thick 、medium（默认值） 和 thin。

注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。

边框的角设置：

border-radius 属性允许你为元素添加圆角边框。

除像素外，border-radius 属性也支持使用百分比的值。

如果宽高一致，且border-radius:50%时，会得到圆形，如果是长方形，则为椭圆形

（6）设置元素背景颜色

background-color属性可以设置元素的背景颜色。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

（7）设置元素边距

所有的 HTML 元素基本都是以矩形为基础。

每个 HTML 元素周围的矩形空间由三个重要的属性来控制：

padding（内边距）
margin（外边距）
border（边框）

padding控制着元素内容与border之间的空隙大小。

CSS 允许你使用padding-top，padding-right， padding-bottom和padding-left属性来设置四个不同方向的padding值。

不需要每次都要分别声明 padding-top，padding-right，padding-bottom和padding-left属性，

也可以把它们汇总在padding属性里面声明，如下：

这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的padding。

margin（外边距）属性控制元素的边框与其他元素之间的距离。

红色盒子的margin值要比蓝色盒子的大，让它看起来比蓝色盒子要小。当你增加蓝色的margin值，它会增加元素边框到其他周围元素的距离。

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

如果你设置元素margin为负值，元素会变得更大。

CSS 允许你使用margin-top，margin-right，margin-bottom和margin-left属性来设置四个不同方向的margin值。

同样，每个方向的外边距值可以在margin属性里面汇总声明，与padding一样

（8）绝对单位和相对单位

绝对单位：绝对长度单位, 会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，可能会导致一些误差。

• in
• pt
• mm
• cm

相对单位：就像em和rem，它们会依赖其他长度的值。

• %
• px
• rem
• vh
• em：em的大小基于元素的字体的font-size值，如果你使用em单位来设置font-size值，它的值会跟随父元素的font-size值来改变。
• vw

有些单位长度选项是相对视窗大小来改变值的，符合了响应式 web 的设计原则。

（9）自定义属性

var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

css格式：

var(custom-property-name, value)

• custom-property-name 是必需的，名称最好见名知意
• 自定义属性的名称，必需以 -- 开头。
• value 可选。备用值，在属性不存在的时候使用。

:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}
 
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
 
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

创建一个 CSS 变量，只需要在变量名前添加两个破折号，并为其赋值

--penguin-skin: gray;

这样会创建一个--penguin-skin变量并赋值为gray（灰色）。

其他元素可通过该变量来设置为gray（灰色）。

创建变量后，CSS 属性可以通过引用变量名来使用它的值。

background: var(--penguin-skin);

当变量因为某些原因导致变量不生效, 可以设置一个备用值。

比如:

有些人正在使用着不支持 CSS 变量的旧浏览器，

或者，设备不支持你设置的变量值。

background: var(--penguin-skin, black);

这样，当变量有问题的时候，它会设置背景颜色为黑色。

变量继承：

当创建一个变量时，变量会在创建的选择器里可用。

同时，在这个选择器的后代里面也是可用的。

这是因为 CSS 变量是可继承的，和普通的属性一样。

CSS 变量经常会定义在 :root 元素内，这样就可被所有选择器继承。

:root 是一个 pseudo-class 选择器匹配文档的根选择器，通常指 html 元素。

通过在 :root 里创建变量，变量在全局可用，以及在 style 样式的选择器里也生效。

当你在:root里创建变量时，这些变量的作用域是整个页面。

如果在元素里创建相同的变量，会重写:root变量设置的值。

使用媒体查询更改变量

媒体类型允许你指定文件将如何在不同媒体呈现。

该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。

CSS 变量可以简化媒体查询的方式。

例如，当屏幕小于或大于媒体查询所设置的值，通过改变变量的值，那么应用了变量的元素样式都会得到响应修改。

:root {
    --basecolor: gray;
    --background:#E2B29F;
}
@media (max-width: 350px) {
    :root {
        --basecolor:white;
        --background:rgb(198,250,241);
    }
}   

（10）水平对齐文本

text-align属性指定元素中文本的水平对齐方式。 默认情况下，您网站上的文字左对齐。 但是，有时您可能需要不同的对齐方式。

文本对齐属性值如下：left，right，center和justify。

• left：把文本排列到左边。默认值：由浏览器决定。 　
• right：把文本排列到右边。 　
• center：把文本排列到中间。 　
• justify：实现两端对齐文本效果。 　
• inherit：规定应该从父元素继承text-align属性的值。

（11）垂直对齐

vertical-align属性设置元素的垂直对齐。 常用的值是top，middle和bottom。

top: 使元素及其后代元素的顶部与整行的顶部对齐。

middle: 使元素的中部与父元素的基线加上父元素x-height的一半对齐。

bottom: 使元素及其后代元素的底部与整行的底部对齐。

vertical-align属性还包含以下值：baseline，sub，super，**%和px**(或pt，cm)。

baseline: 使元素的基线与父元素的基线对齐。

sub: 使元素的基线与父元素的下标基线对齐。

super: 使元素的基线与父元素的上标基线对齐。

px : 使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。

vertical-align属性对所有元素的行为都不一样。

只针对行内元素或者行内块元素

（12）文本修饰

text-decoration属性用于指定文本将如何装饰。

text-decoration 属性是以下三种属性的简写：

• text-decoration-line ： 线条类型
• text-decoration-color : 线条颜色
• text-decoration-style ： 线条样式

常用的值有：

• none - 默认值，这定义了一个正常的文本
• inherit - 从其父元素继承此属性
• overline - 在文本上方绘制水平线
• underline - 在文本下方绘制水平线
• line-through - 在文本中绘制水平线（替换HTML < s>标记）

可以将underline，overline或line-through组合起来，以添加多条装饰线。

（13）文本缩进

text-indent 属性规定文本块中首行文本的缩进。指定在文本的第一行开始之前应该留下多少水平空间。 属性值是长度(px，pt，cm，em等)，%和inherit。

内联对象要使用该属性必须先使该对象表现为块级或内联块级。

• 注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。在CSS2.1之前，text-indent总是继承计算值，而不是声明值。 　
• 说明：text-indent属性用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。

（14）文本阴影

text-shadow为文本添加阴影。

**text-shadow: ** 水平位置（x） 垂直位置（y） 模糊距离 阴影颜色

它有四个值，各个属性值如下所示：

• h-shadow: 必需。水平阴影的位置。允许负值。
• v-shadow： 必需。垂直阴影的位置。允许负值。
• blur： 可选。模糊的距离。
• color： 可选。阴影的颜色。

处理阴影时，可以使用任何CSS支持的颜色格式。

对于x和y偏移，可以使用各种类型的单位（如px，cm，mm，in，pc，pt等），负值也被支持。

（15）文本大小写

text-transform ：控制文本的大小写。

text-transform: capitalize; 可以实现文本中的每个单词以大写字母开头。

使用text-transform，您可以使文本显示为全部大写或全部小写。

text-transform: uppercase; 定义文本显示为全部大写。

text-transform: lowercase; 定义文本显示为全部小写。

（16）文本字符间距

letter-spacing属性用于设置文本中字符之间的间距。

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。

值可以设置为：

• normal ：定义了默认样式，字符之间没有额外的空间;
• length ：长度计量单位，用px，pt，cm，mm等测量单位定义字符之间的额外空间;
• inherit ：继承其父元素的属性;

letter-spacing使用负值可以减少字符之间的间距。

（17）文本中单词间距

word-spacing 属性指定文本中单词之间的空格（即字间隔）。 就像letter-spacing属性一样，可以将word-spacing 的值设置为normal，length和inherit。

该属性定义元素中字之间插入多少空白符。针对这个属性，“字” 定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0。允许指定负长度值，这会让字之间挤得更紧。

normal: 默认。定义单词间的标准空间。

length: 定义单词间的固定空间。

inherit: 规定应该从父元素继承 word-spacing 属性的值。

要使用word-spacing设置单词之间的间距，可以使用像px，pt，pc，cm，mm，inches，em和ex这样的测量值。如果指定为长度值，会调整字之间的通常间隔；也可以设置normal，normal 就等同于设置为 0。

（18）文本换行

white-space可以设置元素内的换行符。

参数可以是normal，inherit，nowrap等。

• normal: 默认。空白会被浏览器忽略。
• inherit: 规定应该从父元素继承 white-space 属性的值。
• nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到 < br> 标签为止。

nowrap会屏蔽该元素中的所有换行符。

white-space也支持其他值：pre 、pre-line 、pre-wrap

• pre ：文本支持所有的换行和空格
• pre-line ：文本支持换行，忽略额外的空格
• pre-wrap ：文本将在必要的时候或者行的结尾进行换行

Pre-wrap值的行为与Pre值相同，只是它增加了额外的换行符以防止文本突破元素的框。

5.CSS样式表继承

要想了解css样式表的继承，我们先从文档树（HTML DOM）开始。文档树由HTML元素组成。

文档树和家族树类似，也有祖先、后代、父亲、孩子和兄弟^_^。

那么CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。

当然也不是所有的css属性都会被子类继承，例如border属性。

6.样式中的优先级

CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。

CSS 优先规则2："直接样式"比"祖先样式"优先级高。

CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

CSS 优先规则4：属性后插有 !important 的属性拥有最高优先级。

CSS 优先规则5：第二个声明始终优于第一个声明。

7.CSS兼容

使用 CSS 时可能会遇到浏览器兼容性问题。

所以提供浏览器降级方案来避免潜在的问题就显得很重要。

当浏览器解析页面的 CSS 时，会自动忽视不能识别或者不支持的属性。

例如:

如果使用 CSS 变量来指定站点的背景色， IE 浏览器由于不支持 CSS 变量会忽视背景色。

因此，浏览器会使用其它值。如果没有找到其它值，会使用默认值，也就是没有背景色。

这意味着如果想提供浏览器降级方案，在声明之前提供另一个更宽泛的值即可。

这样老旧的浏览器会降级使用这个方案，新的浏览器会在后面的声明里覆盖降级方案。

.white-box {
    background: #FFF;
    background: var(--white-color);
}