图片与文本基础
—–注释添加可以用/**/
5.1图片
1.gif图片：最大颜色数256，保存时采用无损压缩
2.jpeg图片:可以包含1670万种颜色，保存时采用有损压缩，压缩率小的质量更高。为了避免图片因压缩率过高而导致的像素化，一般使用ps或adobe fireworks优化。gifox的复数mp（http://www.gimp.org）是一款流行的，支持多平台的开源图像编辑器。pixlr也提供了图片编辑器
另一个优化的办法就是使用图片的缩小版本，成为缩略图，一般将缩略图配置成图片链接，点击可显示更大尺寸的图片
3.png图片：“可移植网络图形”，结合了上面两者的优势，且支持无损压缩。
4.webp图片格式
5.2 img元素
img元素在网页上配置图片。img元素是void元素，不成对使用（不需要成对使用起始和结束标记）。
例子：配置名为logo.gif的图片
<img src =”logo.gif” height=”200” width=”500” alt=”my company name”>
周记300字初一 str属性指定图片的文件名。alt属性为图片提供文字代替
5.3图片链接
将图片作为超链接
<a href=”index.html”><img src =”logo.gif” height=”200” width=”500” alt=”my company name”&苏梅岛旅游攻略gt;</a>
缩略图链接是将小图配置成链接，点击它就可以显示由href属性指定的大图
<a href=”sunt.jpg”><img src =”logo.gif” height=”200” width=”500” alt=”my company name”></a>
5.4配置背景图片：
1.background-image属性
例子：body{background-image: url(texture1.png)}
注：url表示引用，如果要引用其他文件夹中的该图片，即url(某文件夹名/texture1.png)
2.background-attachment属性
使用background-attachment属性配置背景图片是在网页中滚动的还是将其固定。对应的值分别是scroll（默认）,fixed
5.5定位背景图片：
浏览器的默认行为是重复（平铺）背景图片，使之充满容器元素的整个背景
1.background-repeat属性.
属性值包括repeat(默认),repeat-y(垂直重复),repeat-x(水平重复),no-repeat(不重复)
2.定位背景图片:
可用background-position属性指定背景图片的位置（默认左上角）.
有效属性包括:百分比值，像素值，或者left , top, center, bottom(底部)和right
例子 两种配置方法
h2{background-image : url(trilliumbg.gif);background-position : right;
background-repeat : no-repeat; }
2. body { background-color:#f4ffe4;
color:#333333;
background-image: url(trilliumgradient.png);
background: url(trilliumfoot.gif) no-repeat right bottom,
ur行政职业能力测验试题l(trilliumgradient.png);
}
5.7用css配置字体
font-family属性,用来配置字体
p { font-family :verdana, arial ,sans-rif}
5.8 css文本属性
关于网页文本css提供了大量的选项,常用的有:
font-size, font-weight, font-style(倾斜显示), line-height, text-align(左右对齐), text-decoration , text-indent, text-transform, letter-spacing(间距)
5.10用css配置列表符号
5.11收藏图标
地址栏或网页标签上的小图标就是收藏图标，大小为16×16或者32×32像素
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
导入.css时rel=”stylesheet” 且要丢在<head>里面
如何创建自己的收藏图标？使用图像处理软件或者以下某个联机工具
http://favicon.cc5.12见贤思齐焉见不贤而内自省也图像映射
为图片配置多个可点击或可选择区域，它们链接到其他网页或网站。
<map id=”fishing” name=”fishing”>
<area href=”http://nature.org” shape=”rect” coords=”0,51,416,170″ alt=”the nature conrvancy” title=”the nature conrvancy”>
<area href=”http://www.fishingdoorcounty.com” shape=”rect” coords=”24,188,339,283″ alt=”door county fishing charter” title=”door county fishing charter”>
</map>
<img src=”fishingboat.jpg” umap=”#fishing” alt=”door county” height=”350″ width=”416″>
本文发布于:2023-04-03 14:23:20，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/1491790088c8088ab6e07f5956bd9de0.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：图片与文本基础（html和css）.doc
本文 PDF 下载地址：图片与文本基础（html和css）.pdf
| 留言与评论（共有 0 条评论） |
