继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

十一章 DIV CSS学习笔记(二)

手记佰篇
关注TA
已关注
手记 60
粉丝 58
获赞 272

第一行是关于文挡类型声明部分
<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 src="图片的路径 " 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;}

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP