网页设计 NO6.pptVIP

CSS样式表 CSS简介 CSS的使用 网页设计 1、CSS的概念 Cascading Style Sheet “层叠样式表”或“级联样式表” “样式表” CSS简介 2、为什么使用CSS 减少工作量（？） CSS简介 1、CSS的基本语法 选择符{样式属性：取值;样式属性：取值;..} body{color:black} CSS的使用 2、选择符 (1)类选择符（?） (2)ID选择符 (3)包含选择符 CSS的使用 2.1、类选择符 把相同元素分类定义成不同的样式。 .类名{样式属性:取值;样式属性:取值;...} 注意： 类名是任意英文单词或以英文开头与数字的组合 CSS的使用 3、添加CSS的方法 内部样式表（?）---重点掌握 链入外部样式表（?）---理解应用 导入外部样式表（?） 内嵌样式（?） CSS的使用 3.1、内部样式表 把样式表的内容直接放到页面的head/head区域内。 CSS的使用 3.2、内部样式表语法 style type=“text/css“ !-- 选择符{样式属性:取值;样式属性:取值;...} 选择符{样式属性:取值;样式属性:取值;...} -- /style CSS的使用 3.3、链入外部样式表 把样式表单独存为一个文件，然后在页面中用link标记链接,link标记必须放在head区域内。 CSS的使用 3.4、链入外部样式表语法 link rel=“stylesheet” type=“text/css” href=“样式表文件的地址” CSS的使用 4、书写CSS注意事项 (1)属性值为多个单词时，必须使用引号将属性值引起来 (2) 对一个选择符制定多个属性，需要使用分号将属性和值分离 (3) 将具有相同属性和值的选择符组合起来，用逗号分割 (4) css的注释 /* 注释内容 */ CSS的使用 5、设置CSS的字体属性 (1)字体：font-family (2) 字体大小：font-size (3)字体风格：font-style (4) 加粗字体：font-weight CSS的使用 5.1、设置CSS的字体 语法：font-family:”字体1” ,”字体2” ,....... 01font-family.html CSS的使用 5.2、设置CSS的字体大小 语法：font-size：字体大小取值 绝对大小 相对大小 长度值（?） 百分比 CSS的使用 5.2.1、CSS的字体长度值单位 pt—点（?）（1点=1/72英寸） px—像素 in—英寸 02font-size.html CSS的使用 5.3、字体风格 语法： font-style ：样式取值 normal—正常 italic—斜体 Oblique—偏斜体 03font-style.html CSS的使用 5.4、加粗字体 语法： font-weight：字体粗度值 normal：正常粗细 bold：粗体 bolder：特粗体 lighter：特细体 具体数字：100~900 04font-weight.html CSS的使用 6、颜色及背景属性 颜色属性设置 背景颜色 背景图像 背景重复 CSS的使用 6.1、颜色属性设置 语法： color:颜色名称或者代码 07color.html CSS的使用 6.2、背景颜色 语法： background-color:颜色名称或者代码 08background-color.html CSS的使用