CSS研究心得-上篇

第一章 HTML和CSS核心基础

1、在HTML中引入CSS的方法：行内式、内嵌式、导入式、链接式

2、基本CSS选择器：标记选择器、类别选择器、ID选择器、复合选择器

3、复合选择器包括：“交集”选择器、“并集”选择器、后代选择器

4、CSS带来的好处：

• CSS使页面载入更快；
• CSS可以降低网站的流量费用；
• CSS使设计师在修改设计时更有效率，而代价更低；
• CSS使整个站点保持视觉的一致性；
• CSS站点可以更好地被搜索引擎找到；
• CSS使站点对浏览者和浏览器更具亲和力；

在世界上越来越多的人采用Web标准时，掌握CSS可以提高设计师的职场竞争实力。

5、XHTML与HTML的重要区别：

• 在XHTML中标记名称必须小写
• 在XHTML中属性名称必须小写
• 在XHTML中标记必须严格嵌套
• 在XHTML中标记必须封闭
• 在XHTML中即使是空元素的标记也必须封闭
• 在XHTML中属性值用双引号括起来
• 在XHTML中属性值必须使用完整形式
• 在XHTML中应该区分“内容标记”与“结构标记”

6、阐述CSS的层叠特性：

行内样式>ID样式>类别样式>标记样式

第二章CSS禅意花园

CSS禅意花园由加拿大设计师Dave Shea创建。它的的官方网址是http://www.csszenggarden.com。其中比较有特性的CCS禅意花园典型作品案例有：安静、鲑鱼奶油奶酪、暴风雪、拱门、血色欲望、郊野、像素画、百合池塘、郁金香、日与夜、Si6、清茶时光、爱之空气、谷香、城市、“卡通版”禅意花园、收音机、海底世界、博物馆、剧院效果等。

CSS禅意花园中比较典型的的布局包括：两列布局、三列布局、三列布局变体、多列布局、包含圆角的设计、包含倾斜的设计、流体布局等。

第三章深入理解盒子模型

一个盒子实际所占的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的的属性；如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。

标准流就是CSS规定的默认的块级元素和行内元素的排列方式。当两个行内元素紧邻时，他们之间的距离为第一个元素的margin-right加上第二个元素的margin-left。两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，这个现象称为margin的塌陷现象。

“模型”就是本质特征的抽象，块级元素与行内元素的区别在于块级元素包围的元素会自动换行，而行内元素在它的前后不会自动换行。

第四章 盒子的浮动与定位

当某一个或几个盒子，它们设置为浮动以后，它们就会脱离标准流，那么标准流其它的内容就会顶到上面去，而文字会围绕着浮动的盒子环绕排列。对于HTML来讲，没有任何修改，仅通过CSS修改就可以改变元素的位置。

使用clear属性可以清除浮动的影响。static是默认的属性值，也就是该盒子按照标准流进行布局。relative称为相对定位，使用相对定位的盒子的位置根据常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。absolute称为绝对定位，盒子的位置以他的包含框为基准进行偏移。绝对定位的框从标准流中脱离。fixed称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准，进行定位。

display属性可以改变某个标记本来的元素类型，或者把某个元素隐藏起来。

当一个盒子设置为浮动以后，它会产生的影响：

• a宽度不会自动伸展，而是以内容来为准
• b脱离标准流而独立存在
• c它会对后面标准流中的文字产生影响，而使文字环绕着它进行排列
• d如果一个容器中的子div或子盒子都是浮动方式的，那么它的容器div或容器盒子它的高度不会自动伸展，如果需要自动伸展可以给它设置一个标准流下的div，并且使这个div能够自动的清除其他浮动框对它的影响，来实现容器div的自动扩展

广义的“定位”：要将某个元素放到某个位置时，这个动作可以成为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定位的问题。狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词要翻译为中文，也是定位的意思，然而要使用CSS进行定位操作的手段，并不仅仅通过这个属性来实现，因此不要把二者混淆。

第五章 文字与图像

在文字排版时，有时会要求第一个字母比其他字母大很多，并下沉显示，就可以使用长度单位em。

在CSS中，设置一个段落中各行文本的高度是通过line-height属性设置的。

CSS是通过font-size属性来控制文字大小的。

在CSS中字体是通过font-family属性来控制的，它可以同时声明多种字体，字体之间用逗号分隔开。

在CSS中，除了可以设置文字的颜色，还可以设置背景的颜色