1、CSS Text

text color, text align...

Text Decoration

The text-decoration property is used to set or remove decorations from text.

The value text-decoration: none; is often used to remove underlines from links:

h1 {

  text-decoration: overline;

}

h2 {

  text-decoration: line-through;

}

h3 {

  text-decoration: underline;

}

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:

p.uppercase {

  text-transform: uppercase;

}

p.lowercase {

  text-transform: lowercase;

}

p.capitalize {

  text-transform: capitalize;

}

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text:

p {

  text-indent: 50px;

}

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

The following example demonstrates how to increase or decrease the space between characters:

h1 {

  letter-spacing: 3px;

}

h2 {

  letter-spacing: -3px;

}

Line Height

The line-height property is used to specify the space between lines:

Text Direction

he direction property is used to change the text direction of an element:

p {

  direction: rtl;

}

This is right-to-left text direction

<head>

<style>

p.ex1 {

  direction: rtl;

}

</style>

</head>

<body>

<p>This is the default text direction.</p>

<p class="ex1"><bdo dir="rtl">This is right-to-left text direction.</bdo></p>

</body>

Word Spacing

The word-spacing property is used to specify the space between the words in a text.

Text Shadow

The text-shadow property adds shadow to text.

The following example specifies the position of the horizontal shadow (3px), the position of the vertical shadow (2px) and the color of the shadow (red):

h1 {

  text-shadow: 3px 2px red;

}

2、CSS Fonts

Font Family

The font family of a text is set with the font-family property.

The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".

More than one font family is specified in a comma-separated list:

p {

  font-family: "Times New Roman", Times, serif;

}

p.sansserif {

  font-family: Arial, Helvetica, sans-serif;

}

Font Style

The font-style property is mostly used to specify italic text.

This property has three values:

normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Set Font Size With Pixels（16px）

Set Font Size With Em(1em)

To allow users to resize the text (in the browser menu), many developers use em instead of pixels.

The em size unit is recommended by the W3C.

1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em

h1 {

  font-size: 2.5em; /* 40px/16=2.5em */

}

h2 {

  font-size: 1.875em; /* 30px/16=1.875em */

}

p {

  font-size: 0.875em; /* 14px/16=0.875em */

}

Responsive Font Size

The text size can be set with a vw unit, which means the "viewport width".

That way the text size will follow the size of the browser window:

<!DOCTYPE html>

<html>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body>

</html>

Font Variant

he font-variant property specifies whether or not a text should be displayed in a small-caps font.

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

3、CSS Icons

The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome.

Add the name of the specified icon class to any inline HTML element (like <i> or <span>).

All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.)

Font Awesome Icons

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

</head>

<body>

<i class="fas fa-cloud"></i>

<i class="fas fa-heart"></i>

<i class="fas fa-car"></i>

<i class="fas fa-file"></i>

<i class="fas fa-bars"></i>

</body>

</html>

Bootstrap Icons

To use the Bootstrap glyphicons, add the following line inside the <head> section of your HTML page

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<i class="glyphicon glyphicon-cloud"></i>

<i class="glyphicon glyphicon-remove"></i>

<i class="glyphicon glyphicon-user"></i>

<i class="glyphicon glyphicon-envelope"></i>

<i class="glyphicon glyphicon-thumbs-up"></i>

</body>

</html>

Google Icons

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>

<body>

<i class="material-icons">cloud</i>

<i class="material-icons">favorite</i>

<i class="material-icons">attachment</i>

<i class="material-icons">computer</i>

<i class="material-icons">traffic</i>

</body>

</html>

CSS：Tutorial two的更多相关文章

CSS：Tutorial four
1.CSS Tables To specify table borders in CSS, use the border property. The example below specifies a ...
CSS：Tutorial three
1.CSS Links links can be styled differently depending on what state they are in. The four links stat ...
CSS：Tutorial one
1.Three Ways to Insert CSS External style sheet Internal style sheet Inline style External Style She ...
Hover.css：一组超实用的 CSS3 悬停效果和动画
Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...
CSS：opacity 的取值范围是 0~1
CSS:opacity 的取值范围是 0~1,难怪设置为 1~100 看不到效果.
CSS：CSS定位和浮动
CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...
CSS： word-wrap和word-break
最近修改页面排版的一些问题,发现关于内容分词换行有两个主要的CSS: word-wrap 和 word-break 特别是word-wrap还有个取值break-word,更使得这两个属性容易混淆. ...
CSS：不可思议的border属性
原文:Magic of CSS border property 译文:不可思议的CSS border属性译者:dwqs 在CSS中,其border属性有很多的规则.对于一些事物,例如三角形或者其它的 ...
Normalize.css：优化重置CSS默认属性
Normalize.css:优化重置CSS默认属性官方网站:http://necolas.github.io/normalize.css/ 项目仓库:https://github.com/necol ...

随机推荐

hadoop编程：分析CSDN注冊邮箱分布情况
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jdh99/article/details/37565825 hadoop编程:分析CSDN注冊邮箱分 ...
R中的data.table 快速上手入门
data.table包提供了一个非常简洁的通用格式:DT[i,j,by]. 可以理解为:对于数据集DT,选取子集行i,通过by分组计算j. 对比与dplyr等包,data.table的运行速度更快. ...
php 获取各类时间归类
//php获取今日开始时间戳和结束时间戳 $beginToday=mktime(0,0,0,date('m'),date('d'),date('Y')); $endToday=mktime(0,0,0 ...
CG group
Linux CGroup全称Linux Control Group, 是Linux内核的一个功能,用来限制,控制与分离一个进程组群的资源(如CPU.内存.磁盘输入输出等).这个项目最早是由Google ...
Oracle数据库安全（一）用户管理
一.预定义用户用户管理是Oracle数据库管理的核心和基础. 在创建Oracle数据库时,系统预定义创建的用户根据作用不同又可以分为以下3类管理员用户实例方案用户内置用户此外Oracle数据 ...
【JavaScript】写代码前的准备
1.搭建开发环境,编辑器推荐HBuilder,浏览器用谷歌. 2.编写一个HelloWorld程序. HelloWorld.html <!DOCTYPE html> <html> ...
深入解析Koa之核心原理
这篇文章主要介绍了玩转Koa之核心原理分析,本文从封装创建应用程序函数.扩展res和req.中间件实现原理.异常处理的等这几个方面来介绍,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参 ...
Android Gradle 构建工具(Android Gradle Build Tools)是什么？
转载地址:http://mrfu.me/android/2015/07/17/New_Android_Gradle_Build_Tools/ 译者地址:[翻]一览新的 Android Gradle 构 ...
SpringBoot ControllerAdvice
在Spring3.2中新增了@ControllerAdvice注解,可用于定义@ExceptionHandler @ModelAttribute @InitBinder,并应用到所有被@Request ...
Java 多线程 - 转载
下面是Java线程相关的热门面试题,你可以用它来好好准备面试. 1) 什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编 ...

CSS：Tutorial two