HTML·第六章元素应用CSS

标签：文本 color text HTML background 第六章 font border CSS

6.1 使用CSS设置字体样式

在CSS中设置字体样式是网页设计中非常基础且重要的部分，它可以帮助设计师控制网页上文本的外观。以下是一些常用的CSS属性，用于设置字体样式：
font-family：定义字体族，指定文本的字体。可以设置一个或多个字体，浏览器会使用列表中第一个可用的字体。
p {
  font-family: "Arial", sans-serif;
}
font-size：定义字体大小。可以使用像素(px)、em、rem、百分比(%)等单位。
h1 {
  font-size: 24px;
}
font-style：定义字体风格，通常用来设置斜体。
em {
  font-style: italic;
}
font-weight：定义字体粗细，可以是数字（100-900）或关键字（如normal, bold）。
strong {
  font-weight: bold;
}
font-variant：定义小型大写字母的字体显示，通常用来设置小型大写字母。
small-caps {
  font-variant: small-caps;
}
line-height：定义行高，可以影响行与行之间的距离。
p {
  line-height: 1.6;
}
text-transform：定义文本的大小写转换，如将所有字母转换为大写或小写。
h1 {
  text-transform: uppercase;
}
text-align：定义文本的对齐方式，可以是left、right、center或justify。
p {
  text-align: justify;
}
text-decoration：定义文本的装饰，如下划线、上划线等。
a {
  text-decoration: none;
}
font：是一个简写属性，可以同时设置font-style、font-variant、font-weight、font-size/font-size-adjust、line-height和font-family。
p {
  font: italic small-caps bold 24px/1.6 Arial, sans-serif;
}
使用这些属性，你可以控制网页上的字体样式，使其符合设计要求。记得在实际应用中，要考虑到不同浏览器和设备的兼容性。

我们通过一个简单的案例来展示如何使用CSS来设置字体样式。假设我们有一个简单的HTML文档，里面有一个标题和一个段落，我们想要为它们设置不同的字体样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Style Example</title>
<style>
  body {
    font-family: 'Helvetica', Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
  }
 
  /* 设置标题的字体样式 */
  h1 {
    font-size: 2em;
    font-weight: normal;
    font-style: italic;
    color: #0055A4;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 0.5em;
  }
 
  /* 设置段落的字体样式 */
  p {
    font-size: 1em;
    font-weight: 300;
    font-style: normal;
    color: #666;
    max-width: 600px;
    text-align: justify;
  }
</style>
</head>
<body>
  <div>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个示例段落，它展示了如何使用CSS来设置字体样式。在这个示例中，我们使用了Helvetica字体，这是一种无衬线字体，它给人一种现代和简洁的感觉。标题使用了斜体和大写转换，以吸引读者的注意。段落文本使用了细体，颜色为暗灰色，以确保在浅色背景上的可读性。此外，我们还设置了文本的两端对齐，使得段落的左右两边看起来更加整洁。</p>
  </div>
		<div align="center">Copyright &copy;2024 MortalTom</div>
		</body>
</html>
标题（<h1>）:

font-size: 2em，相对于body的字体大小。

font-weight: normal，非粗体。
font-style: italic，斜体。
color: #0055A4，深蓝色。
text-align: center，文本居中。
text-transform: uppercase，所有字母大写。
margin-bottom: 0.5em，为标题和段落之间添加一些空间。

段落（<p>）:

font-size: 1em，默认大小。
font-weight: 300，细体。
font-style: normal，非斜体。
color: #666，暗灰色。
max-width: 600px，限制段落的最大宽度。
text-align: justify，文本两端对齐。

6.2 使用CSS设置文本样式

在CSS中设置文本样式涉及到一系列的属性，这些属性可以帮助你控制文本的外观和排版。以下是一些常用的CSS属性，用于设置文本样式：

color：设置文本颜色。
p {
color: #333; /* 十六进制颜色代码 */
}

::first-letter 首字下沉（Drop Caps）是一种常见的文本排版技巧，它将段落的第一个字母放大并下沉，使其突出显示。在CSS中，可以通过伪元素来实现首字下沉的效果
p::first-letter {
float: left;
font-size: 2em/*下沉两行*/
}

