图像、媒体和表单元素

在这节课里,我们来看一下,在CSS中,某些特殊元素是怎样处理的。图像、其他媒体和表格元素的表现和普通的盒子有些不同,这取决于你使用CSS格式化它们的能力。理解什么可能做到,什么不可能做到能够省些力气,本节课将会聚焦于一些你需要知道的主要的事情上。

学习前提: 基础的电脑技能、安装了必要的软件处理文件的基本知识、HTML基础(学习Introduction to HTML)和对CSS工作原理的大致理解(学习CSS first steps
目标: .理解元素在经由CSS样式化时,是如何不一样地展现的。

替换元素

图像和视频被描述为替换元素。 这意味着CSS不能影响这些元素的内部布局-仅影响它们在页面上于其他元素中的位置。 但是,正如我们将看到的,CSS可以对图像执行多种操作。

某些替换元素(例如图像和视频)也被描述为具有宽高比。 这意味着它在水平(x)和垂直(y)尺寸上均具有大小,并且默认情况下将使用文件的固有尺寸进行显示。

调整图像大小

正如你从之前的几节课中所学到的那样,CSS中万物皆盒。如果你把一张图片放在一个盒子里,它的原始长和宽都比盒子的小或大,它要么比盒子显得小,要么从盒子里面溢出出去。你需要决定怎么处理溢出。

在下面的示例中,我们有两个盒子,大小均为200像素:

  • 一个包含了一张小于200像素的图像,它比盒子小,所以不会拉伸以充满盒子。
  • 另一张图像大于200像素,从盒子里面溢出。

所以我们能怎么处理溢出问题呢?

正如我们在我们之前的课程里面所学的那样,一个常用的技术是将一张图片的max-width设为100%。这将会允许图片尺寸上小于但不大于盒子。这个技术也会对其他替换元素(例如<video>,或者<iframe>)起作用。

尝试向上面的示例中的<img>元素加入max-width: 100%,你会看到,小的图像不变,而大的变小了,能够放在盒子里。

你可以对容器内的图像作其他选择,例如,你可能想把一张图像调整到能够完全盖住一个盒子的大小。

object-fit属性可以在这里帮助你。当使用object-fit时,替换元素可以以多种方式被调整到合乎盒子的大小。

下面,我们已经使用了值cover,缩小了图像,维持了图像的比例,所以图像可以整齐地充满盒子,同时由于比例保持不变,图像的一部分将会被盒子裁切掉。

如果我们将contain作为值,图像将会缩放到足以放到盒子里面的大小。如果它和盒子的比例不同,这将会导致“开天窗”的结果。

你可能也想试试fill值,它可以让图像充满盒子,但是不会维持比例。

布局中的替换元素

在替换元素使用各式CSS布局技巧时,你可能深切地体会到他们的展现略微与其他元素不同,例如,在一个flex或者grid布局中,元素默认会把拉伸到充满整块区域。图像不会拉伸,而是会被对齐到网格区域或者弹性容器的起始处。

你可以看到这在下面的示例中发生了,下面的示例有个两列两行的网格容器,里面有四个物件。所有的<div>元素有自己的背景色,拉伸到了充满行和列的地步。但是,图像并没有被拉伸。

如果你是按顺序读这些课,那么你可能还没有看到布局的部分,只要记住替换元素在成为网格或者弹性布局的一部分时,有不同的默认行为,这很必要,避免了他们被布局奇怪地拉伸。

为了强制图像拉伸,以充满其所在的网格单元,你必须仿照下面做点事情:

img {
  width: 100%;
  height: 100%;
}

这将会无条件地拉伸图像,所以很可能不会是你想要的。

form元素

用CSS格式化表单元素是一个需要技巧的工作,HTML Forms module 包含了详细的格式化表单元素的指导,所以我在这里不会全部复述。在本文的这一节有一些关键的值得关注的基础。

许多表格的控制是通过<input>元素的方式实现的,这定义了简单的表格区域,例如文字输入,更进一步还有HTML5新加入的更加复杂的区域,例如颜色和日期撷取器。另外还有一些其他元素,例如用于多行文本输入的<textarea>,以及那些用来包含和标记表格的一些部分的元素,例如<fieldset><legend>

HTML5还涵盖了一些特性,它们允许Web开发者表示哪些区域是必填的,甚至还能标识待填入的内容类型。如果用户输入了一些未预料的内容,或者让必填区域空白,浏览器会显示一个错误信息。不同的浏览器在它们给这样的物件的样式化和自定义余地的问题上,并没有达成一致。

样式化文本输入元素

允许文本输入的元素,例如<input type="text">,特定的类型例如<input type="email">以及<textarea>元素,是相当容易样式化的,它们会试图表现得和在你的页面上其他盒子一样。不过这些元素默认的样式化方式会改变,取决于你的用户访问站点时所使用的操作系统和浏览器。

在下面的示例中,我们已经将一些文本输入用CSS样式化了,你可以看到例如边框、内外边距之类的东西都像你想要的那样生效了。我们正在使用特性选择器来指向不同的输入类型。尝试通过改变边框、向输入区域增加背景色、改变字体和内边距的方式来改变表单的外观。

重点:你应该在改变表单样式的时候小心,确保对于用户而言,它们仍然很容易被认出来是表单元素。你也许可以建立一个无边框的表单输入,其背景也与周围的内容难以区分开来,但是这会让表单很难识别和填入。

正如在本教程的HTML部分的form styling课里解释的那样,许多更加复杂的输入类型是由操作系统渲染的,无法进行样式化。因而你应该总是假设表单在不同的访客看来十分不同,并在许多浏览器上测试复杂的表单。

继承和表单元素

在一些浏览器中,表单元素默认不会继承字体样式,因此如果你想要确保你的表单填入区域使用body中或者一个父元素中定义的字体,你需要向你的CSS中加入这条规则。

button, 
input, 
select, 
textarea { 
  font-family : inherit; 
  font-size : 100%; 
} 

form元素与box-sizing

跨浏览器的form元素对于不同的挂件使用不同的盒子约束规则。你已经在我们的盒模型课中学习了box-sizing属性,在样式化表单时候,你可以使用这一知识,确保在给form元素设定宽度和高度时可以有统一的体验。

为了保证统一,将所有元素的内外边距均设为0是个好主意,然后在单独进行样式化控制的时候将这些加回来。

button, 
input, 
select, 
textarea {  
  box-sizing: border-box; 
  padding: 0;
  margin: 0; 
}

其他有用的设置

除了上面提到的规则以外,你也应该在<textarea>上设置overflow: auto 以避免IE在不需要滚动条的时候显示滚动条:

textarea {
  overflow: auto;
}

将一切都放在一起“重置”

作为最后一步,我们可以将上面讨论过的各式属性包起来,成为以下的“表单重置”,以提供一个统一的在其上继续进行工作的地基,这包含了前三节提到的所有东西:

button, 
input, 
select, 
textarea { 
  font-family: inherit; 
  font-size: 100%; 
  box-sizing: border-box; 
  padding: 0; margin: 0; 
} 

textarea { 
  overflow: auto; 
} 

备注:通用样式表被许多开发者用作所有项目的一系列基础样式,典型就是那些做了和以上提到相似的事情的那些,在你开始自己的CSS作业前,它确保了跨浏览器的任何事情都被默认设定为统一样式。它们不像以往那么重要了,因为浏览器显著地要比以往更加统一。但是,如果你想要看一个例子,可以看看这个Normalize.css,它被许多项目用作基础,是非常流行的样式表。

至于样式化表单的更加深入的信息,可以看下这些教程的HTML一节的这两篇文章:

测试你的技能

我们在本文中介绍了很多内容,但是您记住最重要的内容了么? 在继续之前,您可以通过一些其他测试来验证您是否真正学习到了这些知识,参见技能测试

小结

这节课致力于说明在你用CSS处理图像、媒体和其他不普通的元素时,你会遇到的不同之处。在下篇文章中,我们将会了解一些在你样式化HTMl表格时有用的技巧。

模块目录

  1. 层叠与继承
  2. CSS选择器
  3. 盒模型
  4. 背景与边框
  5. 处理不同文字方向的文本
  6. 溢出的内容
  7. 值和单位
  8. 在CSS中调整大小
  9. 图像、媒体和表单元素
  10. 样式化表格
  11. 调试CSS
  12. 组织CSS