《[PPT模板]css.ppt》由会员分享，可在线阅读，更多相关《[PPT模板]css.ppt（77页珍藏版）》请在三一办公上搜索。
1、第二部分 CSS,预习检查,简述样式表的基本结构？常用的样式属性有哪些？,本章任务,美化“宝贝分类”页面制作并美化“注册”页面,会创建统一外观的字体文本会创建无下划线的超连接样式会创建个性化的表格会创建个性化的表单,本章目标,为什么需要CSS样式表,演示示例1：演示能换皮肤的页面,HTML标签的外观样式比较单一颜色只有黑白字体类型和大小无变化样式表的作用相当于华丽的衣服,内容相同,外观不同,为什么需要CSS样式表,样式表能实现内容与样式的分离，方便团队开发,程序员写代码,美工做样式,内容与样式和谐统一的完整网页,CSS简介,全称Cascading Styles Sheets中文：层叠样式表或级
2、联样式表，是样式化HTML的一种方法。它的作用是：XHTML的标签（Tag）主要是定义网页的内容，而CSS决定这些网页内容如何显示。,样式表的基本语法,样式表的基本结构,P color:red;font-size:30px;font-family:隶书;,声明文档样式表结束,文档样式表开始，类型为CSS样式,样式规则,选择器,样式规则 P color:red;font-size:30px;font-family:隶书;,CSS基本语法,例如：body color:blue;,样式表的基本语法,样式规则 P color:red;font-family:隶书;font-size:24px;静夜思床
3、前明月光，疑是地上霜。我是郭德刚，低头思故乡。,查看源代码,本页面中所有的P标签都应用了此样式,所有的段落都采用P样式，保证风格统一,用分号隔开,选择器,如何编写此样式?字体类型为律书、大小24px,样式表的基本语法,选择器的分组被分组的选择器可以分享相同的声明。用逗号将需要分组的选择器分开。例：所有的标题元素都是绿色的。h1,h2,h2,h3,h5,h6 color:green;,.red color:red;font-family:隶书;font-size:24px;,样式表的基本语法,如果希望其他的标签也能采用P标签的样式，怎么办？,其他标签和P标签应该采用相同的样式，所以要为它们定义一
4、个共享样式。,类样式(class),.类名,样式规则,样式表的基本语法,样式规则.red color:red;font-family:隶书;静夜思床前明月光，疑是地上霜。我是郭德刚，低头思故乡。,查看源代码,CLASS类选择器,为类选择器定义的样式规则,应用类选择器class”类名“,和标签要应用同一样式,如何实现这样的样式效果？字体类型都为隶书,选择器,根据选择器的不同，分为：HTML 选择器CLASS 类选择器ID 选择器,/*-关键代码-*/P/*设置样式：字体和背景色*/font-family:System;font-size:18px;color:#3333CC;H2 backgro
5、und-color:#CCFF33;text-align:center;品种特征方面：1、蛋鱼：蛋鱼.。2、龙睛：龙睛.。3、高头：高头.。,HTML选择器,应用H2样式,应用P样式,class类选择器,.myinput border:1px solid;border-color:#D4BFFF;color:#2A00FF用户名密 码,CLASS类选择器,应用类选择器：class”类名“,类选择器的定义格式为：.类名 样式规则;,#fire color:red;font-size:24px;我是二级标题，火是这样的我是段落，火是这样的,ID选择器,ID选择器,ID选择器的定义格式为：ID名 样
6、式规则;,应用ID选择器：ID”ID名“,区别Class与ID选择器,Class选择器可以为标有特定 class 的 HTML 元素指定特定的样式class 选择器以“.”来定义，同样的class名称可以在页面中多次使用，作用于多个对象，可以达到统一样式设置的目的id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以#来定义，用法与类选择器类似，区别是id名只能在每个 HTML 文档中出现一次，通常在划分排版块的时候使用。,CSS 伪类（Pseudo-classes）,伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它最常用的技巧就
7、是对连接在不同状态下定义不同的样式效果。,CSS 伪类（Pseudo-classes）,selector:pseudo-class property:value选择器:伪类 属性:值,常用CSS 伪类,锚伪类,a:link color:#FF0000/*未被访问状态*/a:visited color:#00FF00/*已被访问状态*/a:hover color:#FF00FF/*鼠标悬停状态*/a:active color:#0000FF/*活动状态*/,A/*设置超链接不带下划线*/color:blue;text-decoration:none;/*文本修饰：无*/A:hover/*鼠标在超
8、链接上方停留时，带下划线*/color:red;text-decoration:underline;/*文本修饰：下划线*/HEAD 俺是超链接，移过来我就显示下划线,特殊的选择器,HTML选择器,特殊的伪类：A代表超链接，hover代表鼠标悬停,派生选择器,派生选择器允许你根据文档的上下文关系来确定某个标签的样式。,CSSli strong font-style:italic;font-weight:normal;,应用于XHTML我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用 我是斜体字。这是因为 strong 元素位于 li 元素内。我是正常的字体。,例：希望列表中
9、的 strong 元素变为斜体字，而不是通常的粗体字。,CSS注释,注释以“/*”为开头，以“*/”为结尾。,样式表的三类应用方式,内嵌样式表内部样式表使用格式如下：行内（嵌入）样式表外部样式表文件,样式规则,如果希望本网页内的所有同类标签都采用统一样式，这时应采用内嵌样式。,内部样式表,P font-family:隶书;font-size:18px;color:#FF0000;床前明月光，疑是地上霜。我是郭德刚，低头思故乡。,查看源代码,所有的段落都采用 P 样式，保证样式统一使用 标签在头部定义内部样式表,行内（嵌入）样式表,如果希望某段文字和其他段落文字显示风格不一样，该如何解决？,使用
10、行内（嵌入）样式表可以解决,行内（嵌入）样式表,设置属性 这个段落应用了样式这个段落按默认样式显示,为标签p指定样式,查看源代码,本段标签采用了行内样式,行内（嵌入）样式表,在相关的标签内使用样式属性（style）由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。不推荐使用,行内（嵌入）样式表,静夜思作者：李白 床前明月光，疑是地上霜。我是郭德刚，低头思故乡。,查看源代码,行内样式使用范围更小，只适用于某一个标签，对其他标签不起作用,本段标签采用了行内样式,外部样式表文件,如果希望一个网站中多个页面的样式保持一致，如何解决？,使用外部样式表文件样式表可以解决,外部样式表文件,根据
11、样式文件与网页的关联方式又分为：链接（LINK）外部样式表导入（import）外部样式表,链接（LINK）外部样式表,使用LINK（链接）标签:,第一步：创建样式表文件newstyle.css,第二步：把样式文件和网页绑定,第三步：浏览查看各网页,演示示例3：使用外部样式表1 使用外部样式表2,引入的样式文件,链接（LINK）外部样式表,mystyle.css 文件p margin-left:20pxbody background-image:url(images/back40.gif),应用于XHTML,导入（import）外部样式表,使用import导入，语法：import newstyl
12、e.css;,引入样式表文件,演示示例4：使用外部样式表1 使用外部样式表2,外部样式文件,样式的混合使用,行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：有关整个网站统一风格的样式代码，放置在独立的样式文件*.css某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式某张网页内，部分内容”与众不同“，采用行内样式,对于某个HTML标签：1）如果有多种样式，如果规定的样式没有冲突，则叠加；2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；,内嵌样式,行内样式,某个HTML标
13、签,常用的样式属性,文本属性,使用font-size、font-family、color实现,宋体，字体大小12px,字体大小16px,要实现如下图所示的文本样式，该如何编写？,常用的样式属性,P font-size:12px;font-family:宋体;text-align:left;.bigFont f ont-size:16px;color:red;【新闻】设搜狐为首页 9月1日 世锦赛刘翔12秒95夺冠成就大满贯我国实施不安全食品召回制度 遏制非法出口.,查看源代码,声明P标签样式,声明名称为bigFont类样式,它可被多个标签共享,应用类样式用class”类名“,字体修饰属性,字体
14、名称属性：font-family 示例如下：body font-family:Verdana,Geneva,Arial,sans-serif;这些字体名称可以在操作系统中找到相应名称（如windows XP，按如下顺序查找：控制面板 字体）,英文字体,serif：主要用于出版业的排版，比如说报纸，这类字体比较传统。示例字体：Times New Roman Georgia sans-serif：主要用于计算机的显示。示例字体：Verdana Arial Arial Black Trebuchet MS,英文字体,monospace：打字机所用的字体，一般用在代码的显示。示例字体：Courier
15、New cursive：手写体。示例字体：Comic Sans Monotype Corsiva Fantasy：美术设计类的字体，这类字体一般用在Logo设计等。示例字体：Impact Alba,字体大小属性：font-size,字体斜体属性：font-style,字体粗细属性：font-weight,字体大小写属性：font-variant,该属性用于设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。,文本修饰属性：text-decoration,字体属性：font,该属性是各种字体属性的一种快捷的综合写法
16、。该属性写法有一定的顺序，请按如下顺序书写：font-style、font-variant、font-weight、font-size/line-height、font-family。示例：p font:italic normal bold 11pt arial;,其它排版属性,line-height属性：行间距 letter-spacing 属性：字间距text-indent 属性：首行文本缩进的长度 text-align 属性：文本的水平对齐方式 text-transform;设置是否将文本中的字母全部大写/小写/首字母大写,取值范围 uppercase,lowercase,capital
17、ize,none,列表,list-style-typelist-style-positionlist-style-image:url(图片路径)建议使用背景样式实现ul的自定义图片,按列表方式:display:list-item example4,List-item相关属性:list-style-type用来更改符号外观disc 圆盘circle 圆圈square 方块decimal 十进制数字lower-roman 小写罗马数字upper-roman 小写罗马数字 lower-alpha 小写英文字母upper-alpha 大写英文字母,小结1,编写如下图所示效果对应的HTML代码,练习答案
18、,黑体，字体大小20px,字体大小14px，蓝色,练习代码,盒子模式（Box Model）,常用的样式属性,方框属性,margin-right右边界,margin-left左边界,margin-top上边界,margin-bottom下边界,margin,border,padding,border-width边框的宽度,padding-left左填充,padding-bottom下填充,常用的样式属性,方框属性,padding属性,margin属性,border属性,Border属性大致分三类边框粗细border-width边框样式border-style边框颜色border-color 和p
19、adding和margin用法一样，三个属性都是按方向分，再加一个简写属性。常用写法:border:宽度 类型 颜色,边框-2,如果要设置边框,必须首先设置border-style属性,使得文本具有边框,然后再设置其它边框属性.none;无边框;dotted;边框是由点组成的虚线;dash;边框是由短线组成的虚线;double;边框是双线;groove;3D沟槽状边框(立体线);ridge;3D脊状边框;inset;3D内嵌边框;outset;3D外嵌边框(浮雕线);solid;普通边框;color:设置边框颜色;,边框-3,其中color属性可以设置多个值,如果设置一个值,那么四条边框颜色值
20、相同;如果设置两个值,那么上,下边框的颜色值和颜色值1相同,左右边框颜色和颜色2相同;如果设置4个值,按上,右,下,左的顺序分配颜色;如:border-style:inset;border-color:rgb(12,255,220);border-color:blue,green;border-left,border-bottom,border-top,border-color.可以在border-style的基础上再单独设置左右上下边框的样式boder-right-width等分别设置边框上下左右的宽度;,边缘,边缘是文本周围不可见的区域,如果文本按块显示,边缘就是块的边缘;如果文本按行显示
21、,边缘就是行的边缘,列表项也是如此;和边缘有关的属性包括:margin-top,margin-right,margin-bottom,margin-left;如:margin-top:20;设置有边缘的大小,单位是像素;,常用的样式属性,背景属性,演示示例2：使用不同的背景属性,table background-image:url(images/type_back1.jpg);background-repeat:no-repeat;,设置背景图像为images文件夹下的type_back1.jpg,设置背景图像不平铺,背景属性,background-color：设置元素的背景颜色。backgr
22、ound-image：把图像设置为背景。background-repeat：设置是否及如何重复背景图像。background-position：设置背景图像的起始位置。background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动。background：是上述所有与背景有关的属性的缩写用法。,颜色和背景,设置文本的字符颜色和背景颜色,使用属性color和background-color.两种设置方法:设置字体:color:rgb(120,225,220);color:red;设置背景:background-color:rgb(10,225,220);backgrou
23、nd-colo:yellow;,显示图象 example6,可以通过设置background-image属性的值为文本指定一幅背景图片;URL(图象文件名字);例如:background-image:URL(pic1.gif);可以使用background-repeat属性设置图象是否通过重复出现来平铺背景;background-repeat的取值如下:repeat,repeat-x,repeat-y,no-repeat;例如:background-repeat:no-repeat;,width属性和height属性,设定元素的长度和高度。,要实现下图细边框的效果，该如何编写样式规则？,常用的
24、样式属性,文本框宽度为1px,边框样式为solid,使用border-width和border-style属性,常用的样式属性,.textBorderborder-width:1px;border-style:solid;名字：密码：,查看源代码,文本框为实线边框,边框宽度为1像素,看看没有设置样式的文本框的效果,常用的样式属性,特殊样式（超连接）a:link color:#FF0000/*未被访问的链接 红色*/a:visited color:#00FF00/*已被访问过的链接 绿色*/a:hover color:#FFCC00/*鼠标悬浮在上的链接 橙色*/a:active color:#
25、0000FF/*鼠标点中激活链接 蓝色*/,A color:blue;text-decoration:none;A:hover color:red;诺基亚|摩托罗拉 联想|戴尔,查看源代码,超链接文本的样式,鼠标在超链接上悬停时，超链接文本变为红色,如何编写此超链接样式？,编写如下图所示效果对应的HTML代码,小结2,细边框solid样式,无下划线的超连接样式,鼠标在超链接上悬停时，超链接文本变为红色,练习答案,练习代码,常用的样式属性,要实现下图图片按钮的效果，该如何编写样式规则？,按钮的边界、边框、填充值均为0px,使用background-image、margin、border、padd
26、ing、height、width和font-size属性,按钮背景图像与按钮宽度、高度大小一样,字体大小14px,综合例子：制作图片按钮,常用的样式属性,查看源代码,.picButton background-image:url(images/back.jpg);border:0 px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;.,背景图像为images文件夹下的back.jpg,设置按钮上的字体大小为14像素,div标签和span标签,div是块元素，被用来组织一个或多个块元素。span是行内元素，因为它不对文档
27、本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果。span通常情况下它都用来定义一小段文字的样式。它们的另一个区别就是div会造成换行，而span则不会。,层标签,关键代码 Z-index=1，我是第一层，我是容器，包含图片段落 Z-index=2，我是第二层，包含图片和段落,使用 Z index指定是哪一层,是块级容器标签，可以包含图片、标题、段落、文字等,图片,段落,top,left,标签,所有韩款童装10元/件起拍喽,是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容,Position,static 默认absolute 绝对定位fixedrelative,