background-color：设置文本背景颜色。
p {
background-color: yellow; /* 颜色名 */
}

text-align：设置文本的水平对齐方式，可以是left、right、center或justify。
p {
text-align: justify; /* 两端对齐 */
}

text-indent：设置首行文本的缩进。
p {
text-indent: 2em; /* 使用em单位进行缩进 */
}

text-decoration：设置文本的装饰线，如none、underline、overline、line-through。
a {
text-decoration: none; /* 无下划线 */
}

text-transform：设置文本的大小写，如none、uppercase、lowercase、capitalize。
h1 {
text-transform: uppercase; /* 全部大写 */
}

letter-spacing：设置字符间距。
h1 {
letter-spacing: 2px; /* 字符间距为2像素 */
}

word-spacing：设置单词间距。
p {
word-spacing: 4px; /* 单词间距为4像素 */
}

line-height：设置行高，可以影响行与行之间的距离。
p {
line-height: 1.6; /* 行高为字体大小的1.6倍 */
}

text-shadow：设置文本阴影。
h1 {
text-shadow: 2px 2px 4px #000; /* 水平偏移2px，垂直偏移2px，模糊半径4px，颜色为黑色 */
}

white-space：设置如何处理空白，如normal、nowrap、pre、pre-wrap、pre-line。
pre {
white-space: pre; /* 保持空白符序列 */
}

direction：设置文本方向，如ltr（从左到右）或rtl（从右到左）。
body {
direction: rtl; /* 文本方向从右到左 */
}

unicode-bidi：设置文本的方向性，如normal或bidi-override。
body {
unicode-bidi: bidi-override; /* 覆盖默认的双向文本处理 */
}

text-overflow：设置当文本溢出包含元素时如何处理，通常与overflow和white-space属性一起使用。
h1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; /* 显示省略号 */
}

这些属性可以组合使用，以实现丰富的文本样式效果。下面是一个简单的示例，展示了如何将这些属性应用到HTML元素中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Style Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .text-example {
    color: #1a1a1a;
    background-color: #f8f8f8;
    text-align: center;
    text-indent: 20px;
    text-decoration: underline;
    text-transform: capitalize;
    letter-spacing: 1px;
    word-spacing: 2px;
    line-height: 1.8;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    white-space: pre-wrap;
    direction: ltr;
    unicode-bidi: normal;
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    overflow: hidden;
  }
</style>
</head>
<body>
  <p class="text-example">
    这是一个示例文本，展示了如何使用CSS来设置文本样式。文本颜色为深灰色，背景为浅灰色，首行缩进，并且文本居中。每个单词和字母之间有一定的间距，行高为1.8，文本有轻微的阴影效果，并且文本不会换行，如果超出了容器宽度，将显示省略号。
  </p>

		<div align="center">Copyright &copy;2024 MortalTom</div>
		</body>
</html>
在这个示例中，我们创建了一个段落，并为其设置了多种文本样式，包括颜色、背景、对齐方式、缩进、装饰、大小写转换、字符和单词间距、行高、阴影、空白处理、文本方向、双向文本处理等。这些样式共同作用于文本，以展示CSS在文本样式设置上的强大能力。你可以将这段代码复制到HTML文件中，并在浏览器中查看效果。

CSS 提供了更多的属性来控制文本的样式和排版，以下是一些额外的样式属性：

font-family：设置字体族。
p {
font-family: 'Times New Roman', Times, serif;
}

font-size：设置字体大小。
p {
font-size: 16px;
}

font-weight：设置字体粗细。
p {
font-weight: bold;
}

font-style：设置字体风格，如斜体。
p {
font-style: italic;
}

text-overflow：设置当文本溢出时显示省略号。
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

vertical-align：设置垂直对齐方式。
span {
vertical-align: sub;
}

text-align-last：设置最后一行文本的对齐方式。
p {
text-align: justify;
text-align-last: left;
}

hyphens：设置如何进行单词断行。
p {
hyphens: auto; /* auto | manual | none */
}

word-break：设置如何处理长单词或URL。
p {
word-break: break-all; /* normal | break-all | keep-all */
}

overflow-wrap：设置长单词或字符串是否会在边界内换行。
p {
overflow-wrap: break-word; /* normal | break-word */
}

