CSS文字样式

作者: onweer | 来源:发表于2016-03-11 23:17 被阅读109次

文字大小: |xx-small|x-small|small|medium|large|x-large|xx-lager|

: large small 相对父元素的大或者小

文字字体:

font-family:"宋体","微软雅黑";
//解决多个系统兼容性问题 escape("微软雅黑")
font-family:"%u5FAE%u8F6F%u96C5%u9ED1" == font-family:"微软雅黑"

字体系列

  1. 衬线字体 serif
  2. 无衬线字体 sans-serif
    //一般为了兼容性都要加上当中的一个,避免当前系统没有设置的字体

衬线字体 无衬线字体

字体粗细

font-weight: normal(400) | bold(700) | bolder | lighter |100 ~ 900

字体风格

font-style: normal | italic(斜体,使用斜体样式,字体如果没有斜体样式就正常显示) |oblique(强制斜体)

字间距

letter-specing : 数字可以是负数
text-decoration: none //取消下划线
word-specing : 数字 字间距
//letter-spacing和word-spacing这两个属性都用来添加他们对应的元素中的空白。letter-spacing添加字母之间的空白,而word-spacing添加每个单词之间的空白。请大家注意,word-spacing对中文无效。(其实添加空格也可以有效)

行高

行高 == 0.5倍行距 + 文字Top + 文字Bottom + 0.5倍行距 注意有顺序,至上而下的
另一个定义: 两段文字之间 两条基线的距离
1.5em = 1.5 = 150%

文本修饰

text-decoration = none; //删掉修饰
text-decoration=underline //下划线
text-decoration=line-through //删除线
text-decoration: overline//顶线

空白处理

white-space :normal //超过div边界宽度就换行
white-space :nowarp // 只要没遇到换行符,一直往后放
white-space: pre // html原格式显示(计算源代码中的空格和换行)

自动换行

word-break :normal //不打断单词
word-break :break-all; //打断单词
word-break: keep-all // 不允许换行,除了遇到空格,换行

相关文章

  • CSS学习资源

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • 【2016年特别福利】史上最全CSS学习资料大全

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • 11.22 蓝鸥

    html5: html 内容 (文字、图片) 【xhtml+css】【html+css3】 css 样式(文字颜...

  • CSS篇

    CSS固定格式 标签名{要赋予的样式} CSS属性: 1.文字: font-style:文字样式 font-siz...

  • CSS格式化排版

    CSS格式化排版 (1)文字排版 文字排版--字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式...

  • 文字样式、盒子、布局与浮动的关系

    文字段落的样式属性 文字样式: 默认文字显示:placeholderplaceholder="要显示的字"在css...

  • 整理常用CSS

    字体属性:(font) CSS文字属性: CSS边框空白 CSS符号属性: CSS背景样式: 指定背景位置 CSS...

  • HTML&CSS笔记(2)

    CSS格式化排版 文字排版--字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性,如下: 不...

  • CSS格式化排版(文本、光标、背景、渐变、列表、表格、计数器)

    CSS格式化排版 文字排版 —— 字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性,比如b...

  • HTML5学习笔记(三)

    1.css格式化排版 文字排版-字体:我们可以使用 css 样式为网页中的文字设置字体.字号.颜色等样式属性.例:...

网友评论

    本文标题:CSS文字样式

    本文链接:https://www.haomeiwen.com/subject/kdhxlttx.html