Home > Article > Web Front-end > How to use CSS to set HTML
How to use CSS to set HTML
- PHPzOriginal
- 2023-04-26 16:00:531086browse
HTML is the basic structure of web pages, while CSS provides support for the style of web pages. Through CSS settings, we can beautify and customize web pages. Therefore, it is a very important step for web developers to be familiar with the setting method of CSS. In this article, we will explore how to use CSS to set HTML.
1. CSS style basics
Before using CSS to set HTML styles, there are several basic concepts that need to be understood:
- CSS style selector
CSS style selector refers to the CSS code used to select specific HTML tags. Common CSS style selectors include tag selectors, class selectors, ID selectors, attribute selectors, etc.
- CSS properties and property values
CSS properties refer to the style properties to be set. The CSS attribute value is the specific value of the attribute.
For example, to set the color of HTML text, we can use the "color" attribute to set it, and the attribute value is the specific color code, such as: "color: #ff0000;" means setting the text color to red.
- CSS style priority
When the same HTML tag has multiple CSS style codes setting it, there will be a problem with CSS style priority.
In CSS, priority can be divided into four levels. The priority from high to low is: ID selector, class selector, label selector and universal selector. That is, the style set by the ID selector has the highest priority, and the style set by the universal selector has the lowest priority.
If there are multiple label styles of the same level, the priority will be determined based on the position of the CSS style code.
2. How to set HTML with CSS style
- Set HTML tag style
One of the simplest ways to set HTML style is to directly add HTML tags Add CSS style properties. For example, add a style to the h1 tag:
<h1 style="color: #ff0000; font-size:28px;">Hello World!</h1>
Although this method is simple, it is not flexible enough. The code can also become too verbose if multiple tags need to be styled.
- Use internal style sheets
Internal style sheets refer to writing CSS style code in the <style> tag at the head of the HTML file , set the style of HTML tags through tag selectors. For example:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
h1{
color: #ff0000;
font-size: 28px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
- Using an external style sheet
External style sheet refers to writing the CSS style code in a separate CSS file, and then using the ## of the HTML tag The # tag refers to it. This method can make the web page code clearer and more concise, and less likely to be repeated. For example:
style.css style file in the index.html file:
<!DOCTYPE html> <html> <head> <title>External CSS Example</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Hello World!</h1> </body> </html>in the
style.css Set the style in the file:
h1{
color: #ff0000;
font-size: 28px;
}
- Use the class selector
<!DOCTYPE html>
<html>
<head>
<title>Class Selector Example</title>
<style>
.red-text{
color: #ff0000;
}
</style>
</head>
<body>
<h1 class="red-text">Hello World!</h1>
<p class="red-text">This is a test paragraph.</p>
</body>
</html>
- Using the ID selector
<!DOCTYPE html>
<html>
<head>
<title>ID Selector Example</title>
<style>
#my-heading{
color: #ff0000;
}
</style>
</head>
<body>
<h1 id="my-heading">Hello World!</h1>
</body>
</html>
- Using attribute selectors
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selector Example</title>
<style>
a[href^="https"]{
color: blue;
}
</style>
</head>
<body>
<p>Visit my website at <a href="https://example.com">example.com</a>.</p>
<p>Visit my blog at <a href="http://blog.example.com">blog.example.com</a>.</p>
</body>
</html>In the above code, a[href^="https"]Select all tags whose href attribute value starts with "https" , set their font color to blue.
- Pseudo-class and pseudo-element selectors
:hover can add style settings when the mouse hovers over the specified label.
<!DOCTYPE html>
<html>
<head>
<title>Pseudo-class and Pseudo-element Selector Example</title>
<style>
a:hover{
color: blue;
}
p::first-line{
font-size: 24px;
}
</style>
</head>
<body>
<p>This is the first line.
This is the second line.
This is the third line.</p>
<a href="#">This is a link.</a>
</body>
</html>In the above code, :hoverselect to set a blue font for the label when the mouse hovers over it. ::first-lineSet the font size of the first line of the paragraph to 24px.
The above is the detailed content of How to use CSS to set HTML. For more information, please follow other related articles on the PHP Chinese website!