首页手记十一章 DIV CSS学习笔记（二）

十一章 DIV CSS学习笔记（二）

标签：

Html/CSS

第一行是关于文挡类型声明部分
<head>元素里面包含的信息不会在浏览器的窗口中显示，
<html>文档内容部分</html>
<head>头部信息部分</head>
<title>页面标题</title>此栏目显示在浏览器标题栏中
<body>页面主题</body>用来定义页面所要显示的内容
11个常用的html标签
（1）标题标签heading
<h1></h1> 创建最大的标题
<h2><h2> 创建第二大的标题
。。。。。。。。。。。。。
<h6></h6> 创建最小的标题
（2）段落paragraph <p> </p>
（3）换行(单标签) <br>
（4）超链接 <a href="http://www.guopengtao.com" target="_blank">超链接</a>
（5）水平线 <hr>
（6）无序列表 <ul> <li></li> </ul>
（7）有序列表 <ol> <li></li> </ol>
（8）文本横排 <span></span>
（9）插入图片 <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图片的路径 " width="500" height="500" />
（10）表格
<table></table> 创建一个表格
<tr></tr> 表格中的行
<td></td> 表格中的列
<b> </b> 加粗
<strong></strong> 加粗（<b>与此标签功能一样）
（11）字体的大小和颜色 <font size="3" color="red">郭朋涛网页设计!</font>

Css主要有3个选择符：标记选择符、类别选择符、id选择符
1、标记选择符（type selector），以html标签直接命名的选择符，例如：p、h1、dl、body等
实例：
<style type=“text/css”>
h1{color:font-size:}
</style>
2.类别选择符（class selector），该选择符以 “.”开头，后面的名字可自行定义，最好是字母
.wangye {font-size: 14px;font-weight: bold;color: #FF6600;}
<div class=“wangye”>网页设计</div>
3、id选择符（id selector），该选择符以“#”开头，后面的名字可自行定义，最好是字母

wangye {font-size: 14px;font-weight: bold;color: #FF6600;}

<div id=“wangye”> 网页设计与制作教程</div>
说说类选择符与id选择符的区别：
a）一个前边是点，一个前边是#
b）类选择符可以重复使用，且可以用在任意元素上，使用任意次
c）Html内id属性必须是唯一的，id选择符只能使用一次
d）Id选择符的优先权高于类选择符
对于初学者，建议先从id选择符学起，id选择符会用了，类别选择符基本上就没什么问题了。
通常情况下，两者是结合起来使用的。Id选择符管大块大方向，类别选择符处理小细节。牛逼的网页，一定是两者结合使用的。
先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin) CSS盒子模式都具备这些属性.
所以整个盒模型在页面中所占的总宽度=左边界+左边框+左填充+内容+右填充+右边框+右边界
而css样式中width所定义的宽度仅仅是内容部分的宽度,这是许多朋友容易搞混的地方
这里的边界我们也称之为:外边距、外补丁;填充也叫:内边距、内补。

css网页常用居中代码

{margin: 0px;padding: 0px;}
img,a img,a:hover img,a:active img,a:visited img{border:0;}
a {color: #fff;text-decoration:none;}
body {margin: 0px;background-color:#fff;background-repeat:no-repeat;background-position:top;}
/box/

box {width: 950px;background-color: #FFF;margin-right: auto;margin-left: auto;text-align: center;font-family: Arial, Helvetica, sans-serif,font-size: 12px;}
最新通用居中代码
{margin: 0px;padding: 0px;}
img,a img,a:hover img,a:active img,a:visited img{border:0;}
a {color: #fff;text-decoration:none;}
body {margin: 0px;background-repeat: repeat-x;background-position: top;background-color: #fff;font-size: 12px;}
清除代码:<div style=”clear:both” ></div>

常用的伪类元素
网页中，我们经常看到一些超链接，当我们鼠标放上去的时候，文字就变成了另一个颜色，放到图片上的时候，也会出现不同效果。
这些效果，通过以下伪类元素实现的。
通过这四个元素的定义，链接就会出现四种状态的变化。
a:link {text-decoration: none;color: #FFF;} / 未访问的链接 /
a:visited {color: #00FF00}/ 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 /
我们只需要将这四行代码，放到css文件中，页面的所有链接就不再是默认的蓝色了。
我们在css控制面板中，任意的调整样式，包括颜色、下划线等。
有人问了，如果我想给导航链接，专门定义一个链接样式怎么操作呢？
这个其实非常简单，比如我们导航层是： <div id="daohang"></div>
那么控制导航的链接样式就是这样的：

daohang a:link {color: #FFF;}

daohang a:visited {color: #00FF00}

daohang a:hover {color: #FF00FF}

daohang a:active {color: #0000FF}

同样的道理，我们可以定义各个div了。

规范书写
1、选择符的命名
最好为字母，或者字母加数字，不能用汉字
Id选择的命名，必须是唯一的，不能重复
2、标点符号要特别注意，多一个或者少一个，都会出现意想不到的错误。
3、文档的结构化书写：
正确的书写
<div id="liebiao">
<h1>课程目录</h1>
<ul>
<li>网页设计</li>
<li>动画专业</li>
<li>视觉传达</li>
</ul>
</div>
如下错误的书写：
<div id="liebiao">
<div id="biaoti">
<h1>课程目录</h1>
</div> （此div多此一举，没必要）
<ul>
<li>网页设计</li>
<li>动画专业</li>
<li>视觉传达</li>
</ul>
</div>
4、添加注释，如果div太多的话，要适当的添加一些注释:
/-------产品分类---------/
5、css代码优化
边界填充的优化：

daohang{

margin-top:10px;
margin-right:8px;
margin-bottom:12px;
margin-left:5px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;}
则可缩写为：

daohang {

Margin:10px 8px 12px 5px;（按照上、右、下、左的顺序来排列的）
Padding:0px;}
颜色值的缩写：
当RGB三个颜色值数值相同时，可缩写颜色值代码。如：
.menu { color:#ff3333;}
可缩写为:
.menu {color:#f33;}

点击查看更多内容