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;
}
例题6.21
<!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/password_bg.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="area">改变边框颜色的多行文本域</textarea>
</p>
</body>
</html>
例题6.22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按钮修饰</title>
<style type="text/css">
.btn01{
background: url(img/btn_bg02.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/btn_bg03.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="btn01" id="button1" value="自适应宽度按钮"/>
自适应宽度按钮
</p>
<p>
<input name="button02" type="submit" class="btn02" id="button02" value="免费注册"/>
固定背景图片的按钮
</p>
</body>
</html>
例题6.23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录表单的制作</title>
<style type="text/css">
.login{
margin: 0 auto;/* 容器水平居中对齐 */
width: 280px;
padding: 14px;
border: dashed 2px #b7ddf2;
background: #ebf4fb;
}
.login *{
margin: 0;
padding: 0;
font-family: "宋体";
font-size: 12px;
line-height: 1.5em;
}
.login h2{
text-align: center;
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: solid 1px #b7ddf2;
}
.login content{
padding: 5px;
}
.login.frm_cont{
margin-bottom: 8px;
}
.login.username input,.login.password input{
width: 180px;
height: 18px;
padding: 2px 0px 2px 18px;
border: solid 1px #aacfe4;
}
.username input{
background: #fff url(img/username.JPG)no-repeat left center;
}
.password input{
background: #fff url(img/lock.JPG)no-repeat left center;
}
.login.btns{
text-align: center;
}
</style>
</head>
<body>
<div class="login">
<h2>用户登录</h2>
<div class="content">
<form action="" method="post">
<div class="frm_cont username">用户名:
<label for="username"></label>
<input type="text" name="username" id="username"/>
</div>
<div class="frm_cont password">密 码
<label for="password"></label>
<input type="password" name="password" id="password"/>
</div>
<div class="btns">
<input type="submit" name="button1" id="button1" value="登录"/>
<input type="button" name="button2" id="button2" value="注册"/>
</div>
</form>
</div>
</div>
</body>
</html>
综合案例
<!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;
}