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>下开始的, 并不限定相同的标签.