圖片與文本基礎（html和css）

時間 2019-11-19

標籤圖片文本基礎 html css 欄目 HTML 简体版

原文原文鏈接

圖片與文本基礎css

-----註釋添加能夠用/**/html

5.1圖片瀏覽器

1.gif圖片：最大顏色數256，保存時採用無損壓縮網絡

2.JPEG圖片:能夠包含1670萬種顏色，保存時採用有損壓縮，壓縮率小的質量更高。爲了不圖片因壓縮率太高而致使的像素化，通常使用PS或Adobe Fireworks優化。GIMP（http://www.gimp.org）是一款流行的，支持多平臺的開源圖像編輯器。Pixlr也提供了圖片編輯器編輯器

另外一個優化的辦法就是使用圖片的縮小版本，成爲縮略圖，通常將縮略圖配置成圖片連接，點擊可顯示更大尺寸的圖片工具

3.PNG圖片：「可移植網絡圖形」，結合了上面二者的優點，且支持無損壓縮。字體

4.WebP圖片格式優化

5.2 IMG元素網站

Img元素在網頁上配置圖片。Img元素是void元素，不成對使用（不須要成對使用起始和結束標記）。url

例子：配置名爲logo.gif的圖片

Str屬性指定圖片的文件名。Alt屬性爲圖片提供文字代替

5.3圖片連接

將圖片做爲超連接

縮略圖連接是將小圖配置成連接，點擊它就能夠顯示由href屬性指定的大圖

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,

url(trilliumgradient.png);

}

5.7用CSS配置字體

Font-family屬性,用來配置字體

P { font-family :Verdana, Arial ,sans-serif}

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收藏圖標

地址欄或網頁標籤上的小圖標就是收藏圖標，大小爲16x16或者32x32像素

導入.css時rel=」stylesheet」且要丟在<head>裏面

如何建立本身的收藏圖標？使用圖像處理軟件或者如下某個聯機工具

5.12圖像映射

爲圖片配置多個可點擊或可選擇區域，它們連接到其餘網頁或網站。

</map>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。