发布时间:2019-12-30    所属分类:网站建设   浏览:1916

网站DIV+CSS教程培训教程X(HTMLCSS基础知识)一



XHTML CSS基础知识


image.png


1)文档类型

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

一定要保留这句话,删除它后可能引起某些样式表失效或其它意想不到的问题


2)语言编码

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的gb2312告诉浏览器,本文档采用简体中文编码;还有一种常用的编码是UTF-8编码,它是国际通用的编码。不管我们采用哪种编码,有一点就是包含的css样式表和其它文件也必须和本文档的编码一样,要不就会出现乱码。


3)html标签

html标签在页面中都必须结束。成对的标签以“/标签名”结束,有些单一的标签在本身的结尾打上/来结束,这是xhtml代码编写的规范。

成对的标签:<div>{...}</div> <span>{...}</span><p>{...}</p> ......

单一的标签:<img src="" /><br />.......


4)css样式

■外部样式

<link href="layout.css" rel="stylesheet" type="text/css" />

这种形式是把css单独写到一个css文件内,然后在源代码中以link方式链接。它的好处是不但本页可以调用,其它页面也可以调用,是最常用的一种形式。


■内部样式

<style>

 h2 { color:#f00;}

 </style>

这种形式是内部样式表,它是以<style>和</style>结尾,写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。


■行内样式

<p style="font-size:18px;">内部样式</p>

这种在标签内以style标记的为行内样式,行内样式只针对标签内的元素有效,因其没有和内容相分离,所以不建议使用。


■导入样式

@import url("/css/global.css");

链接样式是以@import url标记所链接的外部样式表,它一般常用在另一个样式表内部。如layout.css为主页所用样式,那么我们可以把全局都需要用的公共样式放到一个global.css的文件中,然后在layout.css中以@import url("/css/global.css")的形式链接全局样式,这样就使代码达到很好的重用性。


5)css优先级

■id优先级高于class

■后面的样式覆盖前面的

■指定的高于继承

■行内样式高于内部或外部样式

■总结:单一的(id)高于共用的(class),有指定的用指定的,无指定则继承离它最近的

 

6)css盒模型组成

属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。

网站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>


QQ截图20200106132645.png 网站DIV+CSS教程培训教程X(HTMLCSS基础知识)一  html教程 divcss 第2张


一列固定宽度居中


<!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>


QQ截图20200106132707.png 网站DIV+CSS教程培训教程X(HTMLCSS基础知识)一  html教程 divcss 第3张



一列自适应宽度


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w。org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3。rg/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。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3。rg/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>


QQ截图20200106132743.png 网站DIV+CSS教程培训教程X(HTMLCSS基础知识)一  html教程 divcss 第4张

一列二至多块布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。rg/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>

QQ截图20200106132724.png 网站DIV+CSS教程培训教程X(HTMLCSS基础知识)一  html教程 divcss 第5张




3、CSS语法

网站DIV+CSS教程培训教程X(HTMLCSS基础知识)  html教程 divcss 网站DIV+CSS教程培训教程X(HTMLCSS基础知识)一 第6张

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。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w。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>

QQ截图20200106132917.png 网站DIV+CSS教程培训教程X(HTMLCSS基础知识)一  html教程 divcss 第7张



二、两列固定宽度居中


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。rg/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>


QQ截图20200106132818.png 网站DIV+CSS教程培训教程X(HTMLCSS基础知识)一  html教程 divcss 第8张


三、xhtml的块级元素(div)和内联元素(span)


块级元素:就是一个方块,像段落一样,默认占据一行出现;

内联元素:又叫行内元素,顾名思义,只能放在行内,就像一个单词,不会造成前后换行,起辅助作用。

一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。


四、float属性


<div id="side"><img src="uploadfile/taobao0903/20090212165039036721.gif" width="192" height="142" /></div>

 <div id="main"> 教程适合初学者循序渐进学习!</div>

body { font-size:18px; line-height:200%; }

 #side { float:left; width:202px;}



五、三列自适应宽度


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3。rg/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。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3。rg/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>


QQ截图20200106132932.png 网站DIV+CSS教程培训教程X(HTMLCSS基础知识)一  html教程 divcss 第9张


请在#side上加上_margin-right:-3px;记住,前边加上一下划线,这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。



相关内容:


网站DIV+CSS教程培训教程X(HTMLCSS基础知识)一

网站DIV+CSS教程培训教程X(HTMLCSS基础知识)二

网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三







上一篇:百度信息流操作手册:信息流数据/报告信息流资产

下一篇:网站DIV+CSS教程培训教程X(HTMLCSS基础知识)二



除非注明,本站所有文章皆为本人原创,可随意转载但请保留链接或名字,谢谢!



相关标签:html教程divcss石家庄做网站石嘴山做网站双鸭山做网站四川做网站肃北蒙古做网站肃南裕固做网站绥芬河做网站随州做网站台山做网站太仓做网站太原做网站泰兴做网站泰州做网站唐山做网站天津做网站调兵山做网站铁岭做网站通化做网站

发表评论:

  • 最新文章

  • 热门文章

  • 随机文章

SEO姜东
    SEO姜东微信二维码

    常州SEO姜东


    从事互联网行业多年,希望分享各类互联网、SEO理念、跨境电商,扫码与我交流SEO


与我详谈SEO

常州SEO木木qq


常州SEO木木qq

特别推荐
加我的微信:SEO-jiangd详谈网络营销