css set text content

CSS is a common web design language that allows developers to more easily control various elements on web pages to create a variety of visual effects and interactive experiences. Among them, CSS is very important for setting text content. It can help us achieve various text styles and layout effects. This article will introduce how to use CSS to set text content.

1. Font

Font is the most basic setting in text style, and CSS provides a variety of font setting options. Among them, the most basic setting method is to use the font-family attribute to specify the font name, for example:

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

The above code sets the font in the body of the web page to Arial or sans-serif font. If the user's computer already has If the Arial font is installed, use this font. Otherwise, use the system default sans-serif font. This approach will suffice in most cases, but if you want more granular control over the font, you can use other properties.

The font-size attribute can specify the font size, and you can use pixels, percentages or ems as units:

h1 {
    font-size: 32px;
}

The above code sets the font size of the h1 title to 32 pixels. If you want the font size to be set relative to the size of the parent element, you can use percentages or ems as units:

p {
    font-size: 120%;
}

span {
    font-size: 1.2em;
}

The above code sets the font size of the p paragraph to 120% of the parent element's size, while the span element's The font size is set to 1.2 times the size of the parent element.

In addition to the font name and size, the font attribute can also specify the thickness, italics, and variations of the font. For example, the font-weight attribute can specify the thickness of the font, which can be normal, bold, or a numerical value (usually 400 or 700):

h2 {
    font-weight: bold;
}

The above code sets the font of the h2 title to bold. If you want to set the italic font, you can use the font-style attribute:

em {
    font-style: italic;
}

The above code sets the font inside the em element to italic.

2. Text color and background color

Text color and background color are also relatively basic settings in text style. CSS provides two attributes, color and background-color, for implementation.

The color attribute can specify the text color, you can use the color name, hexadecimal RGB value or RGB function:

h3 {
    color: red;
}

p {
    color: #333333;
}

a {
    color: rgb(255, 0, 0);
}

The above code sets the text color of the h3 title to red, and the p paragraph of the The text color is set to dark gray and the text color of a link is set to red.

Similarly, the background-color attribute can specify the background color, using the color name, hexadecimal RGB value or RGB function:

footer {
    background-color: #f2f2f2;
}

The above code sets the background color of the footer element to light grey.

3. Text alignment and line height

Text alignment and line height are also important settings in text style, which can be achieved through the two attributes text-align and line-height.

text-align can control the horizontal alignment of text, which can be left, center, right or justify:

h4 {
    text-align: center;
}

The above code will align the text of the h4 title horizontally and center.

line-height can control the text line height. You can use numerical values ​​or percentages as units, or you can use keywords such as normal and inherit:

p {
    line-height: 1.5;
}

The above code sets the line height of the p paragraph. 1.5 times its font size.

4. Text decoration and shadow

CSS can also add decoration and shadow effects to text through the text-decoration and text-shadow properties.

text-decoration can specify text decoration, such as underline, strikethrough, overline, etc.:

a {
    text-decoration: underline;
}

s {
    text-decoration: line-through;
}

u {
    text-decoration: overline;
}

The above code will underline the a link and add strikethrough to the text in the s element. The text in the u element is overlined.

text-shadow can add a shadow effect to the text, and you can specify parameters such as the color, position, and blur radius of the shadow:

h5 {
    text-shadow: 2px 2px 5px #888888;
}

The above code adds a shadow effect to the text of the h5 title, and the color of the shadow It’s #888888, the position is (2px, 2px), and the blur radius is 5px.

Summary

CSS provides many ways to set text content, including fonts, text color and background color, text alignment and line height, text decoration and shadow, etc. In actual development, developers can choose the appropriate setting method according to needs to achieve the desired text effect.

The above is the detailed content of css set text content. For more information, please follow other related articles on the PHP Chinese website!