4：css 选择器的概念
Css要控制页面元素的显示形式，必须通过一定的方法，指定到该元素。
比如，
1:id选择器， 就是，给页面上的元素起一个不重复的id,
然后css, 通过 #id ，就能控制该元素。
这个概念称为css选择器。
类选择器:
用法: 页面里有<class="类名">来声明类
Css里, 用点+类名来选择这一类的元素. 例: .className{}
标签选择器:
因为html有很多种标签,如h1,p,div ,img,这样标签在页面里构成很多元素.
css可以通过标签名来选定页面内标签对应的元素.
比如:
P{}, 会对页面里所有的P标签生效
Div{},img{} ,则会对页面里所有的div,img生效.
派生选择器
通过元素的上下级关系来进行选择,(像地区由大到小的选择一样)
比如:
#header img{
}
#header ul {
}
则意味着分别选中#header元素下面的所有img元素和ul元素.
群选择器
例如:
#header, .intro {}
则意味着, 括号内的css 同时对 #header, .intro 生效.
伪类选择器:
伪类选择器,选择不是某一种元素,而是某种元素的某种状态
对于链接,我们可以针对的4种状态来设置显示效果.
链接没被点击过 :link
链接被点击过 : visited
鼠标放在链接上 :hover
鼠标点击的瞬间 :active
顺序: l v, h, a
通配选择器: * {}, 通配页面上所有元素(效率低,用的较少)
5：Css 基本写法
选择器 {
属性:值;
}
ü P: 段落
ü H(1-6): 1-6号标题,文字越来越小
ü Pre: 保持源码的原样格式输出
有一些内容类型,是div是表达不出来的
比如 要求你在页面内
引入超链接,引入一幅图片, 或者一个flash,或者一段视频
A 超链接, 用法<a href ="" title="" target="">文字或图片</a>
Img 引入图片, 用法 <img src="xxx.gif" alt="图片的文字标签" title="提示文字" />
Flash
Wmv, 这两个标签,目前各种浏览器的引入方式不一样,
因此,相相对来说,兼容性较好的引入代码如下:
<object type="application/x-shockwave-flash" data="88.swf" width="400" height="300">
<param name="movie" value="88.swf" />
</object>
<object classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="400" height="300">
<param name="autoStart" value="false" />
<param name="URL" value="php.wmv" />
<embed autostart="true" src="php.wmv" type="video/x-ms-wmv" width="400" height="300" controls="ImageWindow" console="cons"> </embed>
</object>
ul无序列表,ol有序列表
有序列表与无序列表 (都是块状元素)
<ul>
<li>这是列表项</li>
</ul>
<ol>
<li>这是有序列表项</li>
</ol>
通过css能控制列表的3个属性:
List-style-type : 列表项的显示标志
List-style-image: 用于替换显示标志的图片.
List-style-postion:inside/outside ,显示标志与列表内容的位置关系
注意:
虽然列表有3种属性,可以方便设置,
但是,我们实际使用中,往往把list-style-type 设为 none;
原因是:不同浏览器对于列表的渲染差别很大,
因此要通过css初始化,强制他们保持一致.
基本语法:(以3行2列为例)
<table>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
</table>
CSS属性控制:
对于table:
Border-collapse: 边框是否融合.
可选值: separate(表格与表格相互独立的边框,默认值)
Collapse,(表格之间的边框共用).
Border-spacing: 边框间距
用法: border-spaing: xpx ypx (给两个像素值,分别代表单元格在x,y轴的距离)
Empty-cells: 空表格是否显示.
可选值: hide, show ,默认是hide
注意: 如果border-collapse值为 collapse时, border-spacing,和empty-cells 自动失效.
想让空表格显示的处理方式:
1:在空单元格里加一个空白符" ";
2:让表格边框融合 collapse
合并列,合并行的小技巧
1、先把合并后,要消失的td删除掉
2、数一数留下的td要跨几行,或几列
3、再通过rowspan="N",或者colspan="N"
表格的适用范围:
显示格式化数据
不适用于页面布局