ICer应该知道的网页编程知识(五):CSS常见排版举例

前面介绍了CSS的概念,今天来举几个例子,说一说常见的CSS的使用方法。

常用的排版格式有哪些?

我们常说的排版不外乎以下这些:

文字:字体、字号、加粗、斜体、下划线、文字颜色、背景颜色等

对齐方式:左对齐、居中、右对齐

距离:外部间距margin、内部间距padding

边框:边框的粗细、线型、颜色、圆角边框等

示例一

效果如下

示例二

效果如下

Tips:

整个网页居中的方法是设定div的width,且左右margin为auto。

示例三

效果如下(Chrome右击,点“检查”)

Tips:

在CSS的边框模型里,边框由margin、border、padding三部分组成。上图中,margin是50,border宽度是1,padding是20。注意,方框div的宽度实际上包括border和padding。

示例四

效果如下

总结

font-family 字体

font-size 字号

font-weight 加粗

font-style 斜体

color 颜色

background-color 背景颜色

text-decoration 下划线

width 宽度

height 高度

border 边框

border-radius 圆角边框

text-align 对齐方式

margin 外部间距

padding 内部间距

更多更详细的CSS/CSS3的使用方法请查阅菜鸟教程:

http://www.runoob.com/css/css-tutorial.html

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181202G18U7Z00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券