《Web编程基础》课件第3章 CSS样式

目标-1-了解CSS的特点及优势掌握CSS的基本语法及样式规则掌握类选择器和ID选择器的定义方式掌握CSS选择符的组合定义掌握CSS的继承特性掌握样式表的引用方式及优先级掌握伪类及伪对象的使用方式掌握CSS样式中常用的属性设置CSS的概念CSS（CascadingStyleSheets，层叠样式表）-2-单纯使用HTML在排版和界面效果上具有局限性CSS解决了网页界面排版的难题HTML的标签：定义网页的内容CSS：网页内容如何显示样式规则样式规则样式表由样式规则组成，这些规则用于定义文档的样式，即告诉浏览器如何显示文档。样式规则由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。

selector是选择符，最普通的选择符就是HTML标签的名称。property1、property2和propertyN为属性名；value是为对应属性名指定的值；每对属性名/属性值后一般要跟一个分号（括号内只有一对名/值的情况除外）示例：3.1CSSBaseEG1.html-3-selector{property1：value;property2：value;......propertyN：value;}选择符选择符用于指定需要修饰的元素常用的选择符主要有三类HTML选择符ID选择符类选择符-4-HTML选择符HTML选择符

使用HTML标签作为选择符，指定页面中此类元素的样式任何HTML标签都可以作为选择符-5-P{text-indent:3em}Table{border:1pxsolidred}<p>标签的样式<table>标签的样式类选择符类选择符使用类选择符，可以把相同的元素分类定义为不同的样式示例：3.2ClassCssEG1.html也可以不指定HTML元素，直接用“.”加上类名称，这样可以使不同的元素共享同样的样式，提高了代码的灵活度和复用度示例：3.3ClassCssEG2.html-6-selector.classname{property1：value;...}.classname{property1：value;...}ID选择符ID选择符

通过ID选择符为某个单一元素定义单独的样式示例：3.4CSSBaseEG2.html-7-#IDName{property1：value;...}IDName指定元素的ID组合选择符选择符的组合当有多个选择符需要设置相同的属性和属性值时，可以用逗号将选择符隔开进行组合定义，即一次性设置多个选择符的属性和属性值，这样可以减少样式重复定义示例：3.5SelectorGroupEG.html包含选择符是另外一种形式的组合定义-8-selector1,selector2,...{property1：value;...}tablea{font-size:12px}table和a之间没有通过逗号隔开，该样式定义的是：在表格内的链接的文字大小为12象素，而表格外的链接的文字仍为默认大小样式表的继承样式表的继承是指内部元素自动具有外部元素的样式示例：3.6inherEG.html-9-<div><p> ABCD</p></div><p>元素为<div>元素的内部元素，所以文字“ABCD”将使用<div>上规定的样式。当内部元素与外部元素的统一样式不一致时，将采用内部样式使用样式表-1CSS的使用方式有以下几种：内嵌样式（InlineStyle）内部样式表（InternalStyleSheet）外部样式表（ExternalStyleSheet）

内嵌样式内嵌样式是指将CSS语句混合在HTML标签中使用的方式，CSS语句只对其所在的标签有效，内嵌样式通过所在标签的style属性声明示例代码如下：-10-<h1style="color:green;font-size:38px;font-family:impact">CSS样式</h1>使用样式表-2内部样式表

