HTML及CSS学习随手记 day2 （head first）

1.CSS 颜色，是由构成其中的红绿蓝三种颜色所占数量决定。如果使用颜色名，比如red，blue等因CSS定义的限制，只能指定不到200种颜色，所以为了页面的表现力，我们可以使用包含1600万颜色的调色板。

可以使用十六进制码指定颜色，也可按红绿蓝所占百分比指定。十六进制码是较为常用的指定web颜色的方法。

用红蓝绿来指定颜色两种写法：一种是由百分比如rgb（80%，40%，0）表示红色80%，绿色40%，蓝色0构成的颜色。还有一种是使用0～255，比如前面的颜色同样可以使用rgb（204，102，0）来表示。

使用十六进制码表示颜色：一个十六进制中每组两位数字分别表示红蓝绿的分量，比如#cc6600，等同rgb（204，102，0）颜色，像这种没组分两种的两种数字都相同，可以说使用简写#c60。

2.line-height：行高，可以直接指定或者是用百分比和em，是基于基本字体大小的百分比，一般是基于body的或者浏览器的默认字体大小。而直接用数字，比如line-height：1，则表示相对自己本身字体的大小，这样可以不必区分标题与段落字体大小而单独设置。属性可继承。

盒模型：每个盒子由内容（content area），内边距（padding），边框（border）和外边距（margin）组成。元素的背景颜色（图片）只会延伸到内边距停止。width只是设置内容区的宽度。

background-image：url（相对路径或者完整的URL），其中url两边不需要加引号。backgroud-repeat：no-repeat（图像只显示一次，不重复）；repeat-x（图像只在水平方向重复）；repeat-y（垂直方向重复）；inherit（按父元素的设置来处理）

边框（border）border-style：solid（实线）；double（双线）；groove（糟线）；outset（外凸）；dotted（虚线）；dashed（破折线）；inset（内凹线）；ridge（脊线）

border-width：thin；medium；thick或者直接用像素数表示。

当然也可以指定一边的边框格式如border-top-width

border-radius：指定圆角，可以用像素数或者em。

text-align：center，不仅会使文字居中，会使所有的内联元素都居中，比如img。但只能在块元素上设置，如果直接在内联元素上设置无效。属性可继承。

        padding：上，右，下，左如果四个方向都是一样的可以只写一个。若上下一样，左右一样，则可以    padding：1px（上下） 2px（左右）。

同理border也可简写，比如直接指定颜色，线条粗细可以写作border：thin soild #0077ee。背景图片也适用。

3.CSS子孙选择器：#h h2是选择id为h下所有的h2标题，无论是否直接嵌套，有可能h2嵌套在一个div中；而#>h2则是选择id为h的元素下的直接子元素，不包括更深层的元素。

伪类 a：link{ }; link（可访问），visited（以访问的链接），hover（悬停在访问链接上）

4.div是块级内容创建逻辑划分的，而span是建立内联内容的逻辑分组。

CSS层叠样式选择：假设特定性数000，选择器中包含id的可以+100，包含类的+10，包含元素名的+1，特性分数越大，优先级越高。如果两个特性数一样大，则后面的样式会覆盖前面的。在大的方面，作者的优于读者优于浏览器默认样式。但是当读者使用h1{xxxx  !imoortant;}  !imoortant 则会覆盖作者的样式。

5. CSS默认使用流（flow）的方式在浏览器中摆放html中的元素。加载了一个html后，浏览器会从html文件的最上面开始，从上至下沿着元素硫逐个显示遇到的元素。

对于块元素，显示完后是一个换行，然后第二个块元素，继续换行……以此类推，从上往下流；而内联元素因为在水平方向上互相挨着，故会从左往右流，直至没有足够的空间，剩下的内容则会流入下一行。

特别注意，当浏览器并排放置两个内联元素的时候，它们之间的空间即两个内联元素的外边距之和。比如左边元素的外边距为10px，右边元素为20px，则两个元素之间有一个30px的空间；而当浏览器赏析放置两个块元素的时候，会将它们共同的外边距折叠，外边距高度为两者之间较大的外边距高度。比如上边元素的外边距为10px，下边元素的外边距为20px，则两个元素之间的高度空间为20px。

如何浮动一个元素？

要浮动一个元素，首先考虑要将浮动元素在那个元素下面浮动，在html文件中将其移动到目标元素的下面，然后必须要给元素设置一个宽度width，然后增加float属性，值可以为right或left，此时浏览器会讲这个元素从流中删除，这是就会显得此元素像浮在页面上一样。此时的块元素不会考虑这个浮动的块元素，会填充在此处，当然块元素会有一部分处于浮动元素的下方。不过不用过于担心，因为对于这些块元素内的内联元素定位时，它们会考虑浮动元素的边界，所以会围绕浮动元素，不会被浮动元素覆盖。而且CSS中提供clear属性，当元素流入页面时，在元素的左边，右边或者两边不允许有浮动内容。

有时为了当用户调整屏幕大小时，实际仍保持原样，这是就需要冻结布局，即将页面放在一个div中，设置一个固定width。此时无论浏览器怎么调整，都不会移动，当然当浏览器过宽时，页面会在右边留下一大片空白，看起来很奇怪，此时用到凝胶布局，这种布局会锁定页面的宽度，但显示时会将它距中显示。加入两条CSS即可实现，margin-left：auto；margin-right：auto；。

6.绝对定位：一个元素绝对定位后，浏览器也会将它从流中删除，然后将它放在指定的top（botto）和left（right）位置上，此时内联元素也会忽略这个元素，不会浮动显示内容。

7.利用CSS创建表格显示：在CSS添加display：table-cell；显示为列。display：table-rew 显示为行。

8.<video> 三种容器，MP4容器，包含H.264视频和AAG音频；WebM容器，包含VP8视频和Vorbis音频；Ogg容器，包含Theora视频和Vorbis音频。使用video标签 时，一般删除<src>属性，添加3个<source>元素，对应三种格式。比如

<video controls autoplay width="512" height="288">  <source src='video/xxx.mp4'>   <source src='video/xxx.webm'>  <source src='video/xxx.ogg'>   <p>sorry</p></video>
其中如果不支持视频，p标签会显示。当然想为浏览器提供更多帮助，可以如下：

<video controls autoplay width="512" height="288">  <source src='video/xxx.mp4' type='video/mp4;codecs="avcl.42E01E,mp4a.40.2"'>   <source src='video/xxx.webm' type='video/webm;codecs="vp8,vorbis"'>  <source src='video/xxx.ogg' type='video/ogg;codecs="theora,vorbis"'>   <p>sorry</p></video>