Great job! You learned how to style an important aspect of the user experience: fonts!

Let's review what you've learned so far:

  1. The font-family property changes the typeface of text.
  2. Serif fonts have extra details on the ends of each letter. Sans-Serif fonts do not.
  3. Fallback fonts are used when a certain font is not installed on a user's computer.
  4. Google Fonts provides free fonts that can be used in an HTML file with the <link> element.
  5. Font size can be specified using pixels, ems, or percentages.
  6. The vertical spacing between lines of text can be modified with the line-spacingproperty.
  7. The horizontal spacing between words can be modified with the word-spacingproperty.
  8. The spacing between letters, the kernel, can be modified with the letter-spacingproperty.
  9. Text can appear bold with the font-weightproperty.
  10. Text can appear in italics with the font-style property.
  11. Text can appear in all uppercase or all lowercase with the text-transformproperty.
  12. Text can be aligned with the text-alignproperty.

So far, you've learned how to style color and fonts. Note, however, that all of the styling you've used is always applied to all elements of one type on a web page. For example, a pselector in the stylesheet targets all <p>elements on the web page. How can we be more selective about the elements we'd like to style?

In the next unit, you'll learn how to organize and label your HTML code so that you can be more selective with your CSS styling.

[codecademy]fonts in css的更多相关文章

  1. CSS 笔记二(Text/Fonts/Links/Lists)

    CSS Text 1> Text Color used to set the color of the text 2> Text Alignment used to set the hor ...

  2. CSS Web Fonts 网络字体

    Fonts 1. CSS font-family 在 CSS 中,可以使用 font-family 属性来指定字体,浏览器渲染文字时候会根据这个属性应用于元素.如果没有指定这个属性或者指定的字体不存在 ...

  3. CSS框架分析与网站的CSS架构

    框架(framework)是一个基本概念上的结构,用于去解决或者处理复杂的问题,是一种可复用的构架. 我们对CSS框架这个词比较陌生,但对于JavaScript框架就比较熟悉了,比如jQuery 但为 ...

  4. CSS速查列表-3-(font)字体

    CSS Fonts(字体) CSS字体属性定义 1.字体:font-family 属性设置文本的字体系列.p{font-family:"Times New Roman", Time ...

  5. Nuget包含css\js等资源文件

    <Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <TargetFramework>netst ...

  6. 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格

    什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...

  7. 9_bootstrap less 移动端

    chrome,firefox提供了"Device Emulation"功能,可模拟常见的各种浏览设备 android ADT或ios Xcode附带的设备模拟器,或第三方在线测试工 ...

  8. ASP.NET Core – 2300% More Requests Served Per Second

    http://www.ageofascent.com/asp-net-core-exeeds-1-15-million-requests-12-6-gbps/ ASP.NET Core – Excee ...

  9. iShare.js分享插件

    iShare.js是一个小巧的分享插件,纯JS编写,不依赖任何第三方库,使用简便. 为啥写这个插件? 因为在搭建个人blog时(还没有搭建好(¯﹃¯)),对目前国内比较受欢迎的分享插件都不太满意,主要 ...

随机推荐

  1. swiper插件几个容易忽略的地方

    以下内容为swiper4版本的 1.在我们用swiper插件做轮播的当我们左右滑动后会出现自动轮播停止了 此时我们需要在autoplay中 加上这个属性 autoplay:{ delay:1000, ...

  2. 安装Maven后使用cmd 执行 mvn -version命令 报错JAVA_HOME should point to a JDK not a JRE

    1. 可以执行maven指令,说明maven的配置没错 2. 打开cmd,在cmd输入: set JAVA_HOME=D:\Program Files\Java\jdk1.8.0_91 3. 再测试是 ...

  3. Delphi XE10.1 引用计数

      以往的Delphi版本,不支持接口的Weak,和UnSafe的引用,支持对象的Weak, UnSafe,而且仅在Android和Ios平台上支持. 现在Delphi XE10.1 Berlin终于 ...

  4. 基于STM32F103ZET6 HC_SR501人体红外感应

    这是最后的实验现象,有人走过会一直输出有人,离开范围时则输出没人 开发板 PZ6086L ,HC_SR501模块 这是HC_SR501的示意图,,VCC和GND不再多做介绍,5V供电就行, OUT接口 ...

  5. Node.js 引用 gm 包错误 Error: Could not execute GraphicsMagick/ImageMagick

    今天在学习前后台图像剪切时,下载了有图片剪切瑞士军刀之称的 GraphicsMagick. 给 gm.exe 配置了环境变量,在 npm 下好了 gm 的模块,但是运行却出现了错误. 错误如图: [E ...

  6. C#中的抽象方法,虚方法,接口之间的对比

    1.首先来看一看抽象类 抽象类是特殊的类,不能够被实例化:具有类的其他特性:抽象方法只能声明于抽象类中,且不包含任何实现 (就是不能有方法体),派生类也就是子类必须对其进行重写.另外,抽象类可以派生自 ...

  7. Oracle入门第四天(上)——表管理与数据处理

    一.常见数据库对象 1.基本对象 对应的对象英文名参考:https://docs.oracle.com/cd/B19306_01/server.102/b14220/intro.htm#sthref6 ...

  8. 20155306 《信息安全技术概论》实验二 Windows口令破解

    20155306 <信息安全技术概论>实验二 Windows口令破解 [实验目的] 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破解 [实验人数] 每组1 ...

  9. 《图说VR入门》——googleVR入门代码分析

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/53013843 作者:car ...

  10. phpcms 的模板更换

    刚安装完成后的phpcms ,自带的默认模板样式一般,可以自己换模板 首先打开phpcms文件夹,按照下图路径打开 default是存模板的文件夹 在里面新建一个文件夹 在default中主要用到的是 ...