CSS technology

Padding is the inner margin and

margin is the outer margin

1. CSS Overview
CSS refers to Cascading Style Sheets (Cascading Style Sheets)
styles define how to display HTML elements.
Styles are usually stored in style sheets.
Styles were added to HTML 4.0 to solve the problem of content and performance. The problem of separation
External style sheets can greatly improve productivity
External style sheets are usually stored in CSS files
Multiple style definitions can be cascaded into one

2. Styles solve a common problem
HTML tags were originally designed to define document content. By using tags such as <h1>, <p>, and <table>, HTML was originally intended to express information such as "this is a heading", "this is a paragraph", "this is a table". At the same time the document layout is done by the browser without any formatting tags.
As the two major browsers (Netscape and Internet Explorer) continue to add new HTML tags and attributes (such as font tags and color attributes) to the HTML specification, creating sites where document content is clearly separate from the presentation layer of the document has become increasingly difficult.
To solve this problem, the World Wide Web Consortium (W3C), the non-profit standardization consortium, took on the mission of standardizing HTML and creating styles outside of HTML 4.0.
All major browsers support Cascading Style Sheets

3. CSS Syntax
CSS rules consist of two main parts: selectors, and one or more declarations.
selector {declaration1; declaration2; ... declarationN }

A selector is usually an HTML element that you want to style.
Each declaration consists of an attribute and a value.
A property is the style attribute you wish to set. Each property has a value. Properties and values are separated by colons.
The following line of code selector {property: value}

defines the color of the text inside the h1 element to be red and sets the font size to 14 pixels.
In this example, h1 is the selector, color and font-size are attributes, and red and 14px are values.
h1 {color:red; font-size:14px;}

The diagram below shows you the structure of the code above:

Hint: Use curly braces to surround the declaration.

Comment: /* */ Do not include comment