tab-size：设置制表符的宽度。
pre {
tab-size: 4;
}

column-count：设置列数，常用于创建多栏布局。
.container {
column-count: 3;
}

column-gap：设置列与列之间的间隙。
.container {
column-gap: 20px;
}

column-rule：设置列与列之间的分隔线样式。
.container {
column-rule: 1px solid #ccc;
}

writing-mode：设置书写模式，如垂直或水平。
p {
writing-mode: vertical-rl;
}

text-orientation：设置垂直文本中的水平文本方向。
p {
text-orientation: upright;
}

text-combine-upright：设置如何在垂直文本中组合直立文本。
p {
text-combine-upright: all;
}

text-underline-position：设置下划线的位置。
a {
text-decoration: underline;
text-underline-position: under;
}

font-feature-settings：控制字体中某些特征的开启或关闭。
@font-face {
font-family: 'MyFont';
src: url('myfont.woff') format('woff');
font-feature-settings: 'liga', 'dlig' 1; /* 开启某些OpenType特性 */
}

font-variant：设置小型大写字母或普通大写字母。
p {
font-variant: small-caps;
}

这些属性可以组合使用，以实现丰富的文本样式效果。下面是一个示例，展示了如何将这些属性应用到HTML元素中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Text Style Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .advanced-text-example {
    font-size: 18px;
    font-weight: 600;
    font-style: normal;
    color: #1a1a1a;
    background-color: #f8f8f8;
    text-align: justify;
    text-indent: 20px;
    text-decoration: underline;
    text-transform: capitalize;
    letter-spacing: 1px;
    word-spacing: 2px;
    line-height: 1.8;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    white-space: pre-wrap;
    direction: ltr;
    unicode-bidi: normal;
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    overflow: hidden;
    hyphens: auto;
    word-break: break-all;
    overflow-wrap: break-word;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    text-combine-upright: none;
    text-underline-position: auto;
    font-variant: normal;
  }
</style>
</head>
<body>
  <p class="advanced-text-example">
    这是一个示例文本，展示了如何使用CSS来设置高级文本样式。文本颜色为深灰色，背景为浅灰色，首行缩进，并且文本两端对齐。每个单词和字母之间有一定的间距，行高为1.8，文本有轻微的阴影效果，并且文本不会换行，如果超出了容器宽度，将显示省略号。
  </p>
		<div align="center">Copyright &copy;2024 MortalTom</div>
		</body>
</html>
在这个示例中，我们创建了一个段落，并为其设置了多种文本样式，包括字体大小、粗细、风格、颜色、背景、对齐方式、缩进、装饰、大小写转换、字符和单词间距、行高、阴影、空白处理、文本方向、双向文本处理、断行、书写模式、文本方向、组合直立文本、下划线位置、小型大写字母等。这些样式共同作用于文本，以展示CSS在文本样式设置上的强大能力。

我们可以将之前提到的文本样式和首字下沉的效果结合起来。以下是一个完整的HTML示例，展示了如何使用CSS来设置文本样式和实现首字下沉效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Integrated Text Style and Drop Caps Example</title>
<style>
  body {
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
  }
 
  .container {
    width: 80%;
    margin: auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
  }
 
  h1 {
    font-size: 2em;
    font-weight: normal;
    font-style: italic;
    color: #0055A4;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 0.5em;
  }
 
  p {
    font-size: 1em;
    font-weight: 300;
    color: #666;
    text-align: justify;
    text-indent: 2em;
    margin-bottom: 1em;
  }
 
  p::first-letter {
    float: left;
    font-size: 3em;
    line-height: 1;
    margin-right: 0.1em;
    margin-top: 0.15em; /* Adjust the vertical alignment */
  }
</style>
</head>
<body>
  <div class="container">
    <h1>欢迎来到我的网站</h1>
    <p>
      在这个示例中，我们创建了一个段落并为其设置了多种文本样式，包括字体大小、粗细、风格、颜色、背景、对齐方式、缩进、装饰、大小写转换、字符和单词间距、行高、阴影、空白处理、文本方向、双向文本处理、断行、书写模式、文本方向、组合直立文本、下划线位置、小型大写字母等。这些样式共同作用于文本，以展示CSS在文本样式设置上的强大能力。
    </p>
	<br/>
    <p>
      首字下沉效果是通过CSS的`::first-letter`伪元素实现的。这种效果适用于简短的段落，可以有效地吸引读者的注意力。在长段落中使用时，需要注意首字母可能会在页面上“下沉”到下一行，这可能需要额外的CSS样式或JavaScript脚本来确保正确的排版效果。
    </p>
  </div>
		<div align="center">Copyright &copy;2024 MortalTom</div>
		</body>
