美文网首页
CSS学习3

CSS学习3

作者: 风林山 | 来源:发表于2016-10-31 15:15 被阅读0次

字体:

Css中有两种不同类型的字体系列

  • 通用字体系列-拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")
  • 特定字体系列-具体的字体系列(比如 "Times" 或 "Courier")

5 种通用字体系列:

  • Serif 字体
  • Sans-serif 字体
  • Monospace 字体
  • Cursive 字体
  • Fantasy 字体

各个属性说明:

属性 作用说明 备注
font-family 指定字体系列 代码1*
font-style 指定字体风格 说明1*
font-variant 字体变形 设定小型大写字母(代码2*)
font-weight 字体加粗 关键字 100 ~ 900 为字体指定了 9 级加粗度。数字 400 等价于 normal,而 700 等价于 bold。(代码3*)
font-size 字体大小 可以取绝对值或相对值,如果没有设定,默认大小是16像素 (16px=1em)。(说明2*)

代码1:

body {font-family: sans-serif;}//指定通用字体

h1 {font-family: Georgia;}//可以指定特定字体

h1 {font-family: Georgia, serif;}//可以指定多个,前者优先

p {font-family: Times, TimesNR, 'New Century Schoolbook',
Georgia, 'New York', serif;}//多词语的情况下,可以使用引号

说明1:font-style属性的三个值

  • normal - 文本正常显示
  • italic - 文本斜体显示
  • oblique - 文本倾斜显示

代码2:

p {font-variant:small-caps;}

代码3:

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

说明2:

  • 可以直接使用像素来设置字体大小。

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

  • 可以使用em 来设置字体大小,1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。

h1 {font-size:3.75em;} /* 60px/16=3.75em /
h2 {font-size:2.5em;} /
40px/16=2.5em /
p {font-size:0.875em;} /
14px/16=0.875em */

  • 可以结合使用百分比和 EM

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

相关文章

  • 07day

    CSS3动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes ...

  • 2018-08-15

    CSS动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规...

  • 我的前端学习规划

    1.向w3cSchool学习 细致学习html,css,html5,css3,javascript,jquery....

  • CSS学习(1)

    学习资源:1、学习CSS布局2、CSS 禅意花园3、CSS 开发者指南【MDN】4、HTML Dog5、CSS Z...

  • 学习计划

    学习网站:菜鸟教程学习目标:HTML+CSS+JS基础 2018.04.02 学习CSS3 字体学习JavaScr...

  • CSS3知识概要总结之基础篇(一)

    学习资源是慕课网的十天精通CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1...

  • 02 css的格式

    1 css的固定格式是什么2 编写css有什么注意点3 学习css主要学习什么东西

  • HTML CSS推荐学习

    国内版W3School 学习CSS布局 MDN HTML MDN CSS

  • 小猿圈web前端讲解CSS3阴影

    学习前端首先需要学习的就是css、html、css3,而其中css3又是运用做多的了,今天小猿圈web前端讲师就总...

  • 2018-09-19 css核心属性

    DAY4:CSS核心属性 学习目标 1、css浮动属性详解 2、css文本属性 3、css列表属性 4、css背景...

网友评论

      本文标题:CSS学习3

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