1. 元素id和class
A. id和class是html中两个最基本的公共属性。
B. 在同一个页面中，不允许出现两个相同的id，id是页面元素的唯一标识。
C. 在同一个页面中，可以有相同的class（甚至标签不同也可以），以便对具有相同class的元素定义相同的css样式。另外，一个元素可以有多个class。
2. css选择器
A. css选择器就是用一种方式选中需要的标签，实际上有多种选择方式。
B. css选择器的格式为： 选择器
{
样式属性1:取值1;
样式属性2:取值2;
……
}
注：不同选择器的”选择器“部分语法不同，”样式“部分语法相同
2.1. 基本选择器
2.1.1. 元素选择器
A. 就是选择元素，对相同的元素设置同样的css样式。
B. ”选择器“语法直接为"标签"。
e.g. <head>
<title>css入门</title>
<style type="text/css">
/* 设置所有p标签都显示为红色 */
p {
color: red;
}
</style>
</head>
<body>
<p>a</p>
<p>b</p>
<div>c</div>
</body>
2.1.2. id选择器
A. 为单个元素设置一个id，对相应的元素设置css样式。
B. ”选择器“语法为"#idName"
e.g. <head>
<title>css入门</title>
<style type="text/css">
#first {
color: red;
}
</style>
</head>
<body>
<p>a</p>
<p>b</p>
<div id="first">c</div>
</body>
2.1.3. class选择器
A. 为单个或多个元素设置class，对相应的元素设置css样式。
B. ”选择器“语法为".className"
e.g. <head>
<title>css入门</title>
<style type="text/css">
.xxx {
color: red;
}
</style>
</head>
<body>
<p>a</p>
<p class="xxx">b</p>
<div class="xxx">c</div>
</body>
2.2. 其他选择器
2.2.1. 子元素选择器
A. 选择某个元素的子元素，对其设置css样式。
B. ”选择器“语法为”选择器1 选择器2“，中间有空格。
e.g. <head>
<title>css入门</title>
/* id为xxx的元素中子元素id为zzz的元素显示为红色 */
<style type="text/css">
#xxx #yyy {
color: red;
}
</style>
</head>
<body>
<div id="xxx">
<p id="yyy">a</p>
<p id="zzz">b</p>
</div>
</body>
2.2.2. 相邻选择器
A. 选择某元素的下一个元素，对其设置css样式，这两个元素必须是同级元素。
B. ”选择器“语法为”#idName+标签“。
e.g. <head>
<title>css入门</title>
<style type="text/css">
/* id为yyy的下一个div显示为红色 */
#yyy+div
{
color:red;
}
</style>
</head>
<body>
<div id="xxx">
<p id="yyy">a</p>
<div>b</div>
<p>c</p>
<p>d</p>
<p>e</p>
</div>
</body>
2.2.3. 群组选择器
A. 对多个选择器对应的所有元素设置css样式（取并集，不是交集）。
B. ”选择器“语法为”选择器1,选择器2“。
e.g. <head>
<title>css入门</title>
<style type="text/css">
#yyy,
#zzz,
.ccc {
color:red;
}
</style>
</head>
<body>
<div id="xxx">
<p id="yyy">a</p>
<div>b</div>
<p class="ccc">c</p>
<p>d</p>
<p id="zzz">e</p>
</div>
</body>
97
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
