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
<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>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:
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
| Text attributes | Description |
|---|---|
| font-size | Font size |
| Font type | |
| Font style (style) | |
| Set or retrieve the text Color | |
| Text alignment |
When loading the background image, you need to use url()---> Equivalent to src functionbackground-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..."></结束标签>
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 tag, and write the style statement directly. 4.3How to associate an html file with an external style sheet? They are all placed in<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>
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
