抽空复习整理 3、CSS及常用样式

CSS样式表

作用：设定如何显示 HTML 标签。
语法结构：
第一种：
选择器 {
declaration1;
declaration2;
…
}
说明： 这种方式的CSS样式表由选择器以及一条或多条声明两个部分组成；该种样式表只能定义在style标签或css文件中，每个style标签或css文件可定义多个CSS样式表；

第二种：
style= ” declaration1; declaration2;…”

说明： 这种方式的CSS样式表只由一条或多条声明组成；该种样式表只能定义在style标签属性；HTML文档中每个标签都有一个style标签属性。
无论使用哪一种方式定义CSS样式表，样式表中的declaration都由一个样式属性（非标签属性，即样式属性不能当标签属性直接用在标签中）和一个样式属性值组成，样式属性和样式属性值使用冒号分开；声明之间使用分号间隔；
注意：
1、如果一个样式属性有多个样式属性值，则样式属性值之间使用逗号间隔；
2、在CSS中样式属性及其样式属性值对大小写不敏感，且不忽略空格；
3、如果属性值由多个单词组成，则建议使用单引号引起来；

选择器

标签选择器：
标签选择器以HTML文档中定义的标签名为选择器名，其语法如下：
标签名 {
declaration1;
declaration2;
…
}
作用对象：HTML文档中标签名与标签选择器名相同的标签都受影响。

类选择器：
类选择器以标签中class标签属性的属性值为选择器名，其语法如下：
. class标签属性的属性值 {
declaration1;
declaration2;
…
}
作用对象： class标签属性的属性值与类选择器.后相同的所有标签都受影响。
注意：class标签属性的属性值不能以数字开头；

id选择器：
id选择器以标签中id标签属性的属性值为选择器名，其语法如下：
“#”+id标签属性的属性值{
declaration1;
declaration2;
…
}
作用对象：只有id标签属性的属性值与id选择器#后相同的标签才受影响。
注意：
1、id标签属性的属性值不能以数字开头；
2、id标签属性的属性值在HTML文档中必须唯一；class标签属性的属性值可以不唯一；

后代选择器：
父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {
declaration1;
declaration2;
…
}
注意：
1、选择器之间用空格间隔；

分组选择器：
如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器抽取出来以简化CSS样式代码， 该类选择器的选择器名由多个选择器组成，使用逗号分隔，在其语法如下：
选择器1,选择器2,选择器3…{
declaration1;
declaration2;
…
}

通配符选择器：
通配符选择器等价于列出了HTML文档中所有标签的一个分组选择器，其语法如下：
*{
declaration1;
declaration2;
…
}

CSS样式表继承性:
子标签会继承父标签的CSS样式; 但如果子标签重新设置了父标签中的样式属性，则对于子标签来说以子标签中重新设置的样式属性为准, 尽管有可能子标签CSS样式在父标签CSS样式的前面。

如何使用CSS样式
在HTML中，插入CSS样式有3种方式：外部样式表，内部样式表，内联样式。

外部样式表
如何实现：将CSS样式写在css样式文件中，使用link标签将该css文件引入到HTML文档中。
什么时候用：当多个HTML文档中某些标签的样式规则相同时，为了实现这些样式表的重用，同时也为了方便管理样式表，则需要将其声明在一个CSS样式表文件中。

补充：link标签还用于设置HTML文档头部小图标，语法结构：< link rel=”shortcut icon” type=”image/x-icon” href=”图片路径”/>

内部样式表
如何实现：将CSS样式直接写在HTML文档中的style标签内。
什么时候用：当一个HTML文档中的样式在其它HTML文档中不具有共性，但是本HTML文档中的多个标签的样式相同，这时为了实现这些样式规则的重用，同时也为了方便管理样式规则，则需要将其声明在内部样式表中。

内联样式
如何实现：将CSS样式写在HTML文档某个标签的style标签属性的属性值中。
什么时候用：当一个HTML文档中的某个标签样式与其他标签样式不相同，或者该文档中的标签样式与父标签样式不统一，则此时就需要声明内联样式。

总结：外部样式表和内部样式表中的每个样式表都需要使用{}，只有内联样式不允许使用大括号，比如：< p style=”color:red;text-align:center;”>p标签< /p>

CSS样式优先级

选择器优先级
id选择器优先级最高，标签选择器优先级最低，如下所示：id选择器 > 类选择器 > 标签选择器
注意：选择器优先级不考虑选择器的先后顺序

样式插入方式优先级
如果按照一般插入CSS样式的顺序（即先使用link插入外部样式表，再使用style标签插入内部样式表，最后再在style标签属性中插入内联样式）来说，内联样式优先级最高，外部样式表优先级最低，如下所示：内联样式 > 内部样式表 > 外部样式表。

常用CSS样式属性

边框样式属性
• border-width属性
– 用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度， 该属性有多个值：
值 描述
thin 定义细的边框
medium 默认。定义中等的边框
thick 定义粗的边框
length 允许您自定义边框的宽度
inherit 规定应该从父元素继承边框宽度
– 注意：如果不设置“border-style” 属性或者将其设置为none或hidden属性值，则“border-width” 属性不会起作用；边框样式是 none，边框宽度实际上会重置为 0；不允许指定负长度值；任何的版本的 Internet Explorer （包括 IE8）都不支持 “inherit”属性值。

