CSS+DIV课程笔记.doc

CSS+DIV课程笔记 1-1、什么是CSS和DIV 一、什么是CSS CSS的全称是：Cascading Style Sheet（层叠样式表），利用它可以对页面当中的文本、段落、图像、页面背景、表单元素外观等实现更加精确的控制，甚至浏览器滚动条等浏览器的一些属性都可以通过它来调整。更为重要的是，CSS真正实现了网页内容和格式定义的分离，通过修改CSS样式表文件就可以修改整个站点文件的风格，大大减小了更新站点的工作量。 二、什么是DIV DIV是层的标记，在DIV中可以放入网页中任何一种元素（如：文字、图片、……），,然后配合CSS，可以实现网页各个元素的精确定位。 三、CSS+DIV的优势 1、网页加载速度快 2、更容易被搜索引擎接受 3、能实现更多动态效果 4、后期维护方便 四、传统html的缺点： （1）维护困难 （2）标记不足 （3）网页过“胖” （4）定位困难 1-2、1-3、1-4、CSS样式的使用方法 一、CSS样式的使用方法: 1、行内样式：直接在html标记中使用style=”……”来设置属性，也就是直接将css代码嵌套在html标注中，像使用html标记一样使用。 2、内嵌式：只对本页面起作用。加在head/head之间title/title代码下面， 格式：style type=”text/css” !-- //防止低版本的浏览器不支持会直接将CSS显示出来。加这上这个相当于html的注释，如果显示就直接注释掉。 -- /style 3、链接式：引入外部一个css文件，加在head/head标签之间title/title下面 如：link href=”1.css” type=”text/css” rel=”stylesheet” 1-5、CSS样式的定义方法 一、CSS样式的定义方法： 1、自定义样式（类别选择器） 2、标记定义（标记选择器） 3、#号定义法（ID选择器） （1）自定义样式方法： .自定义名称｛ font-size:12px; color:#FF0000; ｝ 使用方法：p class=”自定义名称”; 效果 /p （2）标记定义方法： p｛ font-size:12px; color:#FF0000; ｝ 注：通过标记定义好的CSS样式效果会自动应用给网页中所有使用此标记的元素或对象。 （3）#号定义的 #自定义名称｛ font-size:12px; color:#FF0000; ｝ 使用方法：p id=” 自定义名称”; 效果 /p 注：通过#号定义的CSS样式，在html代码中最好只使用一次，因为我们有的时候需要使用javascript脚本对应用此类CSS样式的对象进行控制，如果应用多次的话，javascript不知道该对哪个对象进行控制。 1-8、1-9、CSS样式的集体定义方法 一、集体定义 所谓集体定义是在多个标记使用同一个CSS效果，这时就可以同时对多个标记做一次性定义。 （1）集体定义的方法： .自定义名称，标记，#自定义名称｛ font-size:12px; color:#FF0000; ｝ 二、CSS样式的继承 继承的原则是由外到内，先使用第一个样式，然后再使用第二个样式。 1-10、CSS样式定义的嵌套（选择器的嵌套） 一、选择器的嵌套 如： p b｛ color:#FF0000; font-size:12px; ｝ 注：上面这种定义方法表示P标记里面包含的b标记的样式，也就是说只有当b标记被p标记包含的时候才会使用这个样式，没有被p标记包含b标记不会调用这个样式，同时p标记也不会使用这个样式。 2-1、文字样式的设置 一、文字样式 1、font-family：字体 2、font-size：文字大小 3、color：颜色 4、font-weight：文字粗细 5、font-style：斜体 6、text-decoration：加下划线、顶划线，删除线 7、text-transform：英文字母大小写 8、text-indent：首行文本缩进 9、letter-spacing：字间距 二、字体（font-family） 1、H2{Font-family:黑体，幼圆;} 表示采用黑体，如果系统没有黑体就采用幼圆，如果没有幼圆那么就采用浏览器默认字体。 2-2、文字大小和颜色 一、文字大小（字号）（font-size） 1、文字大小的单位：in：英寸，cm：厘米，mm：毫米，px：象素。 2、font-size在设置文字大小时分为绝对大小和相对大小。14px像这样表示绝对大小，large 像这种表示相对大小。 二、color：颜色 1、颜色的表示方法 （1）单词：red、green、blue （2）RGB：RGB（255,255,255）