繁星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折優惠。