CSS那些事儿笔记

边看《css那些事儿》边对书中的知识点做的整理，只是为了自己方便查看和巩固。

背景的简写

body {
background-color: #FF0000;
background-image:　url(background.png);
background-repeat: no-repeat; /* 背景图片无平铺 */
background-attachment: fixed; /* 将背景图片固定，不随页面滚动而滚动 */
background-position: 0 0;

}

可以缩写成

body {
background: #FF0000 url(background.png) no-repeat fixed 0 0;
}

background的基本语法是  background: background-color || background-image || background-repeat || background-attachment || background-position

字体的缩写

body {
font-style: italic;
font-variant: small-caps; /* 定义字体为小型的大写字母，针对英文 */
font-weight: bold;  /* 将文字加粗 */
font-size: 12px;
line-height: 140%; /* 定义行高 */
font-family: "Lucida Grand", sans-serif; /* 定义字体名称 */
}

可以缩写成：

body {
font: italic small-caps bold 12px 140% "Lucida Grand", sans-serif;
}

font的基本语法是 font: font-style || font-variant || font-weight || font-size || line-height || font-family 

表的简写

li {
list-style-type: square;
list-style-position: inside;
list-style-image: url(image.png);
}

可以缩写成

li {
list-style: square inside url(image.png);
}

list-style的基本语法是 list-style: list-style-type || list-style-position || list-style-image 

伪类： 指定一个或多个与其相关的选择的状态

a:link {color: red; } /* 锚点链接的默认状态 */

a:visited {color: red; } /* 锚点被访问过后 */

a:hover {color: red; } /* 鼠标悬浮在锚点链接上 */

a:active {color: red; } /* 锚点被激活 */

伪对象：在HTML的文档指定的信息之外，创建了文档的额外信息。

例如 :before , :after

使用@import关键字导入样式的方式时，@import写在样式表的最前面，但浏览器解析的时候是最后才解析的，因此容易导致IE6出现闪频或者在打开页面的过程中无样式直到页面加载完毕后才会加载样式的现象出现，因此建议不要使用导入样式表的方式，而使用外联样式表的方式来连接外部样式表文件。

第三章 页面布局

IE浏览器存在两种渲染方式：Quirks（怪异模式）和Standard（标准模式）。在Standard模式中，浏览器根据规范表现页面。早Quirks模式中，页面以一种比较宽松的向后兼容的方式显示，通常模拟老师浏览器的行为以防止老站点无法工作。

第四章 两列页面布局

主要有以下的一些布局：

• 两列定宽结构的页面布局
• 两列宽度自适应结构的页面布局
• 单列定宽单列自适应结构的页面布局
• 实现两列等高布局的方式

页面结构的编写代码：

<div id="header">头部信息</div><div id="container"><div class="mainBox">主要内容区域</div><div class="sideBox">侧边栏</div></div><div id="footer">底部信息</div>

1.两列定宽结构

将mainBOX和sideBox这两个div的标签元素的宽度值固定，再将其控制在页面内容区域中的左右两侧。

.mainBox {float:left; /* 将主要内容区域向左浮动 */width:680px;height:250px;color:#FF0000;background-color:#333333;} /* 设置主要内容区域的宽度为680px，高度为250px，背景色以及文本颜色，并居左显示 */.sideBox {float:right; /* 将侧边栏向右浮动 */width:270px;height:250px;color:#FFFFFF;background-color:#999999;} /* 设置侧边栏的宽度为270px，高度为250px，背景色以及文本颜色，并居右显示 */

2.两列自适应结构

在两列自适应结构的页面布局中，其实是将宽度属性以百分比的形式计算，但该宽度不是盒模型的总宽度，而是盒模型的内容区域的宽度。

text-indent: 首行缩进


line-height属性的属性值可以不设置单位，也可以使用小数点，但不设置单位的时候会以段落中某个最大的文字字体为基准做行高处理。


:first-letter 设置对象内的第一个字符的样式；
:first-line 影响标签元素中第一行的文本；


.jpg格式也成为JPEG格式，是一种图像格式，使用有损压缩的方式去除冗余的图像和彩色数据，在获得极高的压缩率的同时展现图像。可以用最少的磁盘空间得到较高的图像质量。


JPEG格式的文件尺寸较小，下载速度快。


gif格式用来交换图片。压缩比高，磁盘空间占用较少。缺点是存储不能超过256色的图像。但是它有图像文件小，下载速度快，可用许多具有同样大小的图像文件组成动画的优势。网页中用GIF格式的以图标类的图片居多，这类图片对色彩没有太多要求。


.png
存储形式丰富，兼容GIF和JPG的色彩模式，
能把图像文件压缩到极限以利于网络传输，
又能保留所有与图像品质有关的信息，因为PNG是采用无损压缩的方式来减少文件的大小，这一点与牺牲图像品质以换取高压缩率的JPG不同。
另一个特点是现实速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像。
PNG同样支持透明图像的制作。


../images/logo.png 为上一级目录下的images文件夹中的logo.png文件。
/images/logo.png 为根目录下的images文件夹中的logo.png文件。
images/logo.png 为同一目录中的images文件夹中的logo.png文件。


在网页中background-image属性优先于background-color属性，背景图片永远覆盖于背景色之上。


background-position属性除了可以用数值精确控制背景图片的位置，也可以用top,center,bottom,left,right等关键词控制背景图片的现实位置。