CSS中级教程21~25

21、CSS 表单
CSS 属性选择器
CSS 计数器
通过使用 CSS，可以极大地改善 HTML 表单的外观：

First Name
Your name…
Last Name
Your last name…
Country
Australia
亲自试一试
设置输入字段的样式
使用 width 属性来确定输入字段的宽度：

First Name
实例

input {
  width: 100%;
}

亲自试一试
上例适用于所有 元素。如果只想设置特定输入类型的样式，则可以使用属性选择器：

input[type=text] - 将仅选择文本字段
input[type=password] - 将仅选择密码字段
input[type=number] - 将仅选择数字字段
等等…
填充输入框
使用 padding 属性在文本字段内添加空间。

提示：若有很多输入，那么您可能还需要添加外边距，以便在它们之外添加更多空间：

First Name
Last Name
实例

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

亲自试一试
请注意，我们已将 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距（填充）和最终的边框。

请在在我们的 CSS Box Sizing 这一章中学习有关 box-sizing 属性的更多知识。

带边框的输入框
请使用 border 属性更改边框的粗细和颜色，并使用 border-radius 属性添加圆角：

First Name
实例

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

亲自试一试
如果仅需要下边框，请使用 border-bottom 属性：

First Name
实例

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

亲自试一试
彩色的输入框
请使用 background-color 属性为输入添加背景色，并使用 color 属性更改文本颜色：

Bill
实例

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

亲自试一试
获得焦点的输入框
默认情况下，某些浏览器在获得焦点（单击）时会在输入框周围添加蓝色轮廓。您可以通过向输入添加 outline: none; 来消除此行为。

使用 :focus 选择器可以在输入字段获得焦点时为其设置样式：

实例 1

input[type=text]:focus {
  background-color: lightblue;
}

请在文本框中点击：

亲自试一试
实例 2

input[type=text]:focus {
  border: 3px solid #555;
}

请在文本框中点击：

亲自试一试
带有图标/图像的输入框
如果希望在输入框中包含图标，请使用 background-image 属性，并将其与 background-position 属性一起设置。还要注意，我们添加了一个较大的左内边距（padding-left）来留出图标的空间：

Search…
实例

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

亲自试一试
带动画效果的搜索输入框
在本例中，我们使用 CSS transition 属性为搜索输入框获得焦点时的宽度变化设置动画。稍后，您将在我们的 CSS 过渡 一章中学到更多有关 transition 属性的知识。

Search…
实例

input[type=text] {
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

亲自试一试
设置文本域的样式
提示：使用 resize 属性可防止对 textareas 调整大小（禁用右下角的“抓取器”）：

Some text…
凄凄切切群群群群群
实例

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

亲自试一试
设置选择菜单的样式

Australia
实例

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

亲自试一试
设置输入按钮的样式

实例

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

/* 提示：请使用  width: 100%，以实现全宽按钮 */

22、CSS 计数器
CSS 计数器是由 CSS 保持的“变量”，其值可以通过 CSS 规则递增（以跟踪其使用次数）。

计数器使您可以根据内容在文档中的位置来调整其外观。

带计数器的自动编号
CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。

如需使用 CSS 计数器，我们将使用以下属性：

counter-reset - 创建或重置计数器
counter-increment - 递增计数器值
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素
如需使用 CSS 计数器，必须首先使用 counter-reset 创建它。

下面的例子为页面（在 body 选择器中）创建一个计数器，然后为每个

元素增加计数器值，并在每个

元素的开头添加 “Section :”：

实例

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

亲自试一试
嵌套计数器
下面的例子为页面（section）创建一个计数器，为每个

元素（subsection）创建一个计数器。

“section” 计数器为每个

元素计数，同时写入 “Section” 以及 section 计数器的值，“subsection” 计数器为每个

元素计数，同时写入 section 计数器的值以及 subsection 计数器的值：

实例

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

亲自试一试
计数器对于创建概述列表也很有用，因为在子元素中会自动创建一个计数器的新实例。在这里，我们使用 counters() 函数在不同级别的嵌套计数器之间插入一个字符串：

实例

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

23、CSS 网站布局
网站布局
网站通常分为页眉、菜单、内容和页脚：
有很多不同的布局设计可供选择。但是，以上结构是最常见的结构之一，我们将在本教程中对其进行仔细研究。

页眉
页眉（header）通常位于网站顶部（或顶部导航菜单的正下方）。它通常包含徽标（logo）或网站名称：

实例

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

结果：

页眉
亲自试一试
导航栏
导航栏包含链接列表，以帮助访问者浏览您的网站：

实例

/* navbar 容器 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar 链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 链接 - 悬停时改变颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

结果：

LinkLinkLinkLink亲自试一试
内容
使用哪种布局通常取决于您的目标用户。最常见的布局是以下布局之一（或将它们组合在一起）：

1-列布局（通常用于移动浏览器）
2-列布局（通常用于平板电脑和笔记本电脑）
3-列布局 （仅用于台式机）
1-列：

2-列：

3-列：

我们将创建 3 列布局，并在较小的屏幕上将其更改为 1 列布局：

实例
/* 创建三个相等的列，它们彼此相邻浮动 */

.column {
  float: left;
  width: 33.33%;
}

/* 在列后清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 响应式布局 - 使三列堆叠，而不是在较小的屏幕（宽度为 600 像素或更小）上并排 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

结果：

完整的网站技术参考手册
我们的参考手册涵盖了网站技术的方方面面。

其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。

在线实例测试工具
在 W3School，我们提供上千个实例。

通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。

快捷易懂的学习方式
一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。

在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。

亲自试一试
提示：如需创建 2 列布局，请将宽度更改为 50％。如需创建 4 列布局，请使用 25％。

提示：您是否想知道 @media 规则如何工作？请在我们的 CSS 媒体查询 这一章中学习更多相关知识。

提示：创建列布局的一种更现代的方法是使用 CSS Flexbox。但是，Internet Explorer 10 和更早版本不支持它。如果需要 IE6-10 支持，请使用浮动（如上所示）。

如需了解有关 Flexible Box 布局模块的更多信息，请阅读我们的 CSS Flexbox 教程。

不相等的栏
主要内容（main content）是您网站上最大、最重要的部分。

列宽不相等的情况很常见，因为大部分空间都为主内容保留。附属内容（如果有）通常用作替代导航或指定与主要内容有关的信息。您可以随意更改宽度，只要记住它的总和应为 100％：

实例

.column {
  float: left;
}

/* 左和右列 */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* 响应式布局 - 使三列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

结果：

完整的网站技术参考手册
我们的参考手册涵盖了网站技术的方方面面。

其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。

在线实例测试工具
在 W3School，我们提供上千个实例。

通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。

快捷易懂的学习方式
一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。

在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。

亲自试一试
页脚
页脚位于页面底部。它通常包含诸如版权和联系方式之类的信息：

实例

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

24、CSS 单位
CSS 有几种表示长度的不同单位。

许多 CSS 属性接受“长度”值，诸如 width、margin、padding、font-size 等。

长度是一个后面跟着长度单位的数字，诸如 10px、2em 等。

实例
使用 px（像素）设置不同的长度值：

h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}

