图片样式的使用-CSS入门基础（016）

最新推荐文章于 2024-09-14 15:29:41 发布

虾米大王

最新推荐文章于 2024-09-14 15:29:41 发布

阅读量649

点赞数

本文链接：https://blog.csdn.net/modern358/article/details/111397729

版权

CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

今天我们分享关于图片样式的内容。

在css中，对于图片的大小，我们使用width和height两个属性来定义。

语法：

width:像素值；height:像素值；

示例代码：

<html>  <head>    <title>图片大小</title>    <style type="text/css">      img { width:100px;height:80px;}    </style>  </head>  <body>    <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>  <head>    <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	右对齐

示例代码：

<html>  <head>    <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>