CSS综述.pptVIP

14.CSS综合 网页设计与制作实例教程 三种定义和调用的方法 Class Selector 利用Class Selector，你可以用同样的HTML Tag构成不同的样式。 比如说，你希望段落p有两种样式，一种是居中对齐，一种是居右对齐。你就可以写如下样式： p.right {text-align:right} p.center {text-align:center} 更通用的写法 你也可以不用HTML Tag，直接用.加上Class名称作为一个Selector。 示例代码如下： .center {text-align: center} 这种通用的Class Selector就没有Tag的局限性，可以用于不同的Tag。比如： h1 class = center这个标题居中显示。/h1p class = center这个段落居中显示。/p CSS分类 内嵌样式(Inline Style) 内部样式表(Internal Style Sheet) 外部样式表(External Style Sheet) 内嵌样式(Inline Style) P style=font-size:20pt; color:red 这个Style定义里面的文字是20pt字体，字体颜色是红色。 /P 内部样式表(Internal Style Sheet) html head titleCSS的使用一/title style type=text/css !-- h1 {font-style:italic} h2 {color:red} -- /* 以上是CSS的定义 */ /style /head body h1这是斜体的标题文字/h1 h2这是红色的标题文字/h2 /body /html 调用方法1：直接调用 h1 style=font-family:楷体; color:red 不推荐采用此种方法 内部css html head title对HTML标记直接定义/title style type=text/css h1 {font-family:楷体; color:yellow} h2 {font-family:黑体; color:blue} /style /head body font ph1此行文字为黄色楷体的字体/h1 ph2此行文字为蓝色黑体的字体/h2 /font /body /html 引入外部CSS1——link ＜head＞　　＜link rel=”stylesheet” href=”*.css” type=”text/css” ＞ ＜/head＞ 引入外部CSS1——import style type=text/css @import url(“1.css”); /style Import 和 link 的区别 两种外部样式表的调用方法虽然有所不同，但它们的效果是一样的，只是嵌入CSS外部表的时候，import把CSS文件的内容复制到HTML文件中，link直接向CSS文件读取所定义的CSS样式。 小的CSS文件采用import，大的文件采用link，在实际应用中，CSS文件一般很小，两种方法差别很小。 作业 自己建一个css文件，完成下列样式的定义 （1）h1：红色，字体大小12px，bold。 （2）#f3: 幼圆，水平居中，字符间距：10px，下划线。 （3）.s1:绿色，段落行距：8px，首行缩进：25px。 在html中调用这个css文件中的这三个样式。 网页设计与制作实例教程 * 选择性调用，推荐。 h1 class=s1 .s1{……} H1.s1{……} 选择性调用，原则上一个文件中只能用一次。 h1 id=f1 #f1{……} 重新定义已有标签。 h1 直接使用原有标签 h1(或其他任何存在的标签） 说明 调用方法 定义方法