6.1 使用CSS设置字体样式
6.1.1.字体类型
font-family 属性用于指定元素中文本的字体系列。为了确保跨平台的一致性，通常会列出多个字体名称作为“后备”机制，浏览器会尝试按顺序使用列表中的字体，直到找到一个可用的为止。如果都没有找到，则使用默认字体。字体名如果是多词组成的需要加引号。
p {font-family: "Arial", "Helvetica", sans-serif;
}-
通用字体族：当具体的字体不可用时，可以使用通用字体族作为最终备选。常见的通用字体族包括
serif,sans-serif,monospace,cursive, 和fantasy。 -
网页安全字体：一些字体几乎可以在所有主流操作系统上找到，比如 Arial, Verdana, Times New Roman 等，这些被称为网页安全字。
6.1.2.字体大小
font-size 属性用来设置文本的尺寸。它接受多种单位，如像素（px）、相对单位（em, rem, %）等。选择合适的单位可以帮助提高网站的可访问性和响应式设计能力。
-
绝对单位：例如 px (像素) 是固定大小，不随屏幕分辨率变化。
-
相对单位：如 em 或者 rem 是相对于父元素或根元素的字体大小，而百分比则是相对于父元素的字体大小。
-
示例：
h1 {font-size: 2rem; /* 相对于根元素的字体大小 */
}
p {font-size: 16px; /* 固定大小 */
}
6.1.3.字体粗细
font-weight 属性定义了文本的粗细程度。它可以是预定义的关键字，也可以是数字值。关键字包括 normal 和 bold，而数值范围从 100 到 900，其中 400 等同于 normal，700 等同于 bold。
示例：
.bold-text {font-weight: 700;
}
.lighter-text {font-weight: 300;
}
6.1.4.字体倾斜
font-style 属性用于设置文本是否为斜体。主要取值有 normal（正常）、italic（斜体）和 oblique（倾斜）。虽然 italic 和 oblique 都表示斜体，但它们之间存在细微差别，italic 更倾向于采用字体设计师特别设计的斜体形式，而 oblique 则通常是通过将正常字符倾斜得到的效果。
- 示例：
.italic-text {font-style: italic;
}
.oblique-text {font-style: oblique;
}综上所述，通过对 font-family, font-size, font-weight, 和 font-style 这些基本属性的运用，我们可以对网页中的文字进行丰富的样式调整，以满足不同的设计需求。此外，还可以使用简写属性 font 来一次性设置多个字体相关的属性，从而简化代码。
.styled-text {font: italic bold 20px/1.5 "Arial", sans-serif;
}在这个例子中，.styled-text 类的文本将会是斜体、粗体、20像素高，并且行间距为1.5倍，首选字体为 Arial，若不可用则使用任何无衬线字体。
6.2 使用CSS设置文本样式
6.2.1.文本水平对齐方式
text-align 属性用来控制元素内文本的水平对齐方式。常见的值包括 left（左对齐）、right（右对齐）、center（居中对齐）和 justify（两端对齐）。当使用 justify 时，浏览器会自动调整单词间的间距，使每行文本的左右边缘都与容器边缘对齐。
- 示例：
.center-text {text-align: center;
}
.justify-text {text-align: justify;
}
6.2.2.行高
line-height 属性定义了文本行之间的垂直距离。它通常用于改善段落文本的可读性。这个属性可以接受绝对单位（如px, pt）或相对单位（如em, %），也可以直接指定一个数值，该数值将被解释为相对于当前字体大小的倍数。
- 示例：
p {line-height: 1.6; /* 相对于字体大小的1.6倍 */
}
6.2.3.文本的修饰.
text-decoration 属性用来添加或移除文本的装饰线。常用值有 none（无装饰）、underline（下划线）、overline（上划线）、line-through（删除线）等。注意，不推荐使用 blink 值，因为它会导致闪烁效果，这可能会引起用户的不适。
- 示例：
a {text-decoration: none; /* 移除链接默认的下划线 */
}
.strikethrough {text-decoration: line-through; /* 添加删除线 */
}
6.2.4.段落首行缩进
text-indent 属性用于设置段落首行的缩进量。通常用以区分新的段落开始。单位可以是像素、百分比或其他长度单位。
- 示例：
p {text-indent: 2em; /* 首行缩进两个字符宽度 */
}
6.2.5.首字下沉
首字下沉可以通过CSS伪元素 ::first-letter 来实现，结合 font-size, float 等属性，可以使首字母放大并下沉到下一行。这种处理方法常用于文章标题或段落开头，增加版面美感。
- 示例：
p::first-letter {font-size: 200%;float: left;margin-right: 5px;
}
6.2.6.字符间距
letter-spacing 属性用于控制字符之间的额外间距。它可以接受正负值，正值表示增加间距，负值则减少间距。适当调整字符间距可以帮助提高某些情况下文本的可读性。
- 示例：
.spaced-out {letter-spacing: 2px; /* 字符间增加2像素的间距 */
}
6.2.7.文本的截断
当文本内容超过其容器宽度时，text-overflow 属性决定如何显示溢出的内容。常用的值有 clip（简单裁剪）和 ellipsis（显示省略号）。为了配合 text-overflow: ellipsis 工作，还需要设置 white-space: nowrap; 和 overflow: hidden;。
- 示例：
.truncated {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
6.2.8.文本的颜色
color 属性用于设置文本的颜色。颜色值可以是预定义的颜色名、十六进制颜色码、RGB值、RGBA值、HSL值或HSLA值。选择合适的方法取决于具体需求和个人偏好。
- 示例：
.highlighted {color: #FF0000; /* 红色 */
}
.highlighted-alt {color: rgba(255, 0, 0, 0.8); /* 半透明红色 */
}
6.2.9.文本的背景颜色
background-color 属性用于设置元素的背景颜色。同样，颜色值可以采用上述提到的各种形式。给文本设置背景颜色可以帮助突出显示重要信息或改变视觉焦点。
- 示例：
.bg-highlight {background-color: #FFFF00; /* 黄色背景 */
}
6.3 使用CSS设置图像样式
6.3.1.设置图像边框
- 定义：
border属性用来给图像添加边框。 - 示例：
img {border: 5px solid black;
}
6.3.2.图像缩放
- 定义：通过设置
width和height属性来控制图像尺寸。 - 示例：
.resized-image {width: 200px;height: auto; /* 保持比例 */
}
6.3.3.设置背景图像
- 定义：
background-image属性用来指定一个元素的背景图片。 - 示例：
.bg-img {background-image: url('path/to/image.jpg');
}6.3.4设置背景重复
- 定义：
background-repeat属性控制背景图片如何平铺。 - 值：repeat, no-repeat, repeat-x, repeat-y。
- 示例：
.no-repeat-bg {background-repeat: no-repeat;
}
6.3.5.背景图像定位
- 定义：
background-position属性用于设定背景图像的起始位置。
6.3.5.1 使用关键字进行背景定位
- 示例：
.positioned-bg {background-position: top right;
}6.3.5.2 使用长度进行背景定位
- 示例：
.positioned-bg {background-position: 50px 100px;
}6.3.5.3 使用百分比进行背景定位
- 示例：
.positioned-bg {background-position: 50% 50%;
}
6.4 使用CSS设置表单样式
1. 基本表单布局
首先，我们需要考虑整个表单的布局。通常，我们会使用<form>标签来包裹所有的表单控件，并通过CSS控制其外观。我们可以利用CSS Grid或Flexbox来实现灵活的响应式布局。
- 示例：
form {display: flex;flex-direction: column;max-width: 300px;margin: auto;padding: 20px;border: 1px solid #ccc;border-radius: 5px;background-color: #f8f8f8;
}2. 文本输入框样式
对于文本输入框（<input type="text">），我们可以设置宽度、内边距、边框、背景色以及聚焦时的样式。使用box-sizing: border-box;可以让包含边框和内边距在内的总宽度保持一致。
- 示例：
input[type="text"] {width: 100%;padding: 12px 20px;margin: 8px 0;box-sizing: border-box;border: 1px solid #ccc;border-radius: 4px;
}input[type="text"]:focus {border: 2px solid #4CAF50; /* 聚焦时改变边框颜色 */
}3. 按钮样式
按钮（<input type="submit">, <button>）可以通过设置背景颜色、文字颜色、边框、圆角以及悬停效果来进行美化。我们还可以为按钮添加一些额外的效果，比如阴影或者渐变背景。
- 示例：
input[type="submit"],
button {width: 100%;background-color: #4CAF50;color: white;padding: 14px 20px;margin: 8px 0;border: none;border-radius: 4px;cursor: pointer;
}input[type="submit"]:hover,
button:hover {background-color: #45a049; /* 鼠标悬停时改变背景颜色 */
}4. 下拉菜单样式
下拉菜单（<select>）同样需要一定的样式来匹配整体的设计风格。这包括了设置宽度、内边距、边框、圆角以及可能的背景颜色。注意某些浏览器可能对下拉菜单的样式支持有限。
- 示例：
select {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;
}5. 复选框和单选按钮
复选框（<input type="checkbox">）和单选按钮（<input type="radio">）默认的样式比较难以自定义，但可以通过隐藏原始控件并使用伪元素来创建自定义的外观。
-
示例（复选框）：
.custom-checkbox input[type="checkbox"] {display: none; /* 隐藏原生复选框 */
}.custom-checkbox label::before {content: "";display: inline-block;width: 16px;height: 16px;margin-right: 10px;border: 1px solid #ccc;vertical-align: middle;
}.custom-checkbox input[type="checkbox"]:checked + label::before {background-color: #4CAF50;border-color: #4CAF50;
}示例（单选按钮）：
.custom-radio input[type="radio"] {display: none; /* 隐藏原生单选按钮 */
}.custom-radio label::before {content: "";display: inline-block;width: 16px;height: 16px;margin-right: 10px;border: 1px solid #ccc;border-radius: 50%;vertical-align: middle;
}.custom-radio input[type="radio"]:checked + label::before {background-color: #4CAF50;border-color: #4CAF50;
}6. 文本区域样式
文本区域（<textarea>）与文本输入框类似，但是它们允许多行输入。因此，除了基本的样式外，还需要考虑是否允许用户调整大小（通过resize属性）。
- 示例：
textarea {width: 100%;height: 150px;padding: 12px 20px;box-sizing: border-box;border: 1px solid #ccc;border-radius: 4px;resize: vertical; /* 只允许垂直方向上调整大小 */
}7. 表单验证提示
当表单中的字段未正确填写时，通常会显示错误消息。为了确保这些消息能够清晰地传达给用户，应该为其设置合适的样式。例如，可以使用红色字体以突出错误信息。
- 示例：
.error-message {color: red;font-size: 14px;margin-top: 5px;
}综合案例
<!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测试.css" type="text/css"/>
</head>
<body style="background: #fff;"><div class="loginLogo"><div class="logoMid"><h1 class="logo"><a href="index.html"><img src="照片/logo.jpg" alt="Logo"/></a></h1><div class="loginBox"><img src="照片/chengguo.jpg" width="295" height="393" class="chengnuo" alt="Chengnuo"/><form action="#.html" method="get" class="reg"><div class="regList"><label><span class="red">*</span>用户名</label><input type="text" name="username" placeholder="请输入邮箱/用户名/手机号" required/></div><div class="regList"><label><span class="red">*</span>请设置密码</label><input type="password" name="password" required/></div><div class="regList"><label><span class="red">*</span>请确认密码</label><input type="password" name="confirm_password" required/></div><div class="regList"><label><span class="red">*</span>验证码</label><input type="text" class="yanzheng" name="captcha" required/><img src="照片/yanzheng.jpg" width="103" height="38" alt="验证码"/></div><div class="xieyi"><input type="checkbox" name="agreement" required/>我已经阅读并同意<a href="#">商城用户注册协议</a></div><div class="reg"><input type="submit" value="注册" /></div></form><div class="clears"></div></div></div></div>
</body>
</html>css代码
*{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;
}
.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: 3738400 1px solid;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;
}