This method allows you to set multiple styles in the same document and have style control over the entire page . However, if you need to use the same style on multiple pages, you must copy and paste the style on each page.

External style sheet: Use the tag in the HTML document to reference the external CSS file. For example:

In this scenario, all styles are stored in a single CSS file and can be shared across multiple pages The document. This method is the most commonly used and is easy to maintain.

CSS Selectors

CSS selectors are patterns used to select specific elements. There are a variety of selectors available, including the following:

Element Selector: Selects a specific element. For example, to select all p elements:

p {

color: red;

}

ID selector: Selects elements with the specified ID. For example, to select elements with ID "header":

header {

background-color: gray;

}

Class Selector: Selects elements with the specified class. For example, select each element with class "intro":

.intro {

font-style: italic;

}

Compound selector: composed of two or more simple selectors . For example, select all elements with class "intro" and which are p elements:

p.intro {

font-style: italic;

}

CSS Layout

CSS Allowed You control the position and size of elements in an HTML document. Here are some of the most commonly used CSS layout properties:

Position: Use the position property to set an element to an "absolute", "relative" or "fixed" position:

position: absolute;
position: relative;
position: fixed;

Floating: Use the float attribute to float the element to the left or right:

float: left;
float: right;

Display: Use the display attribute to control how elements are displayed, for example: block-level elements or inline elements:

display: block;
display: inline;

Box model : Use padding, margin and border attributes to control the size and position of elements:

padding: 10px;
margin: 10px;
border: 1px solid black;

Responsive web page Design

Responsive web design is a technique used to create websites that are accessible on multiple devices. By using CSS media queries (Media Queries), you can optimize the layout of your website according to different device sizes and orientations.

For example, here is a simple responsive design that will change the layout when the device width falls below 600px:

@media screen and (max-width: 600px) {
body {

background-color: lightblue;

}
#header {

background-color: gray;

}
#nav {

width: 100%;

}
#nav ul {

display: block;
margin: 0;
padding: 0;

}
#nav li {

margin: 0;
padding: 0;
border-bottom: 1px solid white;

}
}

Summary

CSS is a very important technology that provides a A method of describing the style and layout of an HTML document. To add CSS styles to HTML documents, there are several methods available, including inline style sheets, internal style sheets, and external style sheets. CSS selectors are patterns used to select specific elements, while CSS layout properties allow you to control the position and size of elements. Finally, responsive web design is a technique for creating websites that are accessible on multiple devices, using CSS media queries to optimize layout.

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