CSS:Tutorial two

CSS:Tutorial two

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;
}

CSS:Tutorial two

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;
}

CSS:Tutorial two

 

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)

Font Size

The font-size property sets the size of the text.

Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.

Always use the proper HTML tags, like <h1> – <h6> for headings and <p> for paragraphs.

The font-size value can be an absolute, or relative size.

Absolute size:

  • Sets the text to a specified size
  • Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
  • Absolute size is useful when the physical size of the output is known

Relative size:

  • Sets the size relative to surrounding elements
  • Allows a user to change the text size in browsers

Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).

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.

 
CSS:Tutorial two
 
 

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.proxy.ustclug.org/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>

 

 

转载于:https://www.cnblogs.com/Nyan-Workflow-FC/p/10499559.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101061.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • python django环境搭建_Python 虚拟环境

    python django环境搭建_Python 虚拟环境python虚拟环境虚拟环境(virtualenvironment),它是一个虚拟化,从电脑独立开辟出来的环境。通俗的来讲,虚拟环境就是借助虚拟机来把一部分内容独立出来,我们把这部分独立出来的东西

  • 对贝叶斯理解以及解释贝叶斯函数「建议收藏」

    对贝叶斯理解以及解释贝叶斯函数「建议收藏」贝叶斯

  • 关于C++ const 的全面总结

    关于C++ const 的全面总结

    2021年12月15日
  • 《使用QSortFilterProxyModel实现QTreeView行列过滤》:系列教程之十

    《使用QSortFilterProxyModel实现QTreeView行列过滤》:系列教程之十一、QSortFilterProxyModel简介QSortFilterProxyModel的使用比较简单,我们在上一章,使用它来实现排序时,已经大概使用过了。本章我们主要使用它实现对QTreeView中行列的筛选过滤。它是一个model代理类,需要配合原始数据model使用。我们先来看看QSortFilterProxyModel的设置过滤器函数,如下:voidsetFilterRegExp(constQRegExp&regExp);参数QRegExp正则表达式类,其构造函数,包括p

  • 神经网络——最易懂最清晰的一篇文章「建议收藏」

    神经网络是一门重要的机器学习技术。它是目前最为火热的研究方向–深度学习的基础。学习神经网络不仅可以让你掌握一门强大的机器学习方法,同时也可以更好地帮助你理解深度学习技术。  本文以一种简单的,循序的方式讲解神经网络。适合对神经网络了解不多的同学。本文对阅读没有一定的前提要求,但是懂一些机器学习基础会更好地帮助理解本文。  神经网络是一种模拟人脑的神经网络以期能够实现类人工智能的机器学习技…

  • VS2008 WEB组件安装失败——解决办法[通俗易懂]

    VS2008 WEB组件安装失败——解决办法[通俗易懂]    最近在安装SqlServer2008R2时意外失败,错误从来没见过,原因无从查起。于是卸载了VisualStudio2008,然后把数据库和VS2008都重新装一遍,谁知道VS2008安装时竟然失败了,提示“WEB组件安装失败”。在网上查了下原因,很多人说的都是废话,结合部分有用的意见,我尝试了如下解决办法:  1、根据提示,是第一个组件“VisualStudioWeb…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号