DIVCSS 第二章 CSS文字与文本

[复制链接]
ARCHY明星会员实名认证 发表于 2012-8-30 23:55:37 [DIVCSS] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
今天是CSS的第二章,主要是3点内容:1、CSS 中长度与颜色;2、CSS 中的文字属性;3.CSS 中的文本属性。

一、CSS 中长度颜色

1、长度单位说明

in 英寸
cm 公分
mm 公里
cm 以目前字体高度为单位
ex 以小写字母高度为单位(大部分不支持)
pt 1pt/72英寸
pc 1pc/12pt
px 像素(推荐使用)

2、颜色单位: 说明

十六进制如:color:#ff0000
颜色名称如:color:red
三原色单位如:rgb(255,0,0)
一般最常用的是十六进制,三原色单位的原理【红(r),绿(g),蓝(b)】混合而成,每个值域在0-255之间。

二、CSS 中的文字属性

属性名称  属性值  说明
font-style  normal  正常显示
italic    斜体
font-variant normal  正常显示
     small-caps  将英文大小写字母写调为同宽
font-weight normal  正常显示
      bold 粗体
font-size  像素     字体大小
     百分比    字体大小
font-family  字体名称  设置字体名称

font属性简化的使用方法:

font:是否斜体 是否同宽 是否粗体 大小 字体名称
例如:
  1. font:italic bold 200 隶书
复制代码
三、CSS中的文本属性

属性名称  属性值   说明
color    十六进制  颜色
      英文名称  颜色
      三原色单位 颜色
letter-spacing normal  正常显示
      长度文本  间隔
word-spacing normal 正常显示
       数字单词  间距
white-space normal   文本自动处理换行
       pre    换行和空白受保护
      nowrap   强制在同一行显示
text-align  left     文字靠左
      right     文字靠右
      center    文字靠中
text-decoration none  正常显示
        underline  加上下划线
        overline   加顶线
        line-through 加删除线
text-indent   长度     首行缩进
        百分比    同上
line-height    像素     行高
       数字/百分比   行高
text-transform none     正常显示可以包含大,小字符
        capitalize   字符串第一个字符大写
        uppercase   设置大写字符
        lowercase    设置小写字符
vertical-align  sub       设置文字为下标。
       super       设置文字为上标。
        top      元件往上端靠齐。
       middle     设置文字是在中线位置。
       bottom     元件往下端靠齐。

第一次看CSS,请先查阅:第一章 CSS 入门基础
如果第一次接触css,建议先看看:10天学会HTML教程




上一篇:站帮网大讲堂 第五期 Discuz分类信息的制作和使用
下一篇:第三章 CSS背景与列表

大神点评8

坏小子 发表于 2012-9-26 09:53:27 [DIVCSS] 显示全部楼层
不错,感谢楼主
我是小鸟 发表于 2012-9-26 09:53:27 [DIVCSS] 显示全部楼层
一楼的位置好啊..  
我不服 发表于 2012-9-26 09:53:27 [DIVCSS] 显示全部楼层
勤奋真能造就财富吗?  
jingjinxin 发表于 2012-12-15 10:36:43 [DIVCSS] 显示全部楼层
好贴,学习了!感谢楼主分享。
天天加分 发表于 2012-12-26 10:08:31 [DIVCSS] 显示全部楼层
很难了解颜色的搭配啊!!
好玩的手机游戏http://www.88130.cn
sanenchi 发表于 2014-7-8 15:18:49 [DIVCSS] 显示全部楼层
这个如果不是实践 就很容易记不住!
寻找回忆的终点 发表于 2014-8-22 15:23:40 [DIVCSS] 显示全部楼层
很详细,楼主辛苦了!
智能建站www.3135.com
邦妮儿 发表于 2015-9-19 17:10:43 [DIVCSS] 显示全部楼层
工场是互联网教育践行者,针对互联网企业岗位提供在线直播,视频教程和多种形式的教学服务,帮助学习者快速进入互联网行业,并不断引进国内外先进的在线教育理念和技术,努力打造国内在线学习平台第一品牌
台品部落水玲珑店     一家专业做台湾特产的微店。
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表