DIV+CSS学习笔记
2016-06-01 本文已影响0人
未雅
CSS 样式
- 外部样式：不但本页可以调用，其他页面也可以调用
<link href="layout.css" rel="stylesheet" type="text/css" />
- 内部样式：只能针对本页
<style>
h2 { color:#f00;}
</style>
- 行内样式
<p style="font-size:18px;">行内样式</p>
- 导入样式
@import url("/css/global.css");
CSS 优先级
- id 优先级高于 class
- 后面的样式覆盖前面的
- 指定的高于继承
- 行内样式高于内部或外部样式
- 总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近
的
CSS 盒模型组成
CSS 语法
CSS 语法由三部分构成，选择器：可以是ID、CLASS或标签；属性和值是用来定义这个物件的某一个特性。
ID 和 CLASS 选择器
id 只能在页面中对应一个元素，class 为类，可以对应多个元素。
XHTML的块级元素（div）和内联元素（span）
- 块级元素：就是一个方块，像段落一样，默认占据一行出现。
- 内联元素：又叫行内元素，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。
一般的块级元素
- <p>
- <h1><h2>...
- <ul><ol><li>
- <table>
- <form>
- <div>
- <body>
内联元素
- <input>
- <a>
- <img>
- <span>
ID 以 #开头
一列自适应宽度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans
itional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { margin:0;}
#layout { height: 300px; width: 80%; background: #99FFcc; margin:auto;}
</style>
</head>
<body>
<div id="layout">此处显示 id "layout" 的内容</div>
</body>
</html>
其中，
body { margin: 0px; }
body 默认的外边距去掉。
一列二至多块布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra
nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { margin:0; padding:0;}
#header { margin:5px auto; width:500px; height:80px; background:#9F9;}
#main { margin:5px auto; width:500px; height:400px; background:#9FF;}
#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}
</style>
</head>
<body>
<div id="header">此处显示 id "header" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
<div id="footer">此处显示 id "footer" 的内容</div>
</body>
</html>
三列自适应宽度
左列和右列固定，中间列根据浏览器宽度自适应。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body { margin:0;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right;}
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>
<body>
<div id="side">此处显示 id "side" 的内容</div>
<div id="side1">此处显示 id "side1" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
</body>
</html>
三列固定宽度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D
TD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body { margin:0;}
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>
<body>
<div id="content">
<div id="side">此处显示 id "side" 的内容</div>
<div id="side1">此处显示 id "side1" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
</div>
</body>
</html>
