CSS页面引入方法
外链式(在head标签里面)
<link rel= “style href =“.1.css””>
1.css文件如下
div{
width:200px:
height:200px:
backgr-color:red
}
嵌入式,通过style标签,写在head里面(在style标签里面写入外联式一样的)
<style type="text/css">
div{
width:200px:
height:200px:
backgr-color:red
}
</style>
内联式(在body里面)分号很重要
<div style = "width:200ps:height:200ps:backgroud-color:red"><div>
推荐使用外联和嵌入~~~~
优先级别:离元素越近,越高
CSS的选择器
标签选择器,通过标签设置元素
id选择器,通过在标签里面添加id,id不能重复!
类选择器,应用最多
注释:/*这里写注释*/
标签选择器,通过div标签,影响所有div的标签
<style>
div{
width:200px:
height:200px:
backgr-color:red
}
</style>
类选择器 通过class类名来设置样式
首先在body的div标签添加类名
<div class=“iteam”></div>
然后在head的写入嵌入式###引用类的时候,一定在前面有个点,一个类可以应用多个元素
<style
.tieam{
width:200px:
height:200px:
backgr-color:red
}
</style>
一个元素可以使用多个类名
<div class=“iteam iteam3”></div>
id选择器,通过id设置样式
首先在body的div标签添加id名
<div id=“iteam2”></div>
然后再head的写入嵌入式###引id的时候,一定在前面有个#,id唯一
<style>
#iteam1{
width:200px:
height:200px:
backgr-color:red
}
</style>
优先级:影响范围越大,优先级越小:id>class>标签
层级选择器,选择父类下的子类设置属性,通过类、id、元素混合一级一级寻找要设置的元素
(下面是在类选择器下的标签选择)
首先在body
<div class:“wrap”></div>
<div></div>
然后在head标签下的嵌入式
<style
.wrap div{
width:200px:
height:200px:
backgr-color:red
}
</style>
(下面是在类选择器下的类选择器)
<div class:“wrap”></div>
<div class:“wrap2”></div>
----------------------------------------------
<style
.wrap .warp2{
width:200px:
height:200px:
backgr-color:red
}
</style>
同理类选择器下的id选择器,
并列选择器,給多个元素设置相同样式,引用类元素中间是逗号隔开
<div class:“hhh”></div>
<div class:“ggg”></div>
<div class:“vvv”></div>
把他们的宽度、高度设置200
<style
.hhh,ggg,vvv{
width:200px:
height:200px:
}
</style>
伪类选择器
设置鼠标悬停元素状态
<div class:“qqq”></div>
----------------------------------------
<style> (平时的状态)
.qqq;hover{
width:200px:
height:200px:
}
</style>
<style
.qqq;hover{ (鼠标悬停状态,变小了)
width:111px:
height:111px:
}
</style>