css的语法
selector {property: value}
即 选择器{属性:值}
学习css即学习有哪些选择器，哪些属性以及可以使用什么样的值
例如：选择所有的p元素，并且设置文字颜色为红色
<style>
p{
color:red;
}
</style>
<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>
也可以直接在元素上增加style属性，直接在某一个元素上增加style属性即可达到css一样的效果
<p style="color:red">这是style为红色的</p>
<p>这是一个没有style的p</p>
CSS选择器
选择器主要分3种
元素选择器
id选择器
类选择器
元素选择器
元素选择器通过标签名选择元素
在实例中，所有的p都被设置成红色
<style>
p{
color:red;
}
</style>
<p>p元素</p>
<p>p元素</p>
<p>p元素</p>
id选择器
通过id选择元素
注： 一个元素的id应该是唯一的。另一个元素不应该重复使用
<style>
p{
color:red;
}
#p1{
color:blue;
}
#p2{
color:green;
}
</style>
<p>没有id的p</p>
<p id="p1"> id=p1的p</p>
<p id="p2"> id=p2的p</p>
类选择器
当需要多个元素，都使用同样的css的时候，就会使用类选择器
<style>
.pre{
color:blue;
}
.after{
color:green;
}
</style>
<p class="pre">前3个</p>
<p class="pre">前3个</p>
<p class="pre">前3个</p>
<p class="after">后3个</p>
<p class="after">后3个</p>
<p class="after">后3个</p>
更准确的选择
同时根据元素名和class来选择
<style>
p.blue{
color:blue;
}
</style>
<p class="blue">class=blue的p</p>
<span class="blue">class=blue的span</span>
网友评论