CSS selectors difference and examples

作者:北京诚信汇发物流有限公司  来源:www.cxhfwL.com  发布时间:2017-09-09 10:22:24
CSS selectors difference and examples 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>

<!--

<link rel="Stylesheet" type="text/css" href="stylesheet1.css" />

-->

<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>

<!--

<link rel="Stylesheet" type="text/css" href="stylesheet1.css" />

-->

<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>

<!--

<link rel="Stylesheet" type="text/css" href="stylesheet1.css" />

-->

<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>

<!--

<link rel="Stylesheet" type="text/css" href="stylesheet1.css" />

-->

<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.

,专题,站群系统

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:神农架SEO http://shennongjia.raoyu.net


上一篇:定向网络推广体现网站真正的价值
下一篇:最后一页