</html>
在这个示例中，我们创建了一个包含标题和两个段落的容器。我们为标题和段落设置了多种文本样式，包括字体大小、粗细、风格、颜色、背景、对齐方式、缩进、装饰、大小写转换、字符和单词间距、行高、阴影、空白处理、文本方向、双向文本处理等。此外，我们还为段落的第一个字母设置了首字下沉效果。

首字下沉效果是通过::first-letter伪元素实现的，我们设置了首字母的字体大小、行高、右侧边距和顶部边距，以确保它能够正确地显示在段落的开头。

你可以将这段代码复制到HTML文件中，并在浏览器中查看效果。这个示例展示了如何将多种文本样式和首字下沉效果结合起来，以创建一个具有吸引力和可读性的网页文本布局。

6.3 使用CSS设置图像格式

在CSS中设置图像格式主要涉及到图像的大小、位置、边框、阴影等样式。以下是一些常用的CSS属性，用于设置图像格式：

width 和 height：设置图像的宽度和高度。
img {
width: 100px; /* 设置图像宽度 */
height: auto; /* 高度自动调整，保持宽高比 */
}

max-widt 和 max-height：设置图像的最大宽度和最大高度。
img {
max-width: 100%; /* 最大宽度不超过其父元素的宽度 */
height: auto; /* 高度自动调整，保持宽高比 */
}

object-fit：设置图像如何适应其容器，选项包括fill、contain、cover、none、scale-down。
img {
object-fit: cover; /* 图像会被裁剪以填充容器 */
width: 100%;
height: 100%;
}

border：给图像添加边框。
img {
border: 1px solid #000; /* 黑色边框 */
}

border-radius：设置图像边框的圆角。
img {
border-radius: 10px; /* 边框圆角为10像素 */
}

box-shadow：给图像添加阴影。
img {
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); /* 阴影效果 */
}

opacity：设置图像的透明度。
img {
opacity: 0.8; /* 图像透明度为80% */
}

background-image：如果图像不是<img>标签的src属性，而是背景图像，则可以使用此属性。
div {
background-image: url('path/to/image.jpg');
background-size: cover; /* 背景图像覆盖整个元素区域 */
background-position: center; /* 背景图像居中显示 */
}

clip-path：裁剪图像的形状。
img {
clip-path: circle(50% at center); /* 裁剪为圆形 */
}

transition：设置图像在交互时的过渡效果。
img {
transition: transform 0.3s ease; /* 平滑变换效果 */
}

img:hover {
transform: scale(1.1); /* 鼠标悬停时放大图像 */
}

以下是一个简单的HTML和CSS示例，展示了如何将这些属性应用到图像中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Style Example</title>
<style>
  img {
    width: 300px; /* 设置图像宽度 */
    height: auto; /* 高度自动调整，保持宽高比 */
    max-width: 100%; /* 最大宽度不超过其父元素的宽度 */
    display: block; /* 避免默认的行内元素边距问题 */
    margin: 0 auto; /* 居中显示 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 8px; /* 圆角边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
    opacity: 0.9; /* 透明度 */
    transition: transform 0.3s ease; /* 平滑变换效果 */
  }
 
  img:hover {
    transform: scale(1.05); /* 鼠标悬停时轻微放大图像 */
  }
</style>
</head>
<body>
  <img src="img/11.jpg" alt="示例图像">
		<div align="center">Copyright &copy;2024 MortalTom</div>
		</body>
</html>
在这个示例中，我们为图像设置了宽度、高度、边框、圆角边框、阴影、透明度和悬停时的过渡效果。你可以将这段代码复制到HTML文件中，并在浏览器中查看效果。记得将src属性的值替换为你的图像路径。

在CSS中，背景图像的重复、定位和使用百分比进行定位是常见的布局技巧。以下是如何使用这些属性的示例：

