随着html的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是css便诞生了。
CSS的三种导入方式
内联样式表
<pstyle="font-size:50px;color:blue">css内联样式表</p>
内部样式表
<styletype="text/css">
p{
font-size:100px;
color:red;
}
</style>
<p>css内部样式表</p>
外部样式表
创建一个cssTest.css的css文件
p{
font-size:50px;
color:green;
}
span{
font-size:50px;
color:yellow;
}
使用外部样式表
<linkrel="stylesheet"type="text/css"href="../css/cssTest.css">
<p>优先级:内联样式表>内部样式表>外部样式表</p>
<span>外部样式表</span>
完整测试代码
<!--文件名cssTest.html-->
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>cssTest</title>
<styletype="text/css">
p{
font-size:50px;
color:red;
}
</style>
<linkrel="stylesheet"type="text/css"href="../css/cssTest.css">
</head>
<body>
<pstyle="font-size:50px;color:blue">css内联样式表</p>
<p>css内部样式表</p>
<p>优先级:内联样式表>内部样式表>外部样式表</p>
<span>外部样式表</span>
</body>
</html>
css文件
<!--文件名cssTest.css-->
p{
font-size:50px;
color:green;
}
span{
font-size:50px;
color:yellow;
}
css三种导入方式的优先级
内联样式表>内部样式表>外部样式表
从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。