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。