CSS3:文字属性
文字属性注意的细节:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML5+CSS3</title> <style> p { /*font-family: "unknow font","Microsoft Yahei";*/ font-family: "Times New Roman","Microsoft Yahei"; } </style> </head> <body> <!-- 1:如果设置的字体不存在,那么系统会使用默认的字体来显示宋体 2:如果设置的字体不存在,而我们又不想用默认的字体来显示怎么办? 可以给字体设置备选方案:font-family: "unknow font","Microsoft Yahei"; 3:如果想给中文和英文分别设置单独的字体,怎么办? 但凡是中文字体,里面都包含了英文;但凡是英文字体,里面都没有包含中文 也就是说中文字体可以处理英文,而英文字体不能处理中文 所以英文字体的设置要写在中文字体设置的前面:font-family: "Times New Roman","Microsoft Yahei"; 补充:在企业开发中最常见的字体有以下几个: 中文:宋体 (SimSun)/黑体(SimHei)/微软雅黑 (Microsoft YaHei) 英文:"Times New Roman"/Arial 以上字体,在操作系统中默认就有 因为中文字体其实都有自己的英文名称,所以是不是中文字体主要看能不能处理中文 --> <p>ABC这是一个段落</p> </body> </html>
文字属性的缩写格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML5+CSS3</title> <style> p { /*font-style:italic; font-weight:bold; font-size:10px; font-family:"Microsoft YaHei";*/ font:italic bold 10px "Microsoft YaHei"; } </style> </head> <body> <!-- p { font-style:italic; font-weight:bold; font-size:10px; font-family:"Microsoft YaHei"; } 缩写的格式为: p { font:italic bold 10px "Microsoft YaHei"; } 注意点: 1:在缩写格式中有的属性值可以省略,如:style , weight属性 2:在缩写格式中style和weight的位置可以互换 3:size与family两个属性不能省略且位置不能互换,size属性一定写在family的前面 --> <p>ABC这是一个段落</p> </body> </html>
文本相关属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML5+CSS3</title> <style> p { text-decoration:underline; } a { text-decoration: none; } .right { text-align: right; } </style> </head> <body> <!-- 1:文本装饰的属性 text-decoration:underline; 该属性的取值如下: underline:下划线 line-through:删除线 overline:上划线 none:常见用途就是去掉超链接的下划线 2:文本水平对齐的属性 text-align: right; 取值: right:右 left:左 center:居中 3:文本缩进的属性 text-indent: 2em 取值: 2em:em是单位,一个em代表缩进一个文字的宽度 --> <u>这是带下划线的文字</u> <s>这是带删除线文字</s> <o>这是带删除线文字</o> <p class="right">靠右对齐的文字</p> <p>这是段落</p> <a href="">超链接</a> </body> </html>