css对html页面进行修饰,需要找到,方式如下
-基本选择器
元素选择器:
语法:html标签名{css属性}
<style type="text/css">
div{color:blue;font-size:888px}
</style>
id选择器: id具有唯一性
语法:#id的值{css属性}
<style type="text/css">
#d1{background-color: blue;}
#d2{background-color: red;}
</style>
<div id="d1">div1</div>
<div id="d2">div2</div>
class选择器
语法:.class的值{css属性}
<style type="text/css">
.c1{background-color: red}
.c2{background-color: blue}
</style>
<div class="c1">div1</div>
<div class="c1">div2</div>
<div class="c2">div3</div>
<div class="c2">div3</div>
选择器的优先级:id选择器>类选择器>元素选择器
-属性选择器:
语法:基本选择器[属性=‘属性值’]{css属性}
<style type="text/css">
input[type='text']{background-color: red}
input[type='password']{background-color: blue}
</style>
<form action="" method="post">
账号:<input type="text" name="account"/><br/>
密码:<input type="password" name="password"/><br/>
</form>
-伪元素选择器:表示一种状态
a标签的伪元素选择器
语法:
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
点击状态 a:active{css属性}
完整状态 a:visited{css属性}
<style type="text/css">
a:LINK {color:red}
a:HOVER {color:blue}
a:ACTIVE {color:pink}
a:VISITED {color:yellow}
</style>
<a href="#">点我!!!</a>
-层级选择器:
语法:父级选择器 子级选择器 .....
<div id="d1">
<div id="d11">
<span>span11</span>
</div>
<div id="d12">
<span>span12</span>
</div>
</div>
<div id="d2">
<div id="d11">
<span>span21</span>
</div>
<div id="d12">
<span>span22</span>
</div>
</div>
<style type="text/css">
#d1 #d12 span{color:red}
</style>