CSS classification, attributes and selectors-JS Tutorial-php.cn

CSS classification, attributes and selectors

php中世界最好的语言

Release： 2018-03-19 13:51:08

Original

1417 people have browsed it

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" />

Copy after login

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"/>

Copy after login

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>

Copy after login

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!