how to use css

How to use CSS

CSS (Cascading Style Sheet) is a language used to design web page styles. CSS can control the color, font, layout, etc. of the web page, making the web page more beautiful and easier to read. In this article, we will discuss how to use CSS to style web pages.

1. CSS Basic Grammar

Before using CSS, you need to master some basic grammar rules. CSS consists of two main parts: selectors and declarations, as shown below:

选择器 {
    声明1;
    声明2;
    ...
}

Among them, the selector is used to specify the HTML element to be styled, and the declaration is used to specify the style to be set. A simple example looks like this:

    <style>
        p {
            color: blue;
            font-size: 20px;
        }
    </style>


    <p>这是一个段落。</p>

In this example, we set up a p selector to specify the value of all <p></p> elements style. The color statement is used to specify the text color as blue, and the font-size statement is used to specify the text size as 20 pixels.

2. CSS Selectors

In CSS, selectors are used to specify the HTML elements to be styled. Some commonly used selector types are listed below:

• Tag selector: Specify all elements with the same tag name, such as p means all <p> </p>element.
• ID selector: Specify elements with a specific ID, such as #my-idSpecify the element with the ID my-id.
• Class selector: Specify elements with a specific class, such as .my-classSpecify all elements with the my-class class.
• Combined selectors: Combine different types of selectors to narrow down the elements to be styled.
• Descendant selector: selects all descendant elements of the specified element. For example, div p will select all <p in the></p> <div> <code> element. ;element.
• Child element selector: selects the direct child elements of the specified element. For example, div > p will select all direct child elements of the
  element. <p></p>Element.

  For example, the following CSS code styles all paragraph elements within the <div> element with the ID <code>my-div:

  #my-div p {
      color: red;
  }

  3. CSS Box Model

  The CSS box model is a model used to design web page layout. Any HTML element can be regarded as a box, which consists of a content area, an inner It is composed of margin area, border area and outer margin area. The various parts of the box model are listed below:

  • Content area: Contains the actual content of the element, such as text, images, videos, etc.
  • Padding area: Located outside the content area, used to control the spacing between content and borders.
  • Border area: The border that surrounds the element and defines the size and shape of the element.
  • Margin area: Located outside the border area, used to control the spacing between adjacent elements.

  The following is a schematic diagram of the CSS box model:

  +----------------------------------+
  |               Margin             |
  |    +------------------------+    |
  |    |        Border          |    |
  |    |    +---------------+   |    |
  |    |    |   Padding    |   |    |
  |    |    |               |   |    |
  |    |    +---------------+   |    |
  |    |       Content          |    |
  |    +------------------------+    |
  |               Margin             |
  +----------------------------------+

  When using the CSS box model, you can control the four areas of an element through the following styles:

  选择器 {
      margin: 上 右 下 左;
      border: 厚度 样式 颜色;
      padding: 上 右 下 左;
      width: 宽度;
      height: 高度;
  }

  For example, the following CSS code defines an element with a red border, blue padding, and green margins:

  .box {
      margin: 10px;
      border: 2px solid red;
      padding: 20px;
      background-color: blue;
  }

  4. CSS Layout

  CSS layout refers to Control the position and size of web page elements through CSS to achieve the desired web page layout effect. Listed below are some commonly used CSS layout techniques:

  • Fluid layout: Use relative sizes and percentage layout to adjust page layout size and content. For example, setting the <div> element's width to 50% would make it span half the screen. <li>Fixed Layout: Use fixed sizes and absolute positioning to position elements on the page. For example, use <code>position: absolute; left: 0; top: 0; to position the element in the upper left corner.
  • Flexible layout: Use the flexible box model to define the relationship between elements. You can use attributes such as flex-direction, justify-content and align-items to control the alignment and arrangement of elements.
  • Grid Layout: Use a grid system to position and align content. For example, responsive grid layouts can be easily built using the Bootstrap framework.

  Here is a sample CSS layout code that uses grid layout to divide multiple elements into two and three columns:

  .row {
      display: flex;
      flex-wrap: wrap;
  }
  .col-2 {
      width: calc(50% - 20px);
      margin-right: 20px;
  }
  .col-3 {
      width: calc(33.33% - 20px);
      margin-right: 20px;
  }

  5. CSS Animation

  CSS animation changes the appearance and behavior of HTML elements by applying animation effects to them. The following are some commonly used CSS animation properties:

  • transition: used to set transition effects between element states, such as changing color when the mouse rolls over. For example, using transition: background-color 0.5s ease; can make the background color transition smoothly in 0.5 seconds.
  • transform: used to transform the shape, size and position of elements. For example, use transform: rotate(90deg); to rotate an element 90 degrees.
  • animation: used to create custom CSS animation effects. For example, a simple blink animation can be created using the following code:

  @keyframes blink {
      0% {
          opacity: 1;
      }
      50% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }

  Using the above example, the above blink animation can be applied to an element:

  .blink {
      animation: blink 1s infinite;
  }

  总的来说，CSS是一门非常强大的语言，可以用于实现各种网页设计效果。通过掌握CSS的基本语法和常用技巧，您可以创建出优美、灵活、易于维护的网页样式，并提高您的网页设计水平。