2020-05-07

CSS3基础知识

（1）样式声明中，属性名和属性值之间用冒号连接，多个样式声明之间用分号隔开。
（2）内联样式，又称为“行内样式”，是指定义在HTML元素的开始标记中的style属性内的一组CSS样式声明。例如：

。
（3）内部样式表，是指在网页的head元素内的标记内定义的一组样式规则。 样式规则是指由选择器和样式声明组成的一套样式整体。例如：body{font-size：12px；color：red；}。其中，选择器是用于查找页面中要应用该样式的元素的查找条件。一套样式规则中的多个CSS样式声明应该定义在紧跟选择器之后的{}内。
（4）外部样式表，是指定义在一个独立于任何网页之外的文件中的一组CSS样式规则。通常保存外部样式表的文件扩展名为.css。一个网页要使用一个CSS文件，必须先引入CSS文件。代码为。
（5）CSS样式具有三大特征：继承性、层叠性和优先级。继承性是指父元素上定义的样式，可由子元素直接继承。但不是所有父元素的样式，子元素都自动继承。层叠性是指可在不同样式表中为同一个元素设置多处样式规则。如果多处样式规则中的样式声明不冲突，最终都会合并应用到该元素行。优先级是指当为同一个元素在不同样式表中定义的样式声明有冲突时，按照优先级顺序来应用样式。
（6）默认的优先级顺序是：内联样式的优先级高于内部样式表和外部样式表；内外部样式表的优先级高于浏览器内置样式表的优先级；内部样式表和外部样式表的优先级，取决于在页面中引入的先后顺序；浏览器加载页面内容时，是顺序加载，后加载的同名样式会覆盖先加载的。
（7） ！important可将当前样式声明的优先级提升为最高。
（8）元素选择器，用于匹配与指定标签名相同的元素，如div{}、p{}、a{}等。
（9）类选择器，用于为一个样式规则定义一个自定义的样式类名称。类选择器的名称必须以“.”开头，且中间不能包含特殊字符，也不能以数字开头，如.menu{}、.btn{}等。但是，样式类名不会自动匹配元素，需要在HTML页面中，在要应用该样式规则的元素开始标记中，人为设置class属性的值为样式类名（不加“.”）。例如：

• …

