Home >Web Front-end >CSS Tutorial >CSS style selector

CSS style selector

高洛峰Original: 2017-02-14 15:04:321753browse

css is the abbreviation of English Cascading Style Sheets, which is called cascading style sheets and is used to beautify the page. There are three ways of existence:

element inline, page embedding and external introduction. Compare the advantages and disadvantages of the three methods.

Syntax: style='key1:value;key2:value2;'

Use style='xx:xxx;'

In the tag, embed in the page: < ;style type='text/css'> 531ac245ce3e4fe3d50054a55f265927block

Introducing external css files

##Necessity: The artist will edit the page The developer is responsible for color matching and beautification of images, and must know how to achieve it.

Look at how to use the above three methods:

1. Use c3aab84afb7bed6c51e6bd21ae7bcca2 < in the tag ;/style>Block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/css"; charset="UTF-8">
    <title>页面一</title>
    <link rel="stylesheet" href="commom.css" />
</head>
<body>
    <div style="background-color:red;">123</div>
     
</body>
</html>

2. Embed c3aab84afb7bed6c51e6bd21ae7bcca2 531ac245ce3e4fe3d50054a55f265927Block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/css"; charset="UTF-8">
    <title>页面一</title>
    <link rel="stylesheet" href="commom.css" />
    <style>
        .logo{
            background-color:red;
        }
    </style>
</head>
<body>
    <div class=&#39;logo&#39;>123456</div>
    <div class=&#39;logo&#39;>aaa</div>
</body>
</html>

in the page, that is, add a < in the code ;style>531ac245ce3e4fe3d50054a55f265927Code block, customize a style, and then call it repeatedly in the subsequent code

##3. Introduce external css files

If there are multiple html files that need to reference custom css styles, then according to the second method, you need to define a style in each html file. In order to solve this problem, you can define a file and write custom style, and then call this style from the file. How to write

style:

<style>
    .logo{
        background-color:red;
    }
    #logo{
        background-color:red;
    }
    a,div{
        color:red;
    }
    a div{
        color:red
    }
    input[type=&#39;text&#39;]{
    color:blue
    }
    .logo a,.logo p{
        font-size:56px;
    }
</style>

1. When the class selector

.logo indicates class='logo', quote the style

2. ID selector

#When logo indicates id='logo', reference this style

3. Combination selector The selector

a, div means that all a tags and div tags refer to this style

4. The associated selector

a div Represents a hierarchical relationship, that is, all div tags below the a tag apply this style.

5. Attribute selector

input[type='text'], attribute label, indicating that all labels of type 'text' refer to this Style

6, .logo a, .logo p means when class='logo', all the following a tags and when class='logo', all the following p tag, refer to the style

For more CSS style selector related articles, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS vertical-align propertyNext article：CSS vertical-align property

See more

CSS style selector

Related articles