Web开发之CSS格式化排版
2017-02-28 10:36
309 查看
本文根据慕课网整理:http://www.imooc.com/code/2076
注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)
现在一般网页喜欢设置“微软雅黑”,如下代码:
或
注意:第一种方法比第二种方法兼容性更好一些。
因为这种字体即美观又可以在客户端安全的显示出来(用户本地一般都是默认安装的)。
文字排版
设置文字字体、字号和颜色
body{ font-family:"Microsfot Yahei"; /*设置字体为“微软雅黑”*/ font-size:20px; /*设置字体大小为20px*/ color:red; /*设置字体颜色为红色*/ }
注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)
现在一般网页喜欢设置“微软雅黑”,如下代码:
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微软雅黑";}
注意:第一种方法比第二种方法兼容性更好一些。
因为这种字体即美观又可以在客户端安全的显示出来(用户本地一般都是默认安装的)。
设置文字粗体、斜体、下划线和删除线
p{ font-weight:bold; /*设置文字粗体*/ font-style:italic; /*设置文字为斜体*/ text-decoration:underline;/*给文字添加下划线*/ text-decoration:line-through; /*设置文字删除线*/ }
段落排版
设置段落缩进、行间距(行高)、中文字间距、字母间距和对齐方式
p{ text-indent:2em;/*设置段落缩进,2em代表文字的2倍大小*/ line-height:2em;/*设置行间距2em*/ letter-spacing:20px;/*设置中文字间距或英文中字母与字母的间距*/ word-spacing:20px;/*设置英文单词之间的间距*/ text-align:left;/*设置对齐方式*/ }
相关文章推荐
- Web前端开发基础 第四课(CSS文字和段落排版)
- Web开发四书五经之二:CSS与XML
- 开发基于Web的CSS设计器
- WEB开发中必须了解的HTML和css
- WEB开发的那些基础知识(3)--CSS的布局
- Web开发的未来HTML5 CSS JavaScript
- WEB开发中代码自动格式化注意事项
- Web前端开发:DIV+CSS网页布局总结
- Web前端开发之CSS工具列表(经典)
- Web前端开发之CSS工具列表(经典)
- 开发基于Web的CSS设计器.代码参考
- ASP.NET Web 开发中的静态资源(JS、CSS、图片)版本控制
- Web开发学习心得4——CSS盒模式与排版
- [Web开发] PSD 转换成HTML/CSS 的工具网站
- 高性能WEB开发 JS、CSS的合并、压缩、缓存管理
- 开发基于Web的CSS设计器.代码参考
- [Web开发] PSD 转换成HTML/CSS 的工具网站
- web开发中怎么样使css书写规范?
- [9月20日-21日] Web开发网络课堂第二讲:利用CSS设置网站样式和布局
- Web前端开发规范文档(css/javascript)