。
（10）元素分类选择器，是指将元素和分类选择器联合使用，为了匹配必须同时满足两个条件的元素，如p.test{}。
（11）id选择器，用于为某一个特定元素定义专属样式。使用id选择器需要两步。第一步是自定义id选择器和样式规则。语法为：#id名{}。其中，id名前必须加“#”，表示是id选择器的意思。第二步，在HTML中要应用该样式的元素上定义唯一的id名。HTML中定义id属性，不用加“#”。
（12）群组选择器，是将多个选择器并列放在一起匹配样式。每个子选择器之间用“，”分隔，如div，p{}。
（13）后代选择器，用于在一个元素的所有后代子元素中查找符合条件的元素。后代子元素是指当前元素的直接子级以及子元素内更深层次的内嵌子元素。语法为：父元素选择器 子元素选择器 …。例如：ul li{}。
（14）子代选择器，是指仅查找某个父元素下的满足条件的直接子元素。语法为：父选择器>子选择器。例如：ul>li{}。
（15）伪类选择器，是用于匹配元素不同状态的选择器。当元素状态改变时，可实现样式随之改变。伪类选择器都是以“：”作为选择器的开始，并紧跟要修饰的元素选择器或其他选择器后。
（16）链接伪类：用于匹配超链接元素不同状态的伪类。其包括： ：link，匹配超链接元素尚未访问时的链接样式； ：visited，匹配超链接元素访问后的链接样式。
（17）动态伪类：用于根据元素状态变化动态改变样式的伪类，可用于任意元素。其包括： ：hover，匹配当鼠标悬停在该元素上时的样式； ：active，匹配当元素被激活时的样式；：focus，匹配当元素获得焦点时的样式。
（18）选择器的权重值如下：元素选择器权重值=1；类选择器权重值=10；伪类选择器权重值=10；ID选择器权重值=100；内联样式权重值=1000。可见，内联样式的优先级最高，不会被替换。在样式表内，ID选择器优先级最高，元素选择器优先级最低。如果两个选择器优先级相同，则后定义选择器中的CSS属性会覆盖先定义的同名CSS属性。
（19）尺寸单位包括：px，指像素单位；in，指英寸；pt，指磅；cm，指厘米；mm，指毫米；em，指倍数，查找父元素同属性的值；rem，也指倍数，但是，参照的是body的同属性的数值； %，指百分比，参照父元素相同属性的大小。
（20）为了尽量适应不同大小的显示设备，应该尽量选择相对单位设置尺寸。
（21）颜色的值由3个数值组成，分别代表红色、绿色、蓝色。3种颜色叠加或混合，形成各种各样的颜色。定义颜色属性的值，有以下几种方式：rgb（r，g，b）； rgb（r%，g%，b%）； rgba（r，g，b，alpha）；#rrggbb；#rgb，还可使用颜色的英文名设置颜色值。（22）尺寸属性包括：width和height。块级元素都可修改尺寸。行内块元素也可修改尺寸。表单元素中，除单选按钮和复选框之外，其余都可设置尺寸。本身具有width属性和height属性的元素，也可以通过CSS修改尺寸，如img和table等。但是，大多数行内元素，无法设置尺寸，如a和span等。
（23）当内容多、元素区域小时，就会产生溢出。如果内容是文字，默认就是纵向溢出。如果内容是图片，则默认纵向和横向都会溢出。控制溢出的属性包括：overflow属性用于设置纵向和横向两个方向的溢出显示样式；overflow-x属性用于设置横向溢出的显示样式；overflow-y属性用于设置纵向溢出的显示样式。（24）溢出属性，可取以下4个值之一：visible，表示显示溢出部分，此为默认值；hidden，表示隐藏溢出部分，但不提供滚动条；scroll，表示隐藏溢出部分，但是，无论是否内容溢出，都始终显示滚动条；auto，表示自动判断是否溢出，只有溢出，才显示滚动条，否则不显示。
（25）border属性值由三部分组成，按顺序分别是：width、style和color。width属性值控制边框的粗细。style属性值控制边框的样式，可选以下几个值：solid实线、dotted圆点虚线、dashed线条虚线。color属性控制边框的颜色。
（26）border属性是同时设置上下左右4条边框的样式。如果希望单独设置某一边的样式，可使用“border方向”。其中，“方向”可替换为left、right、top、bottom，分别表示左边框、右边框、上边框、下边框。
（27）border属性还同时设置width、style、color 3个属性。如果希望仅同时修改4条边的某个属性时，可用“border属性”。
（28）border属性还可仅控制一条边的一个属性，可使用如下CSS属性：border-方向-属性。
（29）设置边框倒角可使用border-radius属性，其值可以是数值，也可以是变长的百分比。Border-radius属性的值是一个尺寸值，表示圆角的半径长度。
（30）分别设置4个角的半径可使用以下属性：border-top-left-radius、border-top-right-radius、border-bottom-righ-radius和border-bottom-left-radius。
（31）设置边框阴影可使用box-shadow属性。其值可由6个值组成：h-offset和v-offset，两个值定义阴影在水平和垂直两个方向的偏移量；blur，是可选值，定义阴影边缘模糊的距离；spread，是可选值，定义阴影向外扩展出的尺寸；color，是可选值，定义阴影的颜色；inset，是可选值，将外阴影变成内阴影。
（32）设置文本框的轮廓属性，可用outline属性。outline属性值由3个部分组成，分别是width、style和color，分别表示轮廓线的粗细、样式和颜色。
（33）框模型规定，每个元素由内向外由4个部分组成：内容区域，指显示元素内容的区域，由元素的width和height属性控制范围大小；内边距，指内容到边框的距离，由元素的padding属性设置；边框，指元素的边框，由元素的border属性设置；外边距，也称为间距，指元素边框到其他元素的距离，由元素的margin属性设置。一个元素的实际占地大小为：内容（width或height）+内边距（padding）+边框粗细（border-width）+外边距（margin）。
（34）设置外边距可使用margin属性。其属性值按标准由4个数值组成，分别定义上、右、下、左（顺时针）4个方向的外边距。当然，也可以仅设置一边的外间距，使用margin-top、margin-bottom、margin-left、margin-right属性。
（35）根据父元素的宽自动设置子元素在父元素内水平居中显示时，还可设置margin的值为auto。auto意思是让浏览器自动计算外边距的值。
（36）当元素在4个方向的外边距都相同时，可使用margin：value的形式。只写一个值即可同时定义4个方向的外边距。如果上、下外边距刚好相同，而且左、右外边距也刚好相同，可使用margin：上下外边距左右外边距。如果4个方向中，只有左、右外边距相同，而上、下外边距不同，可使用margin：上外边距左右外边距下外边距。
（37）外边距合并，是指当两个垂直方向外边距相遇时，将合并为一个外边距。最终的实际外边距取决于两个外边距中距离较大的那个值。
（38）上外边距溢出，有以下几种预防方法：为父元素增加上边框；为父元素设置上内边距；在父元素的第一个子元素前添加空 标记。
（39）内边距（padding）语法格式与margin完全一样。（40）设置box-sizing属性的值，可指定框模型的计算方式。其取值可以是content-box或border-box。其中，content-box是默认值，表示采用默认计算方式，元素实际占用空间=外边距+边框粗细+内边距+内容。如果希望将内边距和边框也纳入内容中共同控制，可将box-sizing属性设置为border-box。Border-box属性值规定，元素实际占用空间=内容（width和height）+外边距。其中，内容（width和height）同时包括了边框和内边距。（41）元素多层结构自下向上，依次是外边距（margin）、背景色（background-color）、背景图片（background-image）、内边距（padding）和边框（border），以及最上层的内容。
（42）背景色使用background-color属性定义。背景图片使用background-image属性定义，其值有专门的格式：url（图片路径）。
（43）修改背景图片尺寸，可用background-size属性，其值为两个值，分别表示背景图片的宽度和高度。其值也可以是cover，表示等比缩放，但以短边刚好缩放到与元素对应边等长时，停止缩放。其值还可以是contain，也表示等比缩放，但以任意一边碰到元素的某一个边缘，就停止缩放。
（44）修改平铺要用background-repeat属性，其值可以是以下4个备选之一：repeat——水平和垂直两个方向均平铺；no-repeat——不平铺，只显示一个；repeat-x——只在水平方向平铺；repeat-y——只在垂直方向平铺。
（45）改变背景图片在元素中的位置，可设置background-position属性。该属性值由两个值组成：x和y。x表示背景图片在水平方向的位移，y表示背景图片在垂直方向的位移。x和y还可以使用位置名称作为其值。例如，x可选择left、center、right，y可选择top、center、bottom。
（46）字体属性包括：font-family属性，用于指定字体名称；font-size属性，用于指定字体大小；font-weight属性，用于将字体加粗显示；font-style属性，用于定义字体的样式。
（47）文本属性包括：color属性，用于修饰文本颜色；text-align属性，用于设置文本水平方向的对齐方式；text-decoration属性，用于设置修饰文本的线条；line-height属性，用于设置行高；text-indent属性，用于设置首行文本缩进；text-shadow属性，用于设置文本阴影。
（48）表格特有属性包括：vertical-align属性，用于指定单元格内容的垂直对齐方式；border-collapse属性，用于定义整个表格元素的边框合并；border-spacing属性，用于设置表格中的边框边距。