How to design css

CSS is a style language used for web design. It allows us to style the presentation of web pages to create a better user experience. In this article, I will describe the basic concepts, design principles and common design techniques of CSS, hoping to help beginners better understand and use CSS.

1. Basic concepts of CSS

1. Selector

CSS selectors are used to specify the HTML elements to which styles are to be applied. Common selectors are Tag selector, class selector, ID selector, attribute selector, pseudo-class selector, etc. For example, the tag selector can style the tag by specifying the HTML tag name, such as:

p {
    font-size: 16px;
    color: #333;
}

This will set the font size of all p tags to 16px and the color to #333.

2. Attributes

CSS attributes are used to define the style of HTML elements, such as font color, size, background color, etc. Common CSS properties include font-size, color, background-color, etc.

p {
    font-size: 16px;
    color: #333;
    background-color: #fff;
}

This way you can set the font size of all p tags to 16px, the color to #333, and the background color to #fff.

3. Value

The CSS value represents the specific value to be set for the attribute, which can be pixels, percentages, strings, etc. For example, the value of the font-size attribute can be in the form of pixels, percentages, etc.

p {
    font-size: 16px;
    font-size: 1em;
}

The 16px and 1em here are both the values ​​of the font-size attribute. The former indicates that the font size is 16 pixels, and the latter indicates that the font size is a multiple of the font size of the parent element. One time is the default size. .

2. CSS design principles

1. Inheritance

CSS inheritance means that child elements can inherit the style of the parent element, thereby avoiding duplication. Code and style settings. For example, if you want the font color of both the p tag and a tag to be blue, you can set the color attribute for the parent element, and then its child elements will automatically inherit its style.

body {
    color: blue;
}

This will make the font color of all a tags and p tags in the page blue.

2. Cascading

The cascading of CSS means that different style settings of the same element will produce different effects based on different priorities. For example, if the color and font-size attributes are set at the same time in a tag, their priority will have an impact.

p {
    color: red;
    font-size: 20px;
    color: blue;
}

The color attribute here will be overwritten by the subsequent blue, so the final font color is blue, and the font-size attribute will take effect.

3. Concise

CSS style settings should be as concise and clear as possible to avoid repeated and redundant code and improve the loading speed and maintainability of the page. Simple effects can be achieved by reducing the level of selectors and abbreviating attributes.

For example:

/* 不优雅的写法 */
.wrapper .content .list .item .title {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

/* 优雅的写法 */
.title {
    font: 16px/1.5 sans-serif;
    color: #333;
    margin-bottom: 10px;
}

3. CSS design skills

1. Box model

The box model of CSS refers to all HTML elements It can be regarded as a rectangular box, including four parts: content, padding, border and margin.

div {
    width: 300px;
    height: 200px;
    border: 10px solid #ccc;
    padding: 20px;
    margin: 30px;
}

The width and height attributes here define the width and height of the box, the border attribute defines the border style and width of the box, the padding attribute defines the inner margin of the box, and the margin attribute defines the outer margin of the box. .

2. Floating layout

CSS floating layout refers to realizing page layout by setting the float attribute of elements. A floating element will break away from the document flow and no longer occupy its own position. Instead, it will float to the left or right and affect the position of the elements around it.

img {
    float: left;
    margin-right: 20px;
}

The img tag here sets the float attribute to left, which means floating to the left, and sets the margin-right attribute to 20px, which means the right margin is 20 pixels.

3. Responsive design

The responsive design of CSS refers to using media queries to set styles for different devices and screen sizes, so as to achieve different effects of page presentation. . This can be achieved by setting up different CSS style sheets or defining different media queries in the same style sheet.

@media (max-width: 768px) {
    /* 在窄屏幕下的样式设置 */
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* 在宽屏幕下的样式设置 */
}

@media (min-width: 1025px) {
    /* 在超宽屏幕下的样式设置 */
}

The above are the basic concepts, design principles and common design techniques of CSS. In practical applications, different techniques and methods need to be used according to needs to achieve the effects and functions of the page. At the same time, continuous learning and mastering CSS-related knowledge is also the key to improving web design capabilities.

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