繁星CSS3之旅-CSS基本样式-CSS文本

时间 2019-12-11

标签繁星 css3 css 之旅基本样式文本栏目 CSS 繁體版

原文原文链接

CSS文本css

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

经过文本属性，能够改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进。api

例：服务器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Apple Park</h1>
    <p id="p1">this Is a Apple Pen</p>
    <p id="p2">This is a Apple Pen</p>
    <p id="p3">this iS a Apple Pen</p>
    
</body>
</html>

p{
    color: red;
    text-align: center;
    padding-left: -1em;
    text-shadow: 100px 100px
    text-transform:capitalize;
}
h1{
    color: blue;
    text-align:center;
    text-indent: -2em;
    padding-left: 2em;
}
#p1{
    text-transform: capitalize;
}
#p2{
    text-transform: lowercase;
}
#p3{
    text-transform: uppercase;
}

效果图this

备注：text-transfrom有三个属性值：capitalize(将单词首字母所有变为大写，其他变小写);lowercase(将全部字母变成小写);uppercase(将全部字母变成大写)，以此来规范文本显得特别方便。spa

二、CSS3文本效果code

text-shadow:向文本添加阴影orm

word-wrap:规定文本的换行规则htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Apple Park</h1>
    <p id="p1">this Is a Apple Pen</p>
    <p id="p2">This is a Apple Pen</p>
    <p id="p3">this iS a Apple Pen</p>
    
</body>
</html>

p{
    color: red;
    text-align: center;
    padding-left: -1em;
    text-shadow: 100px 100px 2px #000000;
}
h1{
    color: blue;
    text-align:center;
    text-indent: -2em;
    padding-left: 2em;
}
#p1{
    text-transform: capitalize;
}
#p2{
    text-transform: lowercase;
}
#p3{
    text-transform: uppercase;
}

效果图：blog

备注：2px指的是背景效果的清晰度，越低越清晰。

word-wrap:规定文本的换行规则，属性值：normal

p{
    /*color: red;
    text-align: center;
    padding-left: -1em;
    text-shadow: 100px 100px 0.3px #000000;*/
    width: 100px;
    word-wrap: normal;}

小广告：科沃云，www.cowyun.com为中小型企业提供优质的香港主机、云空间、服务器租用等IDC服务，联系QQ:3259981688，可享6折优惠。