How to use css styles

CSS (Cascading Style Sheets) is a web page style definition language used to describe the presentation of HTML or XML (including various XML branches such as SVG, XHTML, etc.) documents. CSS allows developers to separate the content and style of HTML files, which makes the style easier to maintain and modify, and can make the presentation of the page more flexible and easier to manage. This article will introduce how to use CSS styles to beautify and optimize web pages.

1. Basic CSS syntax

CSS rules consist of two main parts: selectors and declaration blocks.

The selector specifies the HTML element to which the rule applies. For example, you can use the following selector to set the text color of all paragraphs to red:

p {
    color: red;
}

The declaration block contains one or more properties that specify the style rules to be applied to the selected elements. In the above example, "color" is the attribute and "red" is the attribute value. To add multiple properties to a declaration block, use a semicolon ";" to separate each property. For example, you can use the following declaration block to set the text color and font size in a paragraph:

p {
    color: red;
    font-size: 16px;
}

2. CSS selectors

In addition to the element selectors shown above (such as p, div, etc.) , CSS also provides a variety of other selectors.

1. Class Selector

The class selector allows developers to assign a class name to a specific HTML element in order to locate and apply rules.

For example, if you want to set the color of all headings to blue, you can use the following CSS:

h1, h2, h3 {
    color: blue;
}

If you only want to set the color of some headings on the page to blue, you can Each heading element is marked as a specific class and style rules are applied to that class. For example, this code snippet assigns the same blue rule to all titles of the "my-class" class:

<h1 class="my-class">Title 1</h1>
<h2 class="my-class">Title 2</h2>
<h3 class="my-class">Title 3</h3>

.my-class {
    color: blue;
}

2. ID selector

The ID selector is the most commonly used in CSS One of the selectors. The ID selector is used to uniquely identify a single element on the page.

For example, you can use the following code snippet to set the background color of the element with the ID "my-element" to red:

#my-element {
    background-color: red;
}

3. Descendant selector

Descendants A selector means that you can select all child elements or grandchild elements under an element.

For example, if you want to select a elements under all paragraphs on the page, you can use the following syntax:

p a {
    color: blue;
}

The above code will set a blue color for all a elements under each p element.

4. Combination selector

Combination selector refers to selecting two or more selectors to select a single element or set of elements at the same time.

For example, the following code will set a blue shading for span elements with class "my-class":

span.my-class, .my-class span {
    background-color: blue;
}

The above code will select any span with class "my-class" element or a span element within any element with class "my-class" and apply a blue shading style to it.

3. CSS Layout

CSS allows developers to have almost complete control over page layout and use various techniques such as floating, positioning, and box models to control the size and position of elements.

1. Floating Layout

Floating layout is a fluid layout technique suitable for grouping multiple elements together and placing them outside of the regular content flow. The following code floats the right side of the p element to the left side of the image.

p {
    float: right;
    width: 50%;
}

img {
    float: left;
    width: 50%;
}

2. Positioning layout

Positioning layout is one of the most flexible layout types in CSS, allowing developers to place elements using relative position, absolute position or fixed position. If you want to position an element at a specific location in the browser window, use CSS similar to the following:

#my-element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3. Box model layout

Box model layout refers to using CSS to define the appearance of elements. a way. The CSS box model has four main components: margin, border, padding, and content. To style the box model, use the following CSS:

.box {
    width: 200px;
    height: 200px;
    margin: 10px;
    padding: 10px;
    border: 10px solid black;
}

The above CSS will set a 200x200 pixel square box with 10 pixels of margin, 10 pixels of padding, and 10 pixels of margin from other elements. Black border.

4. CSS Animation

CSS animation is a powerful technology that allows developers to create a variety of dynamic effects, including fade-in, slide, rotation, and transformation. The following is a CSS example of a rapidly blinking text effect:

@keyframes blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
 
h1 {
    animation: blink 1s infinite;
}

The above CSS defines an animation called "blink", in which the h1 element gradually becomes transparent and quickly blinks on the page.

Summary

CSS is a very useful web development tool with a wide range of applications, allowing developers to add more dynamic effects to static web pages. Understanding and learning the basic syntax and layout skills of CSS can allow developers to more flexibly control the presentation of web pages. It is also one of the key skills that is essential in today's world that emphasizes the beauty and interactivity of pages.

The above is the detailed content of How to use css styles. For more information, please follow other related articles on the PHP Chinese website!