文字

相对长度单位:

px:像素点,像素就是显示器显示的一个点。
em:1em 等于当前的字体大小,例如:当前元素的字体大小为16px,那么1em = 16px。

字体font系列

1.font-size
font-size属性的值可以使用相对长度单位,也可以使用绝对长度单位【推荐使用像素单位px】
2.font-family
font-family属性用于设置字体.可以同时指定多个字体,中间以逗号隔开,如果浏览器    
          不支持第一个字体,则会尝试下一个,直到找到合适的字体。
如果字体名称包含空格或中文,则应使用引号括起

注意:
          在 CSS 中设置字体名称,可以直接写中文。但在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。
          而在CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。
          如:font-family: "\5FAE\8F6F\96C5\9ED1",表示设置字体为“微软雅黑”。
          字体的unicode编码可以通过escape() 来获得。

3.font-weight
font-weight属性用于定义字体的粗细,其可用属性值:lighter、normal(400)、 
                                bold(700)、bolder、100~900(100的整数倍),有继承性。

字体的加粗跟字体有关,比如:一种字体只有两种粗细程度的变化,那么normal 到bold 和到bolder都是一样的效果。
4.font-style
font-style属性用于定义字体风格可用属性值如下:
    normal:默认值,浏览器会显示标准的字体样式。
    italic:浏览器会使用斜体的字体样式显示,如果字体没有斜体,那么正常显示字体。
    oblique:浏览器会让文字倾斜显示
5.font综合设置
font:综合设置字体样式
选择器{font: font-style  font-weight  font-size/line-height  font-family;}
    必须保留font-size和font-family属性,否则font属性将不起作用。
    如 font: 12px/1.5 sans-serif;

letter-spacing:字间距

letter-spacing属性用于定义<字>/<字母>间距。其属性值可为不同单位的数值,允许使用负值,默认为normal。

word-spacing:单词间距

word-spacing属性用于定义<英文单词>之间的间距,对中文字符无效。和letter-spacing一样,其属性值可为不同单位的数值,允许使用负值,默认为normal。

line-height:行间距

line-height属性用于设置行间距【行高】。
line-height常用的属性值单位有三种,分别为像素px【用得多】,相对值em和百分比%。

行高可以跟单位,也可以不跟单位。但是意义不一样。
  font: 12px/1.5em '宋体';    
  font:12px/150%  '宋体';
  font:12px/1.5 '宋体';
  font: 12px/20px '宋体';
继承特性
  加上单位  先计算 后继承      是以父亲为基准 
  不加单位  先继承 后计算      是孩子根据自己的文字大小为基准

line-height:可以让单行文本垂直居中。
CSDN_1586240642437.jpg

text-decoration

text-decoration可用属性值如下:
  none:正常文本默认值
  underline:下划线
  overline:上划线
  line-through:删除线

text-decoration后可同时赋多个值

text-align:文字水平对齐

left  right  center

text-indent:首行缩进

text-indent属性用于设置段落首行文本的缩进,只能设置于块级标签。其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值, 建议使用em作为设置单位。

white-space:空白符处理

HTML源代码中无论有多少空格,在浏览器中只会显示一个空白符。

CSS中,white-space属性可设置空白符的处理方式:
      normal:常规(默认值),文本中的空格、空行无效,文字到达边界后自动换行。
      pre:预格式化,按文档的书写格式保留空格、空行原样显示。
      nowrap:强制文本不能换行【<br>除外】,除非遇到换行标记<br />;
              内容超出元素的边界会溢出,若超出浏览器页面会自动增加滚动条。

word-break:自动换行

normal       使用浏览器默认的换行规则,不打断单词显示
break-all   允许在单词内换行
keep-all    只能在半角空格或连字符处换行

word-wrap

normal  只在允许的断字点换行(浏览器保持默认处理)。
break-word  在长单词或 URL 地址内部进行换行。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,277评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,689评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,624评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,356评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,402评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,292评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,135评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,992评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,429评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,636评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,785评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,492评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,092评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,723评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,858评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,891评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,713评论 2 354

推荐阅读更多精彩内容

  • 简介:文字是网页中不可或缺的元素,css中关于文字的处理有很多的情形。CSS 字体属性定义文本的字体系列、大小、加...
    riverhh阅读 1,318评论 1 8
  • 学习目标 应用使用 css 字体样式完成对字体的设置使用 css 外观属性给页面元素添加样式使用常用的 emmen...
    jovelin阅读 1,096评论 0 0
  • CSS中的文字样式 (https://developer.mozilla.org/zh-CN/docs/Learn...
    wiiy阅读 1,667评论 0 51
  • 1.font字体 1.1 font-size:大小 作用:font-size属性用于设置字号 单位:可以使用相对长...
    zhouhao_180阅读 1,049评论 0 1
  • 字体是布局中重要的一个环节。对字体的调整影响到网页的整体效果。我们设置字体时,可以参照word里面对字体的调整,更...
    loster阅读 1,215评论 0 0