Let’s talk about css except the last style

<p>CSS is a language used to describe the style of web pages. It can style various elements in web pages to beautify and enhance web pages. The last one in CSS refers to the last style in the CSS style sheet, but in fact there are many things worth exploring in CSS besides the last one.

<p>1. CSS selector

<p>CSS selector is used to select HTML elements. They make selections based on the attributes, relationships, and positions of elements. Commonly used selectors are:

1. Tag Selector

<p>The tag selector is the most commonly used selector, which selects the tag of an HTML element. name to set the style. For example:

h1 {
    color: red;
    font-size: 24px;
}

<p>The above code uses the tag selector to select all <h1> elements.

2. Class Selector

<p>The class selector selects HTML elements and styles them by setting the class attribute. For example:

.text-red {
    color: red;
}

<p>Then use this class in HTML:

<p class="text-red">这里的文字是红色的。</p>

<p>The class selector can be used to uniformly set the style in the same page.

3. ID Selector

<p>The ID selector selects HTML elements with unique ID attributes and sets their styles. For example:

#my-title {
    font-size: 36px;
}

<p>Use this ID in HTML:

<h1 id="my-title">这是我的标题</h1>

<p>It should be noted that there can only be one same ID value in an HTML document.

4. Attribute Selector

<p>The attribute selector selects and sets styles based on the attributes of HTML elements. For example:

input[type="submit"] {
    background-color: blue;
}

<p>The above code will set a blue background for all <input> elements whose type attribute is submit.

5. Descendant Selector

<p>The descendant selector selects the descendant elements of an HTML element, that is, its child elements, grandchild elements, great-grandchild elements, etc. . For example:

.container .title {
    font-size: 24px;
}

<p>The above code means to select all descendant elements of class title in the element with class container, and set their font size to 24 pixels .

6. Pseudo Class Selector

<p>The pseudo-class selector is a keyword defined after the colon of the selector, used to select elements in a specific state . For example:

a:hover {
   color: red;
}

<p>The above code means to set the color of the link to red when the mouse is hovering.

<p>2. CSS box model

<p>The CSS box model means that each part of an HTML element is a "box", including the content area, padding area, border area and margins. area. This model is important for understanding the overall structure and styling of HTML elements.

<p>3. CSS Units

<p>There are various units in CSS, which can be used to represent different style attributes to achieve various effects. Common units are:

1. Pixel (Pixel)

<p>Pixel is a basic unit of length and is usually used to specify the size of elements on the screen. For example:

p {
    font-size: 14px;
}

2. Percentage

<p>Percentage is the length unit relative to the parent element. For example:

.container {
    width: 80%;
}

<p>The above code means to set the width of .container to 80% of the width of its parent element.

3. em and rem

<p>em and rem are length units relative to the font size of the current element. em is the font size relative to its own element, while rem is the font size relative to the root element (usually an HTML element). For example:

h1 {
    font-size: 2.5em;
}

.container {
    width: 40rem;
}

<p>In the above code, the font size of the h1 element is 2.5 times the font size of its own element, and the width of the .container element is the font size of the root element 40 times.

4. Viewport Units

<p>Viewport units are units of length relative to the size of the viewport, often used in responsive design. Common viewport units are:

• vw/vh: relative to 1% of the viewport width and height;
• vmin/vmax: relative to the greater of the viewport width and height 1% of the smaller or larger value.

<p>For example:

.container {
    width: 80vw;
    height: 50vmin;
}

<p>In the above code, the width of the .container element is 80% of the viewport width, and the height is the greater of the viewport width and height. 50% of the smallest value.

<p>4. CSS properties

<p>CSS properties are various properties used to set the style of elements. Some of the common properties include:

1. color

<p>The color property is used to set the text color.

h1 {
    color: red;
}

<p>The above code sets the text color of all <h1> elements to red.

2. background-color

<p>The background-color property is used to set the background color of the element.

.container {
    background-color: #f8f8f8;
}

<p>The above code sets the background color of the .container element to light gray.

3. border

<p>The border property is used to set the border of an element.

.container {
    border: 2px solid black;
}

<p>The above code sets the border width of the .container element to 2 pixels, the color to black, and the border style to solid line.

4. font-size

<p>The font-size property is used to set the font size.

p {
    font-size: 16px;
}

<p>The above code sets the font size of all <p> elements to 16 pixels.

5. text-align

<p> The text-align property is used to set the text alignment.

h1 {
    text-align: center;
}

<p>上述代码将所有的<h1>元素的文本居中对齐。

<p>五、CSS框架

<p>CSS框架是指提供一组预定义的CSS样式和JavaScript交互，可以快速搭建网页的开发工具。常见的CSS框架有Bootstrap、Foundation、Materialize等。它们提供了大量的预设样式和交互组件，可以极大地加速开发的进度和提升用户体验。

<p>以上就是CSS的一些基本内容和重要性，虽然CSS的最后一个很重要，但我们也要关注其它内容，以了解并掌握CSS的全部知识，从而开发出更为优秀的网页。

The above is the detailed content of Let’s talk about css except the last style. For more information, please follow other related articles on the PHP Chinese website!