• border-style属性
– 用于设置元素所有边框的样式，或者单独地为各边设置边框样式，该属性有多个值：
值 描述
none 定义无边框。默认值
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
– 注意：只有当这个值不是 none或者hidden 时边框才可能出现；Internet Explorer （包括 IE8）浏览器都不支持”inherit” 或 “hidden”属性值。

• border-color属性
– 用于设置一个元素的所有边框颜色，或者为4个边框分别设置不同的颜色， 该属性有多个值：
color_name 规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent 默认值。边框颜色为透明。
– 注意：Internet Explorer 6（以及更早的版本）不支持”transparent”属性值；IE7 以及更早版本的浏览器不支持 “inherit”属性值，IE8 需要 !DOCTYPE才会支持”inherit”属性值，IE9 支持 “inherit”“inherit”属性值；边框的样式不能为 none 或 hidden，否则边框不会出现；把 border-style 属性声明到 border-color 属性之前，元素必须在改变其颜色之前获得边框。

• 边框简写属性
– 从上、右、下、左四个边框的角度，分别设置该边框的宽度、样式和颜色属性：
属性 描述
border-top 简写属性，用于将上边框的所有属性设置到一个声明中
border-right 简写属性，用于将右边框的所有属性设置到一个声明中
border-bottom 简写属性，用于将下边框的所有属性设置到一个声明中
border-left 简写属性，用于将左边框的所有属性设置到一个声明中
border 简写属性，用于将四个边框的所有属性设置到一个声明中
– 注意：
a、把边框的宽度、样式和颜色设置到一个声明中时，需要按照宽度、样式和颜色的顺序进行设置，允许不设置其中某个值（比如border:solid #ff0000; ）。示例1
b、使用border设置边框属性时，border-width、border-style和border-color的值只能取一种，例如：{border:20px solid red;}是有效的，但是{border:20px 60px solid red;}、 {border:20px solid dotted red;}或{border:20px solid red green;}等等都是无效的。示例2
c、IE7 以及更早版本的IE浏览器不支持值 “inherit”，IE8 需要 !DOCTYPE才能支持“inherit”属性值 ，IE9 支持 “inherit”属性值。

轮廓线样式属性

轮廓线是在标签边框边缘绘制一条线，该线不会占据空间，也不一定是矩形，主要起到突出标签的作用。
outline-color样式属性：设置轮廓线的颜色，使用该样式属性时必须设定outline-style样式属性的属性值不能 none，否则看不到效果，该属性有多个值

outline-style样式属性：设置轮廓线的样式，该属性有多个值：
none 默认值。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。

内容溢出样式属性
• overflow样式属性
– 当标签中的内容溢出标签时，用于设定如何处理溢出的内容，该属性有多个值：
visible 默认值。所溢出内容不会被修剪，会呈现在元素框之外。
scroll 所溢出内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果所溢出内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

• overflow-x样式属性
– 当标签中的内容x方向溢出标签时，用于设定如何处理溢出的内容，该属性有多个值：

visible 不裁剪内容，可能会显示在内容框之外。
scroll 裁剪内容 - 提供滚动机制。
auto 如果溢出框，则应该提供滚动机制。

背景样式

background-color样式属性：设置标签背景颜色，该样式属性有多个属性值
background-image样式属性：设置标签背景图片，该样式属性有多个属性值：
url(‘URL’) 指向图像的路径。
none 默认值。不显示背景图像。
background-repeat样式属性：设置标签背景图片重复模式，该样式属性有多个属性值：
repeat 默认值。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
none 不重复

background-attachment样式属性：设置标签背景图片是否随着页面的其余部分的滚动而滚动，该样式属性有多个属性值：
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
background-position样式属性：设置标签背景图片位置，为了保证该样式属性在Firefox和Opera浏览器中正常工作，需要将background-attachment样式属性设置为 “fixed”， background-position样式属性有多个属性值

background-origin样式属性：设置background-position样式属性设定的背景图片相对于什么位置来定位，此时background-attachment 样式属性的属性值不能为 “fixed”，否则background-origin样式属性没有效果，background-origin样式属性有多个值：
padding-box 默认值。背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。
background-clip样式属性：指定背景绘制区域，该属性有多个值：
值 描述
border-box 默认值。背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
background-size样式属性：设置单张背景图片的尺寸，默认值为auto，该属性有多个值：
值 描述
length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。

percentage 以父标签的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。

background样式属性：用于在一个声明中设置所有的背景样式属性（即background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment和background-image），且该样式属性设置属性值时不需要设置所有背景样式属性所对应的属性值并且设置的属性值没有顺序要求，例如下面两行样式声明效果是一样的：“background:no-repeat fixed url(./bg.jpg) ;”和“background:url(./bg.jpg) no-repeat fixed ;”。
注意：
1、IE8以及更早的IE浏览器不支持一个标签多个背景图像。
2、该样式属性的属性值也可设置为inherit，即继承父标签background样式属性的设置，但是IE7以及更早的IE浏览器不支持”inherit”，IE8需要!DOCTYPE，IE9支持”inherit”。
3、设置背景时建议使用background样式属性，而不是分别使用单个样式属性，因为background样式属性在较老的浏览器中能够得到更好的支持并且需要键入的字母也更少。

字体样式

font-style样式属性：设定字体的风格，该属性有多个值：
值 描述
normal 默认值。显示标准的字体风格。
italic 显示斜体的字体风格。

font-variant样式属性：设定是否以小型大写字母（即将所有的小写字母转换为大写，但是所有使用小型大写字体的字母与其余文本相比其字体尺寸更小）的字体显示文本，该属性有多个值：
值 描述
normal 默认值。显示标准的字体。
small-caps 显示小型大写字母的字体。

font-weight样式属性：设置字体的粗细，该属性有多个值：
值 描述
normal 默认值。定义标准的字符。
bold 定义粗体字符。

font-size样式属性：设置字体大小，该属性有多个值：
length 把 font-size 设置为一个固定的值。

font-family样式属性：设置字体系列，使用逗号分割每种字体，该属性有多个值：
值 描述
• family-name
• generic-family 用于某个标签的字体族名称或/及类族名称的一个优先表。
默认值：取决于浏览器。
注意：
1、Internet Explorer浏览器不支持属性值 “inherit”。
2、如果浏览器不支持第一个字体则会尝试第二个字体；如果字体系列中的所有字体都不支持，则使用浏览器默认支持的字体

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顺序进行排列，中间用空格隔开。
注意：
· 1、font样式属性至少要指定字体大小和字体系列；
2、没有font-color样式属性，如果要设置字体的颜色需要使用color样式属性；
3、font样式属性的属性值也可设置为inherit，但Internet Explorer浏览器不支持属性值 “inherit”

文本样式

letter-spacing样式属性：设置字符间距，样式属性值可以为负值，但这时字符之间更加“拥挤”，该属性有多个值：
值 描述
normal 默认值。规定字符间没有额外的空间。
length 定义字符间的固定空间（允许使用负值）。

line-height样式属性：设置行间距（即行高），不能为负值，该属性有多个值
值 描述
normal 默认值。设置合理的行间距。
length 设置固定的行间距。

text-align样式属性：设置标签内文本的水平对齐方式，该属性有多个值：
值 描述
left 把文本排列到左边。默认值：如果 direction 属性是 ltr，则默认值是 left；如果 direction 是 rtl，则为 right。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父标签继承 text-align 属性的值。

text-transform样式属性：设置文本的大小写，该属性有多个值：
值 描述
none 默认值。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。

text-decoration样式属性：设定文本装饰（比如是否有下划线及划线显示的位置，但不包括对字体设置显示颜色，字体颜色的设置通过color样式属性设置），该属性有多个值：

值 描述
none 默认值。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。

列表样式
list-style-type样式属性：设置列表项标记的类型，该属性有多个值：
值 描述
none 无标记。
disc 标记是实心圆。无序列表默认值
circle、square、 分别标记为空心圆、实心方块
decimal 标记是数字。有序列表默认值
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等，直至到10及其以上的数字。)。注意：Internet Explorer 浏览器不支持该样式属性值
lower-roman、upper-roman 小写罗马数字(i, ii, iii, iv, v, 等。)、大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha、upper-alpha 小写英文字母(a, b, c, d, e, 等。)、大写英文字母(A, B, C, D, E, 等。)

list-style-position样式属性：设置列表项标记相对于列表项内容的位置，该属性有多个值：
值 描述
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

list-style-image样式属性：将列表项标记设定为指定的图片，一般和一个 “list-style-type”样式属性一起使用，以防图片不可用，该属性有多个值：
URL 图像的路径。
none 默认值。无图形被显示。

list-style样式属性：用于在一个声明中设置所有的所有的列表样式属性（即list-style-type、list-style-position和list-style-image），且该样式属性设置属性值时不需要设置所有列表样式属性所对应的属性值，未设置的列表样式属性会使用其默认值，但需要按照list-style-type、list-style-position和list-style-image顺序进行排列，中间用空格隔开。

超链接样式
CSS 伪类用于向某些选择器添加特殊的效果，伪类使用语法：
选择器 : 伪类 {
declaration1;
declaration2;
…
}
CSS中有7个CSS伪列，如下：
属性 描述
:active 向被激活的标签添加样式。
:focus 向拥有键盘输入焦点的标签添加样式。
:hover 当鼠标悬浮在标签上方时，向标签添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
注意：如果:link、:visited、:hover和:active一起使用，为了产生预期的效果，在 CSS 定义中，:hover 必须被置于 :link 和 :visited 之后，:active 必须被置于 :hover 之后。、

光标形状样式
cursor样式属性用于设定光标的显示形状，该属性有多个值：
值 描述
url 需使用的自定义光标的 URL。
注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default 默认光标（通常是一个箭头）
auto 默认值。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）