CSS-Basic Knowledge

Document directory

• External style sheet
• Internal style sheet
• Inline Style

See w3school/CSS

CSS Overview

• CSS refers to the stacked style sheet (C

  AscadingS

  TyleS

  Heets)

• Style DefinitionHow to display

  HTML Element

• Styles are usually stored inStyle Sheet

  Medium

• Add the style to HTML 4.0Solve the problem of separation of content and performance
• External style sheet

  Can greatly improve work efficiency

• External style sheets are usually stored inCSS file

  Medium

• Multiple styles can be definedCascade

  One

Cascade order

Generally, all styles are stacked in a new virtual style table according to the following rules, where number 4 has the highest priority.

1. Browser default settings
2. External style sheet
3. Internal style sheet (inside the
4. Inline style (inside the HTML element)

Therefore, inline styles (inside HTML elements) have the highest priority

This means that it takes precedence over the following style Declaration: style declaration in the Basic CSS syntax

CSS rules are composed of two main parts: Selector

And one or more statements.

.

selector {declaration1; declaration2; ... declarationN }

• The selector is usually an HTML element that you need to change the style.

  .

• Each declaration consists of an attribute and a value.
• A semicolon is used between each declaration ";

  "Separated by semicolons (;) at the end of each statement

  The advantage is that when you increase or decrease declarations from existing rules, the possibility of errors will be minimized.

 

Property is the style attribute you want to set

). Each attribute has a value. The attribute and value are separated by colons.

selector {property: value}

The following code defines the text color in the H1 element as 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 following shows the structure of the above Code:

Tip: Use curly brackets to enclose the declaration.

 

If the value is a number of words, enclose the value with quotation marks:

P {font-family:"sans serif"

;}

Inheritance and its problems according to CSS, child elements inherit attributes from parent Elements

.

 

Body {font-family: verdana, sans-serif;} p, TD, UL, ol, Li, DL, DT, DD {font-family: verdana, sans-serif ;}

If a child element requires a special style, you can define a style rule for a child element after the parent element rule.

Id Selector

The ID selector can specify a specific style for HTML elements labeled with a specific ID.

The ID selector is defined.

The following two ID selectors can be used to define the color of the first element as red, and the color of the second element as Green:

#red

{Color: red ;}
#green

{Color: green ;}

In the following HTML code, the P element whose ID attribute is red is displayed in red, while the P element whose ID attribute is green is displayed in green.

<Pid="red"

> This paragraph is in red. </P>
<Pid="green"

> This section is green. </P>

In modern la S, the ID selector is often used to create a derived selector.

#sidebar p

{
Font-style: italic;
Text-align: right;
Margin-top: 0.5em;
}
The above style will only apply to paragraphs that appear in the element where ID is sidebar.

Class Selector

In CSS, the class selector is displayed with a dot:

.center

{Text-align: Center}

In the preceding example, all HTML elements with the center class are centered.

Attribute Selector

You can set styles for HTML elements with specified attributes, not limited to class and ID attributes.

Note: Internet Explorer 7 (and later) is specified! Doctype supports attribute selectors. Attribute selectors are not supported in IE6 and earlier versions.

The following example shows how to set a style for all elements with the title attribute:

[title]{color:red;}

Insert a style sheet

When you read a style sheet, the browser will format the HTML document based on it. There are three ways to insert a style sheet:

External style sheet

When a style needs to be applied to many pages, the external style sheet will be an ideal choice.

. When using an external style sheet, you can change the appearance of the entire site by changing a file. Use the <link> label to link to the style sheet on each page. <Link> tag in (document) header:

link rel="stylesheet" type="text/css" href="mystyle.css" />
  
The browser reads the style declaration from the file mystyle.css and uses it to format the document.
 

 

Internal style sheet

When a single document requires a special style

Internal style sheets should be used. You can use the <style> label to define an internal style sheet in the Document Header, as shown in the following figure:

<style type="text/css">  hr {color: sienna;}  p {margin-left: 20px;}  body {background-image: url("images/back40.gif");}</style>
 

Inline Style

Because we need to mix the performance and content together, inline styles will lose many of the advantages of style sheets. To use inline Styles, you must use the style attribute in the relevant labels.

NOTE: If some attributes are defined by the same selector in different style sheets, the attribute values will be inherited from more specific style sheets.

, Other rules are replaced by rules in the internal style sheet.

.

 

CSS background attributes

Attribute	Description
Background	This attribute is short for setting the background attribute in a declaration.
Background-Attachment	Whether the background image is fixed or scrolled with the rest of the page.
Background-color	Set the background color of the element.
Background-Image	Set the image as the background.
Background-Position	Set the start position of the background image.
Background-repeat	Set whether or not the background image is repeated.