首页 > 代码库 > html学习之CSS控制宽高背景

html学习之CSS控制宽高背景

该笔记为自学html设计笔记,所有知识点为自己整理,如有疑问请浏览十八哥php教程,教程链接,点击这里。

知识梳理:1、html中的<head>和<body>分别为文本网页的头部和主体部分,其中head主要是定义html的类型和属性,比如title是标题部分,meta是机器搜索时的索引;body是html呈现的主体部分,是浏览网页可以看到得那一部分。

     2、CSS 的引入方式

①外部链接一个CSS文件,我们在HTML头部分标明:<link href="http://www.mamicode.com/css/my.css" rel="stylesheet" type="text/css"/>

②头部直接写入CSS: <style type="text/css"> div{margin:0;padding:0;border:1px solid red;}</style>
③外接多个CSS文件时:<style type="text/css"> @import url(my.css); </style>
④直接在html标签里写入对这个标签的CSS控制,如:<div style="border:1px solid red;">测试信息</div>

     3、定义html中的块属性可以在head中定义,例如

<style type="text/css">div{    height: 300px;    width: 500px;    background: red;}</style>

上例实现所有的div属性都为所定义的,如果要想实现自定义的div属性,可以通过下面的例子实现

<style type="text/css">div{    height: 300px;    width: 500px;    background: red;}#up{    background: green;}#center{    background: blue;}#bottom{    background: black;}</style>

 正文部分:CSS控制宽高

利用div控制宽高

        <div id="up"></div>        <div id="center"></div>        <div id="bottom"></div>

利用浮动来控制块的左右布局

例子

#up{    background: green;    float: left;}

 清除浮动

    clear: left;        clear: both;    

利用margin设置四个方向上的间距值

margin: 10px;margin-top:10px;margin-right:10px;margin-left:10px;margin-bottom:10px;

border的三要素:宽度、形状和颜色

盒子与文字之间的距离用padding设置间距

html学习之CSS控制宽高背景