第三章 CSS基础 课件 -2022-2023学年高一下学期（中职）《网页设计与制作》（高等教育出版社）

网页设计与制作 第03章 CSS基础 本章内容 CSS简介 CSS基本语法 CSS选择器类型 CSS样式表类型 2 网页设计与制作 3.1 CSS简介 CSS的英文全称是Cascading Style Sheets，中文意思为级联式风格纸，简称样式表。样式是将网页内容和内容风格分离的一种语言，能够对HTML控制的内容进行格式的控制，如文字的大小，段落的宽度，列表的标记等等。 CSS功能很强大，能够控制几乎所有的网页元素，进行丰富的风格定义。它不仅可以在HTML中使用，还可以用于XML和JavaScript中。现在几乎所有漂亮的网页都会用CSS，它已经成为网页设计中必不可少的工具之一。 3 网页设计与制作 3.2 CSS基本语法 3.2.1 CSS的基本结构 1.CSS规则结构 样式表的每一个规则由两个部分组成：选择器（selector）和声明（declaration）。选择器确定网页中哪个内容受控制，声明则由一个或多个属性值对组成。其基本语法如下： selector{属性1：属性值1; 属性2：属性值2;……属性n：属性值n} 说明： （1）selector表示希望进行格式化的元素，可以是HTML标签，也可以是类或其他类型的选择器。 （2）声明部份必须放置在选择器后的大括号内。 （3）属性和值之间以冒号进行间隔，属性值对之间以分号进行间隔。 4 网页设计与制作 注释 在样式表中需要添加注释来帮助设计者记住复杂的样式规则的应用范围和作用，便于维护和应用。以“//”实现单行注释，/*注释内容*/实行多行注释。 示例 对块级元素段落中的文字进行风格设置，文字大小为12像素，文字颜色为红色，其格式如下： P{ font-size:12px; color:red } //对段落文字进行大小和颜色设置 5 网页设计与制作 3.2 CSS基本语法 3.2.2 CSS规则定义 CSS的规则定义，即对网页内容和结构进行样式属性设置，如文本属性、背景属性、边框属性和定位属性等。 文本属性 Font-family：设置样式字体。 Font-size：设置字体大小。可以通过选择数字和度量单位来选择特定的大小，也可以选择相对大小。 Font-weight：设置字体粗细效果。“正常”等于400，“粗体”等于700。 Font-style：指定“正常”、“斜体”或“偏斜体”作为字体样式，默认设置为“正常”。 Font-variant：设置文本的小型大写字母变体。 Line-height：设置文本所在行的高度。习惯上将该设置称为行高。选择“正常”自动计算字体大小的行高，或输入一个确切的值并选择一种度量单位。两种浏览器都支持行高属性。 Text-transform：将所选内容中每个单词的首字母大写或将文本设置为全部大写或小写。 Text-decoration：向文本中添加下划线、上划线或删除线，或使文本闪烁。常规文本的默认设置是“无”。链接的默认设置是“下划线”。将链接设置设为无时，可以通过定义一个特殊的类去除链接中的下划线。 Color：设置文本颜色。 网页文件的不同后缀名代表着不同类型的网页。 6 网页设计与制作 3.2 CSS基本语法 背景属性：定义CSS样式的背景设置。可以对网页中的任何元素应用背景属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。 Background-image：设置元素的背景图片。 Background-repeat：确定是否以及如何重复背景图像。“不重复”是只在元素开始处显示一次图像。“重复”是在元素的后面水平和垂直平铺图像。“横向重复”和“纵向重复”是分别显示图像的水平带区和垂直带区。图像被剪辑以适合元素的边界。 Background-attachment：确定背景图像是固定在其原始位置还是随内容一起滚动。注意，某些浏览器可能将“固定”选项视为“滚动”。Internet Explorer支持该选项，但Netscape Navigator不支持。 Background-position(X)和Background position(Y)：指定背景图像相对于元素的初始位置。这可用于将背景图像与页面中心垂直(Y)和水平(X)对齐。如果附件属性为“固定”，则位置相对于“文档”窗口而不是元素。 7 网页设计与制作 3.2 CSS基本语法 区块属性：定义标签和属性的间距和对齐设置。 Word-spacing：设置字词的间距。若要设置特定的值，请在弹出菜单中选择“值”选项，然后输入一个数值。在第二个弹出菜单中选择度量单位（如像素、点等）。 Letter-spacing：增加或减小字母或字符的间距。若要减小字符间距，请指定一个负值（如-4）。字母间距设置覆盖对