css font color:First introduction to CSS - text attributes and reference methods-Font Tutorial免费ppt模版下载-道格办公
投稿
  1. JustNewsHome
  2. Font Tutorial
  3. First introduction to CSS - text attributes and reference methods

First introduction to CSS - text attributes and reference methods

Author: daogeziyuan • • Font Tutorial • Views 672

CSS text Properties

CSS text (text) property is to set the appearance of the text, such as font color, alignment , Indent, Line Spacing, etc.

  • Text color

Attribute name: color.

Attribute value:

English words for color: color: red;

Hexadecimal color value: color: #000000;

RGB code: color: rgb(255,255,255) or rgb(100%,0%,0%)

Generally, hexadecimal writing is commonly used in development.

Code example:

<head> <style> /* Text color attribute*/ .red { color: red; } .colorNum { color: #f00; } .colorRgb{ color: rgb(255, 0, 0 ); } </style> </head><body> <!-- Text color attribute--> <p class="red">I am the word color setting of the text attribute</ p> <p class="colorNum">I am the hexadecimal color setting of the text attribute</p> <p class="colorRgb">I am talking about the rgb color setting of the text attribute</p> </body>

Code execution interface

  • Text alignment

Attribute name :text-align.

Attribute value:

"text-align: left": Default value, text is left aligned.

"text-align: center": The text is centered.

"text-align:right": The text is right aligned.

Code example:

<head> <style> /* Text alignment*/ .l { text-align: left; } .cen { text-align: center; } .ri { text-align: right; } </style> </head><body> <!-- Text alignment--> <p class="l">Text left aligned</p> <p class= "cen">Text aligned center</p> <p class="ri">Text aligned right</p></body>

Run interface:

  • Text Decoration

Attribute: text-decoration.

Attribute value:

"text-decoration: none": Default value, no decorative lines.

"text-decoration:underline": Underline text.

Note: The a tag has its own underline. You can use the default value attribute to remove the underline of the a tag.

"text-decoration:overline": Add an overline to the text.

"text-decoration: line-through": Add strikethrough to text.

Code example:

<head> <style> /* Text decoration line*/ .nor { text-decoration: none; } .underl { text-decoration: underline; } .upl { text-decoration: overline; } .lineTh { text-decoration: line-through; } </style> </head><body> <!-- Text decoration--> <p class="nor">Text decoration Line: Default state</p> <p class="underl">Text decoration line: Add underline to text</p> <p class="lineTh">Text decoration line: Add strikethrough to text< ;/p> <p class="upl">Text decoration line: Add overline to text</p> <a href="#">I am a hyperlink label, and the text is underlined< /a><br> <a href="#" class="nor">I am a hyperlink label, and the text is underlined. Using the default value attribute, the text underline can be removed</a></body>

Run the interface:

  • Text indent

Attribute name :text-indent. Usually refers to the indentation of the first line of a paragraph.

Attribute value: px or em.

em is a relative unit,

If the text size of the current element has been set, the indentation will be displayed according to the size of 1 text of the current element.

If there is no setting in the current element, the indent will be displayed according to 1 text size of the parent element, that is, 1 em=16px.

Code example:

<head> <style> /* Text indent*/ .indEm { text-indent: 2em; /* em is a relative unit. When the text size is not set, the default font size is used. That is 16px display. If the text size is set, it will be displayed according to the set text size. Several ems are several text sizes. */ } .indPx { /* Pixels are absolute units, just set the number */ text-indent: 32px; } </style> </head><body> <!-- Text indent-- > <p class="indPx">I am a paragraph tag, try the first line indent attribute. Generally refers to the indentation of the first line, and the indentation of the first line of a paragraph. I am a paragraph tag, try the first line indent property. Generally refers to the indentation of the first line, and the indentation of the first line of a paragraph. I am a paragraph tag, try the first line indent property. Generally refers to the indentation of the first line, and the indentation of the first line of a paragraph. I am a paragraph tag, try the first line indent property. Generally refers to the indentation of the first line, and the indentation of the first line of a paragraph. I am a paragraph tag, try the first line indent property. Generally refers to the indentation of the first line, and the indentation of the first line of a paragraph. I am a paragraph tag, try the first line indent property. Generally refers to the indentation of the first line, and the indentation of the first line of a paragraph. I am a paragraph tag, try the first line indent property. Generally refers to the indentation of the first line, and the indentation of the first line of a paragraph. </p> <p class="indEm">I am a paragraph tag, try the first line indent attribute. Generally refers to the indentation of the first line, and the indentation of the first line of a paragraph. I am a paragraph tag, try the first line indent property. Generally refers to the indentation of the first line, and the indentation of the first line of a paragraph. I am a paragraph tag, try the first line indent property. Generally refers to the indentation of the first line, and the indentation of the first line of a paragraph. I am a paragraph tag, try the first line indent property. Generally refers to the indentation of the first line, and the indentation of the first line of a paragraph. I am a paragraph tag, try the first line indent property. Generally refers to the indentation of the first line, and the indentation of the first line of a paragraph. I am a paragraph tag, try the first line indent property. Generally refers to the indentation of the first line, and the indentation of the first line of a paragraph. I am a paragraph tag, try the first line indent property. Generally refers to the indentation of the first line, and the indentation of the first line of a paragraph. </p></body>

Run interface:

  • Line spacing

Attribute name: ling-height. Used to set the line height of text. That is the distance between rows.

Line spacing = text height + top spacing + bottom spacing. (upper spacing = lower spacing)

Line spacing adjustment is to set the height of the upper and lower spacing

Attribute value: px or em.

Code example:

<head> <style> /* line spacing*/ .lH { line-height: 3em; } </style> </head><body> <!-- line Spacing--> <p class="lH"> I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. I am a paragraph tag, testing the line spacing property. </p></body>

Run interface:

CSS introduction methods

are divided into three categories: Inline style sheets ( Inline), Internal style sheet (embedded), External style sheet (linked)

  • Inline stylesheet:

Position : Written directly in the opening tag of the element.

Features: Less writing content, high weight level, only one tag can be controlled, and the structure style is chaotic.

Syntax: style="color: red;"

Note: Use spaces to separate multiple attributes.

Code example:

<p style="color: red;">Inline style sheet: Set the attribute directly in the opening tag of the element using the attribute. For example, set the red attribute to the font. </p><p style="color: red; font-size:28px;">Inline style sheet: Set the attribute directly in the opening tag of the element using the attribute. For example, set the red attribute and font 28px to the font. </p>
  • Internal style sheet (embedded)
< p data-track="55">Position: Under the head tag, parallel to the title tag. Style attributes are included in the style tag.

Features: Some structures and styles are separated, but still in the same html file.

Syntax:

<style>p {color: red;font-size: 28px;}</style>

Code example:

<head> <title></title> <style> .styleP { color: red; font-size: 32px;; } </style></head>< body> <!-- Internal style sheet--> <p class="styleP">Internal style sheet: The style attributes are written in the head tag in the same html file, parallel to the title tag. </p></body>
  • External style sheet (linked)
    • < /ul>

    Step 1:Create the index.css file and enter the style attributes in the file without any tags.

    Step 2: In the head tag of the html file, add the link tag and introduce the css file.

    Step 3: Add selector names to the elements in the html file that need to be added with attributes.

    Features: Structure and style are globally separated, and one css file can control multiple html pages.

    Note: In the css file, there are only styles without tags, that is, write the tagger and attributes directly, do not write the style tag.

    Code example:

    Step one: Create a new index.css file and set style attributes.

    * { margin: 0; padding: 0;}.linC { font-size: 32px; color: blue;}

    No. Step 2: Add a link tag in the head tag of the html file to reference the css file.

    <head> <title>How to introduce CSS styles</title> <!--External style sheet--> <link rel="stylesheet" href="./index. css"></head>

    Step 3: Call the attribute in the tag.

    <body> <!-- External style sheet--> <p class="linC"> External style sheet: <br> Step 1: Create a new css file, file Edit style attributes directly in , no need to add style tag. <br> Step 2: For HTML documents using CSS files, you should add a link tag to its head tag to select the storage location of the CSS file. <br> Step 3: Call the style in the CSS file. </p></body>

    Run interface:


    The above is what I learned today. I will continue to learn about CSS tomorrow. That’s it for today. Good night, everyone!

Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/chu-shi-CSS-wen-ben-shu-xing-he-yin-yong-fang-shi.html

Like (810)
Reward 支付宝扫一扫 支付宝扫一扫
Lomu ︶￣Ｓs°╮ Columnist
48 196
single-end

Related Suggestion