[PPT模板]css.ppt
《[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:“
3、隶书“; font-size:24px; 静夜思 床前明月光, 疑是地上霜。 我是郭德刚, 低头思故乡。 ,查看源代码,本页面中所有的P标签都应用了此样式,所有的段落都采用P样式,保证风格统一,用分号隔开,选择器,如何编写此样式?字体类型为律书、大小24px,样式表的基本语法,选择器的分组 被分组的选择器可以分享相同的声明。用逗号将需要分组的选择器分开。 例:所有的标题元素都是绿色的。 h1,h2,h2,h3,h5,h6 color: green; , .red color:red; font-family:“隶书“; font-size:24px; ,样式表的基本语法,如果希望其他的标签也能
4、采用P标签的样式,怎么办?,其他标签和P标签应该采用相同的样式,所以要为它们定义一个共享样式。,类样式(class),.类名,样式规则,样式表的基本语法, 样式规则 .red color:red; font-family:“隶书“; 静夜思 床前明月光, 疑是地上霜。 我是郭德刚, 低头思故乡。 ,查看源代码,CLASS类选择器,为类选择器定义的样式规则,应用类选择器 class”类名“,和标签要应用同一样式,如何实现这样的样式效果?字体类型都为隶书,选择器,根据选择器的不同,分为: HTML 选择器 CLASS 类选择器 ID 选择器,/*-关键代码-*/ P /*设置样式:字体和背景色*/
5、 font-family: System; font-size: 18px; color: #3333CC; H2 background-color: #CCFF33; text-align: center; 品种特征方面: 1、蛋鱼:蛋鱼.。 2、龙睛:龙睛。 3、高头:高头.。,HTML选择器,应用H2样式,应用P样式,class类选择器, .myinput border: 1px solid; border-color:#D4BFFF; color:#2A00FF 用户名 密 码 ,CLASS类选择器,应用类选择器: class”类名“,类选择器的定义格式为: .类名 样式规则; , #
6、fire color:red; font-size: 24px; 我是二级标题,火是这样的 我是段落,火是这样的 ,ID选择器,ID选择器,ID选择器的定义格式为: ID名 样式规则; ,应用ID选择器:ID”ID名“,区别Class与ID选择器,Class选择器可以为标有特定 class 的 HTML 元素指定特定的样式 class 选择器以 “.” 来定义,同样的class名称可以在页面中多次使用,作用于多个对象,可以达到统一样式设置的目的 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 “#“ 来定义,用法与类选择器类似,区别是id名只能在每个 HT
7、ML 文档中出现一次,通常在划分排版块的时候使用。,CSS 伪类(Pseudo-classes),伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符。 它最常用的技巧就是对连接在不同状态下定义不同的样式效果。,CSS 伪类(Pseudo-classes),selector:pseudo-class property: value 选择器:伪类 属性: 值,常用CSS 伪类,锚伪类,a:link color: #FF0000 /*未被访问状态 */ a:visited color: #00FF00 /*已被访问状态 */ a:hover color: #FF00FF
8、 /*鼠标悬停状态 */ a:active color: #0000FF /*活动状态 */, A /*设置超链接不带下划线*/ color: blue; text-decoration: none; /*文本修饰:无*/ A:hover /*鼠标在超链接上方停留时,带下划线 */ color: red; text-decoration:underline; /*文本修饰:下划线*/ HEAD 俺是超链接,移过来我就显示下划线 ,特殊的选择器,HTML选择器,特殊的伪类:A代表超链接,hover代表鼠标悬停,派生选择器,派生选择器允许你根据文档的上下文关系来确定某个标签的样式。,CSS li
9、strong font-style: italic; font-weight: normal; ,应用于XHTML 我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用 我是斜体字。这是因为 strong 元素位于 li 元素内。 我是正常的字体。 ,例:希望列表中的 strong 元素变为斜体字,而不是通常的粗体字。,CSS注释,注释以“/*”为开头,以“*/”为结尾。,样式表的三类应用方式,内嵌样式表 内部样式表使用格式如下: 行内(嵌入)样式表 外部样式表文件, 样式规则 ,如果希望本网页内的所有同类标签都采用统一样式,这时应采用内嵌样式。,内部样式表, P font-f
10、amily:“隶书“; font-size:18px; color:#FF0000; 床前明月光, 疑是地上霜。 我是郭德刚, 低头思故乡。 ,查看源代码,所有的段落都采用 P 样式,保证样式统一 使用 标签在头部定义内部样式表,行内(嵌入)样式表,如果希望某段文字和其他段落文字显示风格不一样, 该如何解决?,使用行内(嵌入)样式表可以解决,行内(嵌入)样式表, 设置属性 这个段落应用了样式 这个段落按默认样式显示 ,为标签p指定样式,查看源代码,本段标签采用了行内样式,行内(嵌入)样式表,在相关的标签内使用样式属性(style) 由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势
11、。 不推荐使用,行内(嵌入)样式表, 静夜思 作者:李白 床前明月光, 疑是地上霜。 我是郭德刚, 低头思故乡。,查看源代码,行内样式使用范围更小,只适用于某一个标签,对其他标签不起作用,本段标签采用了行内样式,外部样式表文件,如果希望一个网站中多个页面的样式保持一致, 如何解决?,使用外部样式表文件样式表可以解决,外部样式表文件,根据样式文件与网页的关联方式又分为: 链接(LINK )外部样式表 导入(import)外部样式表,链接(LINK )外部样式表,使用LINK(链接)标签 : ,第一步:创建样式表文件newstyle.css,第二步:把样式文件和网页绑定,第三步:浏览查看各网页,演
12、示示例3:使用外部样式表1 使用外部样式表2,引入的样式文件,链接(LINK )外部样式表,mystyle.css 文件 p margin-left: 20px body background-image: url(images/back40.gif) ,应用于XHTML ,导入(import)外部样式表,使用import导入 ,语法: import newstyle.css; ,引入样式表文件,演示示例4:使用外部样式表1 使用外部样式表2,外部样式文件,样式的混合使用,行内样式表、内嵌样式表、外部样式表各有优势,实际的开发中常常 需要混合使用: 有关整个网站统一风格的样式代码,放置在独立的
13、样式文件*.css 某些样式不同的页面,除了链接外部样式文件,还需定义内嵌样式 某张网页内,部分内容”与众不同“,采用行内样式,对于某个HTML标签: 1)如果有多种样式,如果规定的样式没有冲突,则叠加; 2)如果有冲突,则最先考虑行内样式表显示,如果没有,再考虑内嵌样式显示,如果还没有,最后采用外面样式表显示,否则就按HTML的默认样式显示;,内嵌样式,行内样式,某个HTML标签,常用的样式属性,文本属性,使用font-size、font-family、 color实现,宋体,字体大小12px,字体大小16px,要实现如下图所示的文本样式,该如何编写?,常用的样式属性, P font-siz
14、e: 12px; font-family: “宋体“; text-align:left; .bigFont f ont-size: 16px; color:red; 【新闻】设搜狐为首页 9月1日 世锦赛刘翔12秒95夺冠成就大满贯 我国实施不安全食品召回制度 遏制非法出口 ,查看源代码,声明P标签样式,声明名称为bigFont类样式,它可被多个标签共享,应用类样式用 class”类名“,字体修饰属性,字体名称属性:font-family 示例如下: body font-family: Verdana, Geneva, Arial, sans-serif; 这些字体名称可以在操作系统中找到相应
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- PPT模板 PPT 模板 css
链接地址:https://www.31doc.com/p-1995675.html