HTML:Advanced Web Construction

来源：互联网发布：mac海洋亮白粉饼色号编辑：程序博客网时间：2024/06/04 19:03

<div>

查看HTML的结构

<html>    <head>        <title> </title>    </head>    <body>    </body></html>

一个HTML里面就只有一个<body>，我们可以用新的元素<div>来将body划分为若干个部分。

<div>是block element，与<body>的作用几乎一样，都可以容纳众多元素（包括<div>）；但是<div>内嵌于<body>中，且数目更多。

元素的宽度和高度

width or height = content+margin+padding+border
（注意不要漏了border）

一般定义了宽度后，元素的长度会跟着改变以使文本内容能不溢出；我们也可以同时定义长和宽，但是一旦没把握好尺寸，会使文本内容溢出。

text-align

text-align会使block element中的所有inline element以某种方式对其，所以不管是文本还是图片都能用它来对齐；但是text-align的作用单位只能是block element，不能直接作用于inline element，如<img>（这种规则其实只是关乎语法语句而已）。

descendant

div h2{    color: #82ea92;}

#elixirs h2{    color: black;}

简单理解就是h2是div的子元素，div是h2的母元素。通过在子母元素间加上空格，就是从div中调用h2的语法。也可以使用id来调用。

缩写

见书442页
我们在定义padding、margin、border、background和font时都可以用到CSS默认的缩写形式，但是除了padding和margin的缩写形式比较容易别人外，我并不喜欢其他的缩写，宁愿多写一点也要保证代码的可读性。

<span>

<span>使用在inline element身上，可以在不分行的情况下，对同一元素内不同性质的文本进行修饰，

span作为一个元素（inline）虽然也有padding和margin等，但是却和block element不太一样。margin只能作用于左右；padding可能会相互覆盖

关于<a>

通常链接在不同状态下可以呈现不同的颜色，简单的语句就能实现：

a:link { color: green; }

普通状态下显示为绿色；

a:visited { color: red; }

已被访问时显示为红色；

a:hover { color: yellow; }

当我们鼠标停留在链接上时显示为黄色。

注意到，这里提及了pseudo-class，即伪类，与class有很多相同之处。

阅读全文

0 0