前端工程师教程
前端工程师教程

web前端入门到实战：css排版常用样式、三种不同html类型、css布局盒模型介绍

把CSS样式与网页编排通过网页排版中主要格式化要素实现网页实用性与欣赏性相结合，实现出设计效果。

  1. 字体：div{font-family: “Microsoft Yahei”;}为网页中的文字设置字体为微软雅黑,这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）现在一般网页喜欢设置“微软雅黑”，如下代码：body{font-family:“Microsoft Yahei”;}或body{font-family:“微软雅黑”;}注意：第一种方法比第二种方法兼容性更好一些。当然了如果你想用特殊字体怎么办了？通过css3的自定义字体实现@font-face{ font-family:dhnblog;src:url(‘images/fzm.ttf’);}/自定义字体类型/
  2. 字号、颜色：div.box{font-size: 14px;color: #f90;} 设置网页中文字的字号为14像素，并把字体颜色设置为#f90；此外颜色分为3种表现形式：a.rgb（255,255,255）b.英文单词c.16进制，如#f90
  3. 粗体：如果想为文字设置粗体除了使用h1-h6或strong标签，还可以通过css样式font-weight: bold;对文本加粗
  4. 斜体：通过css样式font-style:italic;实现文字斜体功能，效果等同于标签，文本正常font-weight:normal;
  5. 下划线：text-decoration: underline;/下划线/
  6. 删除线：淘宝京东等电商购物网站常见的字体删除线通过text-decoration: line-through;/删除线/效果等同于
  7. 缩进：书写习惯段落前空2格，这个通过text-indent: 2em;/首行缩进/实现这个特殊样式，其中2em的意思就是文字的2倍大小。
  8. 行间距（行高）：line-height/行间距（行高）属性/，如下代码line-height: 2em;实现设置段落行间距为2倍。
  9. 中文字间距、字母间距：其中letter-spacing是/字间距，单词与单词间距/word-spacing为/字母间距/
  10. 对齐：通过text-align可以设置块状元素中的文本、图片2端对齐，居中，左右展示等
 1 
 2 
 3     
 4         
 5         CSS格式化排版
 6         
28     
29     
30         
首先应该知道为什么学习，而不要盲目地为了学习而学习。 学习最重要的就是态度，态度和方式决定结果。 需要从根本上认为学习是一件值得的事情，从思想上端正才会有学习的劲头。 很多实例表明不同的心态会有不一样的学习效果，要以健康乐观的心态去学习，能成为怎样的学生都是由自己决定的。 行为决定命运，有的人学习是为了充实自己或者找工作，所以需要明白自己究竟是为什么学习。The first thing to know is why you should learn, not blindly to learn. The most imdelortant thing to learn is attitude. Attitude and method determine the outcome. You need to fundamentally think that learning is a worthwhile thing. Only when you are ideologically correct can you have the motivation to learn.

31     
32

通过CSS格式化排版实现网页设计效果，学习盒模型为网页设计奠定扎实的基础，它是CSS布局的基石，下面总结盒模型的概念、结构、尺寸：

在了解CSS布局之前，我们需要提前知道一些知识，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

☆块状元素：
、
、
...
、
    、