Practical training course - CSS Basics

1, CSS selector

The CSS selector is used to "find" (or select) the HTML element to style.

1. CSS element selector

The element selector selects HTML elements based on their names.

Example: all < p > labels on the page are centered:

p {
  text-align: center;
}

2. CSS id selector

The id selector uses the id attribute of the HTML element to select a specific element.

The id of the element is unique in the page, so the id selector is used to select a unique element!

To select an element with a specific id, write a pound sign () followed by the id of the element.

Note: id name cannot start with a number.

Example: HTML element applied to id="example"

#example {
  text-align: center;
  color: white;
}

3. CSS class selector

The class selector selects HTML elements with specific class attributes.

To select an element with a specific class, write a period (.) Character followed by the class name.

Example: configure < p > elements with class="center"

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: green;
}
</style>
</head>
<body>

<h1 class="center">It's not affected! Multiple classes can be referenced here</h1>
<p class="center">This paragraph will be red and centered.</p> 

</body>
</html>

4. CSS universal selector

The universal selector (*) selects all HTML elements on the page.

Example: affects every HTML element on the page.

* {
  text-align: center;
  color: blue;
}

5. CSS grouping selector

The group selector selects all HTML elements with the same style definition.

It is best to group selectors to minimize code and separate each selector with a comma.

2, CSS pseudo class

1. Syntax:

selector:pseudo-class {
  property: value;
}

example:

/* Unreached links */
a:link {
  color: #FF0000;
}

/* Visited links */
a:visited {
  color: #00FF00;
}

/* Mouse over link */
a:hover {
  color: #FF00FF;
}

/* Selected links */
a:active {
  color: #0000FF;
}

Note: a:hover can only take effect after a:link and a:visited in CSS definition! a:active ， cannot take effect until ， a:hover ， in CSS definition! Pseudo class names are case insensitive.

2. : first child pseudo class

The: first child pseudo class matches the specified element: this element is the first child of another element.

3. Exercise - colorful navigation bar

What is this flawed and imperfect little colorful navigation bar? Practice (make complaints about yourself). After many attempts, konjaku is still violent and miraculous. If there are good methods, please give more advice.

<!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>Colorful navigation bar</title>
    <style>
        .image-m:hover{
            content: url(image/bg6.png);
        }
    </style>
</head>
<body>
    <span><img src="image/bg1.png"  class="image-m "><label  style="position: fixed;left: 30px;top: 20px; color: white;">Colorful navigation</label></span>
    <span><img src="image/bg2.png"  class="image-m "><label style="position: fixed;left: 160px;top: 20px; color: white;">Colorful navigation</label></span>
    <span><img src="image/bg3.png"  class="image-m "><label style="position: fixed;left: 285px;top: 20px; color: white;">Colorful navigation</label></span>
    <span><img src="image/bg4.png"  class="image-m "><label style="position: fixed;left: 410px;top: 20px; color: white;">Colorful navigation</label></span>
</body>
</html>

Keywords: html css

Added by xkaix on Wed, 02 Feb 2022 04:18:46 +0200

Programming VIP