您的位置：首页 > Web前端 > CSS

CSS selectors difference and examples

2013-10-24 12:01 281 查看

As we all know, there are three levels for using CSS files in html.

first is inline level:

example:

<html>

<head>

<title>Inline level</title>

</head>

<body>

<h1 style="text-align:center; color:red;">Helloworld</h1>

<p style="text-align:center; color:red;">this is my first html page</p>

</body>

</body>

above is the inline level. we can see it's very complex for us to use it.

second is document level:

<html>

<head>

<title>document level</title>

<style type="text/css">

p{

text-align:center;

color:red;

padding:3px;

}

</style>

</head>

<body>

<p>this is my first html page!!!! enjoy it.</p>

</body>

</html>

Third is external level:

<html>

<head>

<title>External Level</title>

<link rel="stylesheet" type="text/css" href="../style.css"/>

</head>

<body>

<p>this is my first html page....</p>

</body>

</html>

style.css file:

p{

text-align:center;

color:red;

}

Ok. This is the basic information about how to format your webpage on these three methods. Then I will show you some important points about the selectors

1. simple selector

//The selector is an HTML tag name or a list of ta names separated by commas.

h1{property-value:list}

h2,h3{property-value:list}

this will be applied to all the instances of the tag with the same name.

2. Universal selector

//From my point of view, We never use this selector.

sometimes, when we want to apply to every html element in the document, you can do it.

* { color:red; or ...}

3. Class selector

//In many cases, we will use this; we attach a name to the style specification for the tag.

<p class="firstPara">This is my first paragraph</p>

p.firstPara

{property-value:list;}

4. Generic selector

//This mechanism for class selectors can be applied to different types of HTML tags.

<html>

<head>

<title>CSS selector</title>



<style type="text/css">

.generic

{

text-align:center;

color:Red;

}

</style>

</head>

<body>

<h1 class="generic">This is my first head!</h1>

<p class="generic">this is my first paragraph!</p>

</body>

</html>

// it will be applied to all the tags.

5. id selector

// this I think we will use it more often.

<html>

<head>

<title>CSS selector</title>



<style type="text/css">

#h1

{

text-align:center;

color:Red;

}

#p1

{

text-align:center;

color:Red;

}

</style>

</head>

<body>

<h1 id="h1">This is my first head!</h1>

<p id="p1">this is my first paragraph!</p>

</body>

</html>

// id selectors are very convenient for us to use in very complex pages. and you will find it will be used in javascript and the following issues.

So, please remember this selector.

6. Contextual selector

I am not very clear about this one. So, no comments.

7. Pseudo Class Selector

//This is always used in some user-driven events. And the following examples are about the common pseudo classes.

link, visited, hover, focus. And I will show you some examples on this section.

<html>

<head>

<title>CSS selector</title>



<style type="text/css">

a:link

{

background-color:Blue;

}

a:hover

{

background-color:Red;

}

</style>

</head>

<body>

<a id="isALink" href="http://www.baidu.com">this is a link</a>

</body>

</html>

//have a try for this one.

and this one is also good example:

<html>

<head>

<title>CSS selector</title>



<style type="text/css">

a:link

{

background-color:Blue;

}

a:hover

{

background-color:Red;

}

:focus

{

background-color:Red;

}

</style>

</head>

<body>

<a id="isALink" href="http://www.baidu.com">this is a link</a>

<p id="p1">this is a paragraph!</p>

<input type="text" size="20" class="textBox" />

</body>

</html>

Pick the difference up, and you will get it.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航