信息技术 PPT02-2CSS基本语法入门(快速).ppt

1. 定义图片样式 （1）图片边框 ①｛border:类型 宽度 颜色;｝ ②｛boder-style: 参数； border-width：数值； border-color：参数； ｝ 边框线类型 boder-style常用参数： none:无边框线 　 dotted:由点组成的虚线 　 dashed:由短线组成的虚线 　 solid:实线边框 　 double:双线边框　 （四）通过CSS定义图片样式 （四）通过CSS定义图片样式 主要学习内容： （1）CSS定义图片样式的方法 （2）CSS设置图文交互效果的方法 （3）CSS设置背景图片的方法 （4）CSS处理背景图片样式的方法 例子 2-4：实训-CSS字体样式综合演练 巩固练习 例子 2-4：实训-CSS字体样式综合演练 巩固练习 body{ background-image:url(images/pic.gif); background-repeat:no-repeat; background-position:right bottom;} （四）通过CSS定义图片样式 1.基本概念 a/a 添加超链接后，有其特殊样式 CSS伪类（虚类） a:link a:visited a:active a:hover 范例3-1：CSS伪类别 （三）通过CSS定义链接样式 例子 2-4：实训-CSS字体样式综合演练 巩固练习 一.CSS基本语法入门 韩山师范学院教育科学学院 CSS快速入门 关键内容： （1） CSS语法、选择器类型及虚类 （2）不同选择器类的应用方式 类自动，ID认名字，标签和虚类自动 （3）引入方式（即样式代码写在什么位置） （4）DW图形化样式设置--》写“样式代码” ①文本：字体、大小、颜色、行高、对齐等 ②列表： ③链接：a的四种状态，display:block变成“块” ④图片：边框、边框样式、边框宽度、大小 ⑤环绕方式：float浮动、padding内边距、position：fixed 1.CSS概念 CSS : Cascading Style Sheets 层叠（级联）样式表，习惯叫CSS样式表 CSS是层叠样式表，多重样式定义被层叠在一起成为一个整体，在网页设置中是标准的布局语言，用来控制元素的尺寸、颜色和排版等。 使用样式表：将“网页结构代码”和“网页格式风格代码”分离，从而使网页设计者可以对网页的布局进行更多的控制。 (一)CSS基础知识介绍 2. CSS的基本语法 一个样式（style）由selector选择器、property属性和value属性值三部分组成，形式如下： selector{ property:value } 在selector大括号里，使用属性名和属性值参数对来定义选择器里面的样式。多个属性和属性值，中间用分号隔开。 ① selector{ property1:value1； property2:value2 } ② selector{property1:value1；property2:value2} ③ selector{property1:value1；property2:value2；} (一)CSS基础知识介绍 1. 定义图片样式 （1）图片边框 ①｛border:类型 宽度 颜色;｝ ②｛boder-style: 参数； border-width：数值； border-color：参数； ｝ 边框线类型 boder-style常用参数： none:无边框线 　 dotted:由点组成的虚线 　 dashed:由短线组成的虚线 　 solid:实线边框 　 double:双线边框　 （四）通过CSS定义图片样式 （四）通过CSS定义图片样式 主要学习内容： （1）CSS定义图片样式的方法 （2）CSS设置图文交互效果的方法 （3）CSS设置背景图片的方法 （4）CSS处理背景图片样式的方法 例子 2-4：实训-CSS字体样式综合演练 巩固练习 例子 2-4：实训-CSS字体样式综合演练 巩固练习 body{ background-image:url(images/pic.gif); background-repeat:no-repeat; background-position:right bottom;} （四）通过CSS定义图片样式 1.基本概念 a/a 添加超链