HTML+CSS Easy to get started with understanding CSS styles

1: What is CSS

css is the abbreviation of Cascading style Sheets. The Chinese translation is "Cascading Style Sheets". We are used to calling it "Cascading Style Sheets"

We should use css What to pay attention to:

1. When there are multiple web pages to use CSS, use the method of externally connecting CSS files, so that the code of the web page is greatly reduced and it is very convenient to modify; it is only used in a single web page. CSS uses the document header method; CSS, which is only used in one or two places on a web page, uses inline insertion.

2. The three usages can be mixed without causing confusion. This is why it is called "Cascading Style Sheet". The browser handles it like this when displaying a web page: first check whether there is any inline inserted CSS, and execute it if there is, and ignore other CSS for this sentence. It's there; secondly, check the CSS in the header mode, and execute it if there is any; if there are neither of the first two, then check the CSS in the external file mode. Therefore, it can be seen that the execution priorities of the three CSS are: inline insertion, header mode, and external file mode.

css syntax:

/*Write css style*/

< /style>

One benefit of using CSS styles is that by defining a certain style, text in different web page locations can have a unified font, font size or color, etc.

So let’s write an example ：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body{
			font-size: 20px;
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
		中华民族伟大复兴
</body>
</html>

In the above case, I defined a style for the body, so that all the content in the text will have this style

css reference manual, you can download one from Baidu, as shown in the figure below ：

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ font-size: 20px; color: red; font-weight: bold; } </style> </head> <body> 中华民族伟大复兴 </body> </html>

submit Reset Code

Automatic operation

HTML+CSS Easy to get started with understanding CSS styles

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]