文本
1.文本樣式
1.text-align:justify; 文本對齊方式。
2.text-indent:2em;首行縮進兩個字符。
3.font-weight:bold;字體加粗。
4.font-style:italic; 字體傾斜。
5.text-decoration: 橫線。
6.line-height: 行高。
7.letter-spacing:屬性增加或減少字符間的空白。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p{
text-align: justify;/*justify:兩端對齊（常用）*/
text-indent: 2em; /*文本首行縮進兩個字符*/
color: red;
font-size: 20px;/*字體大小*/
font-weight: bold;/*加粗*/
font-style: italic;/*傾斜*/
text-decoration: underline;/*劃線*/
line-height: 60px;/*行高*/
letter-spacing: 5px;
}
</style>
<title>文本樣式</title>
</head>
<body>
<p>新華社北京7月29日電（記者劉開雄）近日，針對國務院第四次大督查實地督查發現個別地方仍有企業頂風違規生產“地條鋼”問題，中共中央政治局常委、國務院總理李克強作出重要批示強調，督查工作就是要盯住重點問題持續不懈抓。取締“地條鋼”、化解過剩產能要堅定不移推進，防止死灰復燃。對頂風作案的要堅決依法嚴懲，對監管不力的要嚴肅問責，務必做到令行禁止。</p>
</body>
</html>結果：
（小應用：文本的垂直居中）
通過text-align和line-height相結合實現
事例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
}
</style>
<!--通過text-align和line-height相結合使用-->
<title>文本的垂直居中</title>
</head>
<body>
<div>傑</div>
</body>
</html>結果如下：
2.文本陰影
1.text-shadow: 10px 10px 10px blue;/*x的偏移 y的偏移 模糊距離 顏色
2. -webkit-text-stroke: 1px black;/*描邊（只支持谷歌瀏覽器；）
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p{
color: red;
font-size: 50px;
text-shadow: 10px 10px 10px blue;/*x的偏移 y的偏移 模糊距離 顏色*/
-webkit-text-stroke: 1px black;/*描邊（只支持谷歌瀏覽器，；）*/
}
</style>
<title>文本陰影</title>
</head>
<body>
<p>傑瑞教育</p>
</body>
</html>結果：
3.背景
1.background-color: 背景顏色。
2.background-ia=mage:url(“”);背景圖片。
3.background-size:圖片比例縮放。
4.background-repeat:圖片填充格式。
5.background-position:圖片位置。
6.background-origin:圖片顯示。
7.background-clip:裁剪方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#imgContainer{
border: 20px dashed yellow;
padding: 50px;
height: 400px;
background-color: red;/*背景顏色*/
background-image: url("../img/15438-106.jpg");/*背景圖片*/
background-repeat:no-repeat;/*圖片填充方式*/
/*背景圖片大小
cover（覆蓋）:圖片會等比例進行縮放，直至最小部分填滿容器，
有可能出現圖片顯示不全的效果
contain（包含）：圖片也是等比例縮放，直到最大部分填滿容器，
有可能出現圖片覆蓋不全的效果*/
background-size: 30% 30%;
background-position: -20px -20px;
/*background-origin 背景圖片起點
border-box 從外邊框開始顯示
padding-box 從內邊距開始
content-box 從內容處開始*/
background-origin: content-box;
/*裁剪方式*/
background-clip: padding-box;
}
</style>
<title>背景</title>
</head>
<body>
<div id="imgContainer">
新華社北京7月29日電（記者劉開雄）近日，針對國務院第四次大督查實地督查發現個別地方仍有企業頂風違規生產“地條鋼”問題，中共中央政治局常委、國務院總理李克強作出重要批示強調，督查工作就是要盯住重點問題持續不懈抓。取締“地條鋼”、化解過剩產能要堅定不移推進，防止死灰復燃。對頂風作案的要堅決依法嚴懲，對監管不力的要嚴肅問責，務必做到令行禁止。
</div>
</body>
</html>結果如下：
