开发者

Beginner CSS Question

Why do the bg and header not overlap?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>My First CSS Webpage</title>
    <link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
    <img class="bg" src="bg.jpg"/>
    <img class="header" src="header.png"/>
</body>
</html>

    #bg{
        position:absolute;
 开发者_如何学运维       left:0px;
        top:0px;
    }
    #header{
        position:absolute;
        top:0px;
        left:0px;
    }


Use a . instead of a # or change class= to id=

I recommend the latter because I'm assuming that bg and header are unique.

<img id="bg" src="bg.jpg"/>
<img id="header" src="header.png"/>

See here for more info.


The two images in the html have been given classes, while in your css you define styles for ids.

If the element has a class, target it in css using .classname, if it has an id target it using #idname. If the element only occurs once in the html, use id. If there are multiple occurences, use a class.


also, I would suggest for 2 elements which use the same basic properties to define them as:

#element1, #element2
{
/* css properties */
}

This will save space on your css file, and can add up to quite alot.


In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”).

The HTML refers to the CSS by using the attributes id and class.

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

you can not use class in your HTML file and use a hash character (“#”) in your CSS file to style a particular element.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