层叠样式表知识点.docVIP

CSS层叠样式表 我们经常上网页都会发现它们特点：字体的大小，颜色非常和谐，整个页面的颜色、风格统一美观，表格的宽度和长度一致，而且其它页面的风格与其大致相同，整个网站非常美观大方。网站的这些特点都是采用了css层叠样式表。 1.1添加层叠样式表的方法 添加层叠样式表一共分为三种方法：内联（嵌入）样式表；内嵌样式表；外部样式表。 .最简单的方法是直接添加在HTML的标记（tag）里。（行内嵌入样式表） 语法为：tag style=” properties”网页内容 / tag 例子： html center p style=color:red ; font-size: 20px层叠样式表实例 / p /center / html 浏览器显示结果： 添加在HTML的头信息标识符head里。 语法为：head style type=”text/css” 样式表的具体内容 / style / head 例子： html head title本页标题/ title style type=”text/css” Body { Font:12px; } H1 { Font:16px; } P { Font-weight:bold; Color:red; } / style /head center body 黄河远上白云间 p一片孤城万仞山/p h1春风不度玉门关/h1 /center /body /html 浏览器显示结果： 同样是添加在HTML的头信息标识符head里。 语法为：1.”link(链接)“headlink rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”/ head Media 是可选的属性，表示使用样式表的网页将用什么媒体输出。取值范围为： Screen（默认）：输出到电脑屏幕 Print：输出到打印机 TV：输出到电视机 Projection：输出到投影仪 Aural：输出到扬声器 Braille：输出到凸字触觉感知设备 Tty：输出到电传打字机 All：输出到以上所有设备 ”@import(导入)“headstyle type=”text/css”@import ”*.css” / style/ head 1.2层叠样式表的格式 （1）层叠样式表分为三种：父子标签层叠（采用就近原则）；选择器层叠（ID选择器优先级最高）；样式表类型层叠（内联样式表优先级最高） （2）选择器： ID选择器，语法为：#Id{属性，属性，属性.....} 例子：head style type=” text/css” #aa { 属性 } /style / head body div id=”aa”内容/div /body Class选择器，语法为：.class{属性，属性，属性......} 例子：head style type=” text/css” .aa { 属性 } /style / head body div class=”aa”内容/div /body 3标签选择器，语法为：标签{属性，属性，属性.......} 例子：head style type=” text/css” div { 属性 } /style / head body div 内容/div /body （3）选择器的关系也分为三种：后代关系（tag tag1/tag1 /tag tag1属性受tag影响）；并列关系（用”，“将其隔开 tag ，tag1 属性互不影响）；筛选关系（标签. xxx 具体到某个标签里的xxx的属性） 1.3Css样式表中的属性 1.3.1控制字体的样式 字体类型（font-family: 字体名称） 注意：（1）当指定多种字体时，用“，”分隔每种字体名称。 （2）当字体名称包含两个以上分开的单词时，用“”把字体名称括起来。 （3）当样式规则外已经有“”时，用‘’代替“” 。 字体大小（font-size：字号参数） 字号的取值范围：（1）相对大小｛以Em为单位：指字母要素的尺寸，和Point相同距离；以百分比（%）｝（2）绝对大小：以px像素为单位。（经验之谈：一般网页内容字体大小都设为12px；标题字体大小都设为14px；） 字体风格（font-style：italic（斜体）） 字体粗细（font-weight：bold(加粗) / normal（正常）） 字体颜色（color：“颜色设置如HTML中方法一样”） 1.3.2控制文字的样式 文字的修饰（text-decoration：参数