CSS text, fonts, links

CSS Text properties Define the appearance of text.

With text properties, you can change the color of the text, the spacing of characters, the alignment text, the decoration, the indentation of the text, and so on.

Indent text

Indents the first line of a paragraph on a Web page, which is the most commonly used text formatting effect.

CSS provides the Text-indent property, which makes it easy to indent text.

By using the Text-indent property, the first line of all elements can be indented to a given length, even the length can be negative.

The most common use of this property is to indent the first line of a paragraph, and the following rule indents the first line of all paragraphs by 5 em:

p {text-indent:5em;}

Note: In general, you can apply text-indent to all block-level elements, but you cannot apply the attribute to inline elements, and you cannot apply the Text-indent property on substitution elements such as images. However, if there is an image in the first row of a block-level element (such as a paragraph), it moves with the rest of the text on the line.

Tip: If you want to "indent" the first line of an element in a row, you can create this effect with the left padding or margin.

Use negative values

Text-indent can also be set to a negative value. With this technique, many interesting effects can be achieved, such as "hanging Indent", where the first line hangs on the left side of the remaining part of the element:

P {text-indent: -5em;}

Be careful when setting negative values for text-indent, however, if you set a negative value on a paragraph, some text in the first line may go beyond the left edge of the browser window. To avoid this display problem, we recommend that you set a margin or some padding for negative indents:

P {text-indent: -5em; padding-left:5em;}

Use Percent value

Text-indent can use all length units, including percent values.

The percentage is relative to the width of the parent element of the indent element. In other words, if you set the indent value to 20%, the first row of the affected element is indented 20% of its parent element's width.

In the following example, the indent value is 20% of the parent element, which is 100 pixels:

div {width:500px;} p {text-indent:20%;} <div><p>this is a paragragh</p></div>

Inherited

Text-indent attributes can be inherited, consider the following markup:

Div#outer {width:500px;} Div#inner {text-indent:10%;} p {width:200px;} <div id= "outer" ><div id= "inner" >some text. Some text. Some text.<p>this is a paragragh.</p></div></div>

The paragraph in the above tag is also indented 50 pixels, because this paragraph inherits the indent value of the DIV element with ID inner.

Horizontal alignment

Text-align is a basic property that affects the alignment of lines of text in an element with each other. Its first 3 values are fairly straightforward, but the 4th and 5th are slightly more complex.

The values left, right, and center cause the text in the element to align, align, and center separately.

Western languages are all read from left to right, and the default value for all Text-align is ieft. The text is aligned on the left, and the right border is jagged (called left-to-right text). For languages such as Hebrew and Arabic, text-align defaults to right, because these languages are read from the left. As expected, center causes each line of text to be centered within the element.

Tip: Center A block-level element or table element by setting the left and right margins appropriately on these elements.

Text-align:center and <CENTER>

You might think that Text-align:center is the same as the <CENTER> element, but it's actually very different.

<CENTER> not only affects text, it also centers the entire element. Text-align does not control the alignment of elements, but only internal content. The element itself does not move from one segment to the other, except that the text in it is affected.

Justify

The last horizontal alignment property is justify.

In justified text, the left and right ends of the line of text are placed on the inner bounds of the parent element. Then, adjust the spacing between the words and the letters so that the lengths of the lines are exactly equal. You may have noticed that justified justification is common in the printing world.

Note that it is up to the user agent (not CSS) to determine how the justified justification stretches to fill the space between the left and right boundaries of the parent element. For more information, see the CSS text-align Property Reference page.

Word interval

The Word-spacing property can change the standard interval between words (words). Its default value, Normal, is the same as setting a value of 0.

The Word-spacing property accepts either a positive length value or a negative length value. If you provide a positive length value, the interval between words increases. Setting a negative value for word-spacing will bring it closer:

P.spread {word-spacing:30px;} p.tight {word-spacing: -0.5em;} <p class= "Spread" >this is a paragraph. The spaces between words would be increased.</p><p class= "Tight" >this is a paragraph. The spaces between words'll be decreased.</p>

Note: For an in-depth understanding of the CSS definition of Word, please visit the CSS Word-spacing Property reference page.

