基于
web
标准设计网站
,
与以往的设计方式不同
.
利用
CSS
布局来代替传统的表格布局
.
可以实现表现与内容的分离
.
让我们开发和维护更加的方便
.
还可以减少代码量
.
反正有诸多好处
.
一.
CSS
对于一个
DIV
的控制
.(
盒模型
)
一个
DIV
中
,
通常会有一个
class
来标识这个块
,CSS
就是通过这个
Class
来控制
DIV.
主要的属性有下面几个
:
<html>
<head>
<style type=”text/css”>
Body{margin:0;}
.test{
Width:30px;
Height:50px;
Margin:50px 50px 50px 50px
à
以顺时针方向来定义外边距
.
Padding:30px
à
来定义内边距
.
也可以使用
padding-left
属性来只指定左边距
.
Background:url color no-repeat(repeat-x/y) right botton(center)
|
à
用来指定背景的属性
.
分别是背景的
url
路径
.
颜色
(
可以用缩写
,
比如
#336699
写成
#369),
是否重复显示
(
横
/
纵向
),
和显示位置
.
Border:1px solid/dotted green;
à
指定边框粗细
,
样式
(
实线
/
虚线
)
颜色
}
</style>
</head>
<body>
<div class = “test”>
……
</div>
</body>
</html>
二.
内联元素和块级元素
.
在同一行里显示的是内联元素
.
自动换行的是块级元素
.
主要用于排版页面
,
需要根据不同的元素做出不同的处理
.
三.
绝对定位和相对定位
.
不采用任何绝对定位
,
使用相对定位
(
经验
).
四.
Class
和
id
的区别
Id
一个页面只能使用一次
.Class
可以多次引用
.
Id
是一个标签
,
用于区分不同的结构和内容
.Class
是一个样式
.
Id
是先找到结构和内容
,
再给它定义样式
.Class
是先定义好一种样式
,
然后再找结构和内容
.
可以复用的用
class
定义
,
不复用的用
id
定义
.
建议所有的样式都用
Class.
五.
CSS
三大规则
.
1.
块级元素的横向排列要浮动
(
设置
float
属性为
left
或其他
).
2.
不需要浮动时使用
clear:both(
清除浮动
float,
恢复原来属性
.)
3.
所有非内容图片全部用背景
(
显示的时候不会把背景当图片显示完了内容才出来
).
总结
:
大体对
CSS
又有了一个深刻的理解
,
以前也了解过
CSS,
但是那是很肤浅的应用
.
更多的理解将会在实际项目中去体会到
.UP!