一:CSS组成部分
CSS学习的内容主要包括两部分;
一:选择器
二:属性
二:基础选择器符号及使用示例
(1) 通用选择器
目录
符号: *
通用选择器使用示例:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
* {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
(2)元素选择器
符号:<元素符号>
元素选择器使用示例
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
(3)类选择器
符号:<类名>
类选择器使用示例
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
.class2 {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="class1 class2" href="http://apress.com">Visit the Apress website</a>
<p>I like <span class="class2">apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
(4)id选择器
符号: #
id选择器使用示例
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
#w3canchor {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a id="apressanchor" class="class1 class2" href="http://apress.com">
Visit the Apress website
</a>
<p>I like <span class="class2">apples</span> and oranges.</p>
<a id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
(5)属性选择器
符号:[属性]
属性选择器示例代码
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
[href] {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a id="apressanchor" class="class1 class2" href="http://apress.com">
Visit the Apress website
</a>
<p>I like <span class="class2">apples</span> and oranges.</p>
<a id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>