Three ways to introduce css: 1. Inline introduction, use the style attribute to insert CSS code into a specific HTML tag, the syntax is "
.."; 2. Embedded introduction, put the CSS code in the style tag pair in the head part of the document, the syntax is ""; 3. External introduction, put the CSS code in Into the external CSS file, use the link tag or "@import" rule to introduce it into the html document.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
CSS: Cascading style sheets are a computer language used to express document styles such as HTML or XML. CSS can not only statically modify web pages, but can also cooperate with various scripting languages to dynamically format various elements of web pages. CSS can perform pixel-level precise control of the layout of element positions in web pages, supports almost all font sizes and styles, and has The ability to edit web object and model styles
Basic syntax of CSS:
CSS rules consist of two main parts: selectors, As well as one or more statements, the selector is usually the HTML element whose style needs to be changed. Each statement consists of an attribute and a value.
1. Selector (Selector)
The selector consists of the id, class attribute or element name itself of the HTML element and some Special symbols are used to specify which HTML element to define the style for. For example, the selector p means to define the style for all
tags in the page;
2. Declaration
There can be one or countless declarations. These declarations tell the browser how to render the object specified by the selector. All declarations are placed within a pair of curly braces { }, immediately following the selector.
The statement must include two parts: attributes and attribute values, and use a semicolon to mark the end of a statement. The semicolon can be omitted for the last statement in a style.
Attribute: The style name you want to set for the HTML element, consisting of a series of keywords, such as color, border, font, etc., in CSS Provides many attributes, which you can view through the W3C official website;
Value: consists of a numerical value and a unit or keyword, used to control the display effect of a certain attribute, such as the value of the color attribute It can be red or #F1F1F1 etc.
Colon: is required to separate attributes and values. Each combination of attributes and values can be regarded as a statement. A semicolon is required at the end of each statement. ; At the end, declarations belonging to the same selector need to be wrapped in curly braces { }.
Three forms of CSS introduction
1. Inline style sheet (inline introduction)
Add the style attribute directly to a single HTML element tag to control the presentation style of the HTML tag.
This way of introducing CSS is decentralized, flexible and convenient, but it lacks integrity and planning, which is not conducive to later modification and maintenance. When the style of the website needs to be modified, the same modification may involve multiple places. , high maintenance costs. The style effect using the STYLE attribute is the strongest and will overwrite the same style effects of other introduction methods.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color: maroon; margin-left: 40px">PHP中文网</h1>
<p style="color: blue;">https://www.php.cn/</p>
</body>
</html>
Although inline style (inline style) can easily give CSS styles to HTML tags, its shortcomings are also very obvious, and it is not recommended to use it too much.
Defining inline styles requires defining the style attribute in each HTML tag, which is very inconvenient;
Use double in inline styles Be especially careful when using quotation marks or single quotation marks, because the attributes of HTML tags usually use double quotation marks to wrap the attribute value, such as ;
2. Internal style sheet (embedded introduction)
Write the style code on the page