一、 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;
}