网页美化_div层_css样式

《网页美化_div层_css样式》由会员分享，可在线阅读，更多相关《网页美化_div层_css样式（38页珍藏版）》请在金锄头文库上搜索。

1、DIV层运用+CSS样式主 讲: 夏 琳CSS样式基本介绍1、什么是CSS样式 2、CSS样式表的功能 3、CSS的语法 4、CSS样式在网页中的四种存在 5、CSS样式面板 6、CSS样式实例什公是CSS样式CSS是“Cascading style sheet”的缩写。中文译为 层叠样式表，是用于控制网页样式并允许将样式信息与 网页内容分离的一种标记性语言。是对HTML语法的革新 。CSS简化了HTML中各种繁琐的标签，使各标签的属性更具一般性和通用性，扩充原来的功能。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。CSS样式表的功能可以灵活地控制网页中文字的字体、颜色

2、、大小、 间距、风格及位置。 可以灵活地设置一个文本块的行高、缩进，并可以 加入三维效果的边框。CSS以HTML为基础，提供了丰富的格式化功能，如 字体、颜色、背景、整体排版等等.CSS样式表的优点 CSS使页面载入更快； CSS可以降低网站的流量； CSS使设计师在修改设计时更有效率，而代价更低； CSS使整个站点保持视觉的一致性； CSS使站点可以更好地被搜索引擎找到； CSS使站点对浏览者和浏览器更具亲和力： 掌握CSS可以提高设计师的职场竞争力。CSS的语法CSS的定义是由三个部分构成：选择符（selector）， 属性（properties）和属性的取值（value）。 基本格式如下

3、： selector property: value （选择符 属性：值） 其中：HTML标签不带尖括号。 标签属性：属性值 参数是一一对应的，每个属性与属性值之间用分号 隔开。属性名由两个或两个以上的单词构成时，单词之 间以“-”隔开。基本语法：标记的文字全部呈现红色，可这样设置 ： 文字内容 文字内容 文字内容 这个段落向右对齐的这个段落是居中排列的注意：类的名称可以是任意英文单词或以英文开头与数字的组合 ，一般以其功能和效果简要命名。 2. 类选择符类选择符还有一种用法，在选择符中省略HTML标记名，这 样可以把几个不同的元素定义成相同的样式： .center text-align: c

4、enter （定义.center的类选择符为文字居中排列） 这样的类可以被应用到任何元素上。下面我们使h1元素（标 题1）和p元素（段落）都归为“center”类，这使两个元素的样 式都跟随“.center”这个类选择符：这个标题是居中排列的这个段落也是居中排列的注意：这种省略HTML标记的类选择符是我们经后最常用的 CSS方法，使用这种方法，我们可以很方便的在任意元素上 套用预先定义好的类样式。 HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素 定义单独的样式。 ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用 ID替代：这个段落向右对齐定义

5、ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择 符的属性也有两种方法。下面这个例子，ID属性将匹配所有id=“intro“的元素 ： #intro font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent （字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明）3. ID选择符下面这个例子，ID属性只匹配id=“intro“的段落元素 ： p#intro font-size:110%; font-weight:bold; color:#0000ff; background

6、-color:transparent 注意：ID选择符局限性很大，只能单独定义某个元 素的样式，一般只在特殊情况下使用。 4. 选择符组你可以把相同属性和值的选择符组合起来书写，用逗号 将选择符分开，这样可以减少样式重复定义： h1, h2, h3, h4, h5, h6 color: green （这个组里包括所有的标题元素，每个标题元素的文字 都为绿色） p, table font-size: 9pt （段落和表格里的文字尺寸为9号字） 效果完全等效于： p font-size: 9pt table font-size: 9pt 你可以在CSS中插入注释来说明你代码的意思，注释 有利于你或

7、别人以后编辑和更改代码时理解代码的含 义。在浏览器中，注释是不显示的。CSS注释以“/*“ 开头，以“*/“ 结尾，如下： /* 定义段落样式表 */ p text-align: center; /* 文本居中排列 */ color: black; /* 文字为黑色 */ font-family: arial /* 字体为arial */ 5、注释CSS样式在网页中的三种存在方式1、外部文件方式（外联样式表 ）CSS以文件的形式存在，在HTML文档头通 过文件引用进行控制。CSS文件的引用是在标签之间写 下列语句:2、内嵌样式 不以文件的形式存在,仅作用于本文档,直接定义 在 之间.3、直接插

8、入式（行内样式）只需要在每个HTML标签后书写CSS属性 。作用范围只限于本标签。在统一站点风格上，用第一方式，在某个 网页风格统一上，用第二种方式，而在网页内 部某个标签的具体调整上，用第三种方式。4、导入式样式 导入样式表和外联样式表在概念上类似，都是将多个 页面所共用的CSS单独保存在一个CSS文件中，在HTML 页面的部分调用这个文件。不同的是导入样式表形式上有点像外联样式来得及和内嵌样式表的结合，与外联样式表的区别是导入样式表在浏览 器解释HTML代码是将外部CSS文件中的内容全部调入给 页面中，而外联样式表则不将外部CSS文件中的内容调入 给页面中，而只在调用到该样式时才在外部CS

