css 相同的css属性_CSS中的标题侧属性

绝地灬酷狼 2023-03-05 12:54 47阅读 0赞

css 相同的css属性

## CSS | 字幕端属性 **(**CSS | caption-side Property**)** ##

**Introduction:**

**介绍：**

We deal with captions and tables daily while developing a web page but the little known fact is that captions can be positioned as one desires them to be. Therefore, for achieving such orientation many properties exist and one of the most prominent of them is the **caption-side property in CSS**.

在开发网页时，我们每天都会处理字幕和表格，但鲜为人知的事实是字幕可以按照人们的期望进行定位。 因此，为了实现这种定向，存在许多属性，而**CSS中**的**caption-side属性**是其中最突出的**属性之一** 。

**A Gist:**

**要点：**

The **caption-side** is a display property that makes it much easier to be implemented and thus the orientation of the caption can be altered. Now that we have a general idea of the property let us have a look at the formal definition of this property for a better understanding and what it is capable of.

**字幕侧**是一种显示属性，它易于实现，因此可以更改字幕的方向。 现在，我们对属性有了一个大致的了解，让我们看一下该属性的形式定义，以便更好地理解其功能。

**Definition:**

**定义：**

The **caption-side property** is used to specify the position where the caption of the table is supposed to be placed. This property can be applied to any element whose display property is set to **caption-side**.

**caption-side属性**用于指定应该放置表格标题的位置。 此属性可以应用于显示属性设置为**caption-side的**任何元素。

**Syntax:**

**句法：**

Element{
            caption-side : top|bottom;
        }

Therefore, it should be clear from the definition that the property is an easy-to-use property. However, the **caption-side property** can take two values and those are,

因此，从定义中应该清楚，该属性是易于使用的属性。 但是， **caption-side属性**可以采用两个值，分别是

*  bottom
    
    底部
 *  top
    
    最佳

Let us understand these properties one by one,

让我们一一理解这些特性，

### 字幕侧：底部 **(**caption-side : bottom**)** ###

The first value of the **caption-side property** is the Bottom value. This **caption-side** value is used to display the caption just below the table.

**caption-side属性**的第一个值是Bottom值。 **字幕侧的**值用于在表格下方显示字幕。

**Syntax:**

**句法：**

Element{
            caption-side : bottom;
        }

**Example:**

**例：**

<!DOCTYPE html>
    
    <html>
    
    <head>
        <style>
            table {
        
                caption-side: bottom;
            }
        </style>
    </head>
    
    <body>
        <h1>The caption-side Property</h1>
        <table border="1">
            <caption>Student record</caption>
            <tr>
                <th>Name</th>
                <th>Subject</th>
                <th>Marks</th>
            </tr>
            <tr>
                <td>Abc</td>
                <td>Compiler Design</td>
                <td>93</td>
            </tr>
            <tr>
                <td>xyz</td>
                <td>Operating System</td>
                <td>70</td>
            </tr>
            <tr>
                <td>uvw</td>
                <td>Maths</td>
                <td>66</td>
            </tr>
        </table>
    </body>
    
    </html>

**Output**

**输出量**

![CSS | caption-side Property | Example 1][CSS _ caption-side Property _ Example 1]

In the above example, it can be seen that the caption **"student record"** is below the table and the code was not even that hard, so go ahead and try it out yourself.

在上面的示例中，可以看到标题**“学生记录”**位于表格下方，并且代码的编写难度还不高，所以请继续尝试一下。

### 字幕侧：顶部 **(**caption-side : top**)** ###

The next value on the list of **caption-side property** is the top value. Just opposite to the Bottom value, this caption-side value is used to display the caption just above the table.

**标题侧属性**列表上的下一个值是最高值。 与Bottom值正好相反，此标题侧值用于在表格上方显示标题。

**Note**: The top value of this property is also the default value.

**注意** ：此属性的最高值也是默认值。

**Syntax:**

**句法：**

Element{
            caption-side : top;
        }

**Example:**

**例：**

<!DOCTYPE html>
    
    <html>
    
    <head>
        <style>
            table {
        
                caption-side: top;
            }
        </style>
    </head>
    
    <body>
        <h1>The caption-side Property</h1>
        <table border="1">
            <caption>Student record</caption>
            <tr>
                <th>Name</th>
                <th>Subject</th>
                <th>Marks</th>
            </tr>
            <tr>
                <td>Abc</td>
                <td>Compiler Design</td>
                <td>93</td>
            </tr>
            <tr>
                <td>xyz</td>
                <td>Operating System</td>
                <td>70</td>
            </tr>
            <tr>
                <td>uvw</td>
                <td>Maths</td>
                <td>66</td>
            </tr>
        </table>
    </body>
    
    </html>

**Output**

**输出量**

![CSS | caption-side Property | Example 2][CSS _ caption-side Property _ Example 2]

In the above example, it is clearly visible that the Top value works just opposite to the Bottom value as the caption **"student record"** is placed above the table.

在上面的示例中，由于标题**“学生记录”**位于表格上方，因此可以清楚地看到“顶部”值与“底部”值正好相反。

> 翻译自: [https://www.includehelp.com/code-snippets/the-caption-side-property-in-css.aspx][https_www.includehelp.com_code-snippets_the-caption-side-property-in-css.aspx]

css 相同的css属性

[CSS _ caption-side Property _ Example 1]: /images/20230208/c1339723ea6c4c05bd046d04303dc2bd.png
[CSS _ caption-side Property _ Example 2]: /images/20230208/0d6fae560fba496cb9628e9e8dbb02fb.png
[https_www.includehelp.com_code-snippets_the-caption-side-property-in-css.aspx]: https://www.includehelp.com/code-snippets/the-caption-side-property-in-css.aspx