1.安装编译器
2.基础操作
1）通用选择器
*{
...
}
*{
color:red;
}
2）元素选择器
元素名称{
...
}
p{
color:red;
font-size:20px;
}
3)id选择器
#id属性值{
...
}
#p1{
font-weight:bold;
}
4)类选择器
.class属性值{
...
}
.hidden{
display:none;
}
5)分组选择器
选择器1,选择器2,...{
...
}
h2,#pre1{
color:red;
font-style:italic;
}
- CSS样式的优先级，是根据选择器的精准度 /权重决定的，常见的权重如下，权重越大，优先级越高
?元素选择器：1
类选择器：10
id选择器：100
内联样式：1000
- ?组合选择器：后代选择器、子代选择器、相邻兄弟选择器
?1）后代选择器
? ? ?选择指定元素的所有指定后代元素，以空格隔开
选择器 指定元素{
属性名:属性值;
...
}
.food li{
border:#9ACD32 solid 1px;
}
?2)子代选择器
? ?选择指定元素的第一代子元素，以大于号>隔开
选择器 > 指定元素{
属性名:属性值;
...
}
.food > li{
border:palegoldenrod dotted 1px;
}
3)相邻兄弟选择器
? ?选择指定的下一个指定元素，两者有相同的父元素，以+号隔开
选择器 + 指定元素{
属性名:属性值;
...
}
.food + li{
border:palegoldenrod dotted 1px;
}
3.代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本选择器</title>
<style type="text/css">
/*通用选择器*/
*{
color:#00FFF;
}
/*元素选择器*/
div {
font-size: 30px;
}
/*id选择器*/
#p1 {
background-color: #F4A460;
}
/*类选择器*/
.cls1 {
font-family:楷体;
}
/*分组选择器*/
#p1,.cls1,font {
text-decoration: line-through;
}
</style>
</head>
<body>
<!--
CSS基本选择器
1.通用选择器*
*{
属性名:属性值;
...
}
2.元素选择器
元素名/标签名 {
属性名:属性值;
...
}
3.id选择器 #
#id属性值 {
属性名:属性值;
...
}
4.类选择器 .
.class属性值 {
属性名:属性值;
...
}
-->
<div class="cls1">这是一个div1</div>
<div>这是一个div2</div>
<p id="p1">这是一个段落</p>
<span class="cls1">这是一个span</span>
<br />
<font>这是一个font</font>
</body>
</html>
|