第4课CSS1-设置文本.ppt

CSS篇;什么是CSS 创建CSS规则 如何在网页中加入CSS样式表 用CSS设置文本样式 ;一、什么是CSS;体验CSS;二、如何创建css规则;1、CSS规则的语法;2、选择器的种类;2.1、标记选择器;2.2、类别选择器;html head style h1 { color:red; font-size:25px; } . Blue { color:blue; font-size:16px; } /style /head body h1这是h1标题/h1 p 这是p标记正文/p h1 class=“blue” 这是h1标题/h1 h3 这是h3标题/h3 h3 class=“blue” 这是h3标题/h3 /body /html;2.3、id选择器;html head style h1 { color:red; font-size:25px; } . Blue { color:blue; font-size:16px; } #pos1 { position:absolute; top:100px; right:100px} /style /head body h1这是h1标题/h1 p 这是p标记正文/p h1 class=“blue” id=pos1“ 这是h1标题/h1 h3 这是h3标题/h3 h3 class=“blue” 这是h3标题/h3 /body /html;标题应用#pos1样式前;三、如何在网页中应用css样式;可以用以下三种方式将样式加入网页。 而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。 行内样式 内嵌样式表 链入或导入外部样式表文件;3.1 行内样式;3.2 内嵌样式表;html head title页面标题/title style type=text/css p{ color:#0000FF; text-decoration:underline; font-weight:bold; font-size:25px; } /style /head body p这是第1行正文内容……/p p这是第2行正文内容……/p p这是第3行正文内容……/p /body /html;外部样式表;3.3 链接式;打开光盘07-7.css： h2{ color:#0000FF; } p{ color:#FF0000; text-decoration:underline; font-weight:bold; font-size:15px; };3.4 导入样式;html head title???面标题/title link href=07-10.css type=text/css rel=stylesheet style type=text/css p{ color:blue; } @import url(red.css); /style /head body p style=color:gray;“ 观察文字的颜色/p /body /html;3.6 css高级特性：选择器的妙用;3.6.1 交集选择器;3.6.2 并集选择器;3.6.3 后代选择器;其Html代码如下： p哈哈 span 哈哈哈哈 /span 哈哈哈 /p h3哈哈 span 哈哈哈哈 /span 哈哈哈/h3;四、css属性的设置;4.1、用css设置文本样式;准备一个网页;4.1.1 设置文字字体： font-family属性;4.1.2 设置文字倾斜：font-style属性;4.1.3 设置文字加粗： font-weight属性;4.1.4 英文字母大小写转换：text-transform;4.1.5 控制文字大小：font-size;4.1.6 设置文字装饰效果：text-decoration;4.1.7设置段落首行缩进：text-indent;4.1.8 设置字词间距：letter-spacing和word-spacing;4.1.9 设置段落内部文字的行高：line-height;4.1.10 设置段落之间的距离:margin;举例：通过margin属性设置#p1段落和#p2段落之间的距离。;4.1.11 控制文本的水平位置：text-align;4.1.12 设置文字和背景的颜色;4.1.13 利用html设置段落的垂直对齐效果