HTML+CSS Development (IV) CSS Control

A CSS Style

Two CSS Location

1.static Location

Following the HTML location rules, the position is displayed normally.

2. Relation Location

Offset the specified distance relative to the position normally displayed; as follows, offset 30px to the right.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Location</title>
	<meta charset="utf-8">
	<style type="text/css">
		#span1{
			width: 200px;
			height: 200px;
			background: red;
			position: relative;
			right: 30px;
		}

	</style>
	<body>
		<span id="span1">span1</span>
	</body>
</html>

3.absolute positioning

The element is separated from the document stream and is positioned absolutely relative to its containing block by attributes such as left, bottom, top, right, etc. The following example div1 is the containing block.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Location</title>
	<meta charset="utf-8">
	<style type="text/css">
		#div1 {
			height: 20px;
			background: green;
		}
		#span1{
			width: 200px;
			height: 200px;
			background: red;
			position: absolute;
			right: 30px;
		}

	</style>
	<body>
		<div id="div1">
			<span id="span1">span1</span>
		</div>	
	</body>
</html>

4.fixed positioning

Similar to absolute positioning, but it contains blocks that are windows.

5.float positioning

A floating box can move left or right until its outer edge touches the border containing the box or another floating box. Because floating boxes are not in the normal flow of documents, the block boxes in the normal flow of documents behave as if floating boxes do not exist.

Reference resources: float positioning

Three CSS selectors

1. Element selector

The elements of the document are selectors.

<!DOCTYPE html>
<html>
<head>
	<title>CSS selector</title>
	<meta charset="utf-8">
	<style type="text/css">
		div {
			height: 20px;
			background: green;
		}

	</style>
	<body>
		<div>element selector</div>	
	</body>
</html>

2. Class selector

<!DOCTYPE html>
<html>
<head>
	<title>CSS selector</title>
	<meta charset="utf-8">
	<style type="text/css">
		.div1 {
			height: 20px;
			background: green;
		}

	</style>
	<body>
		<div class="div1">Class selector</div>	
	</body>
</html>

3.id selector

<!DOCTYPE html>
<html>
<head>
	<title>CSS selector</title>
	<meta charset="utf-8">
	<style type="text/css">
		#div1 {
			height: 20px;
			background: green;
		}

	</style>
	<body>
		<div id="div1">Class selector</div>	
	</body>
</html>

4. Property selector

<!DOCTYPE html>
<html>
<head>
	<title>CSS selector</title>
	<meta charset="utf-8">
	<style type="text/css">
		[attr] {
			height: 20px;
			background: green;
		}

	</style>
	<body>
		<div id="div1" attr="attribute selectors">attribute selectors</div>	
	</body>
</html>

Note: Only when DOCTYPE is specified, IE7 and IE8 support attribute selectors. In IE6 and lower versions, attribute selection is not supported.

5. Derivative selector

Define the selector by the location of the element.

Subelement selector

<!DOCTYPE html>
<html>
<head>
	<title>CSS selector</title>
	<meta charset="utf-8">
	<style type="text/css">
		#div1 > p {
			background: red;
		}
	</style>
	<body>
		<div id="div1">
				<p>Child element</p>
			<div>
				<p>Descendant elements</p>
			</div>
		</div>
	</body>
</html>

2. descendant element selector

<!DOCTYPE html>
<html>
<head>
	<title>CSS selector</title>
	<meta charset="utf-8">
	<style type="text/css">
		#div1 p {
			background: red;
		}
	</style>
	<body>
		<div id="div1">
				<p>Child element</p>
			<div>
				<p>Descendant elements</p>
			</div>
		</div>
	</body>
</html>

3. Neighboring Brother Selector

You can choose the element immediately after another element, and both have the same parent element.

<!DOCTYPE html>
<html>
<head>
	<title>CSS selector</title>
	<meta charset="utf-8">
	<style type="text/css">
		#div1 div + p {
			background: red;
		}
	</style>
	<body>
		<div id="div1">
			<div>
				<p>Descendant elements</p>
			</div>
			<p>Brotherhood element</p>
		</div>
	</body>
</html>

6. Selector grouping

Require both h2 element and p paragraph to be grey:

h2, p {color:gray;}

7. Wildcard selector

<!DOCTYPE html>
<html>
<head>
	<title>CSS selector</title>
	<meta charset="utf-8">
	<style type="text/css">
		*#important{background: red;}
	</style>
	<body>
		<h1 id="important">universal selector</h1>
		<p id="important">universal selector</p>
		<p id="p1">universal selector</p>
	</body>
</html>

8. Pseudoclasses

Used to add special effects to the selector.

W3C: The "W3C" column indicates which version of CSS the attribute is defined in (CSS1 or CSS2).

attribute	describe	CSS
:active	Add styles to the activated elements.	1
:focus	Add styles to elements that have keyboard input focus.	2
:hover	When the mouse hovers over the element, add a style to the element.	1
:link	Add styles to links that are not accessed.	1
:visited	Add styles to links that have been accessed.	1
:first-child	Add a style to the first child of the element.	2
:lang	Adds a style to an element with the specified lang attribute.	2

<!DOCTYPE html>
<html>
<head>
	<title>CSS selector</title>
	<meta charset="utf-8">
	<style type="text/css">
		a:link {color: #FF0000}
		a:visited {color: #00FF00}
		a:hover {color: #FF00FF}
		a:active {color: #0000FF}
	</style>
	<body>
		<a href="about:blank">Pseudo-elements</a>
	</body>
</html>

Note: a:hover must be in a:link and a:visited before it is valid; a:active must be in a:hover before it is valid; pseudo class is not sensitive to case.

9 Pseudo Elements

Add styles to some selectors.