Letter Spacing

The difference between the Letter-spacing property and word-spacing is that the letter interval modifies the interval between characters or letters.

As with the Word-spacing property, the desirable value of the Letter-spacing property includes all lengths. The default keyword is normal (this is the letter-spacing:0 Same). The length value you enter causes the interval between letters to increase or decrease by the specified amount:

H1 {letter-spacing: -0.5em}h4 {Letter-spacing:20px}
Character conversions
The Text-transform property handles the case of text. This property has a value of 4:

 
 

  
  
 
   
None
 
   
Uppercase
 
   
lowercase
 
   
Capitalize
 
  
 
 
The default of none makes no changes to the text and will use the original case in the source document. As the name implies, uppercase and lowercase convert text to all uppercase and all lowercase characters. Finally, capitalize only capitalizes the first letter of each word.
As an attribute, text-transform may not matter, but this property is useful if you suddenly decide to capitalize all H1 elements. You do not have to modify the contents of all H1 elements individually, just use Text-transform to complete this modification for you:
h1 {Text-transform:uppercase}
There are two advantages to using Text-transform. First, simply write a simple rule to complete the change without modifying the H1 element itself. Second, if you later decide to switch all uppercase and lowercase to the original case, you can make the modification easier.
Text decoration
Next, we discuss the Text-decoration property, which is an interesting property that provides a lot of very interesting behavior.
The text-decoration has 5 values:

 
 

  
  
 
   
None
 
   
Underline
 
   
Overline
 
   
Line-through
 
   
Blink
 
  
 
 
As expected, underline will underline elements, just like the U element in HTML. The overline is exactly the opposite, drawing an underscore at the top of the text. The value Line-through draws a cross-line in the middle of the text, equivalent to the S and strike elements in the HTML. Blink will cause the text to blink, similar to the Netscape-supported blink tag.
The none value closes all decorations that were originally applied to an element. Typically, text that is not decorated is the default appearance, but it is not always the case. For example, the link will be underlined by default. If you want to remove the underline from a hyperlink, you can do this using the following CSS:
a {text-decoration:none;}
Note: If you explicitly remove a link underline with such a rule, the only visual difference between the anchor and normal text is the color (at least this is the default, but it is not entirely guaranteed that the color will be different).
You can also combine multiple decorations in one rule. If you want all the hyperlinks to be underlined and underlined, the rules are as follows:
A:link a:visited {text-decoration:underline overline;}
Note, however, that if two different decorations match the same element, the value of the winning rule will completely replace the other value. Please consider the following rules:
H2.stricken {Text-decoration:line-through;} h2 {Text-decoration:underline overline;}
For a given rule, all H2 elements with class stricken have only one line-through decoration, without underscores and underscores, because text-decoration values are replaced instead of accumulated.
Working with whitespace characters
The White-space property affects the handling of space, line breaks, and tab characters in the source document by the user agent.
By using this property, you can affect how the browser handles whitespace between words and lines of text. To some extent, the default XHTML processing has completed whitespace processing: it will match all whitespace with a single space. So given the following markup, when it is displayed in a Web browser, only one space is displayed between the words, ignoring the line breaks in the element:
<p>this     Paragraph have    many    spaces in           it.</p>
This default behavior can be explicitly set with the following sounds:
p {white-space:normal;}
The rules above tell the browser to deal with it as usual: throw away the extra whitespace. Given this value, the newline character (carriage return) is converted to a space, and the sequence of multiple spaces in a row is converted to a space.
Value Pre
However, if White-space is set to pre, the whitespace is handled differently in the elements affected by this property, and behaves like the XHTML pre element, and whitespace characters are not ignored.
If the value of the White-space property is pre, the browser will pay attention to additional spaces and even enter. In this respect, and only in this respect, any element can be equivalent to a PRE element.
Note: After testing, ie 7 and earlier browsers do not support this value, so use a browser other than IE to view the above instance.
Value nowrap
The relative value is nowrap, which prevents text wrapping in an element unless a BR element is used. Using nowrap in CSS is very similar to the use of <TD nowrap> in HTML 4 to set a table cell to be wrapped, but the white-space value can be applied to any element.
Values Pre-wrap and Pre-line
CSS2.1 introduces values Pre-wrap and Pre-line, which are not available in previous versions of CSS. The purpose of these values is to allow the author to better control whitespace processing.
If the element's white-space is set to Pre-wrap, the text in the element retains a sequence of whitespace characters, but the text line wraps normally. If set to this value, the line delimiter in the source text and the resulting row delimiter are also preserved. Pre-line In contrast to pre-wrap, the whitespace sequence is merged as in normal text, but the newline character is preserved.
Note: We tested the above two instances in the IE7 and FireFox2.0 browsers, but the result is that the values Pre-wrap and pre-line are not well supported.
Summarize
The following table summarizes the behavior of the White-space property:

 
  Wrap 
    
 
  
  
 
   
 
    
