py系统学习笔记：第七阶段：网页编程基础：第二章：CSS3：23.文本、表格属性

发布于：2022-12-14 ⋅ 阅读:(354) ⋅ 点赞:(0)

目录

文本属性

设置文本对齐方式

代码：左、右、中

效果：

设置文本的修饰方式

代码：下划线、上划线、删除线

效果：

设置文本大小写

代码：每个单词开头大写，全部大写，全部小写

效果：

设置文本的首行缩进

代码：30px表示对首行缩进两个字符的设定

效果：（负值是允许的。如果值是负数，将第一行左缩进）

表格属性

设置表格边框

代码：为table与td加边框

效果：

设置表格折叠效果

代码：将以上的边线进行折叠

效果：

设置表格宽度与高度

代码：为table设置高度为100ox，宽度为200px

效果：

设置表格文字对齐方式（水平与垂直对齐方式可以同时设定）

代码：为td设置对齐方式——左（中）、右（中）、中（中）、（左）上、（左）下、（左）中、右上、右下、右中、中上、中下、中中。（括号内表示默认的对齐方式）

效果：

设置表格填充方式

代码：使得td的内容与table的每一个边线之间都有20px填充

效果：

设置表格颜色

代码：指定边框的颜色为绿色、3px细实线，和td元素的文本（白色）和背景颜色（黑色）

效果：

  • 文本属性

    • 设置文本对齐方式

      • 案例搭建：调整p标签中内容为“你好，前端人！”的文本对齐方式

        • 代码：左、右、中

          • <!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>Document</title>
    <style>
        .p1 {
            text-align: left;
        }
        .p2 {
            text-align: right;
        }
        .p3 {
            text-align: center;
        }
        </style>
</head>
<body>
    <p class="p1">你好，前端人！</p>
    <p class="p2">你好，前端人！</p>
    <p class="p3">你好，前端人！</p>
</body>

</html>

        • 效果：

    • 设置文本的修饰方式

      • 案例搭建：调整p标签中内容为“你好，前端人！”的文本修饰方式

        • 代码：下划线、上划线、删除线

          • <!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>Document</title>
    <style>
        .p1 {
            text-decoration: underline;
        }
        .p2 {
            text-decoration: overline;
        }
        .p3 {
            text-decoration: line-through;
        }
        </style>
</head>
<body>
    <p class="p1">你好，前端人！</p>
    <p class="p2">你好，前端人！</p>
    <p class="p3">你好，前端人！</p>
</body>

</html>

        • 效果：

    • 设置文本大小写

      • 案例搭建：调整p标签中内容为“hello wEB”的文本大小写

        • 代码：每个单词开头大写，全部大写，全部小写

          • <!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>Document</title>
    <style>
        .p1 {
            text-transform: capitalize;
        }
        .p2 {
            text-transform: uppercase;
        }
        .p3 {
            text-transform: lowercase;
        }
        </style>
</head>
<body>
    <p class="p1">hello wEB</p>
    <p class="p2">hello wEB</p>
    <p class="p3">hello wEB</p>
</body>

</html>

        • 效果：

    • 设置文本的首行缩进

      • 案例搭建：调整p标签中内容为““1. 人生最痛苦的是梦醒了无路可以走。做梦的人是幸福的；倘没有看出可走的路，最要紧的是不要去惊醒他。《娜拉走后怎样》一九二三年2. 我们目下的当务之急，是：一要生存，二要温饱，三要发展。苟有阻碍这前途者，无论是古是今，是人是鬼，是《三填五典》，百宋千元，天球河图，金人玉佛，祖传丸散，秘制膏丹，全都踏倒他。《忽然想到》一九二五年””的首行缩进。

        • 代码：30px表示对首行缩进两个字符的设定

          • <!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>Document</title>
    <style>
        .p1 {
            text-indent: 30px;
        }
        </style>
</head>
<body>
    <p class="p1">“1. 人生最痛苦的是梦醒了无路可以走。做梦的人是幸福的；倘没有看出可走的路，最要紧的是不要去惊醒他。《娜拉走后怎样》一九二三年2. 我们目下的当务之急，是：一要生存，二要温饱，三要发展。苟有阻碍这前途者，无论是古是今，是人是鬼，是《三填五典》，百宋千元，天球河图，金人玉佛，祖传丸散，秘制膏丹，全都踏倒他。《忽然想到》一九二五年”</p>
