内容较多,分三次更新讲解。
XHTML CSS基础知识
1)文档类型
!DOCTYPE html PUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN”http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-过渡性。" DTD "
一定要保留这句话,删除它后可能引起某些样式表失效或其它意想不到的问题
2)语言编码
meta http-equiv=" Content-Type " Content=" text/html;charset=gb231
2″ />
它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的gb2312告诉浏览器,本文档采用简体中文编码;还有一种常用的编码是UTF-8编码,它是国际通用的编码。不管我们采用哪种编码,有一点就是包含的css样式表和其它文件也必须和本文档的编码一样,要不就会出现乱码。
3)html标签
html标签在页面中都必须结束。成对的标签以“/标签名”结束,有些单一的标签在本身的结尾打上/来结束,这是xhtml代码编写的规范。
成对的标签:<div>{…}</div> <span>{…}</span><p>{…}</p> ……
单一的标签:<p style=”display:none” data-type=”png” data-w=”461″ style=”border-width: 0px;border-style: initial;border-color: initial;max-width: 600px;” title=”网站DIV+CSS教程培训教程X(HTMLCSS基础知识) html教程 divcss 网站DIV+CSS教程培训教程X(HTMLCSS基础知识)一 第1张” />
整个盒模型在页面中所占的宽度是由:左边界+左边框+左填充+内容+右填充+右边框+右边界组成,而css样式中width所定义的宽度仅仅是内容部分的宽度
■一列固定宽度
■一列固定宽度居中
■一列自适应宽度
■一列自适应宽度居中
■一列二至多块布局
一列固定宽度
<!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 type=”text/css”>
#layout { height: 300px; width: 400px; background: #99FFcc; }
</style>
</head>
<body>
<div id=”layout”>此处显示 id “layout” 的内容</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 type=”text/css”>
#layout { height: 300px; width: 400px; background: #99FFcc; margin:auto; }
</style>
</head>
<body>
<div id=”layout”>此处显示 id “layout” 的内容</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 type=”text/css”>
body { margin:0;}
#layout { height: 300px; width: 80%; background: #99FFcc; }
</style>
</head>
<body>
<div id=”layout”>此处显示 id “layout” 的内容</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 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>
一列二至多块布局
<!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 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>
3、CSS语法
CSS语法由如下三部分构成,选择器:可以是ID、CLASS或标签;属性和值是用来定义这个物件的某一个特性。如一张桌子的长120cm,宽60cm,套用css的格式为,桌子{长:120cm;宽:60cm;},
4、ID和CLASS选择器
id的优先级高于class,比如说今天三班的学生上体育课,小明留下来打扫卫生。那么三班的学生上体育课这是一个类,而小明打扫卫生这是个id,虽然小明也是三班的学生,但id高于class,所以小明执行打扫卫生的任务。
■二列自适应宽度
■二列固定宽度
■二列固定宽度居中
■xhtml的块级元素(div)和内联元素(span)
■float属性
■三列自适应宽度
■三列固定宽度
■三列固定宽度居中
■IE6的3像素bug
一、两列自适应宽度
<!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>
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }
</style>
</head>
<body>
<div id=”side”>此处显示 id “side” 的内容</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/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<style>
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }
</style>
</head>
<body>
<div id=”content”>
<div id=”side”>此处显示 id “side” 的内容</div>
<div id=”main”>此处显示 id “main” 的内容</div>
</div>
</body>
</html>
三、xhtml的块级元素(div)和内联元素(span)
块级元素:就是一个方块,像段落一样,默认占据一行出现;
内联元素:又叫行内元素,顾名思义,只能放在行内,就像一个单词,不会造成前后换行,起辅助作用。
一般的块级元素诸如段落<p>、标题<h1><h2>…、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<p style=”display:none” data-type=”png” data-w=”455″ style=”” />
五、三列自适应宽度
<!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/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;}
#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>
七、IE6的3像素bug
3像素bug是IE6的一个著名的bug,当浮动元素与非浮动元素相邻时,这个3像素的Bug就会出现 css代码如下:
body { margin:0;}
#side { float: left; background:#99FF99; height: 300px; width: 120px;}
#main { background: #99FFFF; height: 300px;}
html代码如下:
<div id=”side”>此处显示 id “side” 的内容</div>
<div id=”main”>此处显示 id “main” 的内容</div>
请在#side上加上_margin-right:-3px;记住,前边加上一下划线,这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。
其他相关内容: 关注本公众号,详细带您了解
网站DIV+CSS教程培训教程X(HTMLCSS基础知识)一
网站DIV+CSS教程培训教程X(HTMLCSS基础知识)二
网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三
内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/169755.html