温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Css基本样式————文本

发布时间:2020-07-09 16:48:28 来源:网络 阅读:382 作者:yeleven 栏目:开发技术

一、CSS文本属性可定义文本外观


二、通过文本属性,可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进


三、常用属性:

    color        文本颜色

body{
    color: aqua;
}
<body>
    <p>查看颜色</p>
</body>

这里给body设置color,在p标签中可以看到效果

说明color这个属性是可以继承的

    direction        文本方向

    line-height        行高

    letter-spacing        字符间距

    text-align        对齐元素中的文本

p{
    color: red;
    text-align: right;
}
<body>
    <p>Hello World</p>
</body>

    text-decoration        向文本中添加修饰

    text-indent        缩进元素中文本的首行

h4{
    text-indent: 2em;
}
<body>
    <div>
        <h4>静夜思</h4>
        <p>床前明月光</p>
        <p>疑是地上霜</p>
        <p>举头望明月</p>
        <p>低头思故乡</p>
    </div>
</body>

也可以按百分比缩进

    text-transform        元素中的字母

p{
    text-transform: capitalize;
}
<body>
    <div>
        <p>there is a beautiful girl</p>
        <p>a so lovely girl</p>
        <p>i always tell myself "never give up,never give up, never give up!"</p>
    </div>
</body>

capitalize:把所有单词的首字母大写

lowercase:全部变小写

uppercase:全部变大写

inherit(中文意思为“继承”):默认方式(不改变原文内容)

    unicode-bidi        设置文本方向

    white-sapce        元素中空白的处理方式

    word-spacing        字间距


四、CSS3文本效果:

    text-shadow:向文本添加阴影

p{
    text-shadow: 5px 5px 5px #FF0000;
}
<body>
    <div>
        <p>there is a beautiful girl</p>
        <p>a so lovely girl</p>
        <p>i always tell myself "never give up,never give up, never give up!"</p>
    </div>
</body>

text-shadow需要设置4个值

第一个值:相对于原本文字距左的距离

第二个值:距当前文本上方的位置

第三个值:清晰度

第四个值:背景颜色

    word-wrpa:规定文本的换行规则

p{
    width: 100px;
    text-wrap: normal;
}

width:100px;    设置p元素整体宽度为100

text-wrap:normal;    自动换行

此外还有一个功能

如果<p></p>内写的是英文,"text-wrap"这个属性不会把当前的文字拆开(这个效果非常不错)







向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI