第六章元素应用CSS

最新推荐文章于 2024-10-25 16:13:07 发布

原创最新推荐文章于 2024-10-25 16:13:07 发布 · 798 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

6.1 使用CSS设置字体样式

6.1.1.字体类型

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;
}v

6.2.2.行高

line-height 属性定义了文本行之间的垂直距离。它通常用于改善段落文本的可读性。这个属性可以接受绝对单位（如px, pt）或相对单位（如em, %），也可以直接指定一个数值，该数值将被解释为相对于当前字体大小的倍数。


a {
  text-decoration: none; /* 移除链接默认的下划线 */
}
.strikethrough {
  text-decoration: line-through; /* 添加删除线 */
}

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;
}示例：
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-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>