|
一、选择符 选择符指的是要修改的元素。CSS中常用的选择符包括HTML选择符、类选择符、id选 择符。 1． HTML选择符 所有的HTML标签都可以作为CSS的选择符，HTML选择符后是对应的元素的属性及属 性值，指定了HTML选择符的样式后，当前页面中的相应元素会自动套用定义的样式。 实例 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS使用示例-HTML选择符</title> <style type="text/css"> body { background-color: yellow; } h1,h2,p { background-color: #00FF00; color: red } </style> </head> <body> 这是body内的文字<br/> <h1>这是标题1文字</h1> <h2>这是标题2文字</h2> <p>这是段落文字</p> </body> </html> 显示结果
2． 类选择符 如果要对页面中的元素定义不同的格式，仅使用标签选择符是不够的，还需要类选择符。类选择符在选择符之前需要加一个实心的圆点，表示选择符的类型是类选择符。其格式为： selector.classname{ property1:value; property2:value; … } 使用类选择符时，也可以不指定具体的选择符，直接使用“.”加类名，或者在“.”前添加“*”。这样可以使不同的选择符共享样式，提高代码的重用性。如果要对页面中的多种元素分类定义不同的格式，可以使用这种方式。其语法为： .classname{ property1:value; … propertyN:value; }
实例： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS使用示例-类选择符</title> <style type="text/css"> .one { color: red; font-size: 12pt; } .two { color: green; font-size: 14pt; } .three { color: #800080; font-size: 16pt; } </style> </head> <body> <h1 class="one">这是引用one类样式的标题1</h1> <p class="one">这是引用one类样式的段落</p> <p class="two">这是引用two类样式的段落</p> <p class="three">这是引用three类样式的段落</p> </body> </html> 显示结果
例题: <html xmlns="http://www./1999/xhtml"> <head> <style> span{ font-size:80px; font-family:Arial,helvetica,sans-serif; } .g1, .g2{ color:#1648EE; } .o1, .e{ color:#D7162E; } .o2{ color:#F4AA15; } .l{ color:#42c34a; }
</style> </head>
<body> <span class="g1">G</span> <span class="o1">o</span> <span class="o2">o</span> <span class="g2">g</span> <span class="l">l</span> <span class="e">e</span>
</body> </html>
显示结果：
例题： <html> <head> <style> .cal{ vertical-align:10px } </style> </head>
<body> 101-102=1 怎样移动一个数字，使等式成立？？<br> 答案是 101-10<span class="cal">2</span> = 1 </body> </html> 显示结果：
3．id选择符 当需要为某一个元素单独设计样式时，可以使用id选择符。使用id选择符可以为每个元素的具体对象定义不同的模式，使用id选择符要先为设计样式的对象定义一个id属性。id选择符是唯一的，不同的元素的id值是不能重复的。例如： <div id=“top”></div> 然后使用以下方式定义top的样式： #top{ property1:value; property2:value; … } 例题： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS使用示例-id选择符</title> <style type="text/css"> #top { color: blue; font-size:18pt; font-family: 黑体; background-color: #FFB6C1; } </style> </head> <body> <div id="top"> 白日依山尽<br /> 黄河入海流<br /> 欲穷千里目<br /> 更上一层楼</div> </body> </html> 显示结果：
4．组合选择符 组合选择符是使用逗号将各个选择符隔开，使多类元素共享样式。 例题： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS使用示例-包含选择符</title> <style type="text/css"> p em { color: red; font-size:16pt; } </style> </head> <body> <p><em>p元素中的em元素，红色，16pt</em></p> <em>非p元素中的em元素，黑色，默认大小</em> </body> </html> 效果：
二、 继承 CSS的继承指的是当标签具有嵌套关系时，内部标签自动拥有外部标签的不冲突的 样式的性质。 例题： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS使用示例-CSS的继承</title> <style type="text/css"> div { color: red; font-size: 10pt; font-weight: bold; font-family: 黑体; border: 1px solid #000; } p { color: blue; font-size : 12pt; font-style: italic; } em{ color:green; } </style> </head> <body> <p>这是蓝色，12pt，斜体，默认宋体</p> <div><p>这是蓝色，12pt，斜体，加粗，黑体 </p></div><br/> <div>这是红色，10pt，加粗，黑体，有边框</div><br/> <div>这是红色，10pt，黑体<br/> <em>我是em元素的文字，绿色文字周围无边框</em></div> </body> </html> 显示结果：
三、 CSS的使用方式 在HTML页面中使用CSS主要有四种方法，即内嵌方式、内部样式表、使用<link>标记 链接外部样式表、使用CSS的@import标记导入样式表。 1、内嵌方式指的是将CSS规则混合在HTML标签中使用的方式。CSS规则作为HTML标签的style属性值。例如： <a style=“font-family:黑体;font-style:italic;font-size:16pt;color:red”> 这是使用样式的超级链接 </a> 内嵌样式只对其所在的标签起作用，其它的同类标签不受影响。 例题： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS使用示例-内嵌样式表</title> </head> <body> <a style="font-family:黑体;font-style:italic;font-size:16pt;color:red">使用内嵌样式的超级链接</a> <br/> <br/> <a>普通的超级链接</a> </body> </html> 显示结果
2．内部样式表 内部样式表指的是在HTML文档的<head>标记内嵌入样式表，格式如下： <style type=“text/css”> selector{ property1:value; property2:value; … } … </style> 3．使用<link>标记链接外部样式表 body{ font-family: 楷体; font-size: 16pt; color: green; } style.css: a{ font-family: 黑体; font-size: 14pt; color: #FF9600; } div{ color: red; font-size: 10pt; font-weight: bold; font-family: 黑体; border: 1px solid #000; } p{ color: blue; font-size: 12pt; font-style: italic; }
css8.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS应用示例-外部样式表</title> <link href="css/style.css" rel="stylesheet" type="text/css"/> </head> <body> <a>我是超级链接</a> <div>我是DIV</div> <p>我是段落</p> </body> </html>
|
|
|
