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>
效果图↓
