css选择器(基础知识)
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去掉。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。