HTML5+CSS3+JavaS教学多媒体课件

第10章CSS美化图片HTML5+CSS3+JavaS教学10本章内容10.1图片边框样式10.2对齐图片10.3图文混排10.4综合实例1—一句话新闻10.5综合实例2—学校宣传单HTML5+CSS3+JavaS教学1010.1图片边框样式10.1.1图片边框10.1.2图片缩放HTML5+CSS3+JavaS教学1010.1.1图片边框在CSS3中，使用border-style属性定义边框样式，即边框风格。例如可以设置边框风格为点线式边框（dotted）、破折线式边框（dashed）、直线式边框（solid）和双线式边框（double）等。border-style属性的详细信息。实例：10.1.html可以使用border-top-style设定上边框样式、border-right-style设定右边框样式、border-bottom-style设定下边框样式和border-left-style设定左边框样式。实例：10.2.htmlHTML5+CSS3+JavaS教学1010.1.2图片缩放在HTML标记语言中，通过img的描述标记height和width可以设置图片大小。width和height分别表示图片的宽度和高度，其中二者值可以数值或百分比，单位可以是px。需要注意的是高度属性heigth和宽度属性width设置要求相同。实例：10.3.htmlmax-width和max-height分别用来设置图片宽度最大值和高度最大值。在定义图片大小时，如果图片默认尺寸超过了定义的大小时，那么就以max-width所定义的宽度值显示，而图片高度将同比例变化，如果定义的是max-height，以此类推。但是如果图片的尺寸小于最大宽度或者高度，那么图片就按原尺寸大小显示。max-width和max-height的值一般是数值类型。实例：10.4.htmlHTML5+CSS3+JavaS教学1010.2对齐图片10.2.1横向对齐方式10.2.2纵向对齐方式HTML5+CSS3+JavaS教学1010.2.1横向对齐方式所谓图片横行对齐，就是在水平方向上进行对齐，其对齐样式和文字对齐比较相似，都是有三种对齐方式，分别为“左”，“右”和“中”。实例：10.10.htmlHTML5+CSS3+JavaS教学1010.2.2纵向对齐方式vertical-align属性设置元素的垂直对齐方式，即定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。其语法格式为vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|length。实例：10.7.htmlHTML5+CSS3+JavaS教学1010.3图文混排10.3.1文字环绕10.3.2设置图片和文字间距HTML5+CSS3+JavaS教学1010.3.1文字环绕float属性主要定义元素在哪个方向浮动。一般情况下这个属性总应用于图像，使文本围绕在图像周围，有时它也可以定义其他元素浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。float语法格式为：float:none|left|right。实例：10.8.htmlHTML5+CSS3+JavaS教学1010.3.2设置图片和文字间距padding属性主要用来在一个声明中设置所有内边距属性，即可以设置元素所有内边距的宽度，或者设置各边上内边距的宽度。如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。其语法格式为：padding:padding-top|padding-right|padding-bottom|padding-left。实例：10.9.htmlHTML5+CSS3+JavaS教学1010.4综合实例1—一句话新闻分析需求构建HTML页面添加CSS代码，修饰DIV使用类标识符指向da添加CSS代码，修饰正副标题引用类标识符修饰图片修饰段落实现虚线显示综合实例：10.10.htmlHTML5+CSS3+JavaS教学1010.5学校宣传单