</body>

</html>

        • 效果：（负值是允许的。如果值是负数，将第一行左缩进）

  • 表格属性

    • 设置表格边框

      • 代码​​​​​​​：为table与td加边框

        • <!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>Document</title>
    <style>
        table,td {
            border: 1px solid black;
        }
        </style>
</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        </tr>
    </table>
</body>

</html>

      • 效果：

    • 设置表格折叠效果

      • 代码：将以上的边线进行折叠

        •     <style>
        table,td {
            border: 1px solid black;
        }
        table{
            border-collapse: collapse;
        }
        </style>
</head>

      • 效果：

    • 设置表格宽度与高度

      • 代码：为table设置高度为100ox，宽度为200px

        •     <style>
        table,td {
            border: 1px solid black;
        }
        table{
            border-collapse: collapse;
            width: 200px;
            height: 100px;
        }
        </style>
</head>
<body>

      • 效果：

    • 设置表格文字对齐方式（水平与垂直对齐方式可以同时设定）

      • 代码：为td设置对齐方式——左（中）、右（中）、中（中）、（左）上、（左）下、（左）中、右上、右下、右中、中上、中下、中中。（括号内表示默认的对齐方式）

        • <!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>Document</title>
    <style>
        table,td {
            border: 1px solid black;
        }
        table{
            border-collapse: collapse;
            width: 500px;
            height: 300px;
        }
        .td1{
            text-align: left;
        }
        .td2{
            text-align: right;
        }
        .td3{
            text-align: center;
        }
        .td4{
            vertical-align: top;
        }
        .td5{
            vertical-align: bottom;
        }
        .td6{
            vertical-align: center;
        }
        .td7{
            text-align: right;
            vertical-align: top;
        }
        .td8{
            text-align: right;
            vertical-align: bottom;
        }
        .td9{
            text-align: right;
            vertical-align: center;
        }
        .td10{
            text-align: center;
            vertical-align: top;
        }
        .td11{
            text-align: center;
            vertical-align: bottom;
        }
        .td12{
            text-align: center;
            vertical-align: center;
        }
        </style>
</head>
<body>
    <table>
        <tr><!--默认垂直为居中-->
            <td class="td1">单元格左（中）</td>
            <td class="td2">单元格右（中）</td>
            <td class="td3">单元格中（中）</td>
        </tr>
        <tr><!--默认水平为居左-->
            <td class="td4">单元格（左）上</td>
            <td class="td5">单元格（左）下</td>
            <td class="td6">单元格（左）中</td>
        </tr>
        <tr>
            <td class="td7">单元格右上</td>
            <td class="td8">单元格右下</td>
            <td class="td9">单元格右中</td>
        </tr>
        <tr>
            <td class="td10">单元格中上</td>
            <td class="td11">单元格中下</td>
            <td class="td12">单元格中中</td>
        </tr>
    </table>
</body>

</html>

      • 效果：

    • 设置表格填充方式

      • 如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性

        • 代码：使得td的内容与table的每一个边线之间都有20px填充

          • <!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>Document</title>
    <style>
        table,td {
            border: 1px solid black;
        }
        table{
            border-collapse: collapse;
        }
        .td1{
            padding: 20px;
        }
        </style>
</head>
<body>
    <table>
        <tr>
            <td class="td1">单元格有填充</td>
            <td class="td1">单元格有填充</td>
            <td class="td1">单元格有填充</td>
        </tr>
        <tr>
            <td >单元格</td>
            <td >单元格</td>
            <td >单元格</td>
        </tr>
    </table>
</body>

</html>

        • 效果：

    • 设置表格颜色

      • 代码：指定边框的颜色为绿色、3px细实线，和td元素的文本（白色）和背景颜色（黑色）

        • <!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>Document</title>
    <style>
        table,td {
            border: 3px solid green;
        }
        table{
            border-collapse: collapse;
            width: 300px;
            height: 200px;
        }
        td{
            background-color: black;
            color:white;
        }
        </style>
</head>
<body>
    <table>
        <tr>
            <td >单元格</td>
            <td >单元格</td>
            <td >单元格</td>
        </tr>
        <tr>
            <td >单元格</td>
            <td >单元格</td>
            <td >单元格</td>
        </tr>
    </table>
</body>

</html>

      • 效果：

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布