css基础和div布局.pptxVIP

第1章 CSS基础和DIV布局;本 章 进 阶;案例展示—双11主题会场模块;初识CSS CSS是用来控制一个文档中某一区域外观的一组格式属性设置。使用CSS可以有效地对页面布局、字体、颜色、背景等实现更加精确地控制，从而制作出更加复杂和精细的网页，同时网页的维护与更新也变得更加方便和简单。 CSS的神奇之处就在于，网页开发人员只需要修改短短的几行代码，就可以使整个网页外观发生翻天覆地的变化。使用CSS不仅可以使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。;CSS语法规则 CSS格式设置规则由两部分组成：选择器和声明。选择器用于标识已设置格式的HTML元素，而声明块则用于定义样式属性，它也由两部分组成：属性和值。 Selector {property:value;} 或者 Selector {property1:value1; property2:value2; property3:value3; …} 其中“ S e l e c t o r r ” 表示为选择器， 介于大括号“ { }”之间的所有内容都是声明块，“property:value;”指的是样式表定义。“property”表示属性，“value”表示属性值。属性与属性值之间用冒号“:”隔开，多个属性用分号“;”隔开。 ;CSS样式表类型 CSS样式按照其存放的位置可以分为内联样式表、内嵌样式表、外联样式表三种。 1、内联样式表 内联样式表也叫行内样式表，是混合在HTML标记里使用的。使用时直接在HTML标记里添加style参数，而style参数的内容就是CSS的属性和值，在style参数引号里的内容相当于在样式表大括号里的内容。 例如： p style=”font-size:20px; color:#F00;”我要学习CSS样式的应用！/p;2、内嵌样式表 内嵌样式表也叫内部样式表，它一般位于HTML文件的头部，即head与/head标签内，并且以style开始，以/style结束。 例如： 在head与/head标签内添加内嵌样式如下： style type=”text/css” p { font-family: “黑体”; color: #090; text-decoration: underline; } /style;3、 外部样式表 外部样式表是一个单独的文件，扩展名为css，里面可以存放多种选择器。通常可以在网页中调用已经定义好的样式文件来实现样式表的应用，它可以同时和多个网页??件进行链接或导入。 以链接为例：选择“链接”后点击“确定”按钮，网页文件的head与/head标签内会用link标签调用该外部样式表文件。 head …… link href=css01.css rel=stylesheet type=text/css / …… /head;CSS选择器类型 在CSS中有3种最基本的选择器类型，分别是：标签选择器、ID选择器、类选择器。 1、标签选择器 一个HTML页面由很多标签组成，标签选择器就是用来重新定义指定的标签外观的。标签选择器的名称不能随意命名，必须是HTML页面中提供的标签名称。 2、ID选择器 ID名相当于人的身份证号码，页面中的HTML元素可以通过“属性”栏设置ID名，在页面中具有唯一性。而ID选择器可以用于设置指定ID的HTML元素样式，以“#”开头，后面跟对应的ID名称。 3、类选择器 相对于标签选择器的全部性和ID选择器的唯一性，类（class）选择器的应用显的更灵活一些。类选择器定义后，可以自由的应用到任何一个HTML元素。应用时，HTML元素的标签内会添加“class”属性。 类选择器的名称由用户自定义，可以包含任何字母和数字组合，以“.”开头，其属性和值跟其它选择器一样，也必须符合CSS规范。;设置CSS属性 CSS样式按照其存放的位置可以分为内联样式表、内嵌样式表、外联样式表三种。 1、“类型”属性 字体样式是网页美化的重要环节，字体相关的样式一般位于“CSS 规则定义”对话框中的“类型”分类中。;2、“区块”属性 “区块”属性主要用于设置段落格式及对齐方式，段落相关的样式一般位于“CSS规则定义”对话框中的“区块”分类中。;2、“区块”属性 “区块”属性主要用于设置段落格式及对齐方式，段落相关的样式一般位于“CSS规则定义”对话框中的“区块”分类中。;3、“背景”属性 背景相关的样式位于“CSS 规则定义”对话框中的“背景”分类中。 ;4、 “边框”属性 “边框”属性可以设置元素的边框样式;演示——百度热门标签;DIV概述 DIV使用时以div/div标签的形式出现，它本身是一个容器，不但可以内嵌table/table，还可以内嵌文本和其它的HTML元素。 利用CSS