Home >Web Front-end >Front-end Q&A >What is the role of css styles in html

What is the role of css styles in html

藏色散人Original: 2023-02-02 10:31:272605browse

The function of the css style in html is to separate and manage the page content and modification effects, and different modification effects can be added through css; for HTML tags, the resulting page effect is relatively simple. Although there are attribute modifications, more diversified page effects still require the help of CSS style sheets.

#What is the role of css styles in html?

The role of CSS style sheet in HTML

1.The role of CSS style sheet:

For HTML tags, the resulting page effect is relatively simple. Although there are attribute modifications, more diversified page effects still require the help of CSS style sheets. The use of style sheets can separate and manage page content and modification effects (html generates pages and related content, and css is used to add different modification effects)

2. Application of CSS style sheets One (internal style sheet): placed in 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1

Format one:

<style  type="text/css">
选择器(关键词) {属性1:属性值1;属性2:属性值2...}
</style>

font-size: Set the font size

font-family: Set the font style

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
p {color:red;font-size: 35px;font-family: "微软雅黑";}
h3 {color: pink;}
</style>
</head>
<body>这是我的第一句话。 
这是我的第二句话
这是我的第三句话
<h1>我是标题标签H1</h1>
<h2>我是标题标签H2</h2>
<h3>我是标题标签H3</h3>
</body>
</html>

Format 2:

Many times, some tags require the same style effect, so you can set the style as a shared operation , as long as the label requires it, you can quote it directly.

<style  type="text/css">
.类名 {属性1:属性值1;属性2:属性值2...}
</style>

Tag reference:

fe2921cd609aa37d6e2e3d62431c612ef22a6da9db034d9dd80eaf31ebbb9a7a

Question: When a tag, there are options The use of container style and the reference of class style, what is the final result?

The attributes of different parts are merged; the attributes of the same part are subject to the class style

##font-familyFont type font-styleFont style (style)color Set or retrieve the text Colortext-alignText alignment

Text attributes	Description
font-size	Font size

Settings of the background attribute in the CSS style sheet:

Background color: background-color

Background image: background-image

Set the tiling method of the background image: background-repeat:

repeat-x along Tile along the X axis

repeat-yTile along the Y axis

no-repeat Use the actual image to occupy the background position

repeat Spread over the entire page

When loading the background image, you need to use url()---> Equivalent to src function

background-image:url (picture path information)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style  type="text/css">
.testcss {color: green;font-size: 25px;font-family: "微软雅黑";}
.test1 {color: yellow;}
.tet4 {background-image:url(img/tupian03.jpg);background-repeat: repeat-y;}
</style>
</head>
<body class="test4">
我是第一个段落文字
我是第二个段落文字
我是斜体标签i
我是第二个斜体标签i
我是删除线标签del
</body>
</html>

3. Application of CSS style sheet 2 (inline style sheet)

3.1 Overview: The style sheet will only have a modifying effect on the content of a certain line, or the style sheet can be embedded in a certain line (inside a certain tag) )

3.2 Format: Treat style as an attribute

<开始标签 style="属性1:属性值1;属性2:属性值2..."></结束标签>

I am the content of the first paragraph

I am the content of the second paragraph

I am big tag content

4. CSS style sheet application three (external style sheet)

4.1 Overview: Do not embed the statement of the style sheet html file, but placed in a css file separately. In a true sense, the html file and the css file are separated independently. If the html file needs styles, just associate them.

4.2 Format: Create a separate css file, copy the content in the c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 tag, and write the style statement directly.

4.3How to associate an html file with an external style sheet? They are all placed in 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1

Method 1:

<link href="写上引用的外部css文件" rel="stylesheet" type="text/css" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<link href="css/外部css.css" rel="stylesheet" type="text/css" />
</head>
<body>
我是段落一
<h1 >我是标题标签h1</h1>
<h2 class="test5">我是标题标签h2</h2>
</body>
</html>

Recommended learning: "

css video tutorial"

The above is the detailed content of What is the role of css styles in html. For more information, please follow other related articles on the PHP Chinese website!

css html class 选择器样式表 background

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：What represents a gap in cssNext article：What represents a gap in css

See more

What is the role of css styles in html

Format one:

Format 2:

Related articles