Home > Web Front-end > CSS Tutorial > Introduction to attributes in css text style (with code)

Introduction to attributes in css text style (with code)

不言
Release: 2018-08-18 11:45:48
Original
1810 people have browsed it

This article brings you an introduction to the attributes in CSS text styles (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Set the text font - font-family
It is recommended to use English bold Arial for the attribute value;
Microsoft Yahei "Microsoft Yahei";
Song Dynasty "SimSun" improves loading speed;
Set optional fonts separated by commas)

index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>字体</title>
    <link href="index.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <p>
    设置文字字体属性值建议用英文黑体Arial; 微软雅黑 “Microsoft Yahei”;
    宋体“SimSun”;提高加载速度;设置可选字体用逗号隔开  
    </p> 
</body>
</html>
Copy after login

index.css

p{    font-family:"SimSun";}
Copy after login

2. Set text Size——font-size
index.css

p{    font-size:21px;}
Copy after login

3. Set the text to bold——font-weight
Attribute value: normal; normal
bold/bolder; bold
index.css

p{    font-weight:bold;}
Copy after login

4. Set the text to italic——font-style
Attribute value: italic;
index.css

p{    font-style:italic;}
Copy after login

5.Set English to small uppercase font
index.css

p{font-variant: small-caps;}
Copy after login

6.Set text color
index.css

p{    color:lightgreen;}
Copy after login

7.Set text background color
index.css

p{    background-color:lightblue;}
Copy after login

Related recommendations:

Example of css setting text properties

CSS property font (Font )_html/css_WEB-ITnose

Web page CSS style attributes: font font common sense_html/css_WEB-ITnose

The above is the detailed content of Introduction to attributes in css text style (with code). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template