一、 Css基础
css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（value）。
Selector { Property: value }
参数说明：
Property : value — 样式表定义。属性和属性值之间用冒号(:)隔开，定义之间用分号(;)隔开。
（1）类选择符（.类名，页面中可使用多次）
在 CSS 中，类选择器以一个点号显示：
.divclass {
color: red;
}
/*在下面的 html 代码中，div 元素含有 divclass 类，意味着它要遵守.divclass的规则。*/
<div class="divclass">
hello div
</div>
范例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="MyCss.css" type="text/css" rel="stylesheet">
</head>
<body>
<!--p 标签中嵌套了一个 a 标签，在下面的 css 引用过程中我们可以看到的.pclass a 即为 class 被用作派生选择器-->
<p class="pclass">这是一个 class 显示效果<a href="http://www.baidu.com">效果</a></p>
<div class="divclass">hello div</div>
</body>
</html>
MyCss.css文件：
.pclass a{
color: green;
}
.divclass {
color: red;
}
（2）id选择符(#id名，页面中只能使用一次)
id 选择器以“#”来定义
范例：
index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>范例：</title>
<link href="MyCss.css" type="text/css" rel="stylesheet">
</head>
<body>
<p id="pid">hello css<a href="www.sicau.edu.cn">四川农业大学</a></p>
<div id="divid">this is a div</div>
</body>
</html>
MyCss.css
/*#divid{}就是一个独立的 id 选择器，而#pid a{}就是id选择器用于建立派生选择器,相当于是一个嵌套。*/
#pid a{
color:#00755f;
}
#divid {
color: red;
}
（3）标签选择符(标签名)
范例：
index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>范例：</title>
<link href="MyCss.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>hello css<a href="www.sicau.edu.cn">四川农业大学</a></p>
<div>this is a div</div>
<p>第二个段落</p>
</body>
</html>
MyCss.css
p,a{
color:#00755f;
}
div {
color: red;
}
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