value
 
    
whitespace characters
 
    
line Break
Line
 
   
 
   
 
    
Pre-line
 
    
Merge
 
    
Keep
 
    
Allow
 
   
 
   
 
    
Normal
 
    
Merge
 
    
Ignore
 
    
Allow
 
   
 
   
 
    
NoWrap
 
    
Merge
 
    
Ignore
 
    
Not allowed
 
   
 
   
 
    
Or:
 
    
Keep
 
    
Keep
 
    
Not allowed
 
   
 
   
 
    
Pre-wrap
 
    
Keep
 
    
Keep
 
    
Allow
 
   
 
  
 
 
 
Text direction
If you are reading English books, you will read from left to right and from top to bottom, which is the flow direction of English. However, not all languages are so. We know that ancient Chinese is read from right to anticipatory, and of course includes Hebrew and Arabic, and so on. CSS2 introduces a property to describe its directionality.
The direction property affects the writing direction of the text in a block-level element, the direction of the column layout in the table, the direction in which the content fills its element box horizontally, and the position of the last row in the justified element.
Note: For inline elements, the direction property is applied only if the Unicode-bidi property is set to embed or bidi-override.
The Direction property has two values: LTR and RTL. In most cases, the default value is LTR, which displays text from left to right. If you display right-to-left text, you should use the value RTL.

CSS Text Properties
 
 
 
  
  
 
   
 
    
Properties
 
    
Description
 
   
 
   
 
    
Color
 
    
Set Text color
 
   
 
   
 
    
Direction
 
    
Sets the text orientation.
 
   
 
   
 
    
Line-height
 
    
Sets the row height.
 
   
 
   
 
    
Letter-spacing
 
    
Sets the character spacing.
 
   
 
   
 
    
Text-align
 
    
Aligns the text in the element.
 
   
 
   
 
    
Text-decoration
 
    
Add adornments to text.
 
   
 
   
 
    
Text-indent
 
    
Indents the first line of text in an element.
 
   
 
   
 
    
Text-shadow
 
    
Sets the text shadow. CSS2 contains this property, but CSS2.1 does not preserve it.
 
   
 
   
 
    
Text-transform
 
    
Controls the letters in the element.
 
   
 
   
 
    
Unicode-bidi
 
    
Sets the text orientation.
 
   
 
   
 
    
White-space
 
    
Sets how whitespace is handled in the element.
 
   
 
   
 
    
Word-spacing
 
    
Sets the word spacing.
 
   
 
  
 
 
 
CSS font Properties Define the font family, size, bold, style (such as italic), and distortion (such as small capital letters) of text.
CSS Font Series
In CSS, there are two different kinds of font family names:

 
 

  
  
 
   
Universal Font Family-a combination of font systems with similar appearance (e.g. "Serif" or "monospace")
 
   
Specific font family-specific font family (e.g. "times" or "Courier")
 
  
 
 
In addition to a variety of specific font families, CSS defines 5 universal font families:

 
 

  
  
 
   
