1.css是如何工作的？
1.1 编写样式表的语言称为层叠样式表（Cascading Style Sheet,CSS)。CSS是一种定义样式结构（如字体、颜色和位置）的语言，它描送如何各式化和的示国员上的信息，CS5样式以 CS以直接存体在HIML文件或单独的样式表受作中的集普化和最示限要都港含将样式应用于给定类型的元素的样式规则，当在外部使用时，样式表规期持放请在都展名为ss的外部样式表文件中。
样式规则是一种规格化指令，可以应用于网页上的元素，如文本，段落或链接。样式规则由一个或多个样式属性及其关联只组成。 内部样式表直接放置在HTML文档中，而外部样式表存在于单独的文档中，通过特殊标签应用到网页。
CSS名称中的“层叠”指的是将样式表规则应用于HTML文档中元素的方式。，更具体地说，CSS中的样式形成一个层次结构，在该层次结构中，更具体的样式将覆盖更一般的样式。CSS的职责是根据这个层次结构确定样式规则的优先级，从而实现层叠效果。如果这听起来令人困惑，只需将CSS中的层叠机制类比为遗传，在遗传中，一般特性从父母传递给孩子，但更具体的特性对每个孩子来说是完全独特的。基本样式规则(父规则)应用于整个样式表，但可以被更具体的样式规则(子规则)覆盖。
1.2 基本样式表
- font-size: 10pt
font字体 size大小 文本都已10pt的大小呈现。
-
font-family: Verdana, Geneva, Arial, Helvet color: black
family 字体为Verdana 后面是如果用户没有安装Verdana字体样式表，只要照顺序，显示下列字体Geneva, Arial, Helvet color: black
-
line-height:14pt
行间距为14pr
padding-left:5pt; padding-right:5pt; padding-top:5pt;
页面儿的左右和上方分别填充5pt边距
-
tont:14pt Verdana, Geneva, Arial, Helvetica
规定文本，以Verdana呈现大小为14。
（如果<p>标签使用subheader的特殊类。这标签中的文本显示为粗体）
- font-weight:bold
字体粗细
3 color: #593d87
颜色为紫色
每次测量后的1pt表示1个点(lin内有72个点)。可以指定任何样式表以in、cm、px、em或rem为单位。也有相对于数字0的宽度(ch)、相对于视区宽度或高度的百分比(vw或vh)以及相对于容器的大小的单位。CSS中的长度定义为固定长度或相对长度两种。固定长度(如以in、px或pt)不会随页面大小的变化而改变，而相对长度(如以em、ch或百分比表示的长度)则会随页面大小的变化而改变。
说明
在CSS中，zem度量是相对于初始字体大小的，而不是任何可能适用的更改字体大小。最佳实践建议您使用相对的字体大小(以Fm或em为单位)，而不是固定的字体大小(以in或pt为单位)，以便您的设计能够更优雅地缩放。选择rem还是em主要取决于您是否需要您的设计在整个页面上进行缩放(使用rem)，或者您是否需要对文档的各个部分进行更明确的控制(使用em)。
为了在HTML文档中引用样式表，需要在文档的<head>标签中使用<1ink>标签。清
行内式
通过style属性设置元素的样式。
<标签名 style="属性1:属性值;属性2:属性值2;"><内容></标签名>
内部样式表
是将css代码集中写在HTML文档中。的head头部标签中用style标签定义
<head>
<style type="text/css">
选择器<选择的标签>[
属性(：属性值1；
属性工：属性值2：
</sty1e7
</hea!>
tyPe="ext/ss"在htm15可以省略
外部样式表
通过link标签将外部样式表文件链接在HTM4文档所有样式放在一个或多个以.cs为扩展外的外部样式表文件中
<link rel:"stslesheet"type:"text/css"href="css文件路径”>
<head>
rel 定义当前文档与被链连接文指之间的关系，表示被会连接的是一个样式表文件
type 定义所连接文件类。Css可以省略。
href 定义所合接的URL可以是相对路径，也可以是绝对路径
1.3 CSS样式入门
css中的样式属性通常可分为:
布局属性: 影响网页上元素位置的属性，如编剧那边剧和对齐方式。
格式模式: 影响网页中元素的可是效果的属性。比如字体类型，大小和颜色。
1.3.1
Css布局属性决定如何将内容放置在网页上。重要的布局属性之一是display属性他描述元素相对于其他元素的显示方式有五个基本属性值。
display:block;
1, block
元素显示在新行上，类似生成新段落。
list-ite
元素显示在新行上，旁边有列表项标记(项目符号)。inline——元素与当前段落一起显示。-
inline
元素与当前段落一起显示。 -
inline-block
元素显示为块级元素，与周围的块元素内联。 none
元素不显示，它是隐藏的。
也可以控制具有width 和height属性的元素的矩形区域白的尺寸。与许多其他与大
相关的CSS属性一样，width和height属性值可以用如下几个不同的单位指定。
in——Inches(英寸)。
cm——Centimeters(厘米)。
em——Ems(相对长度单位)。
mm——Millimeters(毫米)。
&——Percentage(百分比)。
px——Pixels(分辨率)。
pt——Points(像素)。
rem——Rems(相对根元素字体大小的单位)。
可以在样式表中任意混合使用单位，但在一组类似的样式属性中保持一致通常是一好的做法。比如，您可能希望在字体属性和尺寸百分比方面使用rem。以下是使用px为位设置元素宽度的示例：
width:200px;
1.3.2 基本格式属性
CSS格式属性用于控制网页上内容的外观，而不是控制内容的物理位置。较流行的格式属性之一是border属性，它在带有框或部分框的元素周围建立可见边界。注意，边框始终存在于该空间中，但边框不会以您可以看到的方式显示，除非为其提供使其可见的属性(如颜色)。下列border属性提供了描述元素边框的方法。
border-width——边框的宽度。
border-color——边框的颜色。
border-style——边框的样式。
border-left——边框的左侧。
border-right——边框的右侧。
border-top——边框的上边沿。
border-bottom——边框的下边沿。
border——整个边框。
border-width属性设置边框的宽度。它通常以px为单位表示，
border-width:5px;
border-color和border-style属性设置了边框颜色和样式。的示例：
border-color:blue;
border-style:dotted;
border-style属性可以设置为下列基本值。
solid——单实线边框。
double——双实线边框。
dashed——虚线边框。
dotted——单点线边框。
groove——3D凹槽边框。
ridge——3D垄状边框。
inset——3D inset边框。
outset——3D outset边框。
none——无边框。
hidden——与none效果一样。
border-style 属性的默认值为none，这就是元素没有可见边框的原因，除非将border-style属性设置为其他值。虽然so1id是最常见的边框样式，但您也将看到其他样式。border-left、border-right、border-top和border-bottom属性允许分别为元素设置每一侧的边框。如果希望边框在4条边上显示一致，则可以单独使用border属性，该属性需要设置以下样式，并用空格分隔：border-width、border-style和border-color。使用border属性设置边框的示例，边框由两条(双)红线组成，它们的总宽度为10px：
border:10px double red;
也可以使用以下属性更改。边框半径来调整光的曲线。
border-top-left-radius——左上角圆角半径。
border-top-right-radius——右上角圆角半径。
border-bottom-left-radius——左下角圆角半径。
border-bottom-right-radius——右下角圆角半径。
border-radius——4个角的圆角半径。
border-radius属性采用一个或两个值。这些值定义描述角形状的四分之一椭圆的两个半径。第一个值是水平半径，第二个值是垂直半径。如果只有一个值，则同时用于这两个半径。此属性对放置在元素上的边框和任何背景的主体进行圆角化。以下是将border-radius属性设置为1rem的示例：
border-radius:lrem;
虽然元素边框的颜色是使用border-color属性设置的，但元素内部区域的颜色是使用color和background-color属性设置的。color属性设置元素中文本(前景)的颜色，bacground-co1or属性设置文本下面的背景颜色。下面是将两种颜色属性都设置为预定义颜色的示例：
color;black;
background-color:orange;
还可以不必太麻烦地控制网页内容的对齐和缩进。这是通过text-align 和text-indent属性完成的，如下代码所示：
text-align:center;
text-indent:12px;
text-indent首行缩进。
text-align文本对齐方式
left 左对齐(默认值)
right 右对齐
center 居中对齐
当元素正确对齐和缩进时，设置其字体感兴趣。以下基本字体属性设置了与字体相关的各种参数
font-family——字体的类型。
font-size——字体的大小。
font-style——字体的样式(正体或斜体)。
font-weight——字体的粗细(normal、lighter、bold和bolder等)
font-family属性指定字体类型的优先顺序。如果系统上没有可用的给定字体，则使用优先列表而不是单个值来提供备选方案。如果字体有多个单词，如“Times New Roman”，则应在名称周围加上引号。font-size属性使用尺寸单位指定字体的大小。最后，font-style属性设置字体的样式，font-weight属性设置字体的粗细。下面是设置这些字体属性的示例：
font-family: Arial, "Gi1l Sans", sans-serif;
font-size:1.2rem;
font-style: italic;
font-weight:normal;
总结:
font——允许您一次性设置多个字体属性。可以指定按逗号分隔的字体类型列表；如果第一个字体不可用，则尝试使用下一个字体，依此类推。font还可以包括bold和(或)italic等值以及字体大小。您也可以使用font-family、font-size、font-weight和font-style分别设置这些字体属性。
line-height——设置每行文本的高度。line-height通常以与字体大小相同的单位表示。
color——使用标准颜色名称或十六进制颜色代码设置文本颜色
text-decoration——对于删除链接下划线很有用；只需将值设置为none即可。还支持underline、overline和1ine-through等值。
text-align——对齐文本。
padding——在元素的左侧、右侧、顶部和底部添加内边距；此内边距可以用相应的单位或页面宽度的百分比表示。如果要将内边距单独添加到元素的左右两侧，请使用padding-left和padding-right。根据需要使用padding-top或padding-bottom将内边距添加到元素的顶部或底部。
1.3.3 内部样式表和内联样式。
在某些情况下，您希望指定只在一个网页中使用的样式。您可以将样式表包含在<style>和</style>标签之间，并将其直接包含在HTML文档的<head>中。以这种方式使用的。样式表必须出现在HTML 文档的<head>中，不需要<link>标签，并不能从任何其他页面的HTML文档与用该样式表，这样样式表成为内部样式表。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><title>Some Page</title> Kstyle>
footer {
font-size:9pt;
line-height:12pt;
text-align:center;
}
</style>
</head>
<body>
<footer>
Copyright 2018 Acme Products, Inc.
</footer>
</body>
</html>
footer样式类是在页面的HTML文档头部的内部样式表中指定的。样式类现在可在此文档正文中使用。实际上，在HTML文档的主体中使用它来设置版权声明的样式。
如果要创建在单个页面中多次使用的样式规则，则使用内部样式表非常方便。但是，在某些情况下，可能需要对一个特定的元素应用一个独特的样式。这需要一个内联样式规则，它允许仅为页面的一小部分(如单个元素)指定样式。例如，可以通过样式属性在<p>、<div>或<span>标签内创建和应用样式规则。这种类型的样式称为内联样式，因为它是在HTML代码的中间部分指定的。
