CSS修饰页面外观——文本、图像、表格、表单样式的讲解和运用-CSDN博客

本文链接：https://blog.csdn.net/Xuu_666/article/details/147720443

一、前言

本文详细介绍网页设计的各种元素，例如文本、图像、表格、表单、背景等，以及如何使用CSS对这些元素进行样式设置，进而达到修饰页面外观的效果。

二、文本样式

1、前言

字体样式主要涉及文字本身的效果，而文本样式主要涉及多个文字（段落）的排版效果。所以CSS在命名属性时，特意使用了 font 前缀和 text 前缀来区分两类不同性质的属性。

2、字体样式的常用属性

属性	说明
font - family	设置字体的类型
font - size	设置字体的大小
font - weight	设置字体的粗细
font - style	设置字体的倾斜

3、文本样式的常用属性

属性	说明
text-align	设置文本的水平对齐方式
line-height	设置行高
text-decoration	设置文本修饰效果
text-indent	设置段落的首行缩进
first-letter	设置首字下沉
text-overflow	设置文本的截断
color	设置文本颜色
background-color	设置文本背景颜色

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用文本样式</title>
    <style>
        p {
            /* 文字颜色 */
            color: blueviolet;
            font-family: '楷体';
            /* 文字是否倾斜 */
            font-style: italic;
            /* 文字大小 */
            font-size: 30px;
            /* 文字加粗 */
            font-weight: bolder;

            /* 文本相对于它所在容器的位置（左，中，右） */
            text-align: left;

            /* 文本的修饰线（下划线underline，
            删除线line-through，上划线overline） */
            text-decoration: line-through;

            border: 2px red solid;
        }

        span {
            /* 英文文本的大小写设置： 
            小写lowercase，  大写uppercase */
            text-transform: uppercase;

            /* 文本相对于它所在容器的缩进程度 */
            /* text-indent: 20px; */
        }
    </style>
</head>
<body>

    <div>
        <p> 我是CSS常用文本样式 <span>Hahaha</span></p>
    </div>
    
</body>
</html>

三、图像样式

在 HTML 中已经介绍过图像元素的基本知识。图像即 img 元素，作为 HTML 的一个独立对象，需要占据一定的空间。因此，img 元素在页面中的风格样式仍然用盒模型来设计。

CSS 样式中图像的三个常用属性：

weight、height：设置图像的缩放
opacity：设置图像的不透明度（0-1）
border：设置图像的边框样式（solid（实线）、dotted（点画线）、dashed（虚线）、double（双线) ）

注：0表示完全透明，1表示完全不透明，而0.5表示半透明

四、表格样式

1、常用的 CSS 表格属性

属性	说明
border-collapse	设置表格的行和单元格的边是合并或按照标准的 HTML 样式分开
border-spacing	设置表格的行和单元格的边框在横向或纵向的间距（表格边框独立时）
empty-cells	设置是否显示该单元格的边框（单元格无内容时）

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的常用样式</title>
    <style>
        table {
            width: 500px;
            height: 500px;
            border: green 2px solid;

            /* 常用！设置边框线是否合并（折叠） */
            border-collapse: collapse;
            /* 给整张表格填充颜色 */
            background-color: aliceblue;
            /* 设置表格里的文本的颜色 */
            color: aqua;
        }

        #td5 {
            /* 给单元格填充颜色 */
            background-color: red;
            /* 设置单元格里的文本的颜色 */
            color: white;
            border: blue 2px solid;
            /* 设置单元格里面文本的水平方向的位置 */
            text-align: right;
            /* 设置单元格里面文本的垂直方向的位置 */
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th scope="col">1</th>
            <th scope="col">2</th>
            <th scope="col">3</th>
        </tr>
        <tr>
            <th scope="col">4</th>
            <td id="td5">5</td>
            <td>6</td>
        </tr>
        <tr>
            <th scope="col">7</th>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</body>
</html>

五、表单样式

1、修饰文本域

文本域主要用于采集用户在其中编辑的文字信息，通过 CSS 样式可以对文本域内的字体、颜色，以及背景图像加以控制。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <title>修饰文本域</title>
    <style type="text/css">
      .text1 {
            border:3px double #f60;          /*3px双线红色边框*/
            color:#03c;                      /*文字颜色为蓝色*/
        }
      .text2 {
            border:1px dashed #c3c;          /*1px实线紫红色边框*/
            height:20px;
            background:#fff url(images/action.jpg) left center no-repeat;
                                        /*背景图像无重复*/
            padding-left:20px;
        }
      .area {
            border:1px solid #00f;          /*1px实线蓝色边框*/
            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="60" rows="5" class="area">改变边框颜色的多行文本域</textarea>
</p>
</body>
</html>

2、修饰按钮

按钮主要用于控制网页中的表单。通过 CSS 样式可以对按钮的字体、颜色、边框，以及背景图像加以控制。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>修饰按钮</title>
    <style type="text/tailwindcss">
        @layer utilities {
            .btn01 {
                background: url(images/btn_bg01.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(images/btn_bg02.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="button2" value="免费注册"/>
    固定背景图片的按钮
</p>
</body>
</html>

六、综合练习

按照下图设计一个网页。

示例代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单表格属性练习</title>


    <style>
        table{
            width: 400px;
            height: 200px;
            border:red 3px solid;
            border-collapse: collapse;
            text-align: right;
        }
        th{
            border: red 3px solid;
            background-color: gray;
            vertical-align: bottom;
            color: blue;
        }
        td{
            border: red 3px solid;
            background-color: yellow;
            vertical-align: bottom;
        }
        .text1{
            border: orange 3px double;
            color: cornflowerblue;
        }
        .text2{
            height: 25px;
            padding-left: 120px;
            background:url(https://ts1.tc.mm.bing.net/th/id/R-C.b4510ac8b39666a7c315ba3bda6045aa?rik=jBddQonfsvmSBw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f40026%2f3638.jpg_wh1200.jpg&ehk=3bZ7OCrTr4gB%2b12kMZ%2frpDG5ZGLwKx4YP9N32L9haRc%3d&risl=&pid=ImgRaw&r=0);
        }
        .btn00{height: 30px;
            border: palevioletred 2px dashed;
            background-color: pink;
            opacity:0.3;
        }
        .btn01{ width: 80px;
            border: none;
            cursor: pointer;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th scope="col" id="th0">无</th>
            <th scope="col">列标题1</th>
            <th scope="col">列标题2</th>
        </tr>
        <tr>
            <th scope="col">行标题1</th>
            <td id="td5">普通单元格1</td>
            <td>普通单元格2</td>
        </tr>
        <tr>
            <th scope="col">行标题2</th>
            <td>普通单元格3</td>
            <td>普通单元格4</td>
        </tr>
    </table>

    <br><br><hr><br><br>

    <p>      
        <input type="text" name="normal">
        默认样式的文本域    
    </p>

    <p>
        <input name="chbd" type="text" value="输入的文字显示为蓝色" class="text1">
        改变了边框颜色和文字颜色的文本域
    </p>

    <p>      
        <input name="password" type="password" class="text2">
        增加了背景图片的文本域    
    </p>



    <p>      
        <input name="button" type="submit" value="提交" />
        默认风格的提交按钮    
    </p>

    <p>      
        <input name="button00" type="submit" class="btn00" id="button0" value="登录">
        这是一个加大的虚线边框，填充粉色，透明度为0.3的按钮   
    </p>

    <p>      
        <input name="button01" type="submit" class="btn01" id="button1" value="注册">
        鼠标悬停变手指的无边框按钮    
    </p>
</body>
</html>