HTML&CSS 第三天 笔记

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"

表格的适用范围:

显示格式化数据

不适用于页面布局