背景重复（background-repeat）
div {
background-image: url('pattern.png');
background-repeat: repeat; /* 默认值，背景图像在水平和垂直方向上重复 */
background-repeat: repeat-x; /* 背景图像只在水平方向上重复 */
background-repeat: repeat-y; /* 背景图像只在垂直方向上重复 */
background-repeat: no-repeat; /* 背景图像不重复 */
}

背景图像定位（backround-position）
div {
background-image: url('background.jpg');
background-repeat: no-repeat; /* 不重复 */
background-position: center center; /* 背景图像居中显示 */
background-position: top left; /* 背景图像定位到左上角 */
background-position: bottom right; /* 背景图像定位到右下角 */
}

使用background-position时，你也可以使用像素值或其他单位来精确控制位置：

div {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: 0px 0px; /* 定位到左上角 */
background-position: 100px 50%; /* 从左边距离100px，垂直居中 */
}

使用百分比进行背景图像定位
div {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: 50% 50%; /* 背景图像水平和垂直居中 */
background-position: 25% 75%; /* 背景图像定位到左下角 */
}

百分比定位是相对于元素本身的宽度和高度，其中0%是元素的开始边缘，100%是结束边缘。

完整示例
以下是一个完整的HTML示例，展示了如何使用背景图像的重复、定位和百分比定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Style Example</title>
<style>
  .container {
    width: 80%;
    height: 300px;
    margin: 20px auto;
    border: 1px solid #ddd;
    background-color: #f4f4f4;
  }
 
  .repeating-pattern {
    background-image: url('img/1.jpg');
    background-repeat: repeat;
  }
 
  .centered-background {
    background-image: url('img/1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
  }
 
  .positioned-background {
    background-image: url('img/2.jpg');
    background-repeat: no-repeat;
    background-position: 100px 50%;
  }
 
  .percent-positioned-background {
    background-image: url('img/3.jpg');
    background-repeat: no-repeat;
    background-position: 25% 75%;
  }
</style>
</head>
<body>
  <div class="container repeating-pattern">
    <p>重复的背景图案。</p>
  </div>
  <div class="container centered-background">
    <p>居中的背景图像。</p>
  </div>
  <div class="container positioned-background">
    <p>定位的背景图像。</p>
  </div>
  <div class="container percent-positioned-background">
    <p>使用百分比定位的背景图像。</p>
  </div>

		<div align="center">Copyright &copy;2024 MortalTom</div>
		</body>
</html>
在这个示例中，我们创建了四个容器，每个容器都有不同的背景图像样式。第一个容器展示了重复的背景图案，第二个容器展示了居中的背景图像，第三个容器展示了使用像素定位的背景图像，第四个容器展示了使用百分比定位的背景图像。

请确保将url中的路径替换为你的实际图像路径，然后在浏览器中查看效果。

6.4 使用CSS设置表单样式

在网页设计中，使用CSS（层叠样式表）来设置表单样式是一种常见的做法。CSS可以让你控制表单元素的外观，比如输入框、按钮、下拉菜单等。以下是一些基本的CSS样式，你可以用来美化HTML表单：

设置字体和颜色：
input, select, textarea {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}

调整输入框和文本区域的边框和背景：
input[type="text"], input[type="email"], textarea {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px;
background-color: #f9f9f9;
}

设置按钮样式：
button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: white;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #0056b3;
}

调整下拉菜单样式：
select {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
}

为表单元素添加焦点样式：
input:focus, textarea:focus, select:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}

设置表单布局：
form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #fff;
}

设置表单元素间距：
.form-group {
margin-bottom: 15px;
}

使用伪元素添加图标：
input[type="text"]:before,
input[type="email"]:before,
input[type="password"]:before {
content: attr(placeholder);
color: #aaa;
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}

响应式设计：
@media (max-width: 768px) {
form {
width: 100%;
padding: 10px;
}
}

输入框和文本区域样式
input[type="text"],
input[type="email"],
textarea {
width: 100%; /* 宽度填满容器 */
padding: 10px; /* 内边距 */
margin-bottom: 20px; /* 外边距 */
border: 1px solid #ccc; /* 边框 */
border-radius: 4px; /* 圆角 */
box-sizing: border-box; /* 盒模型 */
}

