CSS概述
CSS:层叠样式表,定义网页的显示效果,可以解决html代码对样式定义的重复,提高后期牙膏是或代码的可维护性,并且增强了网页的显示效果功能
CSS与Html结合
- style属性
- style标签
<!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>
<!-- CSS+Html:4.link标签 -->
<link rel="stylesheet" href="../MyCSS/p.css" type="text/css">
<!-- CSS+Html:2.style标签中直接定义区域样式 -->
<!-- 内容:(不可以与import方式同时使用)
div{
background-color: #000;
color: #F00
}
-->
<style type="text/css">
@import url(../MyCSS/span.css);
</style>
</head>
<body>
<h1>CSS+HTML:四种方式</h1>
<h2>1.style样式属性</h2>
<div style="background-color: #06F; color: #F00;">这是一个使用CSS的style样式属性的div区域</div>
<h2>2.style标签</h2>
<div>这是一个使用了CSS的style标签的div区域</div>
<ol>
<li>每一个html标签中都有一个style样式属性,该属性的值为css代码</li>
<li>使用style标签的方式,一般在head中使用</li>
</ol>
<h2>3.CSS定义样式,style标签import对应的css文件</h2>
<span>这是一个使用了CSS文件中定义span样式的span区域</span>
<h2>4.link标签</h2>
<p>这是一个使用了link标签连接到css文件的段落p区域</p>
</body>
</html>
对应的css文件内容
span.css
@charset "UTF-8";
span{