标签：
1.内联式CSS样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>内联样式</title> </head> <body> <p style="font-size: 40px;color: red">红色</p> <p style="font-size: 40px;color: green">绿色</p> <p style="font-size: 40px;color: blue">蓝色</p> </body> </html>
2.内嵌式CSS样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>内嵌样式</title> <style type="text/css"> .red{ color:red; } .green{ color: green; } </style> </head> <body> <p class="red">红1</p> <p class="green">绿1</p> <p class="red">红2</p> <p class="green">绿2</p> </body> </html>
3.导入外部CSS样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>导入外部样式</title> <style type="text/css"> @import url(../css/color.css); </style> </head> <body> <p class="red">红1</p> <p class="green">绿1</p> <p class="red">红2</p> <p class="green">绿2</p> </body> </html>
4.链接式CSS样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>链接式样式表</title> <link rel="stylesheet" type="text/css" href="../css/color.css"> </head> <body> <p class="red">红1</p> <p class="green">绿1</p> <p class="red">红2</p> <p class="green">绿2</p> </body> </html>
CSS样式生效的优先级问题：内联样式>嵌入式样式>导入样式>链接样式
全局选择器：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>全局选择器</title> <style type="text/css"> *{ color: red; font-size: 14px; } </style> </head> <body> <p class="red">红1</p> <p class="green">绿1</p> <p class="red">红2</p> <p class="green">绿2</p> </body> </html>
标签：
原文地址：http://www.cnblogs.com/zuixinxian/p/4979615.html
