What is CSS? What can CSS do?
May 29, 2021 Article blog
Table of contents
Believe that as long as people who have learned HTML programming are no strangers to CSS, CSS can decorate and optimize the page for HTML, so that your page refreshing moment high a notch, then the first to learn programming you know what CSS is? What can it do?
Introduction to CSS
- As the name implies, CSS means Cascading Style Sheets
- The style of CSS is defined as how HTML elements are displayed
- CSS styles are typically stored in style sheets
- External style sheets greatly improve productivity
- External style sheets are typically stored in CSS files
- Multiple style definitions can be cascaded into one
In summary, CSS can beautify the page, the page elements to make more precise and careful settings, styles are mainly used to describe the elements of the font color, font size, background color, background picture and so on.
CSS action
CSS is primarily used inline styles, page embedding, and external references, so let's get to know them one by one.
1, inline style
The inline of an element is the style property that writes the element directly to the property and is suitable for situations where the style has no other reusability, see the following code:
<body>
<p style="font-size:20px;color:red">w3cschool</p>
<p style="font-size:25px;background-color: #2196F3">编程狮</p>
</body>The effect map
2, page embedding
Add the
<style>
> to the
<head>
>.
This approach means that all the corresponding elements on this page are in the style they specify, which is appropriate for the reuse of the style and effectively reduces the page volume.
<head>
<meta charset="UTF-8">
<title>CSS w3cschool</title>
<style type="text/css">
p{
font-size:25px;
color:red;
}
h1{
color:greenyellow;
}
h2{
background-color: #2196F3;
}
</style>
</head>
<body>
<body>
<h1>编程狮</h1>
<p>w3cschool</p>
<h2>学编程</h2>
</body>The effect map
3, external references
Add
<head>
to write everything about CSS to a file with the CSS suffix, which can be shared by multiple pages.
CSS code
h1 {
background-color: red;
border-color: green;
}
p {
color: blue;
}HTML code
<body>
<h1>编程狮</h1>
<p>w3cschool</p>
<h2>学编程</h2>
</body>The effect map
The above is what the editor brings to you about CSS? E
verything CSS can do.