Community
Learn
Tools Library
AI Tools
Leisure
search
English
search
logo
  • Sign In
  • Sign Up
Password reset successful

Follow the proiects vou are interested in andi aet the latestnews about them taster

CSS Text(text)

CSS Text Format

Text Color

The color property is used to set the color of the text.

Colors are most often specified via CSS:

A hexadecimal value - such as "#FF0000"

An RGB value - "RGB (255,0,0 )"

The name of the color - such as "red"

##Example

The background color of a web page refers to the selection within the body: 

     <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        body {color:red;}
        h1 {color:#00ff00;}
        p.ex {color:rgb(0,0,255);}
    </style>
</head>

<body>
<h1>这是标题</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义的默认文本颜色选择器。</p>
<p class="ex">这是一段使用class选择器定义的p。这段文字是蓝色的。</p>
</body>
</html>

Run the program to try it

The text Alignment

#The text alignment property is used to set the horizontal alignment of text.

Text can be centered or aligned to the left or right, justified on both ends.

When text-align is set to "justify", each line is expanded to have equal width, and the left and right margins are Alignment (such as magazines and newspapers)

       <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>

<body>
<h1>CSS text-align 实例</h1>
<p class="date">2015 年 3 月 14 号</p>
<p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
</body>

</html>

Run the program to try it

Text-decoration

text-decoration Properties are used to set or remove text decoration.

From a design perspective, the text-decoration attribute is mainly used to remove the underline of the link: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        a {text-decoration:none;}
    </style>
</head>

<body>
<p>链接到: <a href="//m.sbmmt.com">链接到: php中文网</a></p>
</body>

</html>

Run the program and try it

Text Conversion

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

can be used to make all words uppercase or lowercase, or to capitalize the first letter of each word. 

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p.uppercase {text-transform:uppercase;}
        p.lowercase {text-transform:lowercase;}
        p.capitalize {text-transform:capitalize;}
    </style>
</head>

<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>

Run the program and try it

Text indent

The text indent property is used to specify the text The indentation of the first line. 

     <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p {text-indent:50px;}
    </style>
</head>
<body>

<p> php中文网(m.sbmmt.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。同时本站中
    也提供了大量的在线实例，通过实例，您可以更好的学习编程。..</p>

</body>
</html>

Run the program and try it

Example

Increase the blank space between words

     <html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style type="text/css">
        p
        {
            word-spacing:30px;
        }
    </style>
</head>
<body>

<p>
    This is some text. This is some text.
</p>

</body>
</html>

Run the program and try it

CSS text properties

PropertiesDescriptioncolorSet the text colordirectionSet the text direction. letter-spacingSet character spacingline-heightSet line heighttext-alignAlign text within an elementtext-decorationAdd decoration to texttext-indentIndent the first line of text in the elementtext-shadowSettings Text-shadowtext-transformControl letters in elementsunicode-bidiSettings Or returns whether the text has been rewritten vertical-alignSet the vertical alignment of the elementwhite-spaceSet the processing method of whitespace in elementsword-spacingSet the word spacing



Continuing Learning
new file
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p {text-indent:50px;} </style> </head> <body> <p>php中文网(m.sbmmt.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。..</p> </body> </html>
Reset Code
Automatic operation
submit
logo
Preview Clear
Previous section
Next Section
Tutorial List
get help
  • Course Recommendations
  • Courseware download
Free CSS 0 basic introductory tutorial
Free 0 Basic WeChat development introductory video tutorial
Free HTML+CSS basic introductory tutorial
Free HTML/CSS 5-hour basic introductory tutorial
Free ECMAScript new features in-depth video tutorial
Free Detailed video tutorial on Ajax principles
Free React basics in-depth video tutorial
Free React routing in-depth video tutorial
Free React Native basics video tutorial
Free PHP Fun Breakthrough Class
Free Ajax message board, waterfall flow video tutorial
Free AJAX cross-domain solution: JSONP video tutorial
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
496446
Let's briefly talk about starting a business in PHP Quick introduction to web front-end development Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum] Login verification and classic message board Computer network knowledge collection Quick Start Node.JS Full Version The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original] Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)