HTML/CSS基础教程 五

Buttons

我们平时浏览的网页都是有很多按钮的, 怎么制作这些按钮呢? 一个简单的按钮可以这样制作:

　　1. 在HTML的body中用<div></div>创建一个块

<body>
    <div></div>
</body>

　　2.在css中定于div的样式

div {
    height: 50px;
    width: 120px;
    border-color: #6495ED;
    background-color: #BCD2EE;
    border-width: 2px;
    border-style: solid;
    border-radius: 5px;
    margin: auto;
    text-align: center;
}

其中border-radius可以改变按钮四个拐角的弧度.

　　3.在<div>里添加链接

Selectors

　　1. css中的seletor可以是任何HTML元素, 例如我们可以改变整个网页的背景颜色:

body {
    background-color: #C6E2FF;   
}

　　2. 在下面这段代码中:

<div>
    <div>
        <p>I like tacos!</p>

如果我们只想改变俩个<div>之后的<p>而不是整个网页的<p>, 我们可以这样定义css:

div div p {
    /*CSS stuff!*/
}

　　3. >

div > p {
    /*CSS stuff!*/
}

这段代码表示只对与<div></div>紧挨着的<p>进行修改.

　　4. * selector 允许我们进行全局设置, 例如, 设置全局的边框:

* {
    border: 2px solid black;
}

Classes 和 IDs

1. 类
当很多html元素具有相同的属性时, 类是非常有用的. 你可以使用类对不同的HTML元素赋予相同的属性, 这些属性在CSS中定义. 例如我们将下面三个元素归为一个类, 类名是square:
<div class="square"></div>
<img class="square"/>
<td class="square"></td>

我们这样在css中定义square类的属性:

.square {
    height: 100px;
    width: 100px;
}

2.id

id允许我们给一个特定的html元素起名, 然后修改这个名字的css, 例:

<div id="first"></div>
<div id="second"></div>
<p id="intro"></p>

在针对这三个名字修改css:

#first {
    height: 50px;
}

#second {
    height: 100px;
}

#intro {
    color: #FF0000;
}

 pseudo-class selector 

当我们想要链接在未点击, 鼠标移到上面, 点击都显示不同的状态, 怎么办? 使用Pseudo-class selector. 它的一般格式为:

selector:pseudo-class_selector {
    property: value;
}

例如让一个链接在鼠标移到上面显示下面的样式:

a:hover {
    color: #cc0000;
    font-weight: bold;
    text-decoration: none;
}

还有其他的选项:

　　a:link 未访问的链接

　　a:visited 已访问的链接

另一个用法: 例如当我们有很多<p>时, 我们只想修改第一个<p>的css, 可以这样:

p:first-child {
    color: red;
}

我们可以使用nth-child(number)修改第number个<p>, 这里的number是从<body>下开始的, 并不限定相同的标签.

 

posted @ 2014-05-20 17:38  TonyZheng  阅读(133)  评论(0)  编辑  收藏  举报