CSS学习小结
一 CSS概述和总览
网页的主要组成可分为三个部分：结构、表现和行为，对应的标准也有三个方面：结标准、表现标准和行为标准。结构标准的语言主要指HTML；表现标准的语言主要是CSS；行为标准的语言则是指对象模型。
CSS（Cascading Style Sheet）即层叠样式表是一组格式设置规则，用于控制web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。CSS是一种格式化网页的标准方式，它对颜色、字体、间隔、定位和边距等方面提供了多重属性，这些属性均可以用于HTML标记符。
CSS的优势：①CSS样式表可以制作出体积更小、下载更快的网页；②快速、便捷地维护及更新大量的网页；③浏览器的界面将更加友好；④内容和结构独立性强。
灵活的运用CSS可以更加高效设计出需要的网页。
二 CSS技术学习策略
一开始我会先看书，了解它的基本功能和作用，对其有一个总体的了解，然后分节学习它所包含的各个内容。在这期间，我会跟着书做书中的例题，一个一个的敲书中的代码，即边学边做，然后是自己尝试解决书中所留的练习，不会做的会上网查问题的解决办法，再一次尝试，并将它的难点和
其解决办法记下来留作参考。这样一章一章的学，学习后面的时候还会回顾前面所学，防止遗忘。整个都学完后就会综合其技术，把它运用到所要设计的网页中。这样下来就会有一个好的结果。
三 CSS学习所收集的资料概述
开始学习的CSS时，就是用的课本。过一段时间后，先后在多个网站上拓展相关知识，如
W3Cschool 网站，这个网站是同学推荐的，上面有很多资源，大部分都和网页的设计有关。网站的风格很适合我们的自学，知识点详尽，简单易懂，还给我们提供一些具体的代码供我们参考。还有参考手册，方便我们随时查阅，与别的不同的特点是它还提供了在线测试，和考试，来检验你的学习效果。
还从图书馆借阅的相关的书籍如：CSS+DIV网页设计开发实例应用。这一本不是很厚，主要侧重具体的例子的详解，向你展示如何充分的综合的运用的技术。书中的代码详细，例子丰富。我们可以学习组合这些技术，先学会借鉴，然后学会灵活运用。
四 CSS内涵阐述
①文字效果：
（1）文字的基本样式：字体样式（基本上word中有的字体都支持）、字体颜色（可以用颜色的英文；RGB）、字体
大小（用像素；font-size中还有特定关键字）、字体加粗、字体倾斜和字体下划线、顶划线、删除线(text-decoration)等。
（2）文本效果：
行距（line-height）：段落中行与行之间的距离；
文字间距（letter-spacing）：单个汉字间的距离；
单词间距（word-spacing）：用于英文单词间的距离的调整； 首行缩进（text-indent）：将一个段落的第一行的文字从左向
右缩进，其他行保持不变，单位em，两个汉
字的宽度就是2em。
水平对齐方式（text-align）：left、right、center和justify（对
齐每行的文字）；
垂直对齐方式（vertical-align）：baseline（基线对齐）、text-top
（与文本的顶端对齐）、sub（下标）、middle
（中部对齐）、super（上标）、bottom（对端
对齐）、top（顶端对齐）、text-bottom（文本
的底端对齐）；
首字下沉：将段落的第一行的第一个文字加大，即要了解伪
对象first-letter：定义第一个字为粗体，大小
为2em即可。
②背景效果
（1）背景色的定义：background-color：颜色值；
（2）自定义背景图：background-image：url；也可以
用完整的url；background-image的属性
是优先于background-color属性的；
（3）重复背景：background-repeat是和自定义
background-image一起使用的。它的属性值：repeat（在水平和垂直方向重复铺满）；repeat-x（横向重复）；repeat-y（纵向重复）；no-repeat（不重复）；
（4）背景位置:background-position控制背景图片定位在容器的那个位置：属性top、left、right、center、bottom，一次可以使用两个属性值如right bottom是指右下角，还可以使用数值精确控制背景图片的位置，先是水平位置，再是竖直位置。如50% 150px 是指水平位置的50%，竖直位置的150像素。
③边框设计
（1）边框的定义：
边框的样式：border-style：hidden（隐藏边框）；dotted（点
线边框）；dashed（虚线边框）；solid（实线边框）；double（双线边框）；groove（3D凹槽）；ridge（3D凸槽）；inset（3D凹边）；outset（3D凸边）
边框颜色：border-color：颜色值（RGB）
边框宽度：border-width：medium、thin、thick、length 边框属性：border{border-width；border-style；border-color；}
三者合起来放在一起，提高效率。
独立边框：为了达到一些特殊的效果，不需要定义所有的边
框，只需要定义其中的一个边框。如只定义上边框：只需要在border后面加上关键字top就可以
border-top-style等。
（2）矩形模块的使用
使用矩形模块搭配margin属性、border属性和padding属性 可以更好的控制元素的样式。
边界：margin的4个属性主要是控制元素边界与文件其他
内容的空白距离，四个边界一般按顺时针方向上
（margin-top），右（margin-right）、下（margin-bottom） 左（margin-left）属性。
边框：border-style；设置4个值：顺序为上、右、下、左。
border-top/bottom/left/right-style。
Border-width：border- top/bottom/left/right-width： Border-color：border- top/bottom/left/right-color： 综合设置：border：边框宽度/边框样式/边框颜色。
内边界：元素内边界主要指边框和内部元素间的空白距离，
Padding：长度/百分比。
Padding-top/bottom/left/right:长度/百分比。
④DIV层
Div的全称division是区分，称为区隔标记。它的作用， 就是为了设定字、画和表格等HTML元素的摆放位置，为HTML文档中的内容提供框架结构。以
开始，以
结束。
Id和class选择元素：#idname{样式属性：属性值；样式属性：属性值；………}
.classname{样式属性：属性值；样式属性：属性值；……}
⑤图片效果
（1）图片边框：在图片的外层定义border和padding属性。
（2）自适应大小：可以用语句定义。
五 CSS难点重点归纳
①浮动：float浮动属性是布局中非常重要的，通过对DIV元素应用float浮动来进行布局，不但对整个版式
进行规划，也可以对一些基本元素如导航等进行排列。 属性参数：none：对象不浮动；left：对象浮在左边；right：对象浮在右边；
不同的浏览器的效果有一些不同，如在IE6和Firefox中有一些差别。
②外补丁和内补丁：
Margin也可以被称为外补丁，它是元素盒模型的基础属性之
一。包括：margin-top/right/bottom/left，它可以用来同时设置盒子模型的四个外边距。它的值的类型有
auto/length/percentage. Auto被设置为相对边的值；length由浮点数字和单位标识符组成的长度值；percentage百分比是基于父对象的高度。
Padding也被称为内补丁。它的属性包括：
Padding- top/right/bottom/left。它可以设置元素所有内边距的宽度，行内非替换元素设置的内边距不会影响行高计算。如果有四个值，那么值将按照上—右—下—左的顺序作用于四边。三个值，则是上—右 左—下；两个值，则是上下—右左。一个值，则四个边的值都一样。
③网页布局模式
“国”字形布局：上面是网站的标题以及横幅广告条，接下来是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息，
联系方式和版权声明。
网页中常见的结构布局还有，“匡”字形布局，“三”字形布局，“川”字形布局，海报型布局，标题文本型布局，框架型布局和变化型布局。
六 CSS学习心得体会
①明确定义单位：在CSS中，要明确给出准确的单位，只有在两个例外情况下可以不定义单位：行高和0值。除此之外，其他值都必须紧跟单位，而且不要在数值和单位之间加空格。 ②区分大小写
③取消class和id前的元素限定：当给定一个元素定义class或者id时，可以省略前面的元素限定，因为ID在一个页面里是唯一的，而class可以在页面中多次使用。
④不需要重复定义可继承的值。
⑤多重class定义。
⑥背景图片不需要给路径加引号。
⑦清除浮动：
CSS要书写规范，应该先写显示属性，然后写自身属性，最后写文字属性。要不间断的学习，才会承前启后，效率才会高，也会记得牢。多练习才会熟能生巧！
七 CSS学习过程中产生的问题疑惑及其解决策略
在学CSS过程中也产生了一些问题：就是在自己要做一个导航栏，开始时怎么也做不出来，就用的可视化窗口来做，借
助Dreamweaver的导航按钮功能，尝试做一下。效果是出来了，一看代码，发现很多的语言都不知道，而且代码的归类也不是很清晰，这样感觉不利于知识的学习，只能解决一时之需，就没有采用这种方法。然后网上找了一些相关的信息，有些清楚，有些不清楚，有点模糊，就去图书馆找了相关的资料发现一本书介绍的很详细，就借回来学习，然后终于知道要用DIV来做，通过对DIV层的学习，把导航栏做成像一个个小按钮，加上float属性的设置和链接的使用，可以达到鼠标移上去就会改变背景色和字体色效果。代码比第一次的清晰易懂的多，而且使整个代码页的结构有层次感，也加深了对CSS的学习。
CSS学习小结
一 CSS概述和总览
网页的主要组成可分为三个部分：结构、表现和行为，对应的标准也有三个方面：结标准、表现标准和行为标准。结构标准的语言主要指HTML；表现标准的语言主要是CSS；行为标准的语言则是指对象模型。
CSS（Cascading Style Sheet）即层叠样式表是一组格式设置规则，用于控制web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。CSS是一种格式化网页的标准方式，它对颜色、字体、间隔、定位和边距等方面提供了多重属性，这些属性均可以用于HTML标记符。
CSS的优势：①CSS样式表可以制作出体积更小、下载更快的网页；②快速、便捷地维护及更新大量的网页；③浏览器的界面将更加友好；④内容和结构独立性强。
灵活的运用CSS可以更加高效设计出需要的网页。
二 CSS技术学习策略
一开始我会先看书，了解它的基本功能和作用，对其有一个总体的了解，然后分节学习它所包含的各个内容。在这期间，我会跟着书做书中的例题，一个一个的敲书中的代码，即边学边做，然后是自己尝试解决书中所留的练习，不会做的会上网查问题的解决办法，再一次尝试，并将它的难点和
其解决办法记下来留作参考。这样一章一章的学，学习后面的时候还会回顾前面所学，防止遗忘。整个都学完后就会综合其技术，把它运用到所要设计的网页中。这样下来就会有一个好的结果。
三 CSS学习所收集的资料概述
开始学习的CSS时，就是用的课本。过一段时间后，先后在多个网站上拓展相关知识，如
W3Cschool 网站，这个网站是同学推荐的，上面有很多资源，大部分都和网页的设计有关。网站的风格很适合我们的自学，知识点详尽，简单易懂，还给我们提供一些具体的代码供我们参考。还有参考手册，方便我们随时查阅，与别的不同的特点是它还提供了在线测试，和考试，来检验你的学习效果。
还从图书馆借阅的相关的书籍如：CSS+DIV网页设计开发实例应用。这一本不是很厚，主要侧重具体的例子的详解，向你展示如何充分的综合的运用的技术。书中的代码详细，例子丰富。我们可以学习组合这些技术，先学会借鉴，然后学会灵活运用。
四 CSS内涵阐述
①文字效果：
（1）文字的基本样式：字体样式（基本上word中有的字体都支持）、字体颜色（可以用颜色的英文；RGB）、字体
大小（用像素；font-size中还有特定关键字）、字体加粗、字体倾斜和字体下划线、顶划线、删除线(text-decoration)等。
（2）文本效果：
行距（line-height）：段落中行与行之间的距离；
文字间距（letter-spacing）：单个汉字间的距离；
单词间距（word-spacing）：用于英文单词间的距离的调整； 首行缩进（text-indent）：将一个段落的第一行的文字从左向
右缩进，其他行保持不变，单位em，两个汉
字的宽度就是2em。
水平对齐方式（text-align）：left、right、center和justify（对
齐每行的文字）；
垂直对齐方式（vertical-align）：baseline（基线对齐）、text-top
（与文本的顶端对齐）、sub（下标）、middle
（中部对齐）、super（上标）、bottom（对端
对齐）、top（顶端对齐）、text-bottom（文本
的底端对齐）；
首字下沉：将段落的第一行的第一个文字加大，即要了解伪
对象first-letter：定义第一个字为粗体，大小
为2em即可。
②背景效果
（1）背景色的定义：background-color：颜色值；
（2）自定义背景图：background-image：url；也可以
用完整的url；background-image的属性
是优先于background-color属性的；
（3）重复背景：background-repeat是和自定义
background-image一起使用的。它的属性值：repeat（在水平和垂直方向重复铺满）；repeat-x（横向重复）；repeat-y（纵向重复）；no-repeat（不重复）；
（4）背景位置:background-position控制背景图片定位在容器的那个位置：属性top、left、right、center、bottom，一次可以使用两个属性值如right bottom是指右下角，还可以使用数值精确控制背景图片的位置，先是水平位置，再是竖直位置。如50% 150px 是指水平位置的50%，竖直位置的150像素。
③边框设计
（1）边框的定义：
边框的样式：border-style：hidden（隐藏边框）；dotted（点
线边框）；dashed（虚线边框）；solid（实线边框）；double（双线边框）；groove（3D凹槽）；ridge（3D凸槽）；inset（3D凹边）；outset（3D凸边）
边框颜色：border-color：颜色值（RGB）
边框宽度：border-width：medium、thin、thick、length 边框属性：border{border-width；border-style；border-color；}
三者合起来放在一起，提高效率。
独立边框：为了达到一些特殊的效果，不需要定义所有的边
框，只需要定义其中的一个边框。如只定义上边框：只需要在border后面加上关键字top就可以
border-top-style等。
（2）矩形模块的使用
使用矩形模块搭配margin属性、border属性和padding属性 可以更好的控制元素的样式。
边界：margin的4个属性主要是控制元素边界与文件其他
内容的空白距离，四个边界一般按顺时针方向上
（margin-top），右（margin-right）、下（margin-bottom） 左（margin-left）属性。
边框：border-style；设置4个值：顺序为上、右、下、左。
border-top/bottom/left/right-style。
Border-width：border- top/bottom/left/right-width： Border-color：border- top/bottom/left/right-color： 综合设置：border：边框宽度/边框样式/边框颜色。
内边界：元素内边界主要指边框和内部元素间的空白距离，
Padding：长度/百分比。
Padding-top/bottom/left/right:长度/百分比。
④DIV层
Div的全称division是区分，称为区隔标记。它的作用， 就是为了设定字、画和表格等HTML元素的摆放位置，为HTML文档中的内容提供框架结构。以
开始，以
结束。
Id和class选择元素：#idname{样式属性：属性值；样式属性：属性值；………}
.classname{样式属性：属性值；样式属性：属性值；……}
⑤图片效果
（1）图片边框：在图片的外层定义border和padding属性。
（2）自适应大小：可以用语句定义。
五 CSS难点重点归纳
①浮动：float浮动属性是布局中非常重要的，通过对DIV元素应用float浮动来进行布局，不但对整个版式
进行规划，也可以对一些基本元素如导航等进行排列。 属性参数：none：对象不浮动；left：对象浮在左边；right：对象浮在右边；
不同的浏览器的效果有一些不同，如在IE6和Firefox中有一些差别。
②外补丁和内补丁：
Margin也可以被称为外补丁，它是元素盒模型的基础属性之
一。包括：margin-top/right/bottom/left，它可以用来同时设置盒子模型的四个外边距。它的值的类型有
auto/length/percentage. Auto被设置为相对边的值；length由浮点数字和单位标识符组成的长度值；percentage百分比是基于父对象的高度。
Padding也被称为内补丁。它的属性包括：
Padding- top/right/bottom/left。它可以设置元素所有内边距的宽度，行内非替换元素设置的内边距不会影响行高计算。如果有四个值，那么值将按照上—右—下—左的顺序作用于四边。三个值，则是上—右 左—下；两个值，则是上下—右左。一个值，则四个边的值都一样。
③网页布局模式
“国”字形布局：上面是网站的标题以及横幅广告条，接下来是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息，
联系方式和版权声明。
网页中常见的结构布局还有，“匡”字形布局，“三”字形布局，“川”字形布局，海报型布局，标题文本型布局，框架型布局和变化型布局。
六 CSS学习心得体会
①明确定义单位：在CSS中，要明确给出准确的单位，只有在两个例外情况下可以不定义单位：行高和0值。除此之外，其他值都必须紧跟单位，而且不要在数值和单位之间加空格。 ②区分大小写
③取消class和id前的元素限定：当给定一个元素定义class或者id时，可以省略前面的元素限定，因为ID在一个页面里是唯一的，而class可以在页面中多次使用。
④不需要重复定义可继承的值。
⑤多重class定义。
⑥背景图片不需要给路径加引号。
⑦清除浮动：
CSS要书写规范，应该先写显示属性，然后写自身属性，最后写文字属性。要不间断的学习，才会承前启后，效率才会高，也会记得牢。多练习才会熟能生巧！
七 CSS学习过程中产生的问题疑惑及其解决策略
在学CSS过程中也产生了一些问题：就是在自己要做一个导航栏，开始时怎么也做不出来，就用的可视化窗口来做，借
助Dreamweaver的导航按钮功能，尝试做一下。效果是出来了，一看代码，发现很多的语言都不知道，而且代码的归类也不是很清晰，这样感觉不利于知识的学习，只能解决一时之需，就没有采用这种方法。然后网上找了一些相关的信息，有些清楚，有些不清楚，有点模糊，就去图书馆找了相关的资料发现一本书介绍的很详细，就借回来学习，然后终于知道要用DIV来做，通过对DIV层的学习，把导航栏做成像一个个小按钮，加上float属性的设置和链接的使用，可以达到鼠标移上去就会改变背景色和字体色效果。代码比第一次的清晰易懂的多，而且使整个代码页的结构有层次感，也加深了对CSS的学习。