在HTML中有三种css样式表:
外部样式表
外部样式表的作用:设置一个外部样式表,在Html页面的head中添加,通过link标签标记,rel:指定其样式为stylesheet,type:指定其格式为text/css,herf:指定到欲应用的css样式文件。表此样式表应用于当前整个页面效果,
内部样式表
内部样式表的作用:设置一个内部样式表,在Html页面的head中添加,通过在head中添加style标签标记,type:指定其格式为text/css,此样式表只应用于当前文档,
内联样式
内联样式表的作用:设置一个内联样式表,在Html页面的body中添加,在添加元素的标签中声明样式,都包含在style属性中。在三个样式表中,内联样式表的优先级最高,若页面中同时存在三种样式表,内联样式会覆盖其他两种样式
三种样式表使用示例:
1、外部样式表
<!DOCTYPE html> <html> <head> <title>层叠样式表之外部样式表</title> <link rel="stylesheet" type="text/css" herf="direction:\example.css">---通过herf连接到example.css文件 </head> <body> <h1>层叠样式表学习</h1> </body> </html>
外部样式表的css文件
h1{color: red;} h1{text-align: center;} 样式以分号隔开,可以写在同一行,但是一行写一个样式是最推荐的 h1{color:red; text-align: center;}
2、内部样式表
<!DOCTYPE html> <html> <head> <title>层叠样式表之内部样式表</title> <style type="text/css">---内部样式表开始标记 h1{color: pink; text-align: center;}---针对哪一个元素进行样式制定 </style>----内部样式表结束标记 </head> <body> <h1>层叠样式表之内部样式表</h1> </body> </html>
3、内联样式表
<!DOCTYPE html> <html> <head> <title>层叠样式表之内联样式表</title> </head> <body> <h1 style="color: red; text-align: right;"></h1>---针对h1标签设置内联样式,其优先级最高 </body> </html>
以上就是如何用css样式表?的详细内容,更多请关注易知道|edz.cc其它相关文章!