1:什么是CSS选择器?
<hr></hr> \<form></form>\<font></font>都是一个容器,而选择器就是选择一种你在css中定义某个容器
作用在html标签上,就称为选择器!
2:选择器有三种:
|--first:就是html选择器,以html标签为主!
<style type="text/css">
font {
color:#ff0000;
}
h1{
size:3;
}
...就是定义html标签,做为选择器!(理解为重写父类方法,调用(执行)的是子类!)
</style>
|--two:就是class属性选择器,可以是任意标识符(见名知意)
规则:
.标识符_class{
属性:值;
属性:值;
}
<style type="text/css">
.hu_class{
color:#ffooo;
size:10;
}
</style>
调用时,不需要加.
.main{
border:2px solid red;
}
<div class="main">
sfdsfds
</div>
|--three:最后一个是id属性选择器,它与class选择作用一样,可以是任意标识符(见名知意)
规则:
#标识符_class{
属性:值;
属性:值;
}
<style type="text/css">
#hu_class{
color:#ffooo;
size:10;
}
</style>
3:Css扩展选择器
为什么有扩展选择器?
|--关联选择器
出现理由:
因为当我定义一个html选择器,被所有标签共用时,而针对某些标签,又不能使用这选择器的样式,就出现了html标签嵌套!个别的
html标签的嵌套使用。
格式:
标签1 标签2{
属性:值;
}
1:表示只对 <标签1> <标签2> <标签2/><标签1/>这类的有效!
2:关联标签以(半角)空格隔开
|--组合选择器
多个标签使用相同的标签时,就可以使用此方法
格式:
标签1,标签2{
属性1:值1;
属性2:值2;
}
1:表示对所有为标签1和标签2开头的都支持该样式!
2:多个标签以,隔开!
|--伪元素选择器
其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
格式:标签名:伪元素。类名 标签名。类名:伪元素。都可以。
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态(未点击)。
a:active 点击超链接时的状态。
1:就是在css中预义一些标签,上面这些定义 color即可!
4:框架集
frameset:
rows="20%,*" 表示分割成两行,第一行占用20%的空间。
cols="10%,*" 表示分割成两列,第一列占用10%的空间。
frameborder="no" 边框隐藏
|--frame 放置每个小窗口的
src:表示这一个小窗口放置的是谁?
noresize="noresize":让窗口不能变化
name="left" 框架名字
|--target="right" 表示在指定right区域显示!(超连接...)
|--框架集标签不和body使用,把body去掉。
5:Div和span
css+div:块级标签,span:行标签。
span是不换行的,div是换行的。
//线宽度 线的类型 线的颜色
border: 1px solid red;
小结1:
我们可以相同的标签,加入class(定义其样式不同)或id(定义其样式不同),就能达到不同的效果!
也可以不同的标签,加入class和id选择器(相同的样式),也能达到相同的效果!
说白了,就是定义的标签都以id或class的样式为主!它就有执行它的,没有就执行本身的!
小结2:
建议都使用class,因为id是唯一的,属于js取值!
小结3:两种关联方式:
方式1:导入方式
<style type="text/css">
@import url(02.css);
</style>
方式2:链接方式
<link href="02.css" type="text/css" rel="stylesheet">
小结4:多样式使用
如果是针对整体网站的样式设置,请用css文件。链接式
....
如果是当前页面内大部分样式设置,请用style标签。头部方式
<style type="text/css">
p {
color: #00ff00;
}
</style>
如果是针对个别的样式设置,请使用style属性。行内方式
<p style="color:#0000ff;"></p>
小结5:注意事项
1:css样式,属性与值之间没有空格!也不用分号,必须;号结束!
2:框架集标签不和body使用,把body去掉。
css选择器(基础知识)