Explanation of CSS style classes (with examples)

This article brings you an explanation of CSS style classes (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

CSS Overview

CSS refers to Cascading Style Sheets
Styles define how to display HTML elements
Styles are usually stored in styles In the table
, styles are added to HTML 4.0 to solve the problem of separation of content and presentation
External style sheets can greatly improve work efficiency
External style sheets are usually stored in CSS files
Multiple Style definitions can be cascaded into a

HTML tag was originally designed to define document content. By using tags like

,

, , the original intention of HTML was to express information such as "This is a title", "This is a paragraph", "This is a table". At the same time, the document layout is completed by the browser without using any formatting tags.

All major browsers support cascading style sheets

Understanding of div and span

1. div is an html tag , a block-level element (displaying a line alone), it has no meaning when used alone, and must be used in conjunction with CSS. It is mainly used for page layout;

2. span is an html tag, an inner Linked element (displays a row), it has no meaning when used alone, must be used in combination with css, mainly to modify the style of the enclosed content;

Class selector

Before using the class selector, you must mark the century document so that the class selector can play its role.

.name{text-align:center}

Explicitly select the specific case for this tag later in the document by including the 'class' attribute associated with the style and specifying one of the predefined styles as the 'name' value What style to use

<p></p>

nbsp;html>


    <meta>
    <title>类选择器</title>
    <style>
        .sheen{font-size: large;color: salmon}
    </style>


<div>
    Sie sprechen gut Deutsch.
</div>
<div>
    Was machen Sie hier in Berlin?Arbeiten Sie hire?
</div>
<div>
    Nein,ich studiere.
</div>

##ID selector

ID selector is similar to class Selector, ID Selectors are preceded by a # sign - also known as a checkerboard number or pound sign. As with class selectors, wildcard selectors can be ignored in ID selectors.

ID is a unique identifier and can only be used once

nbsp;html>


    <meta>
    <title>ID选择器</title>
    <style>
        #sheen{font-size: x-large;color: rosybrown}
        #star{font-size: large;color: #c0ffff}
        #clotho{font-size: xx-large;color: darkgreen}
    </style>


    <div>
        Sheen:Sie sprechen gut Deutsch.
    </div>
    <div>
        Star:Was machen Sie hier in Berlin?Arbeiten Sie hire?
    </div>
    <div>
        Clotho:Nein,ich studiere.
    </div>

##Tag selector

nbsp;html>


    <meta>
    <title>标签选择器</title>
    <style>
        div{margin: 0 auto;border: 1px;color: darkgreen;font-size: larger;text-align: center}

    </style>


<h3 id="使用CSS">使用CSS</h3>
<div>
    类选择器
</div>
<div>ID选择器</div>
<div>标签选择器</div>

Set the link style

There are many CSS properties that can set the link style (such as color, font-family, background, etc.).

The special thing about links is the ability to style them based on the state they are in.

Four states of links:
a:link - ordinary, unvisited link
a:visited - link that the user has visited
a:hover - the mouse pointer is above the link
a:active - The moment when the link is clicked

Introduction of CSS style

Introduction method:

1). Inline introduction:

2). Internal introduction: the style written in the style tag inside the head tag;

3). External introduction: separate the css style into a file, through Linked with the current html file.

Priority of the three introduction methods: Proximity principle

//CSS文件
div {
    width: 80%;
    margin: 0 auto;
    padding: 0;

}

ul {
    list-style-type: none
}

li {
    display: inline-block;
    width: 20%;
    background: snow;
    color: #333333;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    font-size: large;
    text-transform: capitalize;
}

li:hover {
    background: green;
    color: snow;
}

a:hover {

    color: snow;

}

<!--HTML文件-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            background: red;
        }
    </style>
    <link rel="stylesheet" href="css/main.css">

</head>
<body>

<div>
    <ul>
        <li style="background: blue">
            <a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
        </li>
        <li>CSS</li>
        <li>JS</li>
        <li>python</li>
    </ul>
</div>
</body>
</html>

The above is the detailed content of Explanation of CSS style classes (with examples). For more information, please follow other related articles on the PHP Chinese website!