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


CSS文本

1、CSS文本屬性可定義文本外觀

通過文本屬性,可以改變文本的顏色、字符間距、對齊文本、裝飾文本、對文本縮進。

例:

<!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;
}

效果圖

備注:text-transfrom有三個屬性值:capitalize(將單詞首字母全部變為大寫,其余變小寫);lowercase(將所有字母變成小寫);uppercase(將所有字母變成大寫),以此來規范文本顯得特別方便。

2、CSS3文本效果

text-shadow:向文本添加陰影

word-wrap:規定文本的換行規則

<!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;
}

效果圖:

備注: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折優惠。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com