第五章:图形文本样式的CSS基础

最新推荐文章于 2024-03-20 15:16:51 发布

温暖会追上来的.

最新推荐文章于 2024-03-20 15:16:51 发布

阅读量527

点赞数 1

分类专栏：前端HTML+CSS+JS基础

本文链接：https://blog.csdn.net/Strawberry_595/article/details/83041519

版权

前端HTML+CSS+JS基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

3.配置图片作为网页背景:background-image属性

background-attachment属性

font-weight属性:设置文本的浓淡 (粗细)

font-style属性:一般用于用于倾斜文本

line-height属性:修改文本行的空白间距(行高)

9.用CSS对齐和缩进文本；

text-align属性:配置文本和内联元素在块元素中的对齐方式

text-decoration属性:修改文本的显示

text-indent属性:配置元素中第一行文本符缩进

text-transform属性:配置文本的大小写

letter-spacing属性:配置字间距

font-family属性:配置字体家族或者说“字型”

1.了解Web使用的图片类型;

GIF：

GIF(可转化图形文件格式），最适合存储纯色和简单集合图形（比如美工图案）；
GIF图片最大颜色数256色， .gif为扩展名；
GIF保存时采用无损压缩；
GIF使用GIF89A格式支持透明功能。在图形处理软件中（比如开源软件GIMP），可将图片的一种颜色（通常时背景颜色)设置为”透明“；
动图GIF包含多张图片（或者称为帧）这些帧再屏幕上按顺序显示的时候，图片的内容就会动起来；

JPEG：

JPEG(联合照片专家组),最适合储存照片;
JPEG图片包含1670万中图片, .jpg和.jpeg为扩展名;
JPEG以有损压缩方式保存;
JPEG图片不能设置透明;

PNG:

PNG(可移植网络图形),它结合了GIF和JPEG图片的优势,是GIF格式很好的替代品;
PNG图片支持百万种颜色和多个透明级别;
PNG使用无损压缩;

新的WebP图片格式:

Google新的WebP图像格式提供了增强的压缩比和更小发文件尺寸,但目前还没有准备好在商业网站使用,目前jinyouGoogle Chrome浏览器支持.

为了避免网页下载速度过慢，文件应针对Web进行优化。图片优化是指用最小的文件保证图片的高质量显示，也就是说，要在图片质量和文件大小之间做出衡量。

图片质量岁文件的大小简小二下降,质量越小的图片月容易出现"小方块",称为像素化.

另一种优化图片的方法是使用图片的缩小版本,称为缩略图,一般讲缩略图配置成图片链接,电机壳显示更大尺寸的图片;

2.用img元素在网页中添加图片;

img元素在网页上配置图片. img袁术是void元素,不成对使用;

下列是配置logo.gif的图片,它在和网页相同的目录中:
<img src="logo.gif" height="200" width="500" alt="LOGO">
src属性是指定图片文件;alt属性为图片提供文字替代,通常是图片的一段文字描述,是一种无障碍访问素质;height和width属性是指定图片的高还有宽;

3.配置图片作为网页背景:background-image属性

eg:以下CSS代码为HTML的body选择符配置背景图片,该图片不和网页在一个文件夹:
		<style>
			body{
				background-image:url(img/风景 - 21.jpg);
			}
		</style>
同时设置背景颜色和背景图片,首先设置背景颜色再设置背景图片(先显示背景颜色再加载背景图片).同时设置背景图片再设置背景图片能为访问者提供更加愉悦的视觉体验.即使由于某种原因背景图片无法加载,网页背景仍能提供和文本颜色的良好对比度.

background-attachment属性

使用background-attachment属性配置背景图片是在网页中滚动,还是将其固定. 对应的值分别是scroll(默认)和fixed;

定位背景图片:

使用background-position属性指定背景图片的位置（默认左上角）。有效属性值包括百分比值：像素或者left、top、center、bottom、和right。第一个值指定水平位置，第二个指定垂直位置。如果只提供一个值，第二个默认为center。

background-repeat属性

浏览器的默认行为是重复(平铺)背景图片，使之充满容器元素的整个背景。

属性值为包括repeat（默认）、repeat-y（垂直重复）、repeat-x（水平重复）和no-repeat（不重复）。例如：background-repeat：no-repeat；配置背景图片只显示一次。

CSS3还支持下面两个backgroud-repeat属性值但是目前浏览器支持不好：

background-repeat：space:space; 在背景重复显示图片，用过调整图片四周空白防止被裁掉图片；
background-repeat：round；在背景重复图片，通过缩放防止局部裁掉局部图片；

4.配置图片作为超链接;

eg:将home.gif链接到home.html上:
<a href="home.html"><img src="home.gif" height="19" width="85" alt="Home"></a>
eg:缩略图是将一张小图片配置成链接,点击它显示href指定的大图:
<a href="xxx.jpg"><img src="XXX.jpg" heigth="100" width="100"></a>

5.配置图像映射;

图像映射(image map)是指为图标配置多个可点击或可选择区域,他们链接到图塔网页或者网站.这些可点击的区域称为"热点"(hotspot),支持三种形状:矩形、圆形、和多边形。配置图像映射要用到img、map以及一个或者多个area元素。

map元素：

map元素是容器标记，指定图像映射的开始与结束。在<map>表中,用name属性设置图片名称.id属性点值必须和name属性值相同.而且<img>标记配置图片时,要用usemap属性将图片和map元素关联.

area元素:

area元素定义可点击区域的坐标或者边界,这是一个void标记,可以只用href,alt, title.shape. 和coords属性.

