【在HTML中调用CSS的方法】
2015-11-20 01:27
666 查看
1.内联式CSS样式
2.内嵌式CSS样式
3.导入外部CSS样式
4.链接式CSS样式
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>
相关文章推荐
- 【CSS选择器】
- CSS去掉li中前面的点
- CSS选择器
- CSS中float的要点
- 怎样设置iMindMap中的图形样式
- 南大软院大神养成计划--第四天单/复选框与文字对齐问题
- Java swing 一些控件样式的美化
- 负边距在布局中的使用
- Flexbox——快速布局神器
- 南大软院大神养成计划--HTML和CSS基础课程
- DIV样式汇总
- 用CSS中的Alpha实现渐变
- CSS教程:div垂直居中的N种方法[转]
- box-align
- 昌大软院大神养成计划之网页设计之路第二天
- CSS零碎知识点
- 经常用到的css样式
- CSS中em、rem和px的区别以及各个的优缺点
- css中的id和class
- CSS复习总结(2)