码迷,mamicode.com
首页 > Web开发 > 详细

html学习之CSS控制宽高背景

时间:2014-10-06 21:57:20      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   ar   for   文件   sp   div   

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

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

     2、CSS 的引入方式

①外部链接一个CSS文件,我们在HTML头部分标明:<link href="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控制宽高背景

标签:style   blog   http   color   ar   for   文件   sp   div   

原文地址:http://www.cnblogs.com/jingliming/p/4008630.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!