《CSS基本语法》PPT课件.ppt

第4章 CSS 4.1 CSS简介 4.2 CSS基本语法 4.3 CSS属性 4.4 引用CSS 4.5 HTML的 4.6 HTML的 4.1 CSS简介 nXML：只包含了数据信息，没有涉及文档如 何显示。注重数据结构化，赋予其明确的语 意，使之易于进行数据交换。 XML文档本身 是重内容而不重形式。 nCSS：层叠样式单Cascading Style Sheet ，建立文字图象内容和显示形式之间的关系 。是一种专门描述结构文档表现方式的文档 ，它可以描述这些文档如何在屏幕上显示， 也可以描述它们的打印效果，甚至声音效果 。样式单可以包含在XML文档内部，也可以 以独立的文档方式存在(后缀.css)。 nCSS有两个推荐标准：CSS1和CSS2。 CSS1于1996年12月通过，CSS2则于 1998年5月通过。CSS2是在CSS1的基础 上制定的，基本上涵盖了CSS1，并在 CSS1的基础上增加了媒体类型、特性选择 符、声音样式等功能，并对CSS1原有的一 些功能进行了扩充。 本课程使用css1。 nCSS文档中大小写不敏感 4.1 CSS简介 n例子student.xml： 学生花名册 李华 河北 15 62875555 张三 北京 14 82873425 4.1 CSS简介 q例子student.css：大小写不敏感 /*文件名:student.css*/ StudentList,student font-size:15pt; font-weight:bold; color:blue; display:block; margin-bottom:5pt; origin,age,telephone font-weight:bold; font-size:12pt; display:block; color:block; margin-left:20pt; name font-weight:bold; font-size:14pt; display:block; color:red; margin-top:5pt; margin-left:8pt; 4.1 CSS简介 q显示效果 4.1 CSS简介 nCSS基本语法：注意冒号和分号 选择符属性名1: 属性值1; 属性名2: 属性值2; n选择符：元素标记名 n元素标记名：如果有多个标记，用逗号分开 nClass选择符，ID选择符或上下文选择符。 n规则表：一个或多个属性和属性值组成， 由分号隔开，每个样式定义格式为 属性名: 属性值 nCSS注解：格式为：/*字符串* 4.2 CSS基本语法 n大小写问题：CSS文档中大小写不敏感，但 是XML大小写敏感，因此XML为了使用CSS ，各元素的标记名要完全不同，而不仅仅是 大小写不同 4.2 CSS基本语法 n属性解释： nfont-family属性：字体名，比如“宋体“等 nfont-size属性：字体大小，取值用数字即可 nColor属性： 前景色，可以用6位16进制数 字，表示rgb三分量。也可以用red， yellow等。 nbackground-color属性：背景色。 4.2 CSS基本语法 nClass选择符：一个class选择符是一个任意字 符串，为它定义一个样式，用于任何引用此名 字的标记。 n定义语法格式1： *.class选择符名属性名1：属性值1; 属性名2：属性值2; *一般省略，表示适用于所有标记。 n定义语法格式2： 标记名.class选择符名属性名1：属性值1; 属性名2：属性值2; 该格式只用于指定的标记。 4.2.1 Class选择符 n引用语法： Xxx表示标记，对于定义格式2，Xxx只能是 定义时指定的标记。 n定义例子1： .x1color:red;font-familt:黑体 x1是class选择符，它定义了样式红色黑体 n引用例子1：表示 该使用x1样式。x1可以用于其 他任何标记。 4.2.1 Class选择符 n定义例子2： origin.x2color:blue;font-familt:黑体 x2是class选择符，它定义了样式蓝色黑体 n引用例子2：表示 该使用x2样式。x2不能用于除 了origin外的其它标记。 nClass选择符特点：样式定义对任何允许引 用的标记生效，如果不引用则不使用，增 加了灵活性。 4.2.1 Class选择符 n例子student.xml： Class选择符 学生花名册 李华河北 15 62875555 张三 北京 14 82873425 4.2.1 Class选择符 q例子student.css： Class选择符 /*文件名:student.css*/ StudentList font-size:15pt; font-weight:bold; color:blue; display:block; margin-bottom:5pt; age,telephone font-weight:bold; font-size:12pt; display:block; color:block; margin-left:20pt; name font-weight:bold; font-size:14pt; display:block; color:red; margin-top:5pt; margin-left:8pt; .x1 font-size:25pt;color:red; origin.x2font-size:42pt; color:blue; 4.2.1 Class选择符 n运行效果： 4.2.1 Class选择符 nid选择符：一个id选择符是一个任意字符串 ，为它定义一个样式，用于任何引用此名 字的标记。 n定义语法格式1： #id选择符名属性名1：属性值1; 属性名2：属性值2; n定义语法格式2： 标记#id选择符名属性名1：属性值1; 属性名2：属性值2; 该格式只用于指定的标记。 4.2.2 id选择符 n引用语法： Xxx表示标记，对于定义格式2，Xxx只能 是定义时出现的标记。 n定义例子： #x1color:red;font-familt:黑体 x1是id选择符，它定义了样式红色黑体 n引用例子：表示该 使用x1样式。x1可以用于任何标记 。 4.2.2 id选择符 n定义例子2： name#x2color:blue;font-familt:黑体 x2是id选择符，它定义了样式蓝色黑体 n引用例子2：表示该 使用x2样式。x2不能用于其它标 记。 nid选择符特点：功能与class选择符类似， 语法不同。 4.2.2 id选择符 n上下文选择符：为在一个标记在另一个标 记中定义样式。 n定义语法格式： 标记1 标记2属性名1：属性值1; 属性名2：属性值2; n含义：当在标记1中使用标记2时，标记2采 用的样式。 4.2.3 上下文选择符 n上下文选择符例子：map.xml 北京 上海 吉林 长春 4.2.3 上下文选择符 n上下文选择符例子：map.css /*文件名:map.css*/ province cityfont-style:normal cityfont-style:italic n运行效果：在中使用 时，不是斜体，单独使用时，变成 斜体。 4.2.3 上下文选择符 4.3 CSS属性 n n 字体字体属属性：性： n显示属性：p103 4.3 CSS属性 n颜色属性： 4.3 CSS属性 n n 文本属文本属性：性： 4.3 CSS属性 n n 容器属容器属性：性： 4.3 CSS属性 n填充距属性 ： 4.3 CSS属性 n边边框属性 4.3 CSS属性 n图图文混排: 4.3 CSS属性 n鼠标标属性 4.3 CSS属性 n动态转换动态转换 4.3 CSS属性 n说明：由于属性繁多，不详细介绍。 n长度单位:可正可负号，百分比或绝对数值 。 n绝对数值单位: in (英寸，1英寸=2.54厘米) cm (厘米，1厘米=10毫米) mm (米) pt (点，1点=1/72英寸) pc (帕，1帕=12点) 4.3 CSS属性 n颜色单位：一个关键字或一个RGB格式的数字。 n颜色关键字: aqua，black， blue，fuchsia， gray，green， lime，maroon，navy，olive， purple，red，silver，teal，white，yellow。 nRGB颜色：有四种形式 #rrggbb ：如#00cc00 #rgb：如#0c0 rgb(x,x,x)：x是整数,0 或 4.4.1 4.4.1 引用指令引用指令 n定义style属性：在元素中定义style属性。 n使用style属性：在元素中使用style属性。 注意单引号，因为双引号被用作包含样式声明。 4.4.2 style n位置：在CSS中使用，所有的import 声明必 须放在样式表的开始部分。 n冲突：如果多个规则重复，以后面规则为准 。 n语法： import url(文件名.css); n例子： import url(/style.css); import url(/stylesheets/punk.css); 4.4.3 import qstyle优先 q上下文选择器优先 q如果没有为子元素定义样式，自动继承父元 素样式 q如果没有定义任何样式，自动使用IE样式 q如果多个规则重复，以后面规则为准。 q!important：表示必须使用 4.4.4 4.4.4 冲突解决冲突解决 n标记：对一个段落使用 样式，这个段落原来没有HTML标记。 SPAN能接受STYLE、CLASS和ID属性。 n说明：SPAN的存在纯粹是应用样式，当样 式表失效时它没有任何的作用。 nSPAN例子： 4.5 HTML的 nSPAN例子代码: SPAN .firstwords font-variant: small-caps The first few words 前面是段落中的文字，会是小型大写字母。 4.5 HTML的 n标记：对一个段落使用样式 ，这个段落原来没有HTML标记。Div能接 受STYLE、CLASS和ID属性。 n说明：Div的存在纯粹是应用样式，当样式 表失效时它没有任何的作用。 Div与Span 功能类似。 nDiv例子： 4.6 HTML的 nDiv例子代码: SPAN .firstwords font-variant: small-caps The first few words 前面是段落中的文字，会是小型大写字母。 4.6 HTML的 nDiv与Span功能类似。 nDiv与Span可以嵌套使用： nDiv与Span区别：自动形 成一行，其后内容换行。 不会换 行。 4.6 HTML的 aI6F3C0y)v&s#pXlUiRfNcK9H5E2A+x(u$rZoWkThPeMbJ7G4D1z-w*t!qYmVjSgOdLaI6F3B0y)v%s#pXlUiQfNcK8H5E2A+x*u$rZnWkThPeMaJ7G4C1z-w&t!pYmVjRgOdL9I6E3B0y(v%s#oXlUiQfNbK8H5D2A+x*u$qZnWkShPeMaJ7F4C1z)w&t!pYmUjRgOcL9I6E3B+y(v%r#oXlTiQeNbK8G5D2A-x*t$qZnVkShPdMaI7F4C0z)w&s!pYmUjRfOcL9H6E3B+y(u%r#oWlTiQeNbJ8G5D1A-x*t$qYnVkSgPdMaI7F3C0z)v&s!pXmUiRfOcK9H6E2B+x(u%rZoWlThQeNbJ8G4D1A- w*t$qYnVjSgPdLaI7F3C0y)v&s#pXmUiRfNcK9H5E2B+x(u$rZoWkThQeMbJ7G4D1z-w*t!qYmVjSgOdLaI6F3C0y)v%s#pXlUiRfNcK8H5E2A+x(u$rZnWkThPeMbJ7G4C1z-w&t!qYmVjRgOdL9I6F3B0y(v%s#oXlUiQfNbK8H5D2A+x*u$qZnWkShPeMaJ7G4C1z)w&t!pYmVjRgOcL9I6E3B0y(v%r#oXlTiQfNbK8G5D2A-x*u$qZnVkShPdMaJ7F4C0z)w&s!pYmUjRfOcL9H6E3B+y(v%r#oWlTiQeNbK8G5D1A-x*t$qZnVkSgPdMaI7F4C0z)v&s!pXmUjRfOcK9H6E2B+y(u%rZoWlThQeNbJ8G4D1A- w*t$qYnVjSgPdLaI7F3C0z)v&s#pXmUiRfOcK9H5E2B+x(u%rZoWkThQeMbJ8G4D1z-w*t!qYnVjSgOdLaI6F3C0y)v%s#pXlUiRfNcK8H5E2A+x(u$rZoWkThPeMbJ7G4D1z-w&t!qYmVjSgOdL9I6F3B0y)v%s#oXlUiQfNcK8H5D2A+x*u$rZnWkShPeMaJ7G4C1z)w&t!pYmVjRgOdL9I6E3B0y(v%s#oXlTiQfNbK8H5D2A-x*u$qZnWkShPdMaJ7F4C1z)w&s!pYmUjRgOcL9H6E3B+y(v%r#oWlTiQeNbK8G5D1A-x*t$qZnVkShPdMaI7F4C0z)w&s!pXmUjRfOcL9H6E2B+y(u%r#oWlThQeNbJ8G5D1A- w*t$qYnVkSgPdLaI7F3C0z)v&s#pXmUiRfOcK9H6E2B+x(u%rZoWlThQeMbJ8G4D1A-w*t!qYnVjSgPdLaE2B+y(u%r#oWlThQeNbJ8G5D1A-w*t$qYnVkSgPdLaI7F3C0z)v&s!pXmUiRfOcK9H6E2B+x(u%rZoWlThQeMbJ8G4D1A-w*t!qYnVjSgPdLaI6F3C0y)v&s#pXlUiRfNcK9H5E2A+x(u$rZoWkThQeMbJ7G4D1z-w*t!qYmVjSgOdLaI6F3B0y)v%s#pXlUiQfNcK8H5E2A+x*u$rZnWkThPeMaJ7G4C1z-w&t!pYmVjRgOdL9I6F3B0y(v%s#oXlUiQfNbK8H5D2A+x*u$qZnWkShPeMaJ7F4C1z)w&t!pYmUjRgOcL9I6E3B+y(v%r#oXlTiQeNbK8G5D2A- x*t$qZnVkShPdMaJ7F4C0z)w&s!pYmUjRfOcL9H6E3B+y(u%r#oWlTiQeNbJ8G5D1A-x*t$qYnVkSgPdMaI7F3C0z)v&s!pXmUiRfOcK9H6E2B+y(u%rZoWlThQeNbJ8G4D1A-w*t$qYnVjSgPdLaI7F3C0y)v&s#pXmUiRfNcK9H5E2B+x(u$rZoWkThQeMbJ7G4D1z-w*t!qYnVjSgOdLaI6F3C0y)v%s#pXlUiRfNcK8H5E2A+x(u$rZnWkThPeMbJ7G4C1z-w&t!qYmVjRgOdL9I6F3B0y(v%s#oXlUiQfNbK8H5D2A+x*u$rZnWkShPeMaJ7G4C1z)w&t!pYmVjRgOcL9I6E3B0y(v%r#oXlTiQfNbK8G5D2A- x*u$qZnVkShPdMaJ7F4C0z)w&s!pYmfNcK8H5D2A+x*u$rZnWkShPeMaJ7G4C1z)w&t!pYmVjRgOcL9I6E3B0y(v%r#oXlTiQfNbK8G5D2A-x*u$qZnVkShPdMaJ7F4C1z)w&s!pYmUjRgOcL9H6E3B+y(v%r#oWlTiQeNbK8G5D1A-x*t$qZnVkSgPdMaI7F4C0z)v&s!pXmUjRfOcK9H6E2B+y(u%r#oWlThQeNbJ8G5D1A-w*t$qYnVkSgPdLaI7F3C0z)v&s#pXmUiRfOcK9H5E2B+x(u%rZoWkThQeMbJ8G4D1z-w*t!qYnVjSgOdLaI6F3C0y)v&s#pXlUiRfNcK9H5E2A+x(u$rZoWkThPeMbJ7G4D1z- w&t!qYmVjSgOdL9I6F3B0y)v%s#oXlUiQfNcK8H5D2A+x*u$rZnWkThPeMaJ7G4C1z-w&t!pYmVjRgOdL9I6E3B0y(v%s#oXlTiQfNbK8H5D2A-x*u$qZnWkShPdMaJ7F4C1z)w&s!pYmUjRgOcL9I6E3B+y(v%r#oXlTiQeNbK8G5D2A-x*t$qZnVkShPdMaI7F4C0z)w&s!pXmUjRfOcL9H6E2B+y(u%r#oWlThQeNbJ8G5D1A-w*t$qYnVkSgPdMaI7F3C0z)v&s!pXmUiRfOcK9H6E2B+x(u%rZoWlThQeMbJ8G4D1A-w*t!qYnVjSgPdLaI6F3C0y)v&s#pXlUiRfNcK9H5E2B+x(u$rZoWkThQeMbJ7G4D1z- w*t!qYmVjSgOdLaI6F3B0y)v%s#pXlUiQfNcK8H5E2A+x*u$rZnWkThPeMaJ7G4C1z-w&t!qYmVjRgOdL9I6F3B0y(v%s#oXlUiQfNbK8H5z-w*t!qYmVjSgOdLaI6F3B0y)v%s#pXlUiQfNcK8H5E2A+x*u$rZnWkThPeMbJ7G4C1z-w&t!qYmVjRgOdL9I6F3B0y(v%s#oXlUiQfNbK8H5D2A+x*u$qZnWkShPeMaJ7F4C1z)w&t!pYmUjRgOcL9I6E3B0y(v%r#oXlTiQfNbK8G5D2A-x*u$qZnVkShPdMaJ7F4C0z)w&s!pYmUjRfOcL9H6E3B+y(u%r#oWlTiQeNbJ8G5D1A-x*t$qYnVkSgPdMaI7F4C0z)v&s!pXmUjRfOcK9H6E2B+y(u%rZoWlThQeNbJ8G4D1A- w*t$qYnVjSgPdLaI7F3C0y)v&s#pXmUiRfNcK9H5E2B+x(u%rZoWkThQeMbJ8G4D1z-w*t!qYnVjSgOdLaI6F3C0y)v%s#pXlUiRfNcK8H5E2A+x(u$rZnWkThPeMbJ7G4C1z-w&t!qYmVjSgOdL9I6F3B0y)v%s#oXlUiQfNcK8H5D2A+x*u$rZnWkShPeMaJ7G4C1z)w&t!pYmVjRgOcL9I6E3B0y(v%r#oXlTiQfNbK8G5D2A-x*u$qZnWkShPdMaJ7F4C1z)w&s!pYmUjRgOcL9H6E3B+y(v%r#oWlTiQeNbK8G5D1A-x*t$qZnVkSgPdMaIB0y(v%s#oXlTiQfNbK8H5D2A-x*u$qZnWkShPdMaJ7F4C1z)w&s!pYmUjRgOcL9H6E3B+y(v%r#oWlTiQeNbK8G5D1A- x*t$qZnVkSgPdMaI7F4C0z)w&s!pXmUjRfOcL9H6E2B+y(u%r#oWlThQeNbJ8G5D1A-w*t$qYnVkSgPdLaI7F3C0z)v&s#pXmUiRfOcK9H5E2B+x(u%rZoWlThQeMbJ8G4D1A-w*t!qYnVjSgPdLaI6F3C0y)v&s#pXlUiRfNcK9H5E2A+x(u$rZoWkThPeMbJ7G4D1z-w&t!qYmVjSgOdL9I6F3B0y)v%s#pXlUiQfNcK8H5E2A+x*u$rZnWkThPeMaJ7G4C1z-w&t!pYmVjRgOdL9I6E3B0y(v%s#oXlTiQfNbK8H5D2A-x*u$qZnWkShPeMaJ7F4C1z)w&t!pYmUjRgOcL9I6E3B+y(v%r#oXlTiQeNbK8G5D2A- x*t$qZnVkShPdMaI7F4C0z)w&s!pXmUjRfOcL9H6E3B+y(u%r#oWlTiQeNbJ8G5D1A-x*t$mUjRgOcL9I6E3B+y(v%r#oXlTiQeNbK8G5D2A-x*t$qZnVkShPdMaI7F4C0z)w&s!pYmUjRfOcL9H6E3