按钮样式
button {
width: 100%;
padding: 10px 20px;
background-color: #5cb85c; /* 按钮背景色 */
color: white; /* 文字颜色 */
border: none; /* 无边框 */
border-radius: 4px; /* 圆角 */
cursor: pointer; /* 鼠标悬停时显示指针 */
font-size: 18px; /* 字体大小 */
transition: background-color 0.3s; /* 渐变效果 */
}

button:hover {
background-color: #4cae4c; /* 鼠标悬停时的背景色 */
}

下拉菜单样式
select {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
box-sizing: border-box;
}

表单布局和间距
form {
max-width: 600px;
margin: 50px auto; /* 水平居中 */
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f7f7f7;
}

.form-group {
margin-bottom: 20px;
}

焦点和占位符样式
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
border-color: #007bff;
outline: none; /* 移除默认的焦点轮廓 */
}

::placeholder {
color: #aaa;
font-size: 14px;
}

下面是一个简单的HTML表单，应用了上述CSS样式：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
 
<form action="/submit-form" method="post" class="form-container">
    <h2>MortalTom·login</h2>
    
    <div class="form-group">
        <label for="name">用户名:</label>
        <input type="text" id="name" name="name" placeholder="你的用户名" required>
    </div>
    
    <div class="form-group">
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" placeholder="你的邮箱" required>
    </div>
    
    <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" placeholder="你的密码" required>
    </div>
    
    <div class="form-group">
        <label for="gender">性别:</label>
        <select id="gender" name="gender">
            <option value="">请选择你的性别</option>
            <option value="male">男</option>
            <option value="female">女</option>
            <option value="other">其他？(？？？？？)</option>
        </select>
    </div>
    
    <div class="form-group">
        <button type="submit">Register</button>
    </div>
</form>
		<div align="center">Copyright &copy;2024 MortalTom</div>
		</body>
</html>
/* 重置一些基本的样式 */
body, h2 {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
}
 
/* 表单容器样式 */
.form-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
    text-align: center;
}
 
.form-container h2 {
    margin-bottom: 20px;
    color: #333;
}
 
/* 表单组样式 */
.form-group {
    margin-bottom: 15px;
}
 
/* 标签和输入框样式 */
.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #666;
}
 
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}
 
/* 输入框和下拉菜单的焦点样式 */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group select:focus {
    border-color: #007bff;
    outline: none;
}
 
/* 按钮样式 */
button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}
 
button:hover {
    background-color: #0056b3;
}
 
/* 响应式设计 */
@media (max-width: 768px) {
    .form-container {
        width: 90%;
        padding: 20px;
    }
}
在这个美化后的示例中，我们添加了一些额外的样式来提升表单的视觉效果：

表单容器：添加了最大宽度、自动居中、内边距、圆角、阴影和背景色。
标题：为标题添加了外边距和颜色。
表单组：为每个表单组添加了外边距。
标签和输入框：为标签和输入框添加了样式，包括字体、颜色、边框、圆角和过渡效果。
焦点样式：为输入框和下拉菜单的焦点状态添加了边框颜色变化。
按钮：为按钮添加了宽度、内边距、边框、圆角、背景色、字体大小、鼠标悬停效果等。

这个美化后的表单看起来更加现代和专业，同时也提供了良好的用户体验。你可以根据需要进一步调整样式和布局。

案例

