当前位置:首页 >> 互联网 >>

网页 第五章 CSS高级样式_图文

网页设计 2017-1-16 第五章 CSS高级样式 本章目标 ? 会使用CSS设置字体样式 ? 会使用CSS设置文本样式 ? 会使用CSS设置图片对齐方式 ? 会使用CSS设置超链接样式 ? 会使用CSS设置鼠标外观 ? 会使用CSS设置背景样式 CSS字体样式 属性名 含义 举例 font-family font-size font-style 设置字体类型 设置字体大小 设置字体风格 font-family:隶书; font-size:12px; font-style:italic; font-weight font 设置字体的粗细 在一个声明中设置所有 字体属性 font-weight:bold; font:italic bold 36px 宋体; font-family属性 body{font-family: Times,Times New Roman, 楷体;} font-size属性 ? ? 单位:px(像素) in、cm、mm、pt、pc h1{font-size:24px;} h2{font-size:16px;} h3{font-size:5mm;} p{font-size:10in;} span{font-size:12pt;} strong{font-size:13pc;} font-weight属性 值 说明 normal bold bolder lighter 100、200、300、400、 500、600、700、800、 900 默认值,定义标准的字体。 粗体字体。 更粗的字体。 更细的字体。 定义由细到粗的字体。 400等同于normal,700等同于bold。 font-weight属性 <html> <head> <style type=text/css> p.normal {font-weight: normal} p.thick {font-weight: bold} p.thicker {font-weight: 900} 运行结果: </style> </head> <body> <p class=normal>This is a paragraph</p> <p class=thick>This is a paragraph</p> <p class=thicker>This is a paragraph</p> </body> </html> font属性 字体属性的顺序:字体风格→字体粗细→字体大小→字体类型 p span{font:oblique bold 12px 楷体;} font属性 <html> <head> <style type=text/css> p.ex { 运行结果: font:italic bold 30px arial; } </style> </head> <body> <p class=ex>好好学习</p> </body> </html> 文本属性 属性 color text-align 含义 设置文本颜色 color:#00C; 举例 设置元素水平对齐方式 text-align:right; text-indent line-height text-decoration 设置首行文本的缩进 设置文本的行高 设置文本的装饰 text-indent:20px; line-height:25px; text-decoration:underline; color属性 十六进制方法表示颜色 color:#FFFFFF; color:#000000; color:FF0000; color:#A983D8; color:#95F141; color:#339966; color:#EEFF66; text-align属性 text-align 属性规定元素中的文本的水平对齐方式。 值 left 说明 把文本排列到左边。默认值:由浏览器决定 right center justify 把文本排列到右边 把文本排列到中间 实现两端对齐文本效果 text-align属性 <html> <head> <style type=text/css> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} 运行结果: </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> </body> </html> text-decoration属性 text-decoration 属性规定添加到文本的修饰。 值 none underline overline line-through blink 说明 默认值,定义的标准文本。 设置文本的下划线。 设置文本的上划线。 设置文本的删除线。 设置文本闪烁。此值只在firefox浏览器中有效, 在IE中无效。 text-decoration属性 <html> <head> <style type=text/css> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration:blink} a {text-decoration: none} </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <p><a href=http://www.w3school.com.c n/index.html>这是一个链接 </a></p> </body> </

