传智PHP基础班笔记5.doc

昨日回顾 CSS，称为“层叠样式表”。 CSS就是给HTML标记来指定格式的。 CSS规则是由“选择器”和“格式语句”。 CSS选择器：就是去查找指定的HTML标记，然后给该标记加样式。 CSS格式语句：就是CSS的属性，CSS的属性有很多类别。如：尺寸、文本、背景、边框等。 CSS选择器——基本选择器(单个选择器) 通配符“*”：将匹配所有的HTML标记，只要body中存在的标记都会生效。 标签选择器：对应于HTML标记，有什么样的HTML标记，就有什么样的标签选择器。如：p{color:red;} 类选择器：给HTML标记中，class属性值相同的元素，添加样式。命名必须以“.”开头。如：.news{} Id选择器：给HTML标记中，具有id属性的元素，添加样式。唯一性。命名以“#”开头。如：#news{} CSS选择器——组合选择器(多个选择器) 多元素选择器：同时给多个元素添加样式，各个选择之间用逗号“,”分开。如：p,h1,#box{} 后代元素选择器：给某个元素的所有后代元素，添加样式。用空格隔开。如：#box h1{} 子元素选择器：给某个元素的子元素添加样式。用“”隔开。如：#box h1{} CSS伪类选择器：给超链接加的样式(链接的不同状态加样式) 一个超链接，有四个状态： 正常状态(:link)：鼠标没放上之前链接的样式。 放上状态(:hover)：鼠标放到链接上时的样式。 激活状态(:active)：按住鼠标左键不松开的样式，这个状态特殊短暂。 访问过的状态(:visited)：按下鼠标左键，并弹起，这时的样式效果。 在平常工作中，会使用以下写法，来给链接加不同的样式： a:link, a:visited{ color:#444; text-decoration:none; } //将“正常状态”和“访问过的状态”合二为一。 a:hover{ color:#990000; text-decoration:underline; } //“鼠标放上”单做一种效果 CSS列表属性 list-style：列表样式，取值：none。去掉项目符号或编号前面的各种符号。 CSS边框属性：每个元素都可以加边框线 border-left：左边框线。 格式：border-left：粗细 线型 线的颜色; 线型：none(无线)、solid(实线)、dashed(虚线)、dotted(点状线) 举例：border-left：5px dashed red; border-right：右边框线。 border-top：上边框线。 border-bottom：下边框线。 border：同时给四个边加边框线。 CSS内边距属性：边框线到内容间的距离 注意：平常我们所说的width和height属性，它们指内容的宽度和高度，不含内、外边距、边框线。 padding-left：左内填充距离，左边线到内容间的距离。 padding-right：右内填充距离，右边线到内容间的距离。 padding-top：上内填充距离，上边线到内容间的距离。 padding-bottom：下内填充距离，下边线到内容间的距离。 缩写形式 padding:10px; //四个边的内填充分别为10px padding:10px 20px; //上下为10px，左右为20px padding:5px 10px 20px; //上为5px，左右为10px，下为20px padding:5px 10px 15px 20px; //顺序一定是“上右下左” CSS外边距属性：边线往外的距离 margin-left：左边线往外的距离。 margin-right：右边线往外的距离 margin-top：上边线往外的距离。 margin-bottom：下边线往外的距离。 简写式 margin:10px; //四个外边距分别为10px margin:10px 20px //上下外边距10px，左右外边距20px margin:5px 10px 15px; //上外边距5px，左右外边距10px，下外边距15px margin:5px 10px 15px 20px; //顺序一定是“上右下左” 我们可以把网页中的每个元素，都看成是一个“盒子”。 “盒子”有哪些特征：内容的宽度或高度、边框线、内填充、外边距。 Firefox浏览器中，Firebug调试工具的安装使用 如果你的Firefox的版本高于30的话，请使用Firebug2.0及以上版本。 如果你的Firefox的版本低于30的话，请使用Firebug1.9、Firebug10.6 Firebug插件的位置：飞秋共享 如果安装Fireb