关于css:图片样式的使用基本介绍CSS016

4次阅读

共计 2295 个字符，预计需要花费 6 分钟才能阅读完成。

在 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>
预览浏览器成果后，大家有疑难了，不是说图片对齐形式吗？没看到图片垂直对齐扭转啊。这个就是误会了 vertical-align 属性的含意了。
它负责定义的是行内元素绝对于该元素的垂直对齐形式。也就是下面代码中图片与文字的对齐形式。这个大家本人了解一下，消化一下。

本文起源: 码农新权势微信公众号
文章编辑: 标梵互动(https://www.biaofun.com/)

正文完