HTML与CSS之文字文本

作者: JustinPenChia | 来源:发表于2016-10-29 09:22 被阅读244次

一.文字(font)

1.font-weight 文字着重

  bold      加粗
  normal    正常 

例如font-weight: bold;

2.font-style 文字倾斜

  italic    倾斜
  normal    正常  

例如: font-style: italic

3.font-size 文字大小(一般为偶数)

  50px      数字加单位
  默认字体大小为16px

例如:font-size: 50px;

4.font-family 字体(中文默认为宋体)

   格式:英文字体,"中文字体"//英文字符使用英文字体,中文字符使用中文字体

例如:font-family: charcoal,"楷体";

5.line-height 文字行高

行高代表一行文字在容器中所占的高度

如果行高的值与容器相等,那么文字就会竖直垂直居中

ps:测量多行文字的行高的方法:

        1.首先要知道文字的大小
        2.用ps测量两行文字之间的距离
        3.拿上面测量出来的距离除以2
        如果行高为奇数,文字的上边距少一像素,下边距多一像素

6.文字的复合样式:

格式:
font:font-weight font-style font-size(必需)/font-weight font-family(必需)
顺序不能乱
例如:
font: bold italic 26px/50px "微软雅黑";
font: 26px "微软雅黑";

二.文本(text)
1.color 颜色
值为几种颜色的表示方式
2.text-align 文本对齐方式

  left   左对齐(默认)
  center 居中对齐
  right   右对齐     

3.text-indent 首行缩进(em缩进字符)

  12px  缩进12像素
  1em   空出1个字符
  2em   空出2个字符
  em根据字体大小来计算的,字体不管怎么变1个em始终缩进一个字体大小

4.text-decoration 文本修饰

  underline     下划线
  overline      上划线
  line-through  中划线
  none           无    

5.letter-spacing 字母间距

  10px    数字加单位

6.word-spacing 单词的间距(以空格间距)

  10px   数字加单位(文本中的字需要用空格隔开)

7.white-space 强制不换行

  nowrap   不换行
  normal    换行
  英文与数字如果没有结束的话是不会换行的

8.word-break 词内换行

  break-word   让单词换行
  break-all    所有都不换行
  normal       正常

ps:空格有多大?

在宋体下,空格的大小是一个字体大小的一半,默认为8px

相关文章

  • HTML与CSS之文字文本

    一.文字(font) 1.font-weight 文字着重 例如font-weight: bold; 2.f...

  • 2018-12-03-12-09总结

    HTML-CSS-JS HTML:超文本标记语言 文本:文字 超文本:文字、图片、音频、视频、超链接等等。 CS...

  • 12-03代码总结

    12-3 ①HTML是什么 -超文本标记语言(文本,文字)—— 超文本 文字 图片 视频 音频 超链接 CSS是...

  • ## CSS基础-常见属性

    ## CSS基础-常见属性 # HTML被废弃的标签 # 字符实体 # CSS # 文字属性 # 文本装饰属性 #...

  • 多行文字的水平垂直居中

    单行文字垂直居中 知道容器的高度即可 html css 多行文字垂直居中 html css 多行文本溢出用省略号表...

  • 11.22 蓝鸥

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

  • 文字溢出容器省略号展示处理

    文字溢出容器,要打点展示 一、单行文本 HTML CSS 二、多行文本 多行文本溢出打点难以实现 不用技术实现直接...

  • HTML之CSS——CSS文本样式

    一.字体 https://www.w3school.com.cn/css/css_font.asp字体属性 1.f...

  • 前端入门系列

    前端HTML & CSS 基础入门(1)初识 前端HTML & CSS 基础入门(2)段落及文本 前端HTML &...

  • HTML+CSS前端基础实践总结

    HTML+CSS是前端开发的基础。HTML是超文本标记语言,使用文本和HTML来描述网页,定义页面的内容。CSS是...

网友评论

    本文标题:HTML与CSS之文字文本

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