html+css字体有关属性

字体有以下几个属性：
font-size：12px-16px
font-weight: bold normal 字体的粗细
font-style：字形（斜体）
font-family：字体类（宋体）
color：字体的颜色

颜色的表达方式一般分为3种：a.颜色的英语（一般只在测试的时候用，开发不用）b.颜色代码（#fffff 开发的时候用，最好用；c.颜色函数：光学三原色：RGB(255,0,255)也在开发的时候用。
文本设置
文本字体默认大小：16px
对齐方式：text-align:right /left / center
行间距：line-height: px/ em
首行缩进: 2em（2个字体）（1em=1*font-size)

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
        #div1{

            text-align: left;
            text-indent: 2em;
            line-height: 1.2em;

        }
    </style>
</head>

<body>
<div id="div1">
    在容器里左对齐，16px字体大小，首行缩进，1.2倍行距在容器里左对齐，16px字体大小，首行缩进，1.2倍行距在容器里左对齐，16px字体大小，首行缩进，1.2倍行距在容器里左对齐，16px字体大小，首行缩进，1.2倍行距在容器里左对齐，16px字体大小，首行缩进，1.2倍行距在容器里左对齐，16px字体大小，首行缩进，1.2倍行距在容器里左对齐，16px字体大小，首行缩进，1.2倍行距在容器里左对齐，16px字体大小，首行缩进，1.2倍行距在容器里左对齐，16px字体大小，首行缩进，1.2倍行距在容器里左对齐，16px字体大小，首行缩进，1.2倍行距。

</div>
</body>
</html>

注：文字水平垂直都居中
让行高的值等于容器的高度

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
        #div1{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: #f40;
            color: #FFF; 
        }
    </style>
</head>

<body>
<div id="div1">
    水平垂直居中
</div>
</body>
</html>

这里写图片描述

border
border；符合元素，包括:width ,style ,color
可以一行写:border:1px solid #FFFFFF;
也可以单独设置：border-width
border-style
boder-left-color:左边颜色
boder-right-color:右边颜色
boder-top-color:上边颜色

透明色：transparent

小测验：画一个三角形
用border设置：div的宽高为0，border的width为100；设置其他三变为transparent：

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
        #div1{
            width :0px;
            height: 0px;
            border: 100px solid red;
            border-right-color:green;
            border-top-color:yellow;
            border-bottom-color:black;
        }
    </style>
</head>

<body>
<div id="div1"></div>
</body>
</html>

这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
        #div1{
            width :0px;
            height: 0px;
            border: 100px solid red;
            border-right-color:transparent;
            border-top-color:transparent;
            border-bottom-color:transparent;
        }
    </style>
</head>

<body>
<div id="div1"></div>
</body>
</html>

这里写图片描述

html+css字体有关属性

猜你喜欢