第四章 css样式表的设置与应用

《第四章 css样式表的设置与应用》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计与制作计算机与网络中心张伟娜2021/10/6如何快速实现同一页面上不同内容具有相同的格式？2021/10/6如何在不同页面上快速实现相同的格式？2021/10/62021/10/6如何快速改版网页的风格？2021/10/6如何使HTML代码更简单更清洁？CSS2021/10/6主要内容CSS概述CSS样式的创建CSS样式的应用CSS样式的管理2021/10/61.什么是CSSCSS(CascadingStyleSheet,层叠样式表)是一组格式设置规则，用于控制网页样式并允许将网页表示形式与网页内容分离的一种标记

2、性语言。说明：CSS不是一种程序设计语言，而只是一种用于网页排版的标记性语言，是对现有HTML语言功能的补充和扩展。一、CSS概述2021/10/6提高页面浏览速度易于维护和改版方便灵活地控制网页外观一、CSS概述2.CSS的作用2021/10/61.CSS样式面板二、CSS样式的创建2021/10/62.创建CSS规则CSS通过对选择器进行设定，来实现对网页中的字体、字号、颜色、背景、图像及其他元素的控制。一、CSS样式的创建2.创建CSS规则2021/10/6选择器名称选择器类型二、CSS样式的创建说明文本区域新建样式

3、表文件:建立外部样式表,设置完成后，当前页面会套用新建样式；也可以将该样式表链接至他页面，实现一个样式表文件控制多个页的效果仅对该文档:建立内部样式表，设置完成后，当前页面会套用新建样式2.CSS规则的创建类选择器：可以应用于页面上的任何元素注：类名称必须以句点开头，并且可以包含任何字母和数字组合（例如，.myhead1）。ID选择器:定义包含特定ID属性的标签的格式，仅应用于一个HTML元素。注：ID必须以“#”开头，并且可以包含任何字母和数字组合（例如，#myID1）。2021/10/6二、CSS样式的创建2.CSS规

4、则的创建标签选择器：重新定义特定HTML标签的默认格式。复合内容选择器：定义同时影响两个或多个标签、类或ID的复合规则。例如，输入divp，则div标签内的所有p元素都将受此规则影响。2021/10/6二、CSS样式的创建2021/10/6案例:唐诗赏析设置index.html样式。设置“唐诗”样式标题1；隶书;30px;#993366;居中定义列表样式：项目符号图像：image/list.gif;位置：外;定义样式，应用于当前页中的“唐代”、“唐代的诗人”，并应用于ssh.html中的相应文字。黑体、16px,行高：30

5、px,#993366二、CSS样式的创建2021/10/63.CSS基本语法CSS的定义由两部分构成：选择器和声明(声明块)。选择器(selector)是标识已设置格式元素的术语。（如p,h1,类名称或ID）声明块用于定义样式元素。声明由两部分组成：属性property（如font-family）和值value（如Helvetica）。如:.list{list-style-image:url(image/list.gif);list-style-position:outside;}二、CSS样式的创建选择器属性2021/1

6、0/63.CSS基本语法CSS的定义格式:selector{propertyl：valuel；property2：value2；……}selector（选择器）表示需要改变样式的HTML元素property表示由CSS标准定义的样式属性属性是指元素所能够具有的特征。如字体、颜色等。value表示样式属性的值。属性值是指属性所能拥有的元素值。如Arial字体，red等。二、CSS样式的创建2021/10/63.CSS基本语法CSS样式定义示例h1{font-family:"隶书";font-size:30px;color:#

7、993366;text-align:center;}选择器属性属性值二、CSS样式的创建2021/10/64.CSS常用选择器HTML标签选择器类选择器ID选择器虚类选择器具有上下文关系的HTML标签选择器CSS的注释(/*……*/)二、CSS样式的创建4.CSS常用选择器1)HTML标签选择器例:body{color:red；font-size:36px;}h1{color:#0000FF;}p{color:#FF00FF;font-family:隶书;}h1,h2,h3{color:#ff0000}2021/10/6二

8、、CSS样式的创建2021/10/64.CSS常用选择器1)HTML标签选择器指定多个属性时，用分号;将所有的属性和值分开。如：p{font-family:"楷体_GB2312";color:red;}属性值是多个单词组成时，必须在值前面加双引号""。如：p{font-family:"楷体_GB2312