1、font-style:字體樣式
設置字體傾斜樣式或者正常樣式。
取值:normal(正常)、italic(斜體)、oblique(斜體)
代碼↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } p{ font-size: 20px; line-height: 48px; color: red; font-family: "Consolas","Arial","微軟雅黑"; } .one{ font-style: normal; } .tow{ font-style: italic; } .three{ font-style: oblique; } </style> </head> <body> <p class="one">這是一個段落this is a paragraph,normal</p> <p class="tow">這是一個段落this is a paragraph,italic</p> <p class="three">這是一個段落this is a paragraph,oblique</p> </body> </html>
效果圖↓
italic屬性值會找一個有斜體的字體進行替換。
oblique0正常的文字斜體
復合屬性書寫↓
/*復合屬性書寫*/
.one{
font: italic bold 40px/200% "微軟雅黑";
}
2、文本
text-align:對齊
對齊方式:水平左對齊，水平右對齊，水平居中。
對應的屬性:left、right、center
與行數沒關系,默認左對齊
修改成局中，直接寫就可以。
代碼↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } p{ border: 1px solid red; height: 400px; width: 400px; font-size: 16px; line-height: 28px; font-family:"Arial","微軟雅黑"; text-align: center; } </style> </head> <body> <p>這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字</p> </body> </html>
效果圖↓
因為前面文字把格都占滿了所以只最后一行局中顯示。
3、text-indent:文本縮進
設置的是文本的首行縮進。
單位:em，px，百分比
em:
代碼↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 400px; height: 400px; border: 1px solid red } p{ width: 300px; font-size: 16px; line-height: 28px; font-family:"Arial","微軟雅黑"; text-indent: 2em; } </style> </head> <body> <div class="box"> <p>這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字</p> </div> </body> </html>
效果圖↓
2em縮進2個字符
px:
代碼↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 400px; height: 400px; border: 1px solid red } p{ width: 300px; font-size: 16px; line-height: 28px; font-family:"Arial","微軟雅黑"; text-indent: 80px; } </style> </head> <body> <div class="box"> <p>這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字</p> </div> </body> </html>
效果圖↓
百分比：
代碼↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 400px; height: 400px; border: 1px solid red } p{ width: 300px; font-size: 16px; line-height: 28px; font-family:"Arial","微軟雅黑"; text-indent: 10% } </style> </head> <body> <div class="box"> <p>這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字這有很多文字</p> </div> </body> </html>
效果圖↓
10%:參考父級寬度的10
圖解↓
p的寬度300px，夫盒子400px，所以40是依據父盒子寬度的百分比。
4、text-decoration:文本修飾
對於文本整體樣式的一個修飾效果。
常見的四種樣式:
正常，沒有修飾:none；
下划線:underline；
中划線，刪除線:line-through；
上划線:overline
a標簽不同，a標簽默認的屬性是下划線，其他文本默認的屬性是none
代碼↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } p{ color: red; font: 20px/38px "宋體"; } .p1{ text-decoration: none; } .p2{ text-decoration: underline; } .p3{ text-decoration: line-through; } .p4{ text-decoration: overline; } </style> </head> <body> <p class="p1">正常文本</p> <p class="p2">下划線</p> <p class="p3">中划線</p> <p class="p4">上划線</p> <a href="#">這是一個超鏈接</a> </body> </html>
效果圖↓
