Home > Article > Web Front-end > What is css? Introduction to three css styles and text attributes

What is css? Introduction to three css styles and text attributes

不言Original: 2018-08-09 15:31:552665browse

This article introduces to you what is css? The introduction of the three CSS styles and text attributes has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is CSS?

Cascading Style Sheets, referred to as CSS, cascading style sheets.
Used to modify HTML files and perform operations such as typesetting or size control on web page elements.
In other words, the HTML file fills the content of the web page, while CSS controls the performance of the content
For example: the size of the element, the position of the element in the web page, the background of the element and other attributes.

Where is the CSS code written?

1 Inline style (inline): css code can be written in html tags, use style="css style";

<p style="color: red;">这是一个段落</p>

2 Internal style:

Write the css code in the style tag
In theory, the style tag can be written anywhere in the document to take effect, but we will all write the style in the head tag

<html>
    <head>        ...
        <style type="text/css">
            css样式
        </style>
    </head>
</html>

3 External style:

External style is to write the css code separately in In a css file (css suffix file)
Then use the link tag to introduce the external style file
There is no need for style tags in external style files, just write css code directly

<html>
    <head>        ...
        <link rel="stylesheet" type="text/css" href="css文件路径" />
    </head>
</html>

Three styles can be used in multiple ways at the same time

Text attribute: font attribute

1 Font size: font-size

Set the font size, use values with units, such as px, em, pt, etc.

font-size: 12px;

2 Font color: color

color: red;

3 Font style: font-family

Set the font, such as Song Dynasty, Yahei and the like
Can have multiple values
But only one font style is displayed
If the first font is available, use the first one, otherwise use the second one
If the second font is not available, use the third one, and so on
Fonts are separated by English commas. If the value is Chinese or multiple words, it must be enclosed in English double quotes

font-family: "宋体",Times,"New Century Schoolbook";

4 Font-weight: font-weight

##normalDefault value , no boldbold##boldervalue

font-weight: bold;

Optional values	Description


bold, the effect is better than Bold is more obvious
100~900 is a value without units. Generally, 100~500 is the normal effect, and 600~900 is bold. The larger the value, The bolder the font

5 The case of the text: text-transform

can Selection value##noneDefault value, no effectcapitalizeFirst letter capitalizeduppercaseAll capslowercaseAll lowercase

text-transform: capitalize;

6 Text horizontal alignment: text-align

Description

Yes Selection valueDescriptionleftDefault value, left alignedrightAlign rightcenterAlign centerjustify Align both ends

text-align: left;

7 Text vertical alignment

Optional valueDescriptionbaselineDefault. The element is placed on the baseline of the parent elementsubVertically aligned subscript of the textsuperVertically align the superscript of the texttopAlign the top of the element with the top of the tallest element in the linetext-topAlign the top of the element with the top of the parent element's fontmiddlePlace this element in the middle of the parent elementbottomAlign the top of the element with the top of the lowest element in the rowtext-bottomAlign the bottom of the element with the bottom of the parent element's fontinheritSpecifies that the value of the vertical-align attribute should be inherited from the parent elementThe vertical-align attribute will only work if the element belongs to inline or inline-block.

vertical-align: baseline;

8Text-decoration

##Optional valueDescriptionnoneNo underlineUnderlineOverlineMiddle underline (strikethrough)


	underline
	overline
	line-through
	text-decoration: underline; 9 首行缩进: text-indent 该属性接受一个带单位的值规定文本首行缩进多少个单位的空间只对第一行有缩进，而且只用于块元素 text-indent: 2em; text-indent的属性值一般会使用em作为单位，因为一般缩进都以多少个字符为标准 10字间距: letter-spacing 该属性接受一个带单位的值规定每个字符之间间隔多少个单位的空间 letter-spacing: 1em; 11 词间距: word-spacing 该属性接受一个带单位的值规定每个单词之间间隔多少个单位的空间该属性对中文无效相关文章推荐：鼠标划过字体时如何用css来实现字体变色？（代码实测） css三栏布局的三种实现方式（圣杯布局、双飞翼布局、Flex布局）

The above is the detailed content of What is css? Introduction to three css styles and text attributes. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：How to use css to change the font color when the mouse moves over it? (Code actual test)Next article：How to use css to change the font color when the mouse moves over it? (Code actual test)

See more

What is css? Introduction to three css styles and text attributes

Related articles