文本属性和字体属性

最新推荐文章于 2024-11-10 22:36:15 发布

weixin_30267785

最新推荐文章于 2024-11-10 22:36:15 发布

阅读量116

点赞数

文章标签： ui

原文链接：http://www.cnblogs.com/yaya625202/p/9163440.html

版权

编辑本博客

字体粗细

font-weight: bolder;

bolder：加粗
lighter：纤细
100-900：逐渐加粗
normal：默认的标准粗细
inherit：继承父元素字体

设置字体

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

文字位置

text-align: center;

center：居中对齐

文字修饰

清除a标签样式

text-decoration: none;

行高设置和盒子一样的高度文本将垂直居中显示

line-height: 150px;

仿造a标签，鼠标移动上去显示小手状态

cursor: pointer;

单行文本垂直居中显示

将line-height:盒子高度;

多行文本垂直居中显示

通过对父级元素设置padding属性来控制

padding-top=（盒子高度-（行高+字体大小）*行数）/2

font-family属性设置字体

备选字体可以用逗号分隔设置多个

font-size: 15px;
line-height: 20px;
font-family: "宋体";
/*上面三行等价于下面一行*/
font: 15px/20px "宋体";

网页中不是所有字体都可使用，通常使用微软雅黑、宋体、黑体，Arial，Times New Roman。用逗号隔开写多个字体，逐个匹配。都没匹配到则显示宋体
所有中文字体都有对应的英文别名
行高可用百分比，表示字号的百分之多少

文本缩进

设置首行文字缩进，单位通常用em单位，1em等于一个字体大小。

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>