案例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本域修饰</title>
		<style type="text/css">
			.text1{
				border: 1px solid #f60;
				color: #03C;
			}
			.text2{
				border: 1px solid #C3C;
				height: 20px;
				background: #fff url(img/1.jpg)left center no-repeat;
				padding-left: 20px;
			}
			.area{
				border: 1px solid #00f;
				overflow: auto;
				width: 99%;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<p>
			<input type="text" name="normal"/>
			默认样式的文本域
		</p>
		<p>
			<input name="chbd" type="text" value="输入的文字显示为蓝色" class="text1"/>
			改变边框颜色和文字颜色的文本域，看起来更急醒目
		</p>
		<p>
			<input name="pass" type="password" class="text2"/>
			增加了背景图片的文本域，看起来更加形象直观
		</p>
		<p>
			<textarea name="cha" cols="45" rows="5" class="arer">改变边框颜色的多行文本域</textarea>
		</p>

		<div align="center">Copyright &copy;2024 MortalTom</div>
		</body>
</html>

案例2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.btuo1{
				background: url(img/1.jpg) repeat-x;
				border: 1px solid #F00;
				height: 32px;
				font-weight: bold;
				padding-top: 2px;
				cursor: pointer;
				font-size: 14px;
				color: #FFF;
			}
			.btn02{
				background: url(img/2.jpg) 0 0 no-repeat;
				width: 107px;
				height: 37px;
				border: none;
				font-size: 14px;
				font-weight: bold;
				color: #d84700;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<p>
			<input name="button" type="submit" value="提交"/>
			默认风格的“提交”按钮
		</p>
		<p>
			<input name="button01" type="submit" class="btuo1" id="button01" value="自适应宽度按钮"/>
			自适应宽度按钮
		</p>
		<p>
			<input name="button02" type="submit" class="btn02" id="button2" value="免费注册"/>
			固定背景图片按钮
		</p>
		<div align="center">Copyright &copy;2024 MortalTom</div>
		</body>
</html>

案例3

/*页面全局样式—————父元素*/
*{
	margin: 0;
	padding: 0;
}
/*设置页面整体样式*/
body{
	font-size: 12px;
	color: #333;
}
ol,ul{
	list-style: none;
}
img,a{
	border: 0;
	text-decoration: none;
}
a{
	color: #333;
}
a:hover{
	color: #f00;
}
/*会员注册表单的样式（与登录表单的样式共享）*/
.loginLogo{
	width: 100%;
	border-bottom: #efefef 1px solid;
}
.logoMid{
	width: 1040px;
	margin:0 auto;
}
.loginReg{
	height: 30px;
	line-height: 30px;
	text-align: right;
}
.loginReg a{
	color: #7bc144;
}
.loginReg a:hover{
	color: #f00;
}
.loginBox{
	width: 1050px;
	margin: 30px auto;
	position: relative;
}
.regList{
	height: 35px;
	line-height: 35px;
	margin-bottom: 30px;
	position: relative;
}
.regList label{
	float: left;
	width: 105px;
	margin-right: 10px;
	text-align: right;
	color: #999;
}
.regList input{
	margin: 0;
	padding: 0;
	width: 283px;
	height: 33px;
	border: 1px solid #383838;
	background: #feffdf;
	padding-left: 3px;
}
.regList .yanzheng{
	width: 135px;
}
.regList img{
	left: 260px;
	position: absolute;
}
.xieyi{
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	padding-left: 115px;
}
.xieyi input{
	position: relative;
	top: 2px;
}
.xieyi a{
	color: #7BC144;
}
.reg{
	padding-left: 115px;
	margin-top: 10px;
}
.chengnuo{
	position: absolute;
	right: 0;
	top: 0;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>会员注册</title>
    <link type="text/css" href="css/案例3.css" rel="stylesheet"/>
</head>
<body style="background: #fff;">
    <div class="loginLogo">
        <div class="logoMid">
            <h1 class="logo" style="height: 71px; padding-top: 10px;">
                <a href="index.html">
                    <img src="img/logo.jpg" alt="商城Logo"/>
                </a>
            </h1>
            <div class="loginBox">
                <img src="img/yf.jpg" width="295" height="393" class="chengnuo"/>
                <form action="register.php" method="post" class="reg">
                    <div class="regList">
                        <label><span class="red">*</span>用户名</label>
                        <input type="text" name="username" required/><span style="color: #999;">请输入邮箱/用户名/手机号</span>
                    </div>
                    <div class="regList">
                        <label><span class="red">*</span>请设置密码</label>
                        <input type="password" name="password" required/>
                    </div>
                    <div class="regList">
                        <label><span class="password">*</span>请确认密码</label>
                        <input type="password" name="confirm_password" required/>
                    </div>
                    <div class="regList">
                        <label><span class="red">*</span>验证码</label>
                        <input type="text" class="yanzheng" required/>
                        <img src="img/yzm.jpg" width="103" height="38" alt="验证码"/>
                    </div>
                    <div class="xieyi">
                        <input type="checkbox" required/>
                        我已阅读并同意<a href="agreement.html">商城用户注册协议</a>
                    </div>
                    <div class="reg">
                        <input type="image" src="img/zc.jpg" alt="注册"/>
                    </div>
                </form>
                <div class="clears"></div>
            </div>
        </div>
    </div>
		<div align="center">Copyright &copy;2024 MortalTom</div>
		</body>
</html>

习题

习题1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.t1{
				background-color: aqua;
				text-align: center;
			}
			.t_left{
				float: left;
				width: 30%;
			}
			.text1{
				background-color: beige;
				border-bottom-style: dashed;
			}
			.text2{
				background-color: beige;
				margin-top: 0%;
				
			}
			.t_right{
				width: 60%;
				height: 50%;
				float: right;
				margin-right: 1%;
			}
		</style>
	</head>
	<body>
		<div><img src="img/logo.JPG" width="100%" height="100"/></div>
		<div><p class="t1">首页|酒店|旅游|跟团游|自由行|机票|门票|火车|汽车票|攻略|商旅|更多</p></div>
		<div class="t_left">
			<p>最新活动</p>
			<p class="text1">上海龙支付酒店+景点满500减100</p>
			<p class="text1">包车游世界，畅游当地行，还有外出补贴400人</p>
			<p class="text1">新年红包，你写就有，请拿起手机 编辑您的信息</p>
			<p class="text1">女神节，特别好礼，送给漂亮的你</p>
			<p class="text1">寒假出去玩，温泉滑雪HIGH起来，酒店八折起</p>
			<img src="img/guanggao.jpg" width="100%" height="300px"/>
		</div>
		<div class="t_right">
			<div><img src="img/lijiang.jpg" width="100%" height="250px"/>
			<p class="text2">2019的第一天，我遇见了下雨的丽江。<br />
			喜欢这边丽江的蓝天白云，一年中总会来上好几次</p>
			</div>
			<img src="img/feilvbin.jpg" width="100%" height="250px"/>
			<p class="text2">面面旅拍一宿务渔村麦克坦，墨宝鲸鲨甘米影<br />
			三入菲律宾之与反向锦鲤携手的囧途纪行</p>
		<div align="center">Copyright &copy;2024 <a href="https://mortaltom.blog.csdn.net">MortalTom</a></div>
		</div>
		</body>
</html>

习题2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>青年志愿者</title>
		<style type="text/css">
			.text1{
				word-spacing: 8px;
				text-align: center;
				background-color: beige;
				margin-top: 0%;
			}
			.text2{
				font-family: 楷体;
				text-indent: 2em;
			}
			.t1{
				float: left;
				margin-left: 200px;
				height: 600px;
				width: 300px;
			}
			.t2{
				float: right;
				margin-right: 250px;
				height: 750px;
				width: 500px;
				border-style: solid;
			}
		</style>
	</head>
	<body>
		<img src="img/logo.JPG"/>
		<hr color="#FF0000" size="2"/>
		<p class="text1">首页 	志愿组织 志愿项目 志愿文化 志愿阵地 志愿人才 志愿发布 志愿服务协会 支援社区 登录</p>
		<div class="t1">
			<img src="img/left.JPG"/>
			<img src="img/left2.JPG"/>
		</div>
		<div class="t2">
			<h3 align="center">"我和我的祖国" 视频征集活动</h3>
			<div align="center">Copyright &copy;2024 <a href="https://mortaltom.blog.csdn.net">MortalTom</a></div>	
		</div>	
		</body>
</html>

标签：文本,color,text,HTML,background,第六章,font,border,CSS
From： https://blog.csdn.net/m0_68332785/article/details/143081044

HTML·第六章元素应用CSS

6.1 使用CSS设置字体样式

6.2 使用CSS设置文本样式

6.3 使用CSS设置图像格式

6.4 使用CSS设置表单样式

案例

案例1

案例2

案例3

习题

习题1：

习题2

相关文章

赞助商

阅读排行

HTML·第六章 元素应用CSS

6.1 使用CSS设置字体样式

6.2 使用CSS设置文本样式

6.3 使用CSS设置图像格式

6.4 使用CSS设置表单样式

案例

案例1

案例2

案例3

习题

习题1：

习题2

相关文章

赞助商

阅读排行

HTML·第六章元素应用CSS