Home >Web Front-end >JS Tutorial >CSS classification, attributes and selectors

CSS classification, attributes and selectors

php中世界最好的语言Original: 2018-03-19 13:51:081433browse

This time I will bring you the classification of Css, attributes and selectors, the classification of using Css, what are the precautions for attributes and selectors, the following is a practical case, let's take a look.

Css Cascading style sheet widget to beautify the page

Category:

Inline (inline) inside the tag with In the form of attributes, attribute name style

# is presented in the form of labels in the embedded head tag, and the label name Style

外 outer head has link tags to introduce external files*.css

<link rel="stylesheet" type="text/css" href="file:///D|/SSs/作业/3.12/图标.css" />

link tag

Insert icon icon (add icon icon, the path must be absolute path)

<link rel="shortcut icon" href="xxx.ico" type="image/x-icon"/>

icon icon

Selector:

Used to find elements and apply styles to labels.

　　tag selector.p{}

　　id selector#id{

}

Class selector.class{}

Parallel (add comma) selector 1, selector 2

Parent and child (add space) parent selector Child selector

　 *{}Full page

Attribute:

　Text:

　　　tex

t-decoration text decoration (underline or something)

　　text-indent Indent

　　text-shadow shadow 1px (horizontal shadow position) 1px (vertical) 1px (blurred distance) # (shadow color)

　　font-weight font bold

　em Table one word size

　Background:

　　background-position

: The attribute defines the position of the picture in p in p. You can write two values left, right, up and down

<head>
    <style>        
        #p{ 
        width:100%;
        height:111px;
        background-image:url();
            background-position:34% 0        }
    </style></head><body>
    <p id="p"></p></body>

bg-position

Zoom

Background: color image tile position size

Summary problem:

1. The text-indent indent attribute can only be used on block tags. Line tags such as span cannot use

Solution: Add the display:inline-block; attribute to span to turn it into an inline block label.

　　2. A large p sets a small p. If the parent p does not set the width and height, it will change as the position of the child p moves.

If the margin float attribute is written on the child p, the parent p will also move.

Solution: Set a border or define the width and height for the parent p.

　3. Change the color of

Cancel the border, set the background color and height.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

CSS classification, attributes and selectors

Related articles