Let's talk about css except the last style-Front-end Q&A-php.cn

Let's talk about css except the last style

PHPz

Release： 2023-04-24 09:26:01

Original

1200 people have browsed it

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.

1. CSS selector

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

Tag Selector

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;
}

Copy after login

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

Class Selector

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

.text-red {
    color: red;
}

Copy after login

Then use this class in HTML:

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

Copy after login

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

ID Selector

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

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

Copy after login

Use this ID in HTML:

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

Copy after login

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

Attribute Selector

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

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

Copy after login

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

Descendant Selector

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;
}

Copy after login

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 .

Pseudo Class Selector

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;
}

Copy after login

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

2. CSS box model

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.

3. CSS Units

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

Pixel (Pixel)

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;
}

Copy after login

Percentage

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

.container {
    width: 80%;
}

Copy after login

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

em and rem

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;
}

Copy after login

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.

Viewport Units

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.

For example:

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

Copy after login

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.

4. CSS properties

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

color

The color property is used to set the text color.

h1 {
    color: red;
}

Copy after login

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

background-color

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

.container {
    background-color: #f8f8f8;
}

Copy after login

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

border

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

.container {
    border: 2px solid black;
}

Copy after login

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.

font-size

The font-size property is used to set the font size.

p {
    font-size: 16px;
}

Copy after login

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

text-align

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

h1 {
    text-align: center;
}

Copy after login

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

五、CSS框架

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

以上就是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!