一、html 3部分
1、DOCTYPE (文档类型说明)
2、head (头部信息)
3、body (主体信息)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>网页标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
...... 各种标签 .....
</body>
二、div布局 之先认识几个热身的单词
tyle: 风格,样式 width: 宽度 height: 高度 background :背景 division: 区域,块
red,blue,green,yellow,gray,black, white,pink,purple,orange,silver
三、css控制 之css介绍 1:css的含义: Cascading Style Sheet, 级联样式表/层叠样式表 2:css 是干什么的? 是页面元素的表现形式的”档案”
四、css控制 之css引入 <head> <link rel=”stylesheet” href=”xxx.css” type=”text/css” /> </head>
关于选择器 为什么要选择器? 因为我们想控制页面内的每一个元素,我们需要先”选择”此元素 有哪些选择器? 标签选择器,id元素器,类选择器,派生选择器,群选择器,伪类选择器
标签选择器优先级高于ID选择器。
五、
盒模型:
w3c组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过css来控制这个盒的属性，。盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。
一个盒子的属性：width(宽度) height(高度) margin(外边距) border(边框) padding(内边距) background(背景颜色)
4个方向的margin如何定义?
1:通过参数顺序与4个方向对应 上、右、下、左
例:margin:10px;
margin:10px 20px;
margin:10px 20px 30px;
margin:10px 20px 30px 40px;
2:直接指定某1个方向的margin值
margin-top/right/bottom/left: 10px;
一个盒子本身有多大?
水平:左边框+左内边距+内容宽度+右内边距+右边框
竖直:上边框+上内边距+高度+下内边距+下边框
一个盒子占多大空间?
水平:左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
竖直:上外边距+上边框+上内边距+高度+下内边距+下边框+下外边距