内部样式表是指在HTML的<style>标签中声明样式的方式。内部样式表通过<style>标签声明，只对所在的网页有效示例：3.1CSSBaseEG1.html外部样式表外部样式表是指将CSS样式表保存成一个独立的文件，然后将该文件引用到网页中的方式。样式表文件名采用后缀“css”示例：3.7EsscssEG.html样式表引入的优先级当在同一个网页中同时使用多种方式引入CSS样式时，样式采用的优先级从高到低依次是内嵌→内部→外部→浏览器缺省-11-这种方式适合于多个网页需要引用大量相同的CSS样式的情况。伪类伪类伪类通过在原有的样式选择符后添加伪类名称来定义selector:选择符pseudo-class:伪类名称例如：表示<a>元素在鼠标经过时使用的样式-12-selector:pseudo-class{property1:value;...}伪类用于指定元素在某种状态下的样式a:hover{color:red}使用伪类锚标签的伪类锚标签有四种状态的伪类，分别为未被访问前、鼠标悬停时、被用户激活时（鼠标已点击但未释放）、被访问过后。示例：3.8PseudoClassEG.html结合类选择符将锚伪类和类选择符结合使用，可以在同一个页面做出多组不同的链接效果示例：3.9PseudoAndClassEG.html伪类名说明link设置对象在未被访问前的样式hover设置对象在其鼠标悬停时的样式active设置对象在被用户激活（在鼠标点击与释放之间）时的样式visited设置对象在其链接地址已被访问过时的样式-13-伪对象伪对象与伪类的方式类似，伪对象通过对插入到文档中的虚构元素进行触发从而实现设定的样式首行伪对象首行伪对象（first-line）设置对象内的第一行的样式示例：代码3-10FirstLineEG.html首字母伪对象首字母伪对象（first-letter）设置对象内第一个字母的样式示例：代码3-11FirstLetterEG.html-14-selector:first-line{property:value...}selector:first-letter{property:value...}伪对象用于设置元素某一部分的样式CSS文本样式属性文本属性文本属性主要用于块标签中文本的样式设置，常用的属性有缩进、对齐方式、行高、文字和字母间隔、文本转换和文本修饰等。示例：3.12TextCssEG.html文本属性功能取值方式text-indent实现文本的缩进长度（length）：可以用绝对单位（cm，mm，in，pt，pc）或者相对单位（em，ex，px）；百分比（%）：相对于父标签宽度的百分比text-align设置文本的对齐方式left：左对齐；center：居中对齐；right：右对齐；justify：两端对齐line-height设置行高数字或百分比，具体可参考文本缩进的取值方式word-spacing文字间隔，用来修改段落中文字之间的距离缺省值为0。word-spacing的值可以为负数。当word-spacing的值为正数时，文字之间的间隔会增大，反之，word-spacing的值为负数时，文字间距就会减少letter-spacing字母间隔，控制字母或字符之间的间隔取值同文字间隔类似text-transform文本转换，主要是对文本中字母大小写的转换uppercase：将整个文本变为大写；lowercase：将整个文本变为小写；capitalize：将整个文本的每个文字的首字母大写text-decoration文本修饰，修饰强调段落中一些主要的文字none、underline（下划线）、overline（上划线）、line-through（删除线）和blink（闪烁）-15-CSS文字样式属性文字属性CSS中通过一系列的文字属性来设置网页中文字的显示效果，主要包括文字字体、文字加粗、字号、文字样式。示例：3.13FontCssEG.html文字属性功能取值方式font-family设置文字字体文字字体取值可以为：宋体、ncursive、fantasy、serif等多种字体font-weight文字加粗normal：正常字体；bold：粗体；bolder：特粗体；lighter：细体font-size文字字号absolute-size：根据对象字体进行调节；relative-size：相对于父对像中字体尺寸进行相对调节；length：百分比。由浮点数字和单位标识符组成的长度值，不可为负值。其百分比取值是基于父标签中字体的尺寸font-style文字样式normal：正常的字体；italic：斜体；oblique：倾斜的字体-16-CSS背景样式属性背景属性CSS中通过一系列的文字属性来设置网页中文字的显示效果，主要包括文字字体、文字加粗、字号、文字样式。示例：3.14BackGroundEG.html背景属性功能取值方式background-color设置对象的背景颜色属性的值为有效的色彩数值background-image设置背景图片可以通过为url指定值来设定绝对或相对路径指定网页的背景图像background-repeat背景重复，设置一个指定的背景图象如何被重复repeat：背景图像平铺（有横向和纵向两种取值：repeat-x：图象横向重复；repeat-y：图象纵向重复）；norepeat：背景图像不平铺background-attachment背景附加，设置指定的背景图像是跟随内容滚动，还是固定不动scroll：背景图像是随内容滚动；fixed：背景图像固定即内容滚动图像不动background-position背景位置，确定背景的水平和垂直位置左对齐（left）、右对齐（right）、顶部（top）、底部（bottom）和值（自定义背景的起点位置，可对背景的位置做出精确的控制）background该属性是复合属性即上面几个属性的随意组合，它用于设定对象的背景样式该属性的取值实际上对应上面几个具体属性的取值-17-CSS定位样式属性定位属性定位属性主要从定位方式、层叠顺序、与父标签的相对位置等三个方面来设置。示例：3.15PositionCssEG.html定位属性功能取值方式position定位方式，设置对象的是否定位，以及定位的方式static：无特殊定位；relative：对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置；absolute：将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位z-index设置对象的层叠顺序auto：遵循其父对象的定位；自定义数值：无单位的整数值，可为负值top、right、bottom、left父对象的相对位置auto：无特殊定位，自定义数值：由浮点数字和单位标识符组成的长度值，或者百分数。必须定义position属性值为absolute或者relative此取值方可生效-18-如果两个绝对定位对象的z-index具有同样的值，那么将依据它们在HTML文档中声明的顺序来决定其层叠顺序。CSS边框样式属性边框属性边框属性用来设置对象边框的颜色、样式和宽度。边框颜色用于设定边框的颜色（border-color）。颜色的设置有4个参数，根据赋值个数的不同，会有以下几种情况：如果在设定颜色时提供四个颜色参数，将按上

右

下

左的顺序作用于四个边框。如果只提供一个颜色参数，则应用于四个边框。如果提供两个参数，第一个用于上、下边框，第二个用于左、右边框。如果提供三个参数，第一个用于上边框，第二个用于左、右边框，第三个用于下边框。边框样式用于设定边框的样式（border-style）。边框样式同样有4个参数，赋值方式与边框颜色相同。-19-CSS样式属性-6边框宽度用于设定边框的宽度（border-wi