HTLM学习05-文本和字体

2019-03-18 本文已影响3人 coderhlt

1、文本属性

1.1、text-decoration(设置装饰线)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>

    <style>
        div{
            text-decoration: underline;/*下划线*/
        }

       h1{
            text-decoration: overline;/*上划线*/
        }


        span{
            text-decoration: line-through;/*中划线*/
        }

        a{

            text-decoration:none;/*none:无任何装饰线，可以去掉a元素默认的下划线*?
        }

    </style>
</head>
<body>
<div>我是div,带下划线</div>
<h1>我是h</h1>
<p>现价80元 ,<span>200元</span></p>
<a href="http://www.baidu.com">百度</a>
</body>
</html>

1.2、letter-spacing和word-spacing

letter-spacing:用来设置字符之间的间距。
word-spacing:用来设置单词之间的间距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <style>
        div{
            letter-spacing:20px;
        }
    </style>
</head>
<body>
<div>hellow世界</div>
</body>
</html>

屏幕快照 2019-03-18 上午10.16.13.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>

    <style>
        div{
            word-spacing:20px;
        }
    </style>
</head>
<body>
<div>hellow 世界</div>
</body>
</html>

屏幕快照 2019-03-18 上午10.20.09.png

注意： word-spacing 设置单词之间的间距，系统并不能智能第识别出一个单词，hellowworld对于系统来说是一个单词，而hellow world对于系统来说才是一个单词。系统只能根据空格去判断有几个单词。

1.3、text-transform

text-transform用于设置文字的大小写转换
capitalize:将每个单词的首字符变为大写。
uppercase:将每个单词的所有字符变为大写。
lowercase:将每个单词的所有字符变为小写。
建议开发中默认用小写字母，根据需要再通过text-transform属性来控制网页中英文字母的大小写，不要直接在HTML中固定死书写形式。

1.4、text-indent

text-indent：用于设置第一行内容的缩进。
text-align:可以用来设置元素内容在元素中的对齐方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试网页</title>
    <style>
        p{
            background-color: red;
            width: 200px;
            height: 400px;
            text-indent: 2em;//刚好缩紧两个文字， 2em 等于font-size * 2
            text-align: right;/* left:左对齐 right:右对齐 center:中间对齐 justify:两端对齐*/
        }
    </style>
</head>
<body>
 <p>
     我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我
     是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我
     是我是我是我是我是我是我是我是我是我是我是我是
 </p>
</body>
</html>

2、字体属性

2.1、font-size

常用的设置
100px: 表示100个像素单位
2em:表示父元素font-size*2。
100%=1em,200%=2em

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试网页</title>
    <style>
        body{
            font-size:20px ;
        }
        div{
            font-size:2em ;/*2em =20px*2 */
        }

        p{
            font-size: 200%;/* 200%=2em =20px*2 */
        }

    </style>
</head>
<body>
     <div>你好</div>
     <p>世界</p>
</body>
</html>

一般给body设置font-size就代表设置网页的默认字体大小，其他元素可以基于父元素设置字体大小，到时候只需要改变body的字体大小，其他元素都会按照比例改变。

2.2 font-family(设置字体名称)

font-family: "微软雅黑"
font-family:“Courier New”,"华文彩云";

font-family可以设置一个或者多个字体名称，系统会从左到右按照顺序选择字体，直到找到可用的字体为止。

一般情况下，英文字体只适用英文，中文字体同时适用于英文和中文。所以，如果希望中英文分别使用不同的字体，应该先将英文字体写在前面，中文字体写在后面。

2.3 font-weight(用于设置文字的粗细)

100|200|300|400|500|600|700|800|900:每一个数字表示一个重量。
normal:等于400 bold:等于700。

strong、b 、h1-h6等标签的font-weight默认是bold

2.4 font-style(用于设置文字的常规、斜体显示)

normal:常规显示
italic:用字体的斜体显示
oblique:文本倾斜显示

em、i、cite、address、var、dfn等元素的font-style默认就是italic。