HTML图像标记和CSS核心基础和文本相关样式

HTML常用图像格式

1.GIF格式
GIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。再加上GIF支持透明（全透明或全不透明），因此很适合在互联网上使用。但GIF只能处理256种颜色，在网页制作中，GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。
2. PNG格式
PNG包括PNG-8和真色彩PNG (PNG-24和PNG-32 )。相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明、半透明、全不透明)，并且颜色过渡更平滑，但PNG不支持动画。同时需要注意的是，IE 6是可以支持PNG-8的，但在处理PNG-24的透明时会显示为灰色。通常，图片保存为PNG-8会在同等质量下获得比GIF更小的体积、而半透明图片只能使用真色彩PNG。
3. JPG格式
JPG所能显示的颜色比GIF和PNG要多得多、可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。JPG是特别为照片图像设计的文件格式，网页制作过程中类似于照片的图像比如横幅广告(banner )、商品图片、较大的插图等都可以保存为JPG格式。
简而言之，在网页中小图片或网页基本元素如图标、按钮等考虑GIF或PNG-8，半透明图像考虑PNG-24，类似照片的图像则考虑JPG。

HTML图像标记

基本语法格式：< img src=“图像URL”/>
该语法中src属性用于指定图像文件的路径和文件名，它是img标记的必须属性。

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持%页面百分比）	设置图像的宽度
height	像素（XHTML不支持%页面百分比）	设置图像的高度
border	数字	设置图像边框的宽度
vspace	像素	设置图像顶部和底部的空白（垂直边距）
hspace	像素	设置图像左侧和右侧的空白（水平边距）
align	left	将图像对齐到左边
align	right	将图像对齐到右边
align	top	将图像的顶端和文本的第一行文字对齐，其他文字居图像下方
align	middle	将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方
align	bottom	将图像的底部和文本的第一行文字对齐，其他文字居图像下方

HTML相对路径和绝对路径

1.绝对路径一般是指带有盘符的路径，例如：“D:\HTML+CSS网页制作\chapter02\img\logo.gif”,或完整的网络地址，例如：“http://www.itcast.cn/images/logo.gif”.
2.相对路径
相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。
（1）图像文件和html文件位于同一文件夹，只需输入图像文件的名称即可。< img src=“logo.gif” />。
(2)图像文件位于html文件的下一级文件夹。输人文件夹名和文件名，之间用“/”隔开。如< img src=“img/imgO1/logo.gif” />。
(3)图像文件位于html文件的上一级文件夹。在文件名之前加入"…/",如果是上两级，则需要使用"…/…/",依次类推，如< img src="…/logo.gif"/>

CSS样式规则

格式：

选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

属性和属性值之间用英文“：”连接，多个“键值対”之间用英文“：”进行区分。
CSS代码结构特点：
1.CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。
2.多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留。
3.如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。
4.在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。
5.在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此，可以使用空格键、Tab键、Enter键等对样式代码进行排版，即所谓的格式化CSS代码，这样可以提高代码的可读性。

引入CSS样式表

1.行内式
行内式也称为内联样式，是通过对标记的style属性来设置元素的样式，
基本语法格式：

< 标记名  style="属性1：属性值1；属性2：属性值2；">内容</标记名>

2.内嵌式
内嵌式是将CSS代码集中写在HTML文档的< head>头部标记中，并且用< style>标记定义。
基本语法格式：

< head>
< style type="text/css">
        选择器{属性1：属性值1；属性2：属性值2；}
</style>
</head>

3. 链入式
   链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过< link/>标记将外部样式表文件链接到HTML文档中。
   基本语法格式：

< head>
<link href="CSS文化的路径" type="text/css"rel="stylesheet"/>
</head>

4.导入式
导入式与链入式相同，都是针对外部样式表文件的。但两者的加载时间和顺序不同，这就是大多数网站采用链入式的原因。
基本语法格式：

<style type="text/css">
      @import url;或@import "css文件路径";
      /*在此还可以存放其他css样式*/
</style>

CSS基础选择器

1.标记选择器
是指用HTML标记名称作为选择器，按照标记名称分类，为页面中某一类标记指定统一的CSS样式。
基本语法格式：

标记名{属性1：属性值1；属性2：属性值2；}

2.类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名。
基本语法格式：

.类名{属性1：属性值1；属性2：属性值2；}

3.id选择器
id选择器使用“#”进行标识，后面紧跟id名。
基本语法格式：

#id名{属性1：属性值1；属性2：属性值2；}