相关文章:
网页 第五章 CSS高级样式_图文.ppt
网页 第五章 CSS高级样式 - html5网页制作,基础知识,教学资料... 网页 第五章 CSS高级样式_互联网_IT/计算机_专业资料。html5网页制作,基础知识,教学资料 ...
第5章 css样式表_图文.ppt
第5章 css样式表 - 第五章 CSS 样式表 5.1 CSS 样式的应用 5.2 使用CSS样式表 5.3 使用CSS 样式表的网页实例 CSS(Cascading Style Sh...
Dreamweaver第五章 可视化编辑与应用CSS样式_图文.ppt
Dreamweaver第五章 可视化编辑与应用CSS样式_计算机软件及应用_IT/计算机_专业资料...能力目标 a.掌握CSS应用 b.能用CSS+DIV布局页面 ?情感目标(1)培养学生对本...
网页设计与制作课件第5章 CSS样式与模板的使用_图文.ppt
网页设计与制作课件第5章 CSS样式与模板的使用_英语_高中教育_教育专区。网页设计与制作第一章 第二章 第三章 第四章 第五章 第六章 第七章 第八章 第...
网页设计第五章_图文.ppt
网页设计第五章 - 第五章 CSS样式表(一) CSS样式表(一) 预习检查 ? 什么是CSS?使用CSS有何好处? ? CSS的基本语法是什么? ? 选择器分为哪几类? 本章...
CSS第五章_图文.ppt
CSS第五章 - 第五章CSS设置网页中的背景 43 5.1背景颜色 ? 页面背景颜色 background-color:值 例19 页...
第五章 CSS文本样式_图文.ppt
第五章 CSS文本样式_计算机软件及应用_IT/计算机_专业资料。第五章 CSS文本样式 第五章 CSS文本样式属性 color direction line-height letter-spacing 描述 设置...
第五章 网页特效制作_图文.ppt
第五章 网页特效制作 - 第五章 @钱瑞河 网页特效制作 考纲要求: 1、了解CSS样式的作用; 2、掌握CSS的创建、编辑及应用; 3、了解行为的概念及组成; 4、掌握...
第05章 使用CSS样式.._图文.ppt
HTML与CSS前台页面设计 第五章 使用CSS样式 目录: 5.1对HTML文档应用样式 5.2CSS样式代码编写规则 5.3CSS样式选择器 5.4综合实例 HTML与CSS前台页面设计 5.1...
第5章 CSS基础_图文.ppt
第5章 CSS基础_计算机软件及应用_IT/计算机_专业资料。第五章 CSS样式表(一)...会使用复合选择器为特定的网页元素添加CSS样式 ? 理解CSS继承特性,并掌握其在...
第五章 CSS层叠样式表(理论)_图文.ppt
第五章 CSS层叠样式表(理论)_计算机软件及应用_IT/计算机_专业资料。第五章 CSS层叠样式表 本章目标理解样式表对控制页面元素外观的作用 掌握样式规则的语法 理解...
Web 应用开发与网站维护_第五章 层叠样式表CSS_图文.ppt
Web 应用开发与网站维护_第五章 层叠样式CSS_理学_高等教育_教育专区。Web 应用开发与网站维护_课件 第五章 层叠样式CSS 教学提示和教学目标 5.1 CSS样式...
第五章 CSS层叠样式表_图文.ppt
第五章 CSS层叠样式表 本章目标 ? ? ? ? ? 理解样式表对控制页面元素外观的作用 掌握样式规则的语法 理解各种选择器 理解样式代码在什么位置编写及它们的作用...
第五章 CSS 上机指导02_图文.doc
第五章 CSS 上机指导02_互联网_IT/计算机_专业资料。上机指导主要目标 ? 会...8? 2、 新建一个 css 文件,命名为 nav.css,并在网页当中引入该样式文件,...
第05章 样式表_图文.ppt
第05章 样式表 - 第五章 样式表 统一网站(网页)风格 主要内容 一、样式表(CSS)的基本概念 二、利用样式表编辑器编辑样式表 三、CSS属性的理解与应用 四、...
05第五章HTML CSS JavaScript网页制作三合一案例教程_图文.ppt
05第五章HTML CSS JavaScript网页制作三合一案例教程_计算机软件及应用_IT/计算机...通过制作图5-9所示的简单横向导航栏,来继续学习 制作导航栏的方法及CSS样式的...
第五章 动态网页制作_图文.ppt
第五章 动态网页制作_互联网_IT/计算机_专业资料。第五章 动态网页制作 认识...? Css样式可以控制字体,颜色,大小,背景, 网页布局,图文效果等 CSS的设计 ? ...
第五章 层叠样式表(CSS)1_图文.ppt
第五章 层叠样式表(CSS) 5.1 CSS概述 ?什么是CSS ?CSS(Cascading Style Sheet ,层叠样式表)是一 种格式化网页的标准方式,它扩展了HTML的功能,使 网 ...
第五章 如何使用CSS美化网页.ppt
CSS规则定义的8种类型:(1)“类型”:定义 CSS 样式的基本字体和类型设置。 ...创建a:link、a:hove、a:active、a:visited高级样式,设置页面上有超 链接的...
网页设计css样式_图文.ppt
网页设计css样式 - 第四章 CSS样式表 回顾 表单中提交数据的方法有那两种