4月17号工作

今天的工作
1、今天的工作主要是学习 学习css 接着昨天的学习继续下去

.center {text-align: center}这是让的class里面的文字居中
<h1 class="center">
这个标题是居中排列的
</h1>
<p class="center">
这个段落也是居中排列的
</p>
这个居中是让其在整个页面的居中如果用div将它们包裹的话 也还是居中顶上对齐的
如果是放在input 的text的类型里面那么就只能做到居中顶上就没办法了

div { color: red; font-size:16pt} 这是定义了所有 div里的字体大小和颜色
<div>
<p>
这个段落的文字为红色16号字
</p>
</div>

<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">发现了一个新属性 media这个选择媒体类型属性翻译过来的意思是“媒体”后面携带值在没有设置这个属性时默认的 是 上面的样子 意思是 media="all"选择媒体类型 all用于所有设备类型 在打个比方
<link href="styles/print.css" rel="stylesheet" type="text/css" media="print" />
使用media="print"来表示当执行打印文档时，使用print.css样式。 就是说只有打印时才会用到这个css
下面是media的值
all-- 用于所有设备类型
aural-- 用于语音和音乐合成器
braille-- 用于触觉反馈设备
embossed-- 用于凸点字符（盲文）印刷设备
handheld-- 用于小型或手提设备
print-- 用于打印机
projection-- 用于投影图像，如幻灯片
screen-- 用于计算机显示器
tty-- 用于使用固定间距字符格的设备。如电传打字机和终端
tv-- 用于电视类设备

hr {background-color: sienna}
定义水平线的颜色为土黄；
p {margin-left: 20px}
段落左边的空白边距为20象素；
body {background-image: url("images/back40.gif")}
页面的背景图片为images目录下的back40.gif文件

有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（<!-- 注释 -->）隐藏内容而不让它显示

<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>

@import 属性 翻译过来是 “进口 输入” 可以直接引用外面的css文件下面是写法
<style type="text/css">
@import"p.css"
同一个文件下
@import"p/p.css"
html和装载css的p文件在一个文件内
@import"../p/p.css"
这么写是装载html和css 的文件在同一个文件内
</style>

父元素 子元素 和相邻元素
<div title="这是一个div">
<h1>这是是h1的内容</h1>
<p>这是一个段落p的内容！<strong>这里是strong的内容</strong>这是一个段落p的内容！</p>
</div>
h1 和 p 同为 div 的“儿子”，两者分别同 div 形成“父/子”关系。
h1,p,strong 都是 div 的“子元素”。（三者都包含在 div 之内）
div 是 h1 和 p 的“父元素”。
strong 和 p 形成“父/子”关系，strong 的“父元素”是 p 。
但 strong 和 div 并非“父/子”关系，而是“祖孙”关系，但 strong 依然是 div 的“子（孙）元素”。
div 是 h1 p strong 三者的“祖先”，三者是 div 的“子（孙）元素”。
h1 和 p 两者是相邻的。
div strong {color:green;} 正确。strong 是 div 的“子元素”
p > strong {color:green;} 正确。strong 和 p 是“父/子”关系
div > strong {color:green;} 错误！strong 虽然是 div 的“子（孙）元素”，但两者乃是“祖孙”关系，而非“父/子”关系，因此不能用 > 符号连接

* html p {font-size: 5em; }
(适用于IE4-6)
HTML元素是W3C标准DOM (Document Object Model)的根元素，但是IE 4至6的版本中还有一个神秘的父元素。完全兼容的浏览器会忽略这个* html选择器，但IE4-6却会对它正常处理。这样就可以为这些版本的浏览器指定特别的规则。比如，这个规则可以特别指定IE4-6中的文字大小，但对 其它浏览器不起作用。

伪类

1 :link </pre>

说明： 设置 a 对象在未被访问前的样式。默认值由浏览器决定。 对于无 href 属性(特性)的 a 对象，此伪类不发生作用。 请参阅 body 对象的 link 属性(特性)和 document 对象的 linkColor 特性。 IE3将 :link 伪类的样式表属性作用于 visited 伪类。 语法：Selector : link { sRules } 示例：a:link { font-size: 14pt; text-decoration: underline; color: blue; }


2 :hover </pre>

说明： 设置对象在其鼠标悬停时的样式。 在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。 在CSS2中此伪类可以应用于任何对象。 语法：Selector : hover { sRules } 示例： a:hover { font-size: 14pt; text-decoration: underline; color: blue; } a:hover span{ color:red; }


3 :active </pre>

说明： 设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。 在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。 在CSS2中此伪类可以应用于任何对象。 并且 :active 可以和 :link 以及 :visited 状态同时发生。 语法：Selector : active { sRules } 示例：a:active { font-size: 14pt; text-decoration: underline; color: blue; }


4 :visited </pre>

说明： 设置 a 对象在其链接地址已被访问过时的样式。 IE3将 :link 伪类的样式表属性作用于 :visited 伪类。 默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。 对于无 href 属性(特性)的 a 对象，此伪类不发生作用。 请参阅 body 对象的 vlink 属性(特性)和 document 对象的 vlinkColor 特性。 语法： Selector : visited { sRules } 示例： a:visited { font-size: 14pt; text-decoration: underline; color: blue; }


5 :focus </pre>

说明： 设置对象在成为输入焦点(该对象的 onfocus 事件发生)时的样式。 语法： Selector : focus { sRules } 示例： a:focus { font-size: 14pt; text-decoration: underline; color: blue; } a:focus img { border: thin solid green }


6 :first-child </pre>

说明： 设置 E 的第一个子对象的样式。 语法：Selector : first-child { sRules } 示例： p a:first-child { color: green } table td:first-child { width:200px; }


7 :first </pre>

说明： 设置页面容器第一页使用的样式。仅用于 @page 规则。 语法： Selector : first { sRules } 示例： @page :first { margin: 4cm }


8 :left </pre>

说明： 设置页面容器位于装订线左边的所有页面使用的样式。仅用于 @page 规则。 语法： Selector : left { sRules } 示例： @page :left { margin: 4cm }


9 :right </pre>

说明：设置页面容器位于装订线右边的所有页面使用的样式。仅用于 @page 规则。 语法： Selector : right { sRules } 示例： @page :right { margin: 4cm }


10 :lang </pre>

说明： 设置对象使用特殊语言的内容的样式。 语法：Selector : lang { sRules } 示例： blockquote:lang(fr) { quotes: '?' ' ?' } /* 使用法语显示由quotes属性指定的法语的嵌套标记 */

根据我自己的理解 伪类 就比较像事件 当鼠标放在上面出现一个效果 点击后出现一个效果
点击完出现一个效果 不同的是 事件需要定义 但是伪类不需要 只需要在你要定义的标签后面加上去就可以了 就会识别 你要在什么时候触发什么样的效果 就比如下面的
<style type="text/css">
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
</style>
<a class="red" href="...">这是第一组链接</a>
<a class="blue" href="...">这是第二组链接</a>
也可以直接把 class 给干掉不要它 在页面显示出来的效果是一样的
<a href="...">这是第一组链接</a>
<a href="...">这是第二组链接</a>
没什么区别 最起来就算有也是后台的问题 前台看不出！

clear:both;
当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除clear:both;

今天的单词

[1] area /'earie/ 地区
[2] care /kea/ 关心
[3] airbus /'eab^s/ 空中巴士