---恢复内容开始---
1.1 在CSS中控制图像的大小
我们可以在CSS中利用width属性和height属性控制一个图形的大小,就像控制任何一个盒子的大小一样.
例如:
1 <!DOCTYPE html> 2 <!-- 3 To change this license header, choose License Headers in Project Properties. 4 To change this template file, choose Tools | Templates 5 and open the template in the editor. 6 --> 7 <html> 8 <head> 9 <title>在CSS中控制图像的大小</title> 10 <meta charset="UTF-8"> 11 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 12 <style type="text/css"> 13 img.large{ 14 width:500px; 15 height:500px; 16 } 17 img.medium{ 18 width:250px; 19 height:250px; 20 } 21 img.small{ 22 width:100px; 23 height:100px; 24 } 25 </style> 26 </head> 27 <body> 28 <img src="images/magnolia-large.jpg" class="large" alt="Magnolia" /> 29 <img src="images/magnolia-medium.jpg" class="medium" alt="Magnolia" /> 30 <img src="images/magnolia-small.jpg" class="small" alt="Magnolia" /> 31 </body> 32 </html>
1.2 使用CSS将图像对齐
我们可以使用float属性来对齐图像.
示例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Aligning Images</title> 5 <style type="text/css"> 6 body { 7 font-family: Georgia, "Times New Roman", serif; 8 color: #665544;} 9 img.align-left { 10 float: left; 11 margin-right: 10px;} 12 img.align-right { 13 float: right; 14 margin-left: 10px;} 15 img.medium { 16 width: 250px; 17 height: 250px;} 18 </style> 19 </head> 20 <body> 21 <p><img src="images/magnolia-medium.jpg" alt="Magnolia" class="align-left medium" /><b><i>Magnolia</i></b> is a large genus that contains over 200 flowering plant species. It is named after French botanist Pierre Magnol and, having evolved before bees appeared, the flowers were developed to encourage pollination by beetle.</p> 22 <p><img src="images/magnolia-medium.jpg" alt="Magnolia" class="align-right medium" />Some magnolias, such as <i>Magnolia stellata</i> and <i>Magnolia soulangeana</i>, flower quite early in the spring before the leaves open. Others flower in late spring or early summer, such as <i>Magnolia grandiflora</i>.</p> 23 </body> 24 </html>
1.3 使用CSS将图像居中
默认情况下,图像属于内联元素,这意味着它们与周围的文本一起流动.为使图像居中,我们应该将其转换块级元素,通过将display的属性设置为block就可以完成转换.
图像被转换成块级元素后,可采用以下两种方法将其水平居中:
(1).对于图像的包含元素,可将其text-align属性的值设置为center.
(2)对于图像本身而言,可使用margin属性并将其左.右外边距的值设置为auto.
示例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Centering Images</title> 5 <style type="text/css"> 6 body { 7 font-family: Georgia, "Times New Roman", serif; 8 color: #665544;} 9 img.align-center { 10 display: block; 11 margin: 0px auto;} 12 img.medium { 13 width: 250px; 14 height: 250px;} 15 </style> 16 </head> 17 <body> 18 <p><img src="images/magnolia-medium.jpg" alt="Magnolia" class="align-center medium" /><b><i>Magnolia</i></b> is a large genus that contains over 200 flowering plant species. It is named after French botanist Pierre Magnol and, having evolved before bees appeared, the flowers were developed to encourage pollination by beetle.</p> 19 </body> 20 </html>
1.4 背景图像
使用background-image属性来表示图片的背景图像.指向图像路径跟在url字母之后,并位于圆括号和引号之中.
示例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Aligning Images</title> 5 <style type="text/css"> 6 body { 7 font-family: Georgia, "Times New Roman", serif; 8 color: #665544;} 9 img.align-left { 10 float: left; 11 margin-right: 10px;} 12 img.align-right { 13 float: right; 14 margin-left: 10px;} 15 img.medium { 16 width: 250px; 17 height: 250px;} 18 </style> 19 </head> 20 <body> 21 <p><img src="images/magnolia-medium.jpg" alt="Magnolia" class="align-left medium" /><b><i>Magnolia</i></b> is a large genus that contains over 200 flowering plant species. It is named after French botanist Pierre Magnol and, having evolved before bees appeared, the flowers were developed to encourage pollination by beetle.</p> 22 <p><img src="images/magnolia-medium.jpg" alt="Magnolia" class="align-right medium" />Some magnolias, such as <i>Magnolia stellata</i> and <i>Magnolia soulangeana</i>, flower quite early in the spring before the leaves open. Others flower in late spring or early summer, such as <i>Magnolia grandiflora</i>.</p> 23 </body> 24 </html>
1.5 重复图像
background-repeat用来指定图片在背景上的重复方式,它可以选用以下四个值
repeat:背景图像在水平方向上和垂直方向上都进行重复(默认显示方式)
repeat-x:背景图像只在水平方向上进行重复.
repeat-y:背景图像仅在垂直方向上进行重复.
no-repeat:背景图像只显示一次.
background-attachment:该属性用来指定图像的背景滚动模式,通俗的说就是指定背景图像在用户滚动页面时的移动方式.是固定不变,还是随页面滚动.它有以下两个值可供选择.
fixed:背景图像固定在页面中的一个位置.
scroll:背景图像随用户上下滚动页面而上下移动.
1.6 背景图像定位
我们可以使用background-position属性来指定背景图像在浏览器窗口中的位置.
该属性通常会有一对值,第一个值表示水平位置,第二个代表垂直位置.
它的属性值有以下值:
left top , left center, left bottom
center top ,center center, center bottom
right top,right center.right bottom
如果只指定了一个值,那么第二个值默认为center.
示例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Background Position</title> 5 <style type="text/css"> 6 body { 7 background-image: url("images/tulip.gif"); 8 background-repeat: no-repeat; 9 background-position: center top; 10 color: #665544; 11 padding: 20px;} 12 </style> 13 </head> 14 <body> 15 <h1>Planting Guide</h1> 16 <h2>Magnolia</h2> 17 <p><b><i>Magnolia grandiflora</i></b>, commonly known as the <b>Southern magnolia</b> or <b>bull bay</b>, is a tree of the family Magnoliaceae native to the southeastern United States, from coastal Virginia south to central Florida, and west to eastern Texas and Oklahoma. Reaching 27.5 m (90 ft) in height, it is a large striking evergreen tree with large dark green leaves and large white fragrant flowers. Widely cultivated around the world, over a hundred cultivars have been bred and marketed commercially. The timber is hard and heavy, and has been used commercially to make furniture, pallets, and veneer.</p> 18 <h2>Ranunculus</h2> 19 <p><b><i>Ranunculus asiaticus (Persian Buttercup)</i></b> is a species of buttercup (Ranunculus) native to the eastern Mediterranean region in southwestern Asia, southeastern Europe (Crete, Karpathos and Rhodes), and northeastern Africa. It is a herbaceous perennial plant growing to 45 cm tall, with simple or branched stems. The basal leaves are three-lobed, with leaves higher on the stems more deeply divided; like the stems, they are downy or hairy. The flowers are 3-5 cm diameter, variably red to pink, yellow, or white, with one to several flowers on each stem.</p> 20 <h2>Tulip</h2> 21 <p><b><i>Tulipa gesneriana L. or "Didier's tulip"</i></b> is a plant belonging to the family of Liliaceae. This species has uncertain origins, possibly from Asia, and has become naturalised in south-west Europe. Most of the cultivated species, subspecies and cultivars of tulip are derived from Tulipa gesneriana. The flower and bulb can cause dermatitis through the allergen, tuliposide A, even though the bulbs may be consumed with little ill-effect. The sweet-scented bisexual flowers appear during April and May. Bulbs are extremely resistant to frost, and can tolerate temperatures well below freezing - a period of low temperature is necessary to induce proper growth and flowering, triggered by an increase in sensitivity to the phytohormone auxin. The bulbs may be dried and pulverised and added to cereals or flour.</p> 22 </body> 23 </html>
1.7 简写
简写使用background属性来写其他属性的值,按照background-color,background-image,background-repeat,background-attachment,background-position的顺序来写,但如果不想
指定某个属性,可将其省略.
示例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Background Shorthand</title> 5 <style type="text/css"> 6 body { 7 background: #ffffff url("images/tulip.gif") no-repeat top right; 8 color: #665544; 9 padding: 20px;} 10 </style> 11 </head> 12 <body> 13 <h1>Planting Guide</h1> 14 <h2>Magnolia</h2> 15 <p><b><i>Magnolia grandiflora</i></b>, commonly known as the <b>Southern magnolia</b> or <b>bull bay</b>, is a tree of the family Magnoliaceae native to the southeastern United States, from coastal Virginia south to central Florida, and west to eastern Texas and Oklahoma. Reaching 27.5 m (90 ft) in height, it is a large striking evergreen tree with large dark green leaves and large white fragrant flowers. Widely cultivated around the world, over a hundred cultivars have been bred and marketed commercially. The timber is hard and heavy, and has been used commercially to make furniture, pallets, and veneer.</p> 16 <h2>Ranunculus</h2> 17 <p><b><i>Ranunculus asiaticus (Persian Buttercup)</i></b> is a species of buttercup (Ranunculus) native to the eastern Mediterranean region in southwestern Asia, southeastern Europe (Crete, Karpathos and Rhodes), and northeastern Africa. It is a herbaceous perennial plant growing to 45 cm tall, with simple or branched stems. The basal leaves are three-lobed, with leaves higher on the stems more deeply divided; like the stems, they are downy or hairy. The flowers are 3-5 cm diameter, variably red to pink, yellow, or white, with one to several flowers on each stem.</p> 18 <h2>Tulip</h2> 19 <p><b><i>Tulipa gesneriana L. or "Didier's tulip"</i></b> is a plant belonging to the family of Liliaceae. This species has uncertain origins, possibly from Asia, and has become naturalised in south-west Europe. Most of the cultivated species, subspecies and cultivars of tulip are derived from Tulipa gesneriana. The flower and bulb can cause dermatitis through the allergen, tuliposide A, even though the bulbs may be consumed with little ill-effect. The sweet-scented bisexual flowers appear during April and May. Bulbs are extremely resistant to frost, and can tolerate temperatures well below freezing - a period of low temperature is necessary to induce proper growth and flowering, triggered by an increase in sensitivity to the phytohormone auxin. The bulbs may be dried and pulverised and added to cereals or flour.</p> 20 </body> 21 </html>
完