美文网首页
HTML5之CSS-网页文本美化-文本样式

HTML5之CSS-网页文本美化-文本样式

作者: Insecurity | 来源:发表于2018-03-25 14:21 被阅读82次

1.前言

    上篇文章,仅仅是介绍了CSS是如何设置字符本身的,font-style/font-weight/font-variant /font-famaliy/font-size.这篇文章是介绍如何设置文字的布局的。css 使用text- xx|| font-xx  来区分是设置文本还是设置字体。

2.文本样式  

    只需要明确一点,文本样式是针对整篇文章的布局。

 2.1文本是如何对齐的?-水平方向

    text-align: left |right |center |justify |inherit  

   对应中文: 文章-排列(对齐方式) : 左对齐|右对齐|居中对齐|继承

    提醒:继承指的是继承父元素的字体对齐方式;居中对齐,指的是随着窗口大小的调整.(疑问:如果一个单词足够长,当窗口的长度小于该单词的长度时,单词的容器元素会被撑开,并不会再随着窗口的缩小而缩小,这应该是浏览器的一种默认处理方式,猜测)

2.2 文本是如何对齐的?-垂直方向

vertical-align: auto | baseline | sub | super | top | text-top | middle|buttom|text-buttom|%

auto: layout-flow属性的值来定义的(注意  layout-flow:horizontal | vertical-ideographic  这些属性只有IE支持,用来操作是一列一列显示文本,还是一行一行显示文本。

baseline:标准值,也是默认值,平行于基准线。

sub/supper/top/text-top  向上移动,移动多少,纯在浏览器解析差别。

middle:居中 ,middle其实略低于baseline,并不代表baseline就是居中的,可理解为父元素的中部。

buttom/text-buttom/  向下移动,移动多少,纯在浏览器解析差别。

%:百分比的值是用来相对于line-height来设定的。0%代表baseline。

2.3如何定义单词以及字母的间距?

letter-spacing  字母间距 (中文有效)

word-spacing 单词间距(中文无效)

这两个属性,虽然用的比较少,但是感觉是实现一些酷炫文字效果的基础。

2.4如何定义行高?

    行高,可以理解为一行文字的容器,它是文字的寄生场所。也正因为如此,它的大小对文章的布局展示十分关键。css是如何去操作它的呢?

line-height:  length    

中文翻译:行-高 :具体长度值

(一般使用使用相对值,不推荐不使用绝对值,如果它的值小于文字本身的像素大小是会发生重叠的。)

2.5如何定义首行缩进?

中文习惯在段落首行缩进两个字符。(有一些新闻文章也是通过该值去实现一些悬垂效果。)

text-indent:2em ;

中文翻译:文本-缩进 : 2个字符

相关文章

  • HTML5之CSS-网页文本美化-文本样式

    1.前言 上篇文章,仅仅是介绍了CSS是如何设置字符本身的,font-style/font-weight/font...

  • HTML5之CSS-网页文本美化-字体样式

    做了挺长时间的程序员,逐渐的让我意识到,其实技术是给自己打开了一扇窗户,让自己更好的去了解这个世界。 今天,来...

  • CSS(四)文本样式设置

    颜色表及HTML代码(部分) 文本样式 文本样式:对齐方式、文本修饰文本转换、文本缩进.... 作用:美化、修饰页...

  • 前端之路-学习笔记(一)

    前端必须掌握的三个技能 HTML-负责网页的结构语义化。 CSS-负责网页的样式美化。 JS-负责网页的动态效果。...

  • 2. HTML网页和结构

    网页构成基本元素: HTML文本、JavaScript代码、CSS样式表以及各种各样资源文件 HTML5新特性:包...

  • CSS-文本类样式

    一、文本样式介绍 二、目录及代码 index.html index.css x

  • HTML---文本控制与文本样式标记

    1.段落标记 和换行标记 基本语法格式: 文本 2.文本样式标记 在HTML中,使用 标记控制网页中文本的样式。...

  • 上传文件 样式 自定义

    css input[type=file] 样式美化,input上传按钮美化 我们在做input文本上传的时候,ht...

  • 01-HTML常用标签

    HTML5: 是用来描述网页的一门超文本标记语言。对网页的文本(标签)定义语义。 标签定义文档的页眉。 标签用于定...

  • html概念学习总结

    html 超文本标记语言,是网页之骨。 结构样式行为分离 html只写结构,css只写样式,js只写行为。谁也不要...

网友评论

      本文标题:HTML5之CSS-网页文本美化-文本样式

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