网站开发教程CSS简介.ppt

《网站开发教程CSS简介.ppt》由会员分享，可在线阅读，更多相关《网站开发教程CSS简介.ppt（41页珍藏版）》请在三一办公上搜索。

1、CSS简介,网址：电话：400 700 1307,CSS,DHTML简介何为CSS(层叠样式表)CSS的几种设置方式样式规则的选择器样式规则的注释与有效范围用DreamWeaver产生CSS样式属性详解,DHTML 简介,DHTML,=,HTML,脚本语言JavaScript,+,+,层叠样式表CSS,指定一个网页的元素,决定元素的大小颜色和位置,操纵网页的元素,DHTML 是制作动态 HTML 页面的技术！,DHTML 示例,闪烁文本,移动文本,消隐文本,设置属性 这个段落应用了样式这个段落按默认样式显示,什么是样式？,指定显示样式,何为层叠样式表,CSS是Cascading Style S

2、heets的简写，它除了可以轻松设置网页元素的显示位置和格式处，甚至还能产生滤镜，图像淡化，网页淡入淡出的渐变效果。简而言之，CSS就是要对网页的显示效果实现与Word一样的排版控制。,常用的样式属性,CSS的几种方式,内联样式表(Inline styles)嵌入样式表(Embedded style sheets)外部样式表(Linked style sheets)输入样式表(imported sytle sheets),内联样式表,您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。,/*关键代码-*/剩余时间：成交结束 新

3、旧程度：全新 所 在 地：北京 宝贝数量：5 件 浏 览 量：220 次 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以,应用样式 P font-size:20px;color:blue;text-align:center 我是段落 1我是段落 2我是段落 3我们的样式绝对统一,嵌入样式表,所有的段落都采用 P 样式，保证样式统一,行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。,用分号隔开,在标签对中定义的每条样式规则的基本格式如下：Selectorproperty:value;property:value;Selector:

4、当定义一条样式规则时，必须指定受这条样式规则作用的网页元素。property:指定那些将要被修改的样式名称，即CSS属性，如color、font-size等。value:赋给property的值，即CSS属性值。,样式规则的选择器,HTML selectorClass selectorID selector关联选择器组合选择器伪元素选择器,/*-关键代码-*/P/*设置样式：字体和背景色*/font-family:System;font-size:18px;color:#3333CC;H2 background-color:#CCFF33;text-align:center;品种特征方面：1、

5、蛋鱼：蛋鱼.。2、龙睛：龙睛.。3、高头：高头.。,内嵌样式-HTML选择器,应用H2样式,应用P样式,内嵌样式-class类选择器,.myinput border:1px solid;border-color:#D4BFFF;color:#2A00FF用户名密 码,CLASS类选择器,应用类选择器：class”类名“,类选择器的定义格式为：.类名 样式规则;,Class selector,要将一种HTML标签所创建的各处网页元素分成几类，需要将这个HTML标签的class属性设置为不同的值。paragraph1paragraph2paragraph3在样式表中，可以分别为某个HTML标签的各

6、个类别定义样式规则：p.stopcolor:redp.warningcolor:yellow在样式表中，可以为某个类别的所有HTML标签定义样式规则：.blueonecolor:blue蓝色的题目蓝色的段落,#fire color:red;font-size:24px;我是二级标题，火是这样的,内嵌样式-ID选择器,ID选择器,ID选择器的定义格式为：ID名 样式规则;,应用ID选择器：ID”ID名“,ID selector,ID属性用来定义某一个特定的HTML元素，一个网页文件中只能有一个元素能使用某一ID属性值，ID Selector就是为样式规则定义语名选择具有某一ID属性值的HTML元

7、素。text here在样式表中，ID值为yellowone的HTML元素的样式规则定义语句如下：,选择器声明,关联选择器是指一个用空格隔开的两个或更多的单一选择器组成的字符串，例如：P EMbackground:yellow.special emcolor:red;#top emcolor:bluep.top.top1 strongcolor:green其中的“P EM”就是关联选择器，它表示段落中的强调文本（标签对中的内容）的背景为黄色，而其它地方出现的强调文本则不受影响。关联选择器定义的样式规则的优先权比单一选择器定义的样式规则的优先权高，即使用在P EMbackground:yello

8、w的后面部分定义了如下样式规则：EMbackground:green但是，在段落标签中定义的强调文本仍用黄色背景。组合选择器为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个选择器，每个选择器之间用逗号（，）隔开。例如，H1,H2,H3,H4,H5,H6,TDcolor:red;全局选择器希望页面所有的标记都使用同一种CSS样式，又不希望逐个来生命，这时候可以利用全局生命符号“*”,外部样式,根据样式文件与网页的关联方式又分为：链接（link）外部样式表导入（import）外部样式表,样式文件P.,网页2,网页3,网页1,链接外部样式表,使用LINK（链接）标签，语法：,第一步：

9、创建样式表文件newstyle.css,第二步：把样式文件和网页关联,样式文件：newstyle.css P.,Onel.htm,another.htm,第三步：浏览查看各网页,演示：链接样式表示例,导入外部样式表,使用import导入，语法：import 样式表文件.css;import url(样式表文件.css);,操作步骤同链接样式表,导入样式表,使用import声明的例子语句如下：,外部样式文件,样式的混合使用,行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：有关整个网站统一风格的样式代码，放置在独立的样式文件*.css某些样式不同的页面，除了链接外部样式文

