HTML+CSS

HTML的图像标记

1.常用格式

1.GIF格式
支持动画，无损的图像格式，在修图片前后图片质量没有亏损
2.PNG格式
体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡平滑，但是不支持动画。
3.JPG格式
所显示的色彩比较多， 网页制作过程中类似的照片的图像比如横幅广告，商品图片，较大的插图都可以使用这种，应用的比较多

2.图像标记

插入图片基本格式：

该语法中src属性用于指定图像文件的路径和文件名，他是img标记的必备属性。
其他属性：
属性 属性值 描述

src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素 （xhtml不支持%页面百分比 ） 设置图像的宽度
height 像素（xhtml不支持%页面百分比） 设置和图像的高度
border 数字 设置图像边框的宽度
vspace 像素 设置图像顶部和底部的空白（垂直边距）
hspace 像素 设置图像左侧和右侧的空白部分（水平边距）

                                                           left                                                                     将图像对齐到左边

                                                           right                                                               将图像对齐到右边
                                                         
align                                                       top                                                              将图像的顶端和文本的第一行文字对齐，其他文字居于图像的下方
                                                          
                                                           middle                                                         将图像的水平中线和文本的第一行文字对齐，其他文字位于图像的下方

                                                           bottom                                                          将图像的底部和文本的第一行文字对齐，其他文字位于图像的下方

相对路径和绝对路径

相对路径：盘中存的图片
也就是存在本地的照片需要的路径
绝对路径：
1.图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如.
2.图像文件位于html文件的下一级文件夹：输出文件夹名和文件名，之间用"/"隔开。如内容

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

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

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

< head>

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

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-s