CSS:层叠式样式表
一,对层标签进行操作
I。层标签的宽度,高度,底色
基本格式:
<div ></div>
" " 中: (宽度) 100px/50%; 100px表示宽度为100个像素(px必须有)/50%表示占网页宽度的一半(如果嵌套在一个层标签中,占该层标签的50%)
(高度) height:100px/50%; 100px表示高度为100个像素(px必须有)/如果嵌套在一个层标签中,占该层标签的50%(最外层层标签无法使用%,未知网页长度)
(背景色) background-color:red; red可以#颜色代码也可以
II。层标签中文字样式的修改(加粗,倾斜,下划线,字体,大小,颜色)
格式:<div ></div>
" "中: (加粗) font-weight:100/bold;
(倾斜) font-style:italic;
(下划线) text-decoration:underline;
(大小) font-size:10px; (正常浏览一般12px-16px)
(颜色) color:red/#颜色代码;
(字体) font-family:黑体;
常用的是这几个,其它的在按出:后会自动弹出,随用随调取。
III.流式布局 (将浏览器内容自动适应浏览器大小)
格式:<div ></div>
" "中: float:left/right (left,流式布局是以左侧为基准 。 right,流式布局时以右侧为基准)
margin-left/right/top/ bottom (left,层标签左侧间距。right,层标签右侧间距。top,层标签上部间距。bottom,层标签底部间距。)
IV。将层标签定位到网页中间
观察此图,可知层标签并没有设置到网页正中央,他是以层标签左上角的点为基准,而不是以层标签的中心作为中心点,所以应该将以左上角点为基准,左右各减去自身宽度,高度的一半的像素:
格式:<div ></div>
" "中: border:5px solid red; (层标签外框宽度5个像素,实线,颜色是红色)
position:abslute; (绝对定位,定位层标签左上角的点)
margin-left/right/top/ bottom (left,层标签左侧间距。right,层标签右侧间距。top,层标签上部间距。bottom,层标签底部间距。)
二,层标签分组使用
I。对层标签进行分组(可以把分组后个层标签看成一个文件(有多个单一层标签元素))
<head>
<style type="text/css">
.组名{width: ;
height: ;
…………(各种标签格式) ;
}
</style>
</head>
<body>
<div class="组名"></div>
<div class="组名"></div>
<div class="组名"></div>
</div>
分组后的层标签按照<head>内的格式统一。
三,背景
I。背景图片
格式:
<body margin: 0px; padding: 0px;">background-repeat:选择背景放置方式">
II。层标签贴边(层标签和HTML页边框没有缝隙)
代码:
<head>
* {
margin:0px;
padding:0px;
}
</head>