Serif fonts
 
   
Sans-serif fonts
 
   
monospace fonts
 
   
Cursive fonts
 
   
Fantasy Fonts
 
  
 
 
If you need more information about the font family, please read the CSS font family.
Specify font family
Use the Font-family property to define the font family of text.
Use the Universal font family
If you want the document to use a Sans-serif font, but you don't care what font it is, here's an appropriate statement:
body {Font-family:sans-serif;}
This allows the user agent to select a font (such as Helvetica) from the Sans-serif font family and apply it to the BODY element. Because of inheritance, this font selection is also applied to all elements contained in the BODY element, unless a more specific selector overrides it.
Specify font family
In addition to using a generic font family, you can also set more specific fonts through the Font-family property.
The following example sets the Georgia font for all H1 elements:
h1 {Font-family:georgia;}
Such a rule can also produce another problem, and if the Georgia font is not installed on the user agent, the H1 element can only be displayed using the user agent's default font.
We can solve this problem by combining specific font names and universal font families:
serif;}
If the reader does not have Georgia installed, but the Times font (a font in the serif font family) is installed, the user agent may use the times for the H1 element. Although the Times and Georgia do not exactly match, they are at least close enough.
Therefore, we recommend that you provide a generic font family in all font-family rules. This provides a way to select a candidate font when the user agent is unable to provide a specific font that matches the rule.
If you are familiar with fonts, you can also specify a series of similar fonts for a given element. To do this, you need to sort these fonts in order of precedence and then concatenate them with commas:
p {font-family:times, Timesnr, ' New Century schoolbook ',     Georgia, ' new York ', serif;}
Based on this list, the user agent looks for these fonts in the order listed. If all the fonts listed are not available, simply select one of the available serif fonts.
Use quotation marks
You may have noticed that single quotes are used in the example above. Enclose the font-family declaration only if there is one or more spaces in the font name (such as New York), or if the font name includes symbols such as # or $.
Either single or double quotation marks are acceptable. However, if you put a font-family property in the Style property of the HTML, you need to use the kind of quotation marks that the property itself does not use:
<p style= "Font-family:times, Timesnr, ' New Century schoolbook ', Georgia, ' new York ', serif;" >...</p>
Font style
The Font-style attribute is most commonly used to specify italic text.
This property has three values:

 
 

  
  
 
   
Normal-text is displayed normally
 
   
Italic-Text italic display
 
   
Oblique-Text skew display
 
  
 
 
Instance
p.normal {font-style:normal;} p.italic {font-style:italic;} P.oblique {font-style:oblique;}
The difference between italic and oblique
Font-style is very simple: used to select between normal text, italic text, and oblique text. The only thing that is somewhat complicated is the distinction between italic text and oblique text.
Italic (italic) is a simple font style that has minor changes to the structure of each letter to reflect the changing appearance. In contrast, italic (oblique) text is an oblique version of normal vertical text.
Typically, italic and oblique text look exactly the same in a Web browser.
Font warp
The Font-variant property allows you to set small caps.
Small caps are not general uppercase letters, nor lowercase letters, which use uppercase letters of different sizes.
Instance
p {font-variant:small-caps;}
Font Bold
The Font-weight property sets the thickness of the text.
Use the Bold keyword to set the text to bold.
The Keyword 100 ~ 900 specifies a 9-level bold degree for the font. If a font has these bold levels built into it, these numbers are mapped directly to a predefined level, 100 corresponds to the finest font distortion, and 900 corresponds to the most coarse font distortion. The number 400 is equivalent to normal, while 700 is equivalent to bold.
If you set the element's bold to bolder, the browser sets a font that is thicker than the inherited values. In contrast, the keyword lighter will cause the browser to move the bold down rather than move up.
Instance
p.normal {font-weight:normal;} P.thick {font-weight:bold;} P.thicker {font-weight:900;}
Font size
The Font-size property sets the size of the text.
The ability to manage the size of text is important in the field of web design. However, you should not make the paragraph look like a caption by resizing the text, or make the title look like a paragraph.
Always use the correct HTML headings, such as use 
The Font-size value can be an absolute or relative value.
Absolute:

 
 

  
  
 
   
Sets the text to the specified size
 
   
Do not allow users to change the size of text in all browsers (not for usability)
 
   
Absolute size is useful when determining the physical size of the output
 
  
 
 
Relative size:

 
 

  
  
 
   