9、S文件中调用该样式的定义。格式：（1）显示“CSS 样式”面板的方式： 打开“窗口”菜单“CSS”样式（2）样式视图CSS样式面板在Type里有三种样式表类型可供选择：l Make Custon Style (class) ：（创建自定义样式）自定义一个样式，可以作为class属性应用于页面中。2 Redefine HTML Tag：（重定义HTML标记）对指定的 HTML 标记的默认格式进行重新定义。3 Use CSS Selector：（使用CSS选择符）对特定的标签组合，或者包含有指定ID属性的所有标签进行格式定义。创建自定义样式：名称须以.开头，可应用到任何范围。重定义HTML标签：将

10、扩充某个HTML标签的功能。使用CSS选择器：重新定义一些标签的特定组合格式。外部：将以文件的形式存在。仅对该文档：内嵌式样式。在Dreamweaver的CSS样 式里包含了W3C规范定 义的所有CSS1的属性， Dreamweaver4把这些属 性分为Type（类型）、 Background（背景）、 Block（块）、Box（盒 子）、Border（边框） 、 List（列表）、 Positioning（定位）、 Extensions（扩展）八个 部分，如左图，下面我 们分别详细讲解。 CSS提供了一些内置的多媒体滤镜特效，使用这种技术可以把 可视化的滤镜和转换效果添加到一个标准的HTML

11、元素上，例 如图片、文本容器、以及其他一些对象。Dreamweaver4提供了 16种滤镜可供选择，如下图：创建新的 CSS 样式 创建新的 CSS 样式的步骤如下： （1）将添加点放在文档中，然后执行以下操 作之一打开“新建 CSS 样式”对话框：（2）定义CSS 样式的类型（3）选择定义样式的位置 （4）单击“确定”。出现“CSS 样式定义”对话 框。 （5）选择要为新 CSS 样式设置的样式选项 。 （6）设置完样式属性后，单击“确定”。 CSS样式实例内嵌样式内嵌式样式(Inline Style)这个内嵌样式(Inline Style)定义段落里面的 文字是20pt字体，字体颜色是红色

12、。这段文字没有使用内嵌样式。CSS样式实例内部样式表H1.mylayout border-width: 1; border: solid; text-align: center;color:red这个标题使用了Style。 这个标题没有使用Style。CSS样式实例内部样式表Generic Class Selector .center text-align:center这个标题居中显示。 这个段落居中显示。CSS样式实例外部样式表这个标题使用了Style。 这个标题没有使用Style。CSS样式实例背景颜色属性背景颜色 background-colorbody background-color

13、:#99FF00;这个HTML使用了CSS的background-color属性，将HTML的背景颜色变成翠 绿色。CSS样式实例背景重复属性背景重复 background-repeatbody background-image:url(/images/css_tutorials/background.jpg); background- repeat:repeat-y这个HTML使用了CSS的background-repeat属性，使背景图片竖向重复。 常用的background-repeat的属性值有: repeat-x(横向重复)，repeat-Y(横向重复), no- repeat(不重

14、复)。 background-repeat属性要和background-image一起用。CSS样式实例边距属性CSS边距属性 margin.D1border:1px solid #FF0000; .D2border:1px solid gray; .D3margin:0.5cm 1cm 2.5cm 1.5cm;border:1px solid gray;没有margin上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的 border设为红色，里面那个div的border属性设为灰色。和上面两个div的CSS属性设置不同的是，下面两个div中，里

15、面的那个div设置了边距 属性(margin)，设定上边距为0.5cm，右边距为1cm，下边距为2.5cm，左边距为 1.5cm。上下左右边距宽度各不同CSS样式实例文本修饰属性文本修饰属性 text-decoration.p1text-decoration: none .p2 text-decoration: underline .p3text-decoration: line-through .p4 text-decoration:overline文本修饰属性(text-decoration)的缺省值是none。 这段的文本修饰属性(text-decoration)值是underline。

16、 这段的文本修饰属性(text-decoration)值是line-through。 这段的文本修饰属性(text-decoration)值是overline。CSS样式实例文本缩进属性文本缩进属性 text-indent.p1 text-indent: 8mm .d1 width:300px .p2 text-indent:50%下面两端都设定CSS文本缩进属性(text-indent)，第一段用长度方法设值，第二段用百 分比方法设值。 芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪 里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆 得让男人流鼻血的身体，就注定了我前半生的悲剧。”芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里 都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得 让男人流鼻血的身体，就注定了我前半生的悲剧