WEB程序设计之CSS（二）

WEB程序设计之CSS（二）

1.列表属性

2.表格属性

3.尺寸属性

4.边框属性

1）每个元素外面都可以有一个边框

2）边框可分为上，下，左，右，四个边框

3）每个边框可以有颜色（color），样式（style）、宽度（width）三种属性

5.盒模型

盒模型是xhtml+css布局页面中的核心

每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。

盒模型的四要素：content（内容）、border（边框）、padding（内边距）、margin（外边距）

                                     

margin：是盒子外面与其他元素的距离，用1到4个值来设置元素的外边距，每一个值都是长度、百分比或auto，允许使用负值。还可以使用margin-top、margin-right、margin-bottom、margin-left，外边距顺序依次是上、右、下、左

padding：内边距，指文本边框与文本之间的距离，使用方法和margin相同。

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。

如果有如下的CSS定义

<span style="font-family:SimSun;font-size:18px;">    #box{
    width:70px;
    margin:10px;
    padding:5px;
    }</span>

则整个盒子占用的空间计算如下

6.块级元素与行内元素

块级元素（block）：一般是其他元素的容器，可容纳内联元素和其他块级元素，块级元素独占一行，宽度(width)和高度(height)起作用。常见块级元素为div和p,h,ul

内联元素（inline）：内联元素只能容纳文本或者其他行内元素，它允许其他行内元素与其位于同一行，但宽度(width)和高度(height)不起作用，元素的宽度就是它包含的文字或图片的宽度，不可改变。常见的行内元素为a和span。

块级元素和行内元素可通过display属性进行强制转换

display : block || inline || none || inline-block

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。，<img>、<input>标签就是这种内联块状标签。inline-block元素特点：1、和其他元素都在一行上；2、元素的高度、宽度、行高以及顶和底边距都可设置。

示例1：

代码如下：

<span style="font-family:SimSun;font-size:18px;">    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
    margin: 0px;
    padding: 0px;
    }
    div{
    border: 8px solid #6d8bc1;
    width: 200px;
    background: #aad9f7;
    }
    h2{
    font-size: 14px;
    color: #336;
    /*border: 1px solid blue;*/
    padding:18px 0px 0px 18px;
    }
    p{
    font-size: 12px;
    padding: 18px;
    }
    </style>
    </head>
    <body>
    <div>
    <h2>求职意向</h2>
    <p>寻一份互联网相关专职工作.</p>
    </div>
    </body>
    </html></span>

示例2：

代码如下：

<span style="font-family:SimSun;font-size:18px;">    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
    margin:0px;
    padding: 0px;
    }
    body{
    padding: 20px;
    font-size: 12px;
    }
    dl{
    width: 200px;
    border: 1px solid #c5c6c4;
    border-top: none;
    }
    dt{
    padding: 4px;
    font-weight: bold;
    border-top:1px solid #c5c6c4;
    background: #f4f4f4;
    }
    dd{
    padding: 4px 12px;
     
    }
    </style>
    </head>
    <body>
    <dl>
    <dt>CSS</dt>
    <dd>CSS入门</dd>
    <dd>CSS进阶</dd>
    <dd>CSS高级技巧</dd>
    <dt>WebUI</dt>
    <dd>理论知识</dd>
    <dd>实战应用</dd>
    <dd>高级技巧</dd>
    </dl>
    </body>
    </html></span>

示例3：

代码如下：

<span style="font-family:SimSun;font-size:18px;">    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
    margin: 0px;padding: 0px;
    }
    a{
    margin: 100px;
    color:#000;
    text-decoration: none;
    font-size: 12px;
    background: #d4d0c8;
    height: 30px;
    line-height: 30px;
    width: 100px;
    display: block;
    text-align: center;
    border:1px solid #000;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    }
    a:hover{
    background: #ddd;
    }
    </style>
    </head>
    <body>
    <a href="#">链接按钮</a>
    </body>
    </html></span>

示例4：

代码如下：

<span style="font-family:SimSun;font-size:18px;">    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
    margin: 0px;padding: 0px;
    }
    #b1{
    margin: 50px;
    background: none;
    border: none;
    font-weight: bold;
    background: url('xml.jpg') no-repeat 0px -12px;
    padding: 4px;
    padding-left: 40px;
    border: 1px solid #000;
    }
    </style>
    </head>
    <body>
    <input type="submit" name="Submit2" value="RSS定阅" id="b1"/>
    </body>
    </html></span>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

css作业练习：

请写出如下效果的css代码

要求：

1）网页背景色为#a8d8ec，背景图片为pic.jpg（单击下载），不平铺，背景图片位置距左边100px，距上面50px；

2）标题效果为蓝色，居中，字体为微软雅黑

参考代码：

<span style="font-family:SimSun;font-size:18px;">    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>背景练习</title>
    <style>
    body{
    background: #a8d8ec url('./images/pic.jpg') no-repeat 100px 50px;
    }
    h2{
    text-align: center;
    color:#00f;
    font-family: 微软雅黑;
    }
    </style>
    </head>
    <body>
    <h2>背景CSS练习</h2>
    </body>
    </html>


</span>