To set the size relative to the surrounding elements
 
   
Allow users to change text size in the browser
 
  
 
 
Note: If you do not specify a font size, the default size for normal text (such as paragraphs) is 16 pixels (16px=1em).
Use the image to set the font size
By setting the text size in pixels, you can have full control over the text size:
Instance
h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;}
In Firefox, Chrome, and Safari, you can readjust the text size of the above example, but not in Internet Explorer.
Although the size of the text can be resized through the browser's zoom tool, this is actually an adjustment to the entire page, not just text.
Use EM to set font size
Many developers use EM units instead of pixels to avoid problems with text that cannot be adjusted in Internet Explorer.
It is recommended to use EM size units.
1em equals the current font size. If the font-size of an element is 16 pixels, then for that element, 1em is equal to 16 pixels. When you set the font size, the value of EM changes relative to the font size of the parent element.
The default text size in the browser is 16 pixels. So the default size of 1em is 16 pixels.
You can use the following formula to convert pixels to em:pixels/16=em
(Note: 16 equals the default font size of the parent element, assuming that the parent element is font-size to 20px, then the formula should be changed to:pixels/20=em)
Instance
h1 {font-size:3.75em;}/* 60px/16=3.75em */h2 {font-size:2.5em;}  /* 40px/16=2.5em */p {font-size:0.875em;}/* 14px/16=0.875em */
In the example above, the text size in the EM unit is the same as the text in pixels in the previous example. However, if you use EM units, you can adjust the text size in all browsers.
Unfortunately, there are still problems in IE. When you resize the text, it is larger or smaller than the normal size.
Combined use percent and EM
A scheme that works in all browsers is to set the default Font-size value for the BODY element (parent element) as a percentage:
Instance
body {font-size:100%;}h1 {font-size:3.75em;} h2 {font-size:2.5em;} p {font-size:0.875em;}
Our code is very effective. In all browsers, you can display the same text size and allow all browsers to scale the size of the text.
CSS Font Properties
 
 
 
  
  
 
   
 
    
Properties
 
    
Description
 
   
 
   
 
    
Font
 
    
Shorthand property. The function is to set all the font-oriented properties in a single declaration.
 
   
 
   
 
    
Font-family
 
    
Sets the font family.
 
   
 
   
 
    
Font-size
 
    
Sets the size of the font.
 
   
 
   
 
    
Font-size-adjust
 
    
Intelligently scales the replacement font when the preferred font is not available. (CSS2.1 has deleted this property.) ）
 
   
 
   
 
    
Font-stretch
 
    
Horizontally stretches the font. (CSS2.1 has deleted this property.) ）
 
   
 
   
 
    
Font-style
 
    
Sets the font style.
 
   
 
   
 
    
Font-variant
 
    
Displays text in a small uppercase font or in a normal font.
 
   
 
   
 
    
Font-weight
 
    
Sets the weight of the font.
 
   
 
  
 
 
 
We can set styles for links in different ways.
Set the style of a link
There are a number of CSS properties that can set the link style (for example, color, font-family, background, and so on).
The particularity of links is that they can be styled according to the state in which they are located.
Four states of the link:

 
 

  
  
 
   
A:link-Generic, inaccessible links
 
   
A:visited-The user has visited the link
 
   
A:hover-the mouse pointer is over the link
 
   
A:active-the moment the link is clicked
 
  
 
 
Instance
a:link {color: #FF0000;} / * Non-visited link */a:visited {color: #00FF00;} /* The link that has been visited */a:hover {color: #FF00FF;} /* mouse pointer moves to the link */a:active {color: #0000FF;} / * The link that is being clicked *    /
When setting styles for different states of a link, follow these order rules:

 
 

  
  
 
   
A:hover must be located after A:link and a:visited
 
   
A:active must be located after a:hover
 
  
 
 
Common Link Styles
In the example above, the link changes color according to its state.
Let's look at a few other common ways to set up link styles:
Text decoration
The Text-decoration attribute is mostly used to remove underscores in links:
Instance
a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;}
Background color
The Background-color property specifies the background color of the link:
Instance
a:link {background-color: #B2FF99;} a:visited {background-color: #FFFF85;} a:hover {background-color: #FF704D;} a:active {background-color: #FF704D;}
CSS text, fonts, links