1, different writing and units of the value
In addition to English word red, we can also use the hexadecimal color value #ff0000:
p { color: #ff0000; }
To save words section, we can use the CSS shorthand:
p { color: #f00; }
We can also use RGB values in two ways:
p { color: #ff0000; } p { color: rgb(100%,0%,0 %); }
Note that when using RGB percentages, write the percent sign even when the value is 0. But in other cases this is not necessary. For example, when the size is 0 pixels, you don't need to use px units after 0, because 0 is 0, no matter what the unit is.
2. Remember to write quotation marks
Tip : If the value is several words, you need to add quotation marks to the value:
p {font-family: "sans serif";}
3. Multiple declarations:
Hint: If you want to define more than one declaration, you need to use the points separate each declaration. The following example shows how to define a centered paragraph with red text. The last rule is that there is no need for a semicolon, because a semicolon is a separator in English, not a closing character. However, most experienced designers will put a semicolon at the end of each statement, which has the advantage of minimizing the chance of errors when adding or removing statements from existing rules. Like this:
p {text-align:center; color:red;}
You should describe only one property per line, this makes the style definition more readable, like this:
p { text-align: center; color : black; font-family: arial; }
4. Spaces and capitalization
Most style sheets contain more than one rule, and most rules contain more than one declaration. The use of multiple declarations and spaces makes the stylesheet easier to edit:
body {

      color: #000;
      background: #fff;
      margin: 0;
      padding: 0;
      font-family: Georgia, Palatino, serif;
     }
Inclusion of spaces does not affect how CSS works in browsers, and likewise, unlike XHTML, CSS is not case-sensitive. There is one exception: class and id names are case-sensitive when it comes to working with HTML documents.
Do not leave a space between the property value and the unit. If you use "margin-left: 20 px" instead of "margin-left: 20px", it only works in IE 6, but doesn't work in Mozilla/Firefox or Netscape.

Note that class selectors and ID selectors may be case-sensitive. It depends on the language of the document. HTML and XHTML define class and ID values as case-sensitive, so the case of class and ID values must match the corresponding values in the document.
Therefore, for the following CSS and HTML, the element will not become bold:

#intro {font-weight:bold;}
<p id="Intro">This is a paragraph of introduction.</p>
5. Selectors
You can group selectors so that the grouped selectors share the same declaration. Separate selectors that need to be grouped with commas. In the example below, we have grouped all heading elements. All header elements are green.
h1,h2,h3,h4,h5,h6 { color: green; }
6. Inheritance and its problems
According to CSS, child elements inherit properties from parent elements. But it doesn't always work this way. Take a look at the following rule:
body { font-family: Verdana, sans-serif; }
According to the above rule, the body element of the site will use the Verdana font (if it exists on the visitor's system).
With CSS inheritance, child elements will inherit properties (such as p, td, ul, ol, ul, li, dl, dt, and dd) owned by the top-level element (body in this case). No additional rules are required, all child elements of body should display the Verdana font, as should child elements of child elements. And it does in most modern browsers.
But that wasn't necessarily the case in the bloody days of the browser wars, when support for standards wasn't a business priority. For example, Netscape 4 does not support inheritance, it ignores not only inheritance, but also the rules applied to the body element. IE/Windows until IE6 had a related issue where font styles in tables were ignored. How can we be good?
Be kind to Netscape 4
Fortunately, you can deal with legacy browsers failing to understand inheritance by using a redundancy law we call "Be Kind to Netscape 4". body {      font-family: Verdana, sans-serif;
}      p , td, ul, ol, li, dl, dt, dd {      font-family: Verdana, sans-serif ; }

4.0 browsers don't understand inheritance, but they can understand group selectors. Doing this will waste some users' bandwidth, but if you need support for Netscape 4 users, you have to do it.
Is inheritance a curse?
What if you don't want the "Verdana, sans-serif" font to be inherited by all child elements? Let's say you want the font of the paragraph to be Times. no problem. Create a special rule for p so it gets rid of the parent element's rule: body { font-family:
Verdana      , sans-serif;      } td, ul, ol, ul, li, dl, dt, dd {      font -family: Verdana, sans-serif;      } p {      font-family: Times, "Times New Roman", serif; } Copy code 4. How to insert a style sheet When a style sheet is read, the browser will format it according to it HTML document. There are three ways to insert style sheets: External Style Sheets External style sheets are ideal when styles need to be applied to many pages. With external style sheets, you can change the look of the entire site by changing one file. Each page is linked to the style sheet using the <link> tag. The <link> tag is in the head (of the document): <head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
The browser will read the style declaration from the file mystyle.css and format the document according to it.
External style sheets can be edited in any text editor. The file cannot contain any html tags. Style sheets should be saved with a .css extension. Here is an example of a stylesheet file:
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
do not match the property value with the unit Leave spaces in between. If you use "margin-left: 20 px" instead of "margin-left: 20px", it only works in IE 6, but doesn't work in Mozilla/Firefox or Netscape.
Internal Style Sheets Internal style
sheets should be used when specific styles are required for a single document. You can use the <style> tag to define an internal style sheet in the document head, like this:
<
head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px; }
body {background-image: url("

</head>
Copy
Code Inline Styles
Inline styles lose many of the advantages of style sheets by commingling presentation and content. Use this approach with caution, for example when the style only needs to be applied once on an element.
To use inline styles, you need to use the style attribute within the relevant tag. The Style property can contain any CSS property. This example shows how to change the color and left margin of a paragraph:
<p style="color: sienna; margin-left: 20px">
This is a paragraph

</p>

Entering a style sheet

You can import a style file into another style file, or import a style file into the <style> element

n@import url(css file)
p {
   background-color:green;
}

@import url(import/one.css);

@import url(import/ two.css);

CSS:
The specific difference between @import and link 5. Multiple styles
Style sheets allow style information to be specified in multiple ways. Styles can be specified in a single HTML element, in the header element of an HTML page, or in an external CSS file. It is even possible to reference multiple external style sheets within the same HTML document.
If certain properties are defined by the same selector in different style sheets, the property values will be inherited from the more specific style sheet.

Cascading order
When the same HTML element is defined by more than one style, which style is used?
In general, all styles are layered in a new dummy style sheet according to the following rules, with the number 4 having the highest priority.
Browser defaults
External style sheets
Internal style sheets (inside the <head> tag)
Inline styles (inside HTML elements)
Therefore, inline styles (inside HTML elements) have the highest priority, which means that it will Takes precedence over style declarations in the <head> tag, style declarations in external style sheets, or in browsers (the default).
The remaining three style declarations are related to the loading order.
The following <link rel="stylesheet" type="text/css" href="css/layout.css"> are placed in different positions, and the
loading order is also different. level is different.

Copy Code
<html>
   <head>

        <title>CSS Settings</title>
        
       <style >

            @import url(import/one.css);
            @import url(import/two.css);
        </style>
        <link rel="stylesheet" type="text/css" href="css/layout.css">
    </head>

    <body>
        <p>aaaaa</p>
        <p style="background-color:yellow;">bbbb</p>
        <p>cccc</p>
        <b>wwwwwww</b>

    </body>
</html>
复制代码

Guess you like