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 ...

随机推荐

Swift学习笔记四：数组和字典
Swift 提供两种集合类型来存储集合,数组和字典. 数组是一个同类型的序列化列表集合.字典是一个能够使用相似于键的唯一标识符来获取值的非序列化集合.也就是说数组是有序的.字典是无序的. 一. 数 ...
Java集合（7）：HashMap
一.HashMap介绍 HashMap是基于哈希表的 Map 接口的实现,以key-value的形式存在.在HashMap中,key-value总是会当做一个整体来处理,系统会根据hash算法来来计算 ...
CSS小知识---回到顶部
所需js文件 <script type="text/javascript" src="js/jquery-1.11.3.js"></scrip ...
什么是jstack
以下是百度百科的内容 jstack是java虚拟机自带的一种堆栈跟踪工具. jstack用于生成java虚拟机当前时刻的线程快照.线程快照是当前java虚拟机内每一条线程正在执行的方法堆栈的集合,生成 ...
Hive2.2.1安装使用
解压缩hive安装包tar zxvf apache-hive-2.1.1-bin.tar.gz 安装mysqlsudo yum install mysql-server 安装 mysql connec ...
CentOS7种搭建FTP服务器
1．安装vsftpd #首先要查看你是否安装vsftp [root@localhost /]# rpm -q vsftpd vsftpd-3.0.2-10.el7.x86_64 ...
Ubuntu启动文件破坏启动恢复方法
reboot后主机登录显示如下图: 解决步骤: 1.fs0:(回车) 2.edit startup.nsh 3.添加下面字段: fs0: cd EFI/ubuntu grubx64.efi 4.重启即 ...
gvim中对变量的识别
最近在项目中使用gvim打开一个文件,发现对某个变量不识别. 后来发现是gvim中对{$comm_ver},带花括号的变量不识别. 类似这样:parameter memory_spec = " ...
解决Vim插入模式下backspace按键无法删除字符的问题【转】
本文转载自:https://blog.csdn.net/zxy987872674/article/details/64124959 最近使用某个服务器编辑文件时,快捷键i进入插入模式后,下方不出现in ...
OCR训练数据生成方法
有的时候我们训练网络的时候,数据集在收集的过程中由于种种原因导致图像收集的不完整,比如某些种类很少,或者没有,这个时候我们就可以考虑自己生成数据集. 这个和data augmentation还不太一样 ...

CSS：Tutorial two