第3章css基础.pptVIP

IT Education Training IT Education Training IT Education Training CSS层叠样式表 CSS内容介绍 CSS概述 CSS设置方式 CSS语法 样式规则注释和样式规则优先级 CSS的属性分类介绍 CSS概述 CSS概念 CSS是Cascading Style Sheets 的缩写，中文的意思是层叠样式表或级联样式表。 CSS功能简介 CSS可以用来精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、边框等。使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。 CSS设置方式 设置方式 举 例 特 点 内联样式 body h1 style=font-family:宋体;font-size:12pt;color:blue在这里使用了H1标记/h1 /body 灵活，简单方便。 嵌入样式 head style type=text/css h1 {font-family:宋体;font-size:12pt;color:blue} /style /head body h1在这里使用了H1标记/h1 /body 一个样式可以在一个页面多次应用。 外部样式 head link rel=stylesheet href=h1.css type=text/css /head bodyh1在这里使用了H1标记/h1/body h1.css h1 {font-family:宋体;font-size:12pt;color:blue} 需要有一个外部的样式表文件(.css)，可以为多个网页所共同引用，即减少代码，又可以做到统一页面风格。 CSS语句格式 css语句格式如下： selector {property: value} (选择符 {属性：值}) 选择符的作用：限制样式作用的范围 p {font-size:15} 当属性的值是多个单词组成时，必须在值上加引号 h1 {font-family: Courier New} 如果需要对一个选择符指定多个属性时，使用分号隔开。 p {font-size:15;color:red} 选择符主要包括： html选择符 class选择符 id选择符 html选择符 html选择符：就是以html标签作为选择符的情况。 其作用域为所有符合条件的html标签 h1 {text-align: center; color: red} p {font-size:15;color:red} class选择符 class选择符：使用html标签的class属性设置值的选择符就是class选择符。 p.stop{color:red} p.warning{color:yellow} p.normal{color:green} 关联class selector:可以为同一个元素（html标签）定义不同的样式。 独立class selector:可以为多个不同的元素（html标签）定义相同的样式 p class=stop这是stop的样式/p p class=warning这是warning的样式/p p class=normal这是normal的样式/p 演示效果 p class=title蓝色的段落/p h1 class=title蓝色的标题/h1 style type=text/css .title{text-align:center;color:blue} /style 演示效果 ID选择符 ID属性用来定义某一特定html标签，一个网页文件只能有一个标签使用某一ID属性值，ID Selector就是用来设置这样具有ID属性html标签的样式。 经验总结：因为ID selector只能为单个的html标签设置样式，因此具有一定的局限性。 ID属性在JavaScript得到广泛的应用。 style type=text/css #title{text-align:center;color:blue} /style div id=title welcome to neusoft/div 包含选择符 包含选择符：是指用空格隔开的两个或多个单一选择符组成的字符串 使用：主要用来对某些具有包含关系的元素来单独定义样式，比如元素1里包含元素2，使用包含选择符定义的样式就只能对在元素1里的元素2起作用，而对单独的元素１和元素２不起作用。 div p{color:red;font-size:12;} html head style type=text/css table a{color:green;text-decoration : none; } /styl