10、件，还需定义内嵌样式某张网页内，部分内容”与众不同“，采用行内样式,对于某个HTML标签：1）如果有多种样式，如果规定的样式没有冲突，则叠加；2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；,内嵌样式,行内样式,某个HTML标签,样式规则的注释与有效范围,样式表中的注释使用“/*要注释的内容*/”格式进行注释，注释不能嵌套，例如，“/*xxx/*yyy*/xxx*/”这样的注释是不允许的。样式规则的继承所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。样式规则的优先级ID选择器C

11、LASS选择器HTML标签选择器内联样式表嵌入样式表链接样式表,样式属性分类,CSS中的样式属性非常之多，大体上可以分为以下几类：字体文本边框背景列表位置布局其它,字体,font-family：字体类型font-size绝对大小的设置为xx-small、x-small、small、medium、large、x-large、xx-large中的任意一个，xx-small为最小取值，xx-large为最大取值。相对大小的设置可以为larger或smaller.绝对单位有：px、mm、cm、in、pt、pc.相对单位有：em、ex、%color三种表示方法：RRGGBB、rgb(R,G,B)、red

12、.font-weight：字体粗细font-style：字体斜体text-decoration：下划线、顶划线、删除线、闪烁text-transform：英文字母大小写font：合并设置字体样式例如，Pfont:italic bold 12pt Times,serif,font-family:宋体,sans-serif;,font-weight:normal;,color:#0000FF;,font-style:normal;,font-size:12px;,line-height:140%;,text-decoration:underline;,文本段落,text-align：段落水平对齐设

13、置值：center、right、left、justifyvertical-align：段落垂直对齐设置值：sub、super、top、middle、bottom、10px、-10px、相对于元素行高属性的百分比letter-spacing：字母的间距word-spacing：单词的间距line-height：文本行高text-indent：缩进方式white-space：排版方式设置值：normal、pre、nowrap,text-align:center;,text-indent:24px;(可为负数),display:block;,边框、宽度与高度,border-width：边框宽度(bo

14、rder-top-width、border-right-width、border-bottom-width、border-left-width)设置值：thin、medium、thick或数值border-color：边框颜色(border-top-color、border-right-color、border-bottom-color、border-left-color)border-style：边框样式(border-top-style、border-right-style、border-bottom-style、border-left-style)设置值：none、dotted、dash

15、ed、solid、double、groove、ridge、inset、outset。border：合并设置边框样式(border-top、border-right、border-bottom、border-left)例如，A:activeborder:thick double redwidth：宽度设置值：10px绝对值、50%相对值height：高度,border-left-width:1px;border-left-style:solid;border-left-color:#0000FF;,背景,background-color：背景颜色background-color:transpar

16、ent;/*透明色*/background-image：背景图片例如，background-image:url(http:/www.thizlinux.org/logo.gif)background-repeat：背景重复方式设置值：no-repeat、repeat、repeat-x、repeat-ybackground-position：背景位置设置值：left、center、right、20px 20px、20%70%、top、bottombackground-attachment：固定或滚动背景设置值：fixed、scrollbackground：合并设置背景样式例如，backgroun

17、d:#00cc00 url(logo.jpg)no-repeat bottom right,background-color:#CCCCCC;,background-image:url(img/bg.gif);,background-repeat:repeat-x;,background-position:center top;,页面和浏览器元素的CSS,表格表单超链接鼠标滚动条,控制表格,tablecaption-side:bottom;tableborder-collapse:collapse;tr:hovercolor:red;,控制表单,给input添加背景色一条线的文本框像文字一样的

18、按钮彩色的下拉框类似Excel表格的表单,伪元素选择器,伪元互选择器是指对同一个HTML元素的各种状态和其所包括的部分内容是一种定义方式。例如，对于超链接标签()的正常状态（没有任何动作前）、访问的状态、选中状态、光标移到超链接文本上的状态，对于段落的首字母和首行，都可使用伪元素选择器来定义。使用伪元素作为选择器的样式规则定义格式：HTML元素：伪元素属性：值常用的伪元素：a:link超链接的正常状态（没有任何动作前）a:visited访问过的超链接状态a:hover光标移动到超链接上的状态a:active选中超链接时的状态p:first-line段落中的第一行文本p:first-letter

19、段落中的第一个字母类选择器与伪元素一起使用的格式：HTML元素.类名：伪元素属性：值,鼠标样式cursor：bodycursor:pointer;设置值：help、move、crosshair.滚动条样式scrollbar：scrollbar-3dlight-colorscrollbar-arrow-colorscrollbar-base-colorscrollbar-darkshadow-colorscrollbar-face-colorscrollbar-highlight-colorscrollbar-shadow-color,列表,list-style-type：列表符号设置值：dis

20、c(实心圆)、circle(空心圆)、square(方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)none(无项目符号).list-style-image：列表图片符号list-style-position设置值：inside(内部)、outside(外部)List-style-position等于outside的显示效果：主题这是主题的第二行，缩进显示在列表标记符（*）的下面主题List-style-position等于inside的显示效果：主题这是主题的第二行，对齐显示在列表标记符（*）的下面主题list-style,list-style-type:disc;,list-style-image:url(img/b01.gif);,list-style-position:inside;,CSS Game Over 谢谢！,