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

CSS classification, attributes and selectors

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

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!

Recommended reading:

Basic knowledge of html in the front-end

Analysis of the front-end layout of well-known websites

Basic knowledge about front-end css

The above is the detailed content of CSS classification, attributes and selectors. For more information, please follow other related articles on 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