样式表三种使用方式和盒子模型
2016-05-15 16:59
561 查看
样式表三种使用方式和盒子模型
css 的三种使用方式；
行内样式表
内部样式表
外部引入样式表
盒子模型
行内样式表时指将CSS样式编码写在HTML标签中,
格式如下:
<h1 style="font-size:12px;color:#000FFF">
我的CSS样式
</h1>
内部样式表与行内样式表相似
都是把CSS代码写在HTML页面中,
不同的是前者可以将样式表放在一个固定的位置,
一般放置在<head>标签内部,格式如下:
是文本文件并且是css样式的
<style type="text/css">
选择器{
属性:值;
}
</style>
外部引入样式表:
外部样式表时CSS应以中最好的一种样式,
它将CSS样式代码单独放在一个外部文件中,
再由页面进行调用。多个网页可以调用一个样式
文件表,这样能够实现代码的最大限度的重用
及网站文件的最优化配置,格式如下:
<link rel="stylesheet" rev="stylesheet" href="style.css">
<style type="text/css">
@import url("css/style.css");
</style>
盒子模型；
div 存放文本和图片:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<!--内部样式表-->
<style type="text/css">
/*这里是内部*/
li {
list-style:none;
color:green;
}
.div1{
color:blue;
}
.div2{
background:#ccffff;
}
</style>
<!--使用link标签,实现外部样式表导入-->
<link rel="stylesheet" rev="stylesheet" href="css/style.css">
</head>
<body>
<center>
<h1>CSS样式的三种用法</h1>
<hr>
<u1>
<!-- 行内样式表-->
<li style="color:blue;">窗前明月光,</li>
<li class="li">疑是地上霜,</li>
<li>举头望明月,</li>
<li id="mytitle">低头思故乡,</li>
</ul>
<br>
<div class="div1">
作者：***</br>
北国风光，千里冰封，万里雪飘。
望长城内外，惟余莽莽；大河上下，顿失滔滔。
山舞银蛇，原驰蜡象，欲与天公试比高。
须晴日，看红装素裹，分外妖娆。
江山如此多娇，引无数英雄竞折腰。
惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
一代天骄，成吉思汗，只识弯弓射大雕。
俱往矣，数风流人物，还看今朝。
</div>
<br>
<div class="div2">
<img src="images/1.jpg"/>
</div>
</div>
</center>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 