CSS邊框及常用樣式

本文轉載自查看原文 2018-02-08 11:34 1561 web開發基礎

一、CSS設置樣式

　　1.1 邊框border

　　作用：設置標簽周圍的邊框，方法 board：寬度樣式顏色，一般情況下樣式使用 solid實體的，和dotted虛線的

<head>
    <meta charset="UTF-8">
    <title>css邊框</title>
    <style>
        .c1{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="c1">
    今天天氣真好
</div>
</body>

border

　　此外還有 border-top,border-left,border-right，border-bottom,分別是邊框頂部，邊框左邊，邊框右邊，邊框底部

　　1.2 高度height

　　作用：設置標簽的高度的，使用方法：height：高度大小，可以是具體的數字大小比如說：20px，也可以是百分比：80%，但是高度沒有固定的值，這個設定要在一個邊框內，否則沒有意義。　　

<head>
    <meta charset="UTF-8">
    <title>css邊框</title>
    <style>
        .c1{
            border: 1px solid red;
            height: 80px;
        }
    </style>
</head>
<body>
<div class="c1">
    今天天氣真好
</div>
</body>

height

　　1.3 寬度width

　　作用：設置標簽的寬度，使用方法：width：寬度大小，這個跟上面的height是一樣的，可以是具體大小：50px，也可以根據瀏覽器大小設置為百分比：80%　　

    <style>
        .c1{
            border: 1px solid red;
            height: 80px;
            width: 70%;
        }
    </style>

width

　　1.4 字體大小 font-size

　　作用：設置標簽內的字體大小，使用方法：font-size:字體大小，示例：font-size:20px　

<style>
    .c1{
        border: 1px solid red;
        height: 80px;
        width: 70%;
        font-size:20px;
    }
</style>

font-size

　　1.5 字體顏色 color

　　作用：設置標簽內的字體顏色，使用方法： color：顏色，示例：color：red

<style>
    .c1{
        border: 1px solid red;
        height: 80px;
        width: 70%;
        font-size:20px;
        color: blue;
    }
</style>

color

　　1.6 字體加粗 font-weight

　　作用：給你標簽內的字體加粗。使用方式：font-weight：bold

<style>
    .c1{
        border: 1px solid red;
        height: 80px;
        width: 70%;
        font-size:20px;
        color: blue;
        font-weight: bold;
    }
</style>

font-weight

　　1.7 水平居中

　　作用：能把標簽內的字體，進行水平居中。使用方法：text-align:center　

<style>
    .c1{
        border: 1px solid red;
        height: 80px;
        width: 70%;
        font-size:20px;
        color: blue;
        font-weight: bold;
        text-align: center;
    }
</style>

text-align

　　1.8 垂直居中

　　作用：能把標簽內的字體，進行水平居中。使用方法：line-height：標簽高度值。　　

<style>
    .c1{
        border: 1px solid red;
        height: 80px;
        width: 70%;
        font-size:20px;
        color: blue;
        font-weight: bold;
        text-align: center;
        line-height:80px;
    }
</style>

line-height

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS外邊框、邊界樣式常用組合 css中的邊框樣式 css邊框發光樣式總結CSS 邊框樣式代碼 css實現圖像邊框的樣式 CSS邊框閃爍呼吸樣式 CSS實現對角邊框樣式給css邊框設置陰影樣式用css樣式，為表格加入邊框用CSS改變表格邊框樣式