href属性指定点击某个区域后显示的网页; alt属性为屏幕朗读程序提供文本说明; title属性指定鼠标停在区域上方是显示的提示信息; cooeds属性指定可点击区域的坐标.

eg:
<map name="boat" id="boat">
<arae href="http://www.google.com"
    shape="rect" coords="24, 188, 399, 283"
    alt="图像映射"
    title="图像映射">
</map>
<img src="boat.jpg"  usemap="#boat"
    alt="小船"  width="500"  heighr="300">

6.配置图片作为列表符号;

收藏图标

虽然Internet Explorer 比较旧的版本要求必须将文件命名weifavicon.ico, 而且必须存储在网页根目录,但一个更现代的办法是使用link元素将favicon.ico文件与网页关联. 为此要使用三个属性:rel , href和type.

rel属性的值是icon; href属性的值是图标文件名; type属性值是文件的MIME类型.

.ico图标文件的MIME类型默认的是image/x-icon. 以下代码将收藏图标favicon.ico和网页关联:
<link rel="icon" href="favicon.ico" type="image/x-icon">
注意:Internet Explorer即使是最新版本对收藏图标的似乎有点问题.可能需要将文件发布到Web,才能正常显示收藏图标.其他浏览器在显示收藏图标时则比较可靠,而且支持GIF和PNG图像格式.

7.用CSS3配置多个背景图片;

用CSS3向网页中添加多张背景图片，但是每个类中添加一张图片，不然会出现覆盖情况，然后调整位置和大小；第二个相同的类中同样只能添加一张图片，不然会出现覆盖情况，然后调整大小和位置；

渐进式增强 ：新版本Firefox 、Chrome、Safari和Opera都支持显示多张背景图片。Internet Exploer 9以及之后的版本也支持。这是一项需要“渐进式增强”的技术。Web开发和HTML5大师Christian Heilmann对此的定义时：“从基本功能开始，逐渐增强用户体验。”换言之，先确保大多数浏览器都能很好的显示，在添加多背景图片这样的新技术，使支持新技术的浏览器能增强访问者的体验。

8.用CSS配置字体、字号、浓淡和样式；

font-size属性:设置字号

font-weight属性:设置文本的浓淡 (粗细)

CSS font-weight:bold; 声明具有与HTML元素<strong><b>相似的效果.以下CSS配置nav中文本的加粗:
nav{font-weight:bold}
font-style属性:一般用于用于倾斜文本

有效值包括normal(默认),italic和oblique. CSS声明font-style:italic; 具有与HTML元素与HTML<i>或<em>相同的视觉效果.以下CSS配置footer中文本倾斜:
footer{ font-style:italic;}
line-height属性:修改文本行的空白间距(行高)

通常配置成百分比.以下CSS配置段落双倍行距:
p{line-height:200%;}

9.用CSS对齐和缩进文本；

text-align属性:配置文本和内联元素在块元素中的对齐方式

HTML元素默认对其方式(从左边开始).text-align有效值包括left(默认)、center、right、和justify。以下CSS配置h1元素文本居中对齐显示：
h1{text-align:center;}
text-decoration属性:修改文本的显示

通常值包括none、underline、overline和line-through。虽然超链接默认加下划线，但是可以用text-decoration属性一出。以下CSS移除超链接的下划线：
a{text-decoration:none;}
text-indent属性:配置元素中第一行文本符缩进

值可以是数值（带有px、pt或者em）也可以是百分比。以下CSS代码配置所有段落首行缩进2em：
p{text-indent:2em;}
text-transform属性:配置文本的大小写

有效值包括none（默认）、capitalize（首字母大写）、uppercase（大写）、和lowercase（小写）。以下CSS配置h3元素文本大写：
h3{text-transform:uppercase;}
letter-spacing属性:配置字间距

有效值包括normal（默认）和数值（pt或者em）。u一下CSS为h3元素中文本配置额为的字间距：
h3{letter-spacing:3px;}
font-family属性:配置字体家族或者说“字型”

一个font-family通常包含多种字体。浏览器使用计算机上已经安装的字体显示文本，如果某种字体在访问者的电脑上没有安装。就用默认字体替换。

font-family属性值列出多个字体和类别。浏览器会按顺序尝试使用字体。

eg:
p{ font-family: Verdana, Arial, sans-serif}
如果用户没有安装前两种字体系统就会使用已安装的默认sans-serif字体;

CSS3引进了@font-face在网页中嵌入字体,但要求提供字体位置以便于浏览器下载.例如.假如你有权西游分发名为MyAwesomeFont的字体,字体文件是myawesomefont.woff,存储在和网页相同的文件夹中,就可以用以下CSS在网页中嵌入字体:

@font-face{
	font-family: MyAwesomeFont;
	src:url(myawesomefont.woff)  format("woff");
}

编码好@font-face规则后,就可以和平常一样将字体应用于某个选择符.最新的浏览器都支持@font-face,但是注意版权问题.

Google Web Fonts也提供了一套可免费试用的字体.详情请访问http://www.google.com/webfonts. 选好以后:1,将google提供的link标记复制和粘贴到自己的网页文件中.(link标记将你的网页和包含适当@font-face规则的一个CSS文件关联).2 配置自己的CSS font-famliy属性,试用Google Web字体名称;

写完了,吃饭吃饭吃饭..........

温暖会追上来的.

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
第五章:图形文本样式的CSS基础

目录 1.了解Web使用的图片类型;GIF：JPEG：PNG:2.用img元素在网页中添加图片;3.配置图片作为网页背景:background-image属性background-attachment属性定位背景图片:background-repeat属性4.配置图片作为超链接;5.配置图像映射;map元素：area元素:6.配置...
复制链接

扫一扫