4.通配符选择器
通配符选择器用“#”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
基本语法格式：

*{属性1：属性值1；属性2：属性值2；}

CSS字体样式属性

1.font-size字号大小
CSS长度单位：

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素，最常用，推荐使用

绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

2.font-family:字体
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
例:

body{font-family:"华文彩云","宋体","黑体";}

注意：
（1）各种字体之间必须使用英文状态下的逗号隔开。
（2）中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当设置英文字体时，英文字体名必须位于中文字体名之前。
（3）如果字体名中包含空格、#、￥等符号，则该字体必须加英文状态下的单引号或双引号，
（4）尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
3.font-weight:字体粗细
font-weight可用属性值：

值	描述
normal	默认值，定义标准的字符
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900	定义由细到粗的字符，值越大字体越粗

4.font-variant:变体
（1）normal:默认值，
（2）small-caps:所有的小写字母均会转换为大写，与其余文本相比，其字体尺寸更小。
5.font-style:字体风格
（1）normal:默认值
（2）italic:斜体
（3）oblique:倾斜
6.font:综合设置字体样式
基本语法格式：

选择器{font:font-style  font-variant   font-weight  font-size/line-height  font-family;}

使用font属性时，必须按照上面语法格式中的顺序书写，各个属性以空格隔开。

CSS文本外观属性

1.color:文本颜色
取值方式：
（1）预定义的颜色值，如red、green、blue等
（2）十六进制，如#FF0000
（3）RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%).
2.letter-spacing:字间距
字间距就是字符与字符之间的空白，允许使用负数，默认为normal
3.word-spacing:单词间距
用于定义英文单词之间的间距，对中文字符无效。允许使用负值，默认为normal
4.line-height:行间距
行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。
5.text-transform:文本转换
（1）none:不转换（默认值）
（2）capitalize:首字母大写
（3）uppercase:全部字符转换为大写
（4）lowercase:全部字符转换为小写
6.text-decoration:文本装饰
（1）none:没有装饰（正常文本默认值）
（2）underline:下画线
（3）overline:上画线
（4）line-through:删除线
7.text-align:水平对齐方式
（1）left:左对齐（默认值）
（2）right:右对齐
（3）center:居中对齐
8.text-indent:首行缩进
允许使用负值，建议使用em作为设置单位。
9.white-space:空白符处理
（1）normal:常规（默认值）
（2）pre：预格式化，按文档的书写格式保留空格，空格原样显示
（3）nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记< br/>。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。

作业

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>春节</title>
		<style type="text/css">
			.one {
				font-family: "微软雅黑";
				font-weight: 700;
			}

			.two {
				font-weight: bold;
			}

			.three {
				font-weight: 600;
			}
		</style>
	</head>
	<body>
		<h1 class="two" align="center">
			<font size="7" color="burlywood">春节</font>

		</h1>
		<img src="chun.JFIF" alt="春节" title="春节" align="left" hspace="20" height="400">
		<p class="one">&nbsp;&nbsp;&nbsp;&nbsp;春节（新春，过年），农历新年，传统上的“年节”，由上古时代岁首祭祀活动演变而来，是中华民族最隆重的传统佳节，中国四大传统节日之一。</p>
		<p class="three">&nbsp;&nbsp;&nbsp;&nbsp;春节节期一般是指农历正月初一至正月十五（元宵节）。其活动均以除旧布新、迎禧接福、祭神祭祖、祈求丰年为主要内容，带有浓郁的各民族特色。
			它不仅集中体现了中华民族的思想信仰、理想愿望、生活娱乐和文化心理，而且也是祈福、饮食和娱乐活动的狂欢式展示。</p>
		<p class="three">&nbsp;&nbsp;&nbsp;&nbsp;春节是除旧布新的日子，春节虽定在农历正月初一，但春节的活动却并不止于正月初一这一天。从腊月二十三（或二十四日）小年节起，
			人们便开始“忙年”：扫房屋、购置年节年货、贴春联、洗头沐浴等等，所有这些活动，有一个共同的主题，即“辞旧迎新”。
			春节也是祭祝祈年的日子，古人谓谷子一熟为一“年”，五谷丰收为“大有年”。一年一度的庆祝丰收的活动，诸如灶神、门神、财神、喜神、井神等诸路神明，
			在春节期间，都备享人间香火。人们借此酬谢诸神过去的关照，并祈愿在新的一年中能得到更多的福佑。</p>
	</body>
</html>