CSS3--How to add font and color styles to text-CSS Tutorial-php.cn

This chapter can make the text in your web page more beautiful

About some properties of text

font-family: Text font
font-size: Text size
color: Text color
##font- weight: text thickness
text-decoration: more styles of text

There are five series in total: sans-serif (no serif), serif (serif), monospace (equal width), cursive (cursive... this is the original intention), fantasy ( Fantasy?) See the image on the right

##How does font-family work in CSS

body {
	font-family: Verdana, Geneva, Arial, sans-serif;
}

Copy after login

Check if there is Verdana in the client's computer. If so, use Verdana to display the text. If not, check if there is Geneva. If not, check for Arial. If still not, check if there is sans-serif in the client. Font (generally every computer has a sans-serif font. Note: sans-serif is not a specific font) If the font name contains spaces, you can put that Add quotation marks around the name, like this: font-family: "Courier New", Courier;

If I really want users to be able to use the font I specify, but I don’t know if the user has this font

Web font is here!

How to use

#Find a font file: the suffix name is woff, svg, eot, otf, ttf

To place this font on the web, you can use Google's font hosting service, which is free

Add the @font-face attribute in CSS

@font-face {
	font-family:"Emblema One";
	src:url("www.某网站.com");
}/*那个网址就是字体URL */

Copy after login

Use it like a local font. Note that the place where you use the font must be @font After -family

Adjust the font size

There are three font units: px (pixel), %, em (which is a multiple, em=% divided by 100 )

h1 {
	font-size:220%;
}

Copy after login

There is also a way to specify the font size - keywords (xx-small, x-small, small, medium, large, x-large, xx-large)The size represented by each keyword is not necessarily certain, this has something to do with the client

So, how should I specify the size of the text

First of all, you can define the text size of through keywords. Through keywords, you can get the default size on the client side, which is the commonly used size on the other side.

After that, use percentage or em to adjust the size of other text (such as first-level titles) relative to the text size of . It is not recommended to use px pixels here

Font size, although you can accurately determine the size of the text, scaling will not be supported in older versions of IE browsers

Change font thickness

There are five keyword sizes, namely: bold (bold), bolder (thicker), inherit (inherit the thickness of the previous level), lighter (thinner), normal ( Ordinary)

There is also a way to set the font-weight to a number between 100 and 900 (a multiple of 100 )

Add style to the font

There are four types: inherit (inherit dad), italic (italic), normal (normal), oblique (inclined)

The difference between italic and oblique is that the former uses the italics of this font and is displayed in the font file, while the latter directly italics the regular words. . . But it seems to be about the same

颜色

Demo设置的颜色

body {
	background-color:red;
	background-color:rgb(80%, 40%, 0%);
	background-color:rgb(204, 102, 0);
	background-color:#66ccff;
}

Copy after login

这是四种设置颜色的方法，第一种是关键字，这个一般是小学生在用的吧，支持的颜色不多

第二种是使用rgb（red、green、blue）百分比，那些百分比意思是依次是红/绿/蓝的量（怎么说呢，越大就越含有这个颜色）

第三种和第二种相似，只不过从0%~100%改成了0~255

最后一种是十六进制码，意思是：

前两个代表红的十六进制、中间两个是绿的、最后两个是蓝的

把十六进制转成10机制就变成了第三种设置颜色的方法了

对于文本和背景，要使用对比度比较大的颜色，这样可读性才好

文本装饰（text-decoration）

不多说，直接看效果：blink inherit line-through none overline underline

BULLET POINTS

CSS provides many properties to control the appearance of fonts, including font-family, font-weight, font-size, font-style, etc.
font-family is a group of fonts with common characteristics
Font families used for the Web include serif, sans-serif, monospace, cursive , fantasy. serif and sans-serif are most commonly used
The fonts your visitors see on your web pages depend on what fonts are installed on their own computers, unless you use web fonts
It is a good idea to specify candidate fonts in the font-family CSS property in case the user does not have your preferred font installed
The last font to be For a generic font, such as serif or sans-serif, so that if it cannot find another font, the browser can substitute the appropriate font
If you want to use a certain font, While users may not have this font installed by default, you can use @font-face rules
The font size is usually specified by keywords, pixels px, percentage, em
If you use pixels to specify the font size, you are telling the browser how many pixels the letter height is
##em and % are relative font sizes, so use em When specifying a font size with %, it means that the font size is determined relative to the font size of its parent element
Using relative font sizes can make your page more maintainable
Use the font size keyword in the body rule to set the base font size so that if the user wants the text to be larger or smaller, all browsers can scale the font size proportionally
You can use the font-weight CSS property to make text bold
The font-style property is used to create italic or italic text. Italic or italic text is slanted
Web colors are obtained by mixing different amounts of red, green, and blue
If Mix red 100%, green 100%, blue 100% to get white, all 0% is black
There are 16 basic colors in CSS, and more than 150 extended colors
You can use red, green, and blue percentages to specify the color you want, or you can use numerical values (0~255), or hexadecimal codes
To find the hexadecimal code for the color you want, use the color picker tool in your image editing application.
The hexadecimal code representing a color has 6 digits. Each bit is indexed from 0 to F. The first two represent the number of red, the middle two are green, and the last two are blue.
You can use the text-decoration attribute Create an underscore for this. Underlined documents are often mistaken for link text by users, so use this attribute with caution

The above is the detailed content of CSS3--How to add font and color styles to text. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

css

source：php.cn

Previous article：Introduction to CSS box model and positioning Next article：box model in css

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

CSS3--How to add font and color styles to text

About some properties of text

##
body { font-family: Verdana, Geneva, Arial, sans-serif; }
Copy after login

Web font is here!

There are three font units: px (pixel), %, em (which is a multiple, em=% divided by 100 )
h1 { font-size:220%; }
Copy after login

First of all, you can define the text size of through keywords. Through keywords, you can get the default size on the client side, which is the commonly used size on the other side.

There are five keyword sizes, namely: bold (bold), bolder (thicker), inherit (inherit the thickness of the previous level), lighter (thinner), normal ( Ordinary)

There are four types: inherit (inherit dad), italic (italic), normal (normal), oblique (inclined)

颜色

对于文本和背景，要使用对比度比较大的颜色，这样可读性才好

文本装饰（text-decoration）

BULLET POINTS

CSS3--How to add font and color styles to text

About some properties of text

##body { font-family: Verdana, Geneva, Arial, sans-serif; }Copy after login

Web font is here!

There are three font units: px (pixel), %, em (which is a multiple, em=% divided by 100 )h1 { font-size:220%; }Copy after login

First of all, you can define the text size of through keywords. Through keywords, you can get the default size on the client side, which is the commonly used size on the other side.

There are five keyword sizes, namely: bold (bold), bolder (thicker), inherit (inherit the thickness of the previous level), lighter (thinner), normal ( Ordinary)

There are four types: inherit (inherit dad), italic (italic), normal (normal), oblique (inclined)

颜色

对于文本和背景，要使用对比度比较大的颜色，这样可读性才好

文本装饰（text-decoration）

BULLET POINTS

##
body { font-family: Verdana, Geneva, Arial, sans-serif; }
Copy after login

There are three font units: px (pixel), %, em (which is a multiple, em=% divided by 100 )
h1 { font-size:220%; }
Copy after login