html css标记文本,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；}

链入式

链入式是将所有的样式放在一个或多个以.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-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/>。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。

作业

春节

春节

春节(新春，过年)，农历新年，传统上的“年节”，由上古时代岁首祭祀活动演变而来，是中华民族最隆重的传统佳节，中国四大传统节日之一。

春节节期一般是指农历正月初一至正月十五(元宵节)。其活动均以除旧布新、迎禧接福、祭神祭祖、祈求丰年为主要内容，带有浓郁的各民族特色。

它不仅集中体现了中华民族的思想信仰、理想愿望、生活娱乐和文化心理，而且也是祈福、饮食和娱乐活动的狂欢式展示。

春节是除旧布新的日子，春节虽定在农历正月初一，但春节的活动却并不止于正月初一这一天。从腊月二十三(或二十四日)小年节起，

人们便开始“忙年”：扫房屋、购置年节年货、贴春联、洗头沐浴等等，所有这些活动，有一个共同的主题，即“辞旧迎新”。

春节也是祭祝祈年的日子，古人谓谷子一熟为一“年”，五谷丰收为“大有年”。一年一度的庆祝丰收的活动，诸如灶神、门神、财神、喜神、井神等诸路神明，

在春节期间，都备享人间香火。人们借此酬谢诸神过去的关照，并祈愿在新的一年中能得到更多的福佑。