CSS 教教 程程网页制作系列制作 2021/3/91 一本优秀的杂志不仅仅是具备一套完整的结构内容、巧妙出奇的页面布局，还需要一个统一的风格，好的风格代表了一种高级的品味高级的品味。 优秀的网页制作也不再是漂亮的图形、优美的布局和完整的结构就能满足了，使网站整体保持一致的风格，例如字体字形的显示，页面边距等等，也是使网站作品有美感有品味的关键一步。 层叠样式表为你完成这一任务。层叠样式表为你完成这一任务。2021/3/92通过大量的 HTML 语言实现，即每次遇上标题，用 HTML 标签进行设置： 这里是标题 显然你很容易就会为之头大如斗的，即使你有很好的耐心却难保挂一漏万，设置一多就会有所疏忽。 最后，对于公司建设的大型站点来说，往往分成几个组各自开发，这时候就更需要一个统一的样式表来规划网站的整体面貌，各个组都在遵循这统一的样式表各个组都在遵循这统一的样式表的基础上进行各自的开发建设。 2021/3/93HTML 语言由标志和属性构成，语言由标志和属性构成， CSS 也是如此。也是如此。样式表基本语法：样式表基本语法： HTML 标志 标志属性：属性值；标志属性：属性值；标志属性：属性值； 样式表放在不同的地方，产生作用的范围也不同。大致来说，样式表分为内联样式表内联样式表和外联样式外联样式表表，即有页面内页面内放置、外部引用外部引用、外部导入外部导入三种方式。2021/3/94 1 、内联样式表、内联样式表 例如我们要设置一 HTML 页面中所有 H1 标题字显示为蓝色，其代码如下： This is a CSS samples . 页面内容 1.样式表信息包括样式表信息包括在在 和和 标记中标记中。2.放到放到 和和 中去。中去。3.整个页面中产生作用，整个页面中产生作用，2021/3/95注意， 1. 标记中包括了 TYPE “text/css” ，这是让浏览器知道你是使用 CSS1 样式规则。2. 加入 这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该段代码忽略不计。 2021/3/96在使用样式表时，经常会有多标志用同一个属性在使用样式表时，经常会有多标志用同一个属性比如： B color: red I color: red H1 color: red 用逗号分隔各个 HTML 标志，把三行代码合并成一行，我们可以写成： B,I,H1 color: red 同一个 HTML 标志，可能定义到多种属性多种属性，例如，我们规定把从 H1 到 H6 各级标题定义为红色黑体字，带下划线，则应写为： H1,H2,H3,H4,H5,H6 color: red; text-decoration: underline; font-family: 黑体黑体 注意各个标志属性之间用分号隔开分号隔开。2021/3/97内联样式表还包括一种直接插入方式直接插入方式，即单独指定 HMTL 页面中某一个标志，规定其风格样式，可以写为： 定义该表格内的字符大小为 10pt ，颜色为蓝色。2021/3/98 2 、外部样式表、外部样式表 建立一个完全独立的文本文件，其扩展名为扩展名为 .css ，文件内容则输入样式表信息，除去任何相关的除去任何相关的 HTML 语言语言。 例如在外部样式表中输入： body line-height: 130pt H1,H2,H3,H4,H5,H6 color: red; text-decoration: underline; font-family: 黑体黑体 b font-style: italic; color: #FF3333; text-decoration: underline 少了少了 和注释标记和注释标记。保存为 example.css 。 2021/3/99有两种两种办法可以实现引用外部样式表。引用外部样式表。 （一）使用（一）使用 标记链接外部样式表标记链接外部样式表 HREF 中应包含路径信息路径信息。 一个 HTML 文档可引用多个外部样式表，例如： 首先链接的 example.css 作为该文档缺省缺省样式表，当样式定义产生冲突时冲突时首先满足前者满足前者。 2021/3/910（二）使用（二）使用 IMPORT 导入样式表信息导入样式表信息 存在于在存在于在 和和 标记中标记中例如： import “example.css”; import “style/other.css”; 样式表产生作用的优先级优先级按照导入的先后顺序先后顺序来设定。样式表信息规则一多，就比较容易产生冲突冲突。这时就看哪一个样式表被引用在前，它就是具有第一优先权的。2021/3/911四、创建四、创建CLASS 同一个HTML标志有多种风格时。应该创建类（CLASS），也可直接插入方式可以一一的对之进行定义，但繁琐。 定义定义语法为： 标志标志.类名类名 标志属性标志属性：属性值；：属性值； 标志属性标志属性：属性值；：属性值； 标志属性：属性值标志属性：属性值 引用引用方法是： 2021/3/912例如，我们打算让某一些段落缩进0.5in，另一些段落缩进1.0in，我们知道段落采用这个标记。 代码如下： This is a sample 这个段落将缩进这个段落将缩进0.5in这个段落将比上面缩进一倍距离这个段落将比上面缩进一倍距离 2021/3/913可以直接定义CLASS，应用于HTML页面中的各个标记。其语法只是比上面的少了一个标志： .类名类名标志属性标志属性：属性值；标志属性：属性值；标志属性：属性值 例如： 引用的方法： 例如 设置某单元格中的字符大小： 设置某一段落字符： 2021/3/914用ID建立多种风格，实现同一规则被应用到页面中不同的地方。 语法是： #id名名 标志属性：属性值；标志属性：属性值；标志属性：属性值 如上面的例子，可以改写为： 引用的方法也相同：。 2021/3/915伪类和伪元素伪类和伪元素伪类和伪元素是特殊的类和元素特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分伪元素指元素的一部分，例如段落的第一个字母。伪类或伪元素规则的形式如选择符选择符:伪类伪类 属性属性: 值值 或 选择符选择符:伪元素伪元素 属性属性: 值值 伪类和伪元素不应用伪类和伪元素不应用HTML的的CLASS属性来指定属性来指定。一般的类可以与伪类和伪元素一起使用，如下:选择符选择符.类类: 伪类伪类 属性属性: 值值 或 选择符选择符.类类: 伪元素伪元素 属性属性: 值值 2021/3/916定位锚伪类定位锚伪类伪类可以指定A元素以不同的方式显示连接连接(links)、已访问连已访问连接接(visited links)和可激活连接可激活连接(active links)。定位锚元素可给出伪类link、visited或active。A:link color: red A:hover color: yellow A:active color: blue; font-size: 125% A:visited color: green; font-size: 85% 首个字母伪元素首个字母伪元素首个字母首个字母伪元素用于加大(drop caps)和其他效果 P:first-letter font-size: 300%; float: left 2021/3/917五、边框属性五、边框属性 每一个网页都可以理解成是被一个方框框起来每一个网页都可以理解成是被一个方框框起来的的，而页面中不同的部分又可以分为一个个小的方框一个个小的方框。因此定义方框的边距、边界、颜色等的边框属性应用而生。 1、边距属性：、边距属性： 左边距（margin-left） 右边距（margin-right） 上边距（margin-top） 下边距（margin-bottom） 边距（margin）边距属性定义HTML页面中方框四边方框四边和其他元素其他元素之间的空白距离，每一个margin-side属性只影响到一条边，而margin则提供了一个同时设置四个边距的机会。2021/3/9182、填充属性：、填充属性： 左填充（padding-left） 右填充（padding-right） 上填充（padding-top） 下填充（padding-bottom） 填充（padding）填充属性设置边框和内部元素的距离。它和边距属性十分相似，每个padding-side定义一个边框距离，padding则同时定义四个距离则同时定义四个距离。2021/3/9193、边界属性（、边界属性（ 3.1 边界宽度）边界宽度） 上边界宽（border-top-width） 右边界宽（border-right-width） 下边界宽（border-bottom-width） 左边界宽（border-left-width） 边界宽（border-width 这几个属性定义边界宽度，用thin、medium和和thick分别表示细、中等和粗表示细、中等和粗，或者指定具体的数值来定义边界的宽度。 2021/3/9203.2 边界样式（border-style） 该属性用以定义边框的风格呈现式样。共有九种。 none 不显示边框，为缺省值dotted 点线dashed 虚线solid 实线double 双线groove 凹线ridge 凸线inset 使整个方框凸起outset 使整个方框凹陷 上边界（border-top） 右边界（border-right） 下边界（border-bottom） 左边界（border-left） 边界（border） 这几个是简写属性，它集合了上面几种属性的特点，可使用其给边框一次性定义宽度、式样和颜色。各属性值之间用空格隔开。2021/3/9213.3 边界颜色（边界颜色（border-color） 这个属性定义边界的颜色，可以用16种颜色种颜色名或名或RGB值来设置值来设置。16种颜色名分别为：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。RGB值则应表示为#RRGGBB或r%,g%,b%。 #rrggbb (如，#00cc00) rgb(x,x,x) x是一个介乎0到255之间的整数 (如，rgb(0,204,0) rgb(y%,y%,y%) y是一个介乎0.0到100.0之间的整数 (如，rgb(0%,80%,0%) 2021/3/9223.4、尺寸属性尺寸属性 定义方框的宽度width和高度height。 例：DIV.sample width: 300px; height: 200px 3.5、浮动和清除属性浮动和清除属性 浮动属性是指某一对象在母体元素内的浮动位置，清除清除属性和浮动属性一起使用属性和浮动属性一起使用，则表示同一母体内的其他对象可以流到浮动对象的旁边。 例： .float1 float: left; clear: right 假如这个样式定义在表格单元中的某个对象，则该对象将浮动在单元中的左边，而同一单元格中的其他对象在它右边的周围部分。 - #logofloat:right2021/3/923clear : none | left |right | both 参数：none : 允许两边都可以有浮动对象both : 不允许有浮动对象left : 不允许左边有浮动对象right : 不允许右边有浮动对象div clear : left img float: right 2021/3/924这里是一个比较完整的例子，把这个例子按样输入，建立一个HTML文件，看看它的显示样式： a sample !- DIV.example margin-left: 20px; padding-top: 50px; border: 10px red outset; float: right clear: none 这是一个关于边框属性的完整实例 看看它的显示风格 2021/3/925六、字体属性六、字体属性 字体属性共分五种字体属性共分五种：字体家族（font-family）、字体风格（font-style）、字体变体（font-variant）、字体黑度（font-weight）、字体尺寸（font-size）;此外font属性是一个总体属性属性是一个总体属性，可一一指定以上各种属性和属性值。 1、字体家族（font-family） 通过font-family指定字体类型，其语法为： 标记 font-family: 字体类型，字体类型，字体类型 例：例：p font-family: Times New Roman, arial, serif 假如字体类型之间有空格，就象Times New Roman，必须用引号引号将之括起，中文字体中文字体也须用括号括号括起，列出多种类型，以防浏览用户无前面的字体类型时，可以用后一以防浏览用户无前面的字体类型时，可以用后一种字体类型将之取代。种字体类型将之取代。 2021/3/9262、字体风格（、字体风格（font-style） 属性值：normal（普通）、italic（斜体）、oblique（倾斜），默认值为normal。 例：h1 font-syle: italic 3、字体变体（、字体变体（font-variant） 属性值：normal（普通）和small-caps（小型大写字母），缺省值为normal。 字体变体属性是让字体以小型大写方式来显示。小型大写方式看起来是一般大写字母的7580左右。 该变体在某些需要特殊表现的标题中比较有用。例： H1 font-variant: small-caps 4、字体加粗（、字体加粗（font-weight） 属性值：normal、 bold、 lighter、 bolder、以及数值100900。 该属性用以指定字体粗细的显示，并不是所有字体都可以显示这些指定的加粗程度，因此有些情况下这些指定值会被替代，例如100到300被lighter替代，600到900则替换bolder，反之亦然。例： h1 p 2021/3/9275、字体尺寸（、字体尺寸（font-size） 字体尺寸可设置绝对尺寸、相对尺寸、长度、百分比。绝对尺寸、相对尺寸、长度、百分比。 绝对尺寸绝对尺寸分为分为xx-small, x-small, small, medium, large, x-large, xx-large七种七种，它们以各种字体的medium尺寸成比例缩放，每一级一级1.5倍倍。 相对尺寸相对尺寸有larger和smaller两种，根据字体原来的大小来决定缩放以后的大小。 长度长度是以pt, points, cm, mm, inch等度量单位用具体数值来指定字体的尺寸大小。 百分比百分比是把字体设置成原来尺寸的百分比值，可以任意指定数值。例如： h1 font-size: 150% td font-size: 10pt p font-size: smaller 2021/3/9286、字体（font） 该属性使你可以把上述字体的各种属性合并属性合并到一行代码中指定，也即提供了一个实现字体属性的快捷方式，各种属性值之间用空格隔开空格隔开。例如： td font: italic bold 12pt 方正楷体简体方正楷体简体，宋体宋体 2021/3/929七、文本属性七、文本属性 文本属性设置文本的一些显示特性，例如文本对齐对齐、文本缩进缩进、行间距间距、字间距等。 1、文本对齐、文本对齐text-align 属性值：left（左）, right（右）, center（居中）, justify（两端对齐）。 例：h1 text-align: center 2、文本缩进、文本缩进text-indent 该属性有效的控制了文本段落第一行的缩进，其值可以指定，是长度或段落宽度的百分比。例： p text-indent: 1.0 in 3、行高、行高line-height 该属性设置行与行之间的间距，其值可以为数值、长度或百分比，百分比以行高为基础。例： body line-height: 120% 4、字间距、字间距letter-spacing 字间距设置字与字之间的距离，同样可以用数值、长度或百分比来指定，百分比以字符大小为基础。例： body letter-spacing: 0.5em 顺便提一下，文本属性中还有一个单词间距（word-spacing），设置每个单词之间的距离，对于中文页面来讲，可能很少用到。 2021/3/9305、文本装饰、文本装饰text-decoration 属性值：underline（下划线）, overline（底线）, line-through（线穿过）, blink（闪烁）, none(无)。例： h3 text-decoration: underline 6、垂直对齐、垂直对齐vertical-align 属性值：baseline（基准线）, super（上标）, sub（下标）, top（顶部）, text-top（文本顶部）, middle（中）, bottom（底部）, text-bottom（文本底部）和百分比。 通过不同的值设某对象相对其他文本的位置，特别有用的是，上标、下标上标、下标成为可能。例： 平方值：平方值：32 2021/3/9317、文本变换text-transform 属性值：capitalize（首字母大写）, uppercase（大写）, lowercase（小写）和none（无）。缺省值为none。例： p text-transform: capitalize 2021/3/932八、颜色与背景属性八、颜色与背景属性 在很多时候，要用到颜色属性颜色属性，指定文本段落、标题、背景等的颜色，背景属性则用于设定背景图像在浏览器中的显示方式。 1、颜色属性：、颜色属性：color 属性值：属性值：16种颜色名（上文已经介绍过）、数值（#RRGGBB或是r%,g%,b%）。 在、及其单元元素、标题等对象都可以用到color属性。下例指定超链接的初初始颜色始颜色和被激活时被激活时的颜色： a color: green a:hover color: red 2021/3/9332、背景属性、背景属性 background-color定义页面或指定对象的背景颜色，属性值和颜色属性相同。 background-image属性值：none, url（address），包括相对路径相对路径和和绝对路径绝对路径，指定对象的背景图像。 background-repeat属性值：no-repeat（无重复）, repeat（重复重复）, repeat-x（x方向重复）, repeat-y（y方向重复），缺省值为缺省值为repeat，指定背景图像的显示方式。该属性需与background-image和background-position组合使用。 background-attachment属性值：scroll（随对象一起滚动）, fixed（固定），缺省值为缺省值为scroll。该属性指定对象的背景图像是否与对象一起滚动滚动，或是固定在页面上的某一个位置。这个属性与background-image组合使用。 background-position属性值：垂直位置vertical，指定top, center, bottom和具体数值、百分比；水平位置horizontal，指定left, center, right和具体数值、百分比。定义背景图像的绝对或相对位置显示。 2021/3/934这是一个简写属性，可以把上述所有背景属性归纳到一行代码中定义。 这里是一个较完整的例子： body background-image: url(yueju/images/002.gif); background-repeat: no-repeat; background-position: 20px 50px; background-attachment: fixed 用background属性简写简写为： body background: url(yueju/images/002.gif) no-repeat 20px 50px fixed 2021/3/935九、分类属性九、分类属性 分类属性控制了浏览器的显示方式浏览器的显示方式，我们知道在HTML语言中，对于对于空格和换行的处理是缺陷所在空格和换行的处理是缺陷所在，分类属性的到来使这些特性的控制成为可能。 分类属性包括显示显示属性、属性、空白空白属性和属性和列表列表属性属性。下面一一的介绍。 1、显示属性、显示属性display 通过显示属性控制HTML页面中被定义对象在浏览器中的显示方法。这个属性有四个值： 块（block）在该对象前后自动增加分行符例：texttext图像前后的文字将与图像分行显示。 内联（inline）这个对象前后的元素与之在一行显示这个属性值正好相反，当需要对象对象与前一元素前一元素强制性在同一行在同一行时使用该值。 列表项（list-item）加一个列表项标记，其余同块该属性值与、等列表标记一起使用。 无（none）对象不显示 该属性值在某种情况下很有用，比如事先隐藏正确答案，直到经过某种操作以后才显示。 2021/3/9362、空白属性、空白属性white-space 制表符、空格和换行泛称空白制表符、空格和换行泛称空白，HTML页面显示时，通常根据浏览器窗口的大小自动折行，多余的空白符忽略成一个空格。标记可以控制文本在浏览器中的显示，但该标记的限制性很大，只对一些非比例字体才有效，并且每次用到这个命令框起所有文本也相当麻烦，空白属性提供了这种方便。 空白属性有三个值： 普通（normal）该属性值保持浏览器自动换行的特性。 保持原样（pre）这个值与使用标记一样，告诉浏览器按照文本输入原样显示，并不自动折行。 不折行（nowrap）这个值把文本中的回车、换行和多个空格都显示成一个空格，换行只由标记来控制。2021/3/9373、列表属性、列表属性 1)列表样式类型list-style-type 该属性用以改变HTML中列表项的外形显示。它有下列值：disc（圆（圆盘）、盘）、circle（圆圈）、（圆圈）、square（正方）、（正方）、decimal（小数（小数点）、点）、lower-roman（小写罗马数字）、（小写罗马数字）、upper-roman（大写罗马数字）。（大写罗马数字）。 2)列表样式图像list-style-image 这个属性用来指定图像作为列表标记，缺省值为无缺省值为无，当它被设置时，list-style-type属性不显示，可使用绝对或相对位置指定图像。 例： 2021/3/9383)列表样式位置list-style-position 该属性决定了列表项标记放在列表项的什么位置，它的值有有inside（内部）和（内部）和outside（外部）（外部）。缺省值为外部，列表下一行缺省值为外部，列表下一行缩进显示；值为内部，列表下一行则不缩进显示。缩进显示；值为内部，列表下一行则不缩进显示。显示效果如下： 内部 内部显示 外部 外部显示 4)列表样式list-style 该属性提供了上述列表属性的快捷方法，其书写格式为： 元素元素 list-style:type position url 括号表示任选一种。 2021/3/939放映结束 感谢各位的批评指导！ 谢谢 谢！谢！让我们共同进步2021/3/940