CSS style selector-CSS Tutorial-php.cn

CSS style selector

高洛峰

Release： 2017-02-14 15:04:32

Original

1725 people have browsed it

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'> block

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 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" />
    <style>
        .logo{
            background-color:red;
        }
    </style>
</head>
<body>
    <div class=&#39;logo&#39;>123456</div>
    <div class=&#39;logo&#39;>aaa</div>
</body>
</html>

Copy after login

in the page, that is, add a < in the code ;style>Code 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>

Copy after login

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