圖片樣式的使用-基本介紹-CSS(016)

時間 2021-02-13

標籤 css html 瀏覽器微信 code htm 圖片 get 語法欄目 CSS 简体版

原文原文鏈接

在css中，對於圖片的大小，咱們使用width和height兩個屬性來定義。
語法：
width:像素值；
height:像素值；
示例代碼：
<html>
<head>css

<title>圖片大小</title>
<style type="text/css">
  img { width:100px;height:80px;}
</style>

</head>
<body>html

<img src="images/1.jpg" alt="">

</body>
</html>
圖片的實際大小與設置大小不是正相關的，也就是圖片在Photoshop中的寬度高度，在設定網頁寬度高度時，能夠參考，可是不用嚴格遵照，咱們設置圖片的寬度和高度，目標是爲了讓圖片在網頁中呈現出想要的效果。
圖片邊框border：
語法：
border-width:像素值；
border-style:屬性值；
border-color:顏色值；
這個邊框和元素邊框是同樣的，比較經常使用的是簡潔寫法。
示例代碼：
<html>
<head>瀏覽器

<title>圖片邊框</title>
<style type="text/css">
  img 
  {
    width:100px;
    height:80px;
    border-width:1px;
    border-style:solid;
    border-color:red;
  }
</style>

</head>
<body>微信

<img src="images/1.jpg" alt="">

</body>
</html>
若是咱們在圖片的邊框上加hover的效果，
<html>code

<head>htm

<title>加hover</title>
<style type="text/css">
  img
  {
    width:100px;
    height:80px;
    border:1px solid blue;
  }
  img:hover { border:1px solid green;}
</style>

</head>
<body>圖片

<img src="images/1.jpg" alt="">

</body>
</html>
圖片水平對齊：
在文本中須要水平對齊時，使用text-align屬性，在圖片的水平對齊，也能夠使用text-align，同樣的效果。
語法：
text-align:屬性值；
text-align屬性取值
屬性值說明
left左對齊，默認值
center居中對齊
right右對齊get

示例代碼：
<html>
<head>it

<title>圖片水平對齊</title>
<style type="text/css">
  div
  {
    width:600px;
    height:100px;
    border: 1px solid black;
    margin-bottom:20px;
  }
  img { width:80px;height:50px;}
  #d1 { text-align:right;}
  #d2 { text-align:center;}
  #d3 { text-align:left;}
</style>

</head>
<body>語法

<div id="d1"><img src="images/1.jpg" alt=""></div>
<div id="d2"><img src="images/1.jpg" alt=""></div>
<div id="d3"><img src="images/1.jpg" alt=""></div>

</body>
</html>
以上代碼就是圖片的水平對齊方式，不少初學者會有疑問，認爲定義圖片的水平對齊，確定是針對img標籤來設置的，其實呢，是須要對圖片所在的父元素進行水平對齊的。
圖片垂直對齊：
若是我想要圖片可以垂直對齊，應該怎麼作呢？在css中，咱們能夠使用vertical-align屬性來定義垂直對齊方式的。
語法：
vertical-align:屬性值；
vertical-align屬性取值
屬性值說明
top頂部對齊
middle中部對齊
baseline基線對齊
bottom底部對齊
示例代碼：
<html>
<head>

<title>垂直對齊方式</title>
<style type="text/css">
  #dv1
  {
    width:600px;
    height:600px;
    border:1px solid black;
    text-align:center;
  }
  img { width:80px;height:80px;}
  #img1 { vertical-align:top;}
  #img2 { vertical-align:middle;}
  #img3 { vertical-align:bottom;}
  #img4 { vertical-align:baseline;}
</style>

</head>
<body>

<div id="dv1">
  <img id="img1" src="images/1.jpg" alt="">方式：top
  <hr>
  <img id="img2" src="images/1.jpg" alt="">方式：middle
  <hr>
  <img id="img3" src="images/1.jpg" alt="">方式：bottom
  <hr>
  <img id="img4" src="images/1.jpg" alt="">方式：baseline
  <hr>
</div>

</body>
</html>
預覽瀏覽器效果後，你們有疑問了，不是說圖片對齊方式嗎？沒看到圖片垂直對齊改變啊。這個就是誤解了vertical-align屬性的含義了。
它負責定義的是行內元素相對於該元素的垂直對齊方式。也就是上面代碼中圖片與文字的對齊方式。這個你們本身理解一下，消化一下。

本文來源:碼農新勢力微信公衆號
文章編輯:標梵互動(https://www.biaofun.com/)