文本屬性和字體屬性

時間 2019-11-07

標籤文本屬性字體简体版

原文原文鏈接

字體大小

font-size: 20px;

px：像素單位，固定大小
rem：移動端使用
em：移動端字體大小，1em爲一個字體大小，文字縮進將用em單位
%：百分比，盒子不設置寬度，繼承父盒子寬度，可設置爲父盒子的百分比

字體粗細

font-weight: bolder;

bolder：加粗
lighter：纖細
100-900：逐漸加粗
normal：默認的標準粗細
inherit：繼承父元素字體

設置字體

font-family: "Microsoft YaHei UI","微軟雅黑","Arial",sans-serif;

文字位置

text-align: center;

center：居中對齊

文字修飾

清除a標籤樣式html

text-decoration: none;

行高設置和盒子同樣的高度文本將垂直居中顯示web

line-height: 150px;

仿造a標籤，鼠標移動上去顯示小手狀態ide

cursor: pointer;

單行文本垂直居中顯示

將line-height:盒子高度;post

多行文本垂直居中顯示

經過對父級元素設置padding屬性來控制字體

padding-top=（盒子高度-（行高+字體大小）*行數）/2網站

font-family屬性設置字體

備選字體能夠用逗號分隔設置多個spa

font-size: 15px;
line-height: 20px;
font-family: "宋體";
/*上面三行等價於下面一行*/
font: 15px/20px "宋體";

網頁中不是全部字體均可使用，一般使用微軟雅黑、宋體、黑體，Arial，Times New Roman。用逗號隔開寫多個字體，逐個匹配。都沒匹配到則顯示宋體
全部中文字體都有對應的英文別名
行高可用百分比，表示字號的百分之多少

文本縮進

設置首行文字縮進，單位一般用em單位，1em等於一個字體大小。3d

text-indent: 2em;

超連接美化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超連接美化</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .bar{
            width: 960px;
            overflow: hidden;/*也能夠經過僞元素after來設置*/
            background-color: #666666;
            margin: 0 auto;
            /*設置邊框圓角*/
            -webkit-border-radius: 3px 3px 0px 0px;
            -moz-border-radius: 3px 3px 0px 0px;
            border-radius: 3px 3px 0px 0px;
        }
        /*.bar:after{*/
            /*content: "";*/
            /*display: block;*/
            /*clear: both;*/
        /*}*/
        ul li{
            list-style: none;
        }
        .bar ul li{
            float: left;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: white;
            font-family: "幼圓";
        }
        /*a標籤不繼承父元素的color屬性*/
        .bar ul li a{
            display: block;/*行內元素，必須設置成block後設置寬高*/
            color: white;
            text-decoration: none;
            width: 160px;
            height: 40px;
        }
        .bar ul li a:hover{
            background-color: #A9A9A9;
        }
    </style>
</head>
<body>
    <div class="bar">
        <ul>
            <li><a href="#">網站導航</a></li>
            <li><a href="#">網站導航</a></li>
            <li><a href="#">網站導航</a></li>
            <li><a href="#">網站導航</a></li>
            <li><a href="#">網站導航</a></li>
            <li><a href="#">網站導航</a></li>
        </ul>
    </div>
</body>
</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。