亲自试一试
数字和单位之间不能出现空格。但是，如果值为 0，则可以省略单位。

对于某些 CSS 属性，允许使用负的长度。

长度单位有两种类型：绝对单位和相对单位。

绝对长度
绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。

不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。但是，如果已知输出介质，则可以使用它们，例如用于打印布局（print layout）。

单位 描述 TIY
cm 厘米 试一试
mm 毫米 试一试
in 英寸 (1in = 96px = 2.54cm) 试一试
px * 像素 (1px = 1/96th of 1in) 试一试
pt 点 (1pt = 1/72 of 1in) 试一试
pc 派卡 (1pc = 12 pt) 试一试

• 像素（px）是相对于观看设备的。对于低 dpi 的设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 表示多个设备像素。

提示：em 和 rem 单元可用于创建完美的可扩展布局！

• 视口（Viewport）= 浏览器窗口的尺寸。如果视口为 50 厘米宽，则 1vw = 0.5 厘米。
  

25、CSS 特异性
什么是特异性？
如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。

将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。

通用选择器（*）具有较低的特异性，而 ID 选择器具有较高的特异性！

注意：这种特异性是 CSS 规则不适用于某些元素的常见原因，尽管您可能会认为应该适用。

特异性层次
每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别：

行内样式 - 行内（内联）样式直接附加到要设置样式的元素。实例：

。

ID - ID 是页面元素的唯一标识符，例如 #navbar。

类、属性和伪类 - 此类别包括 .classes、[attributes] 和伪类，例如：:hover、:focus 等。

元素和伪元素 - 此类别包括元素名称和伪元素，比如 h1、div、:before 和 :after。

如何计算特异性？
请您牢记计算特异性的方法！

从 0 开始，为 style 属性添加 1000，为每个 ID 添加 100，为每个属性、类或伪类添加 10，为每个元素名称或伪元素添加 1。

请思考以下三个代码片段：

实例

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>

A 的特异性为 1（一个元素）
B 的特异性为 101（一个 ID 引用以及一个元素）
C 的特异性为 1000（行内样式）
由于 1 < 101 < 1000，因此第三条规则（C）具有更高的特异性，所以将被应用。

特异性规则 1：
在特异性相同的情况下：最新的规则很重要 - 如果将同一规则两次写入外部样式表，那么样式表中后面的规将更靠近要设置样式的元素，因此会被应用：

实例
h1 {background-color: yellow;}
h1 {background-color: red;}
亲自试一试
后一条规则始终适用。

特异性规则 2：
ID 选择器比属性选择器拥有更高的特异性 - 请看以下三行代码：

实例

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

亲自试一试
第一条规则比其他两条更具体，因此将被应用。

特异性规则 3：
上下文选择器比单一元素选择器更具体 - 嵌入式样式表更靠近要设置样式的元素。所以在以下情况下：

实例
来自外部 CSS 文件：

#content h1 {background-color: red;}

在 HTML 文件中：

<style>
#content h1 {
  background-color: yellow;
}
</style>

将适用后一条规则。

特异性规则 4：
类选择器会击败任意数量的元素选择器 - 类选择器（诸如 .intro 会击败 h1、p、div 等）：

实例

.intro {background-color: yellow;}
h1 {background-color: red;}

亲自试一试
此外，通用选择器以及被继承的值拥有 0 - * 的特异性，body * 及类似拥有 0 的特异性。被继承的值的特异性也为 0。