Getting started with CSS
If you want to complete a beautiful front-end, you must use css. Today we will enter the door first, and then we will create miracles with our classmates and create beautiful things!!! 0.0
How to use CSS
CSS was used in HTML 4 and was introduced for better rendering of HTML elements.
CSS can be added to HTML in the following ways:
- Inline style-use the "style" attribute in HTML elements
- Internal style sheet-use style elements to include CSS in the head area of the HTML document
- External references-use external CSS files
- The best way is to reference the CSS file externally.
Inline style
When special styles need to be applied to individual elements, inline styles can be used. The way to use inline styles is to use style attributes in related tags. Style properties can contain any CSS properties. The following example shows how to change the color and left margin of a paragraph.
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
Change background color
The background-color attribute defines the background color of an element:
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
Font, font color, font size
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
Text alignment
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
Internal style sheet
<head>
<style type="text/css">
body {
background-color:yellow;}
p {
color:blue;}
</style>
</head>
External style sheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Full code and effect display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style> -->
<!-- <link rel="stylesheet" type="text/css" href="mystyle.css"> -->
</head>
<body>
<p style="color:rgb(73, 73, 238);margin-left:20px;">这是一个段落。</p>
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
</body>
</html>
