One, CSS inheritance style

1. Construct style rules: Styles contain rules that define the appearance of the web page. Each rule has two main parts: a selector and a declaration block. The selector determines which elements are affected; A declaration block consists of one or more property-value pairs (each of which forms a declaration) that specify what should be done.

selector {
	property:value;
	}
Copy the code

Style rules consist of a selector, which indicates which elements will be formatted, and a declaration block {}. Each declaration in the declaration block is completed by a colon-separated, semicolon-terminated property – value pair.

 h1{
  background-color: yellow;
  color:aqua;
}
Copy the code

2. Understand inheritance: Inheritance is an important concept in CSS.

<body> <div> <h1>... </h1> <img src="" alt=""> <p>... <em>... </em></p> <p><small>... </small></p> </div>Copy the code
body{
	font-family: Verdana, Geneva, sans-serif;
}
div{
	border:1px solid #000;
	overflow: hidden;
	padding: 0 1em .25em;
}
p{
	color:#36c;
	font-weight: bold;
}
img{
	float: left;
	margin-right: 1em;
}
Copy the code

As in this style setting code, the font-family is inherited, while the border and padding are not. The color and font-weight attributes are also inherited, so text in em and Small elements appears as bold blue text like other paragraph text, rather than the browser default. Here are the CSS properties that will be inherited:

Text:

  • Color (except for a elements)
  • Direction (direction)
  • Font (font)
  • Word-wrap: break-word! Important;
  • Word-wrap: break-word! Important;
  • Font style (used to set italics)
  • Font -variant (set small type uppercase)
  • Padding-top: 0px; padding-bottom: 0px; padding-bottom: 0px;
  • Letter-spacing
  • Line-height (line height)
  • Text-indent (used to indent the first line)
  • Text-align (used to set alignment)
  • Text-transform (used to change case)
  • Visibility:
  • White-space (specifies how to handle Spaces)
  • Word-spacing

List:

  • List style
  • List-style-image (specify custom tags for lists)
  • List-style-position (determines the position of the list tag)
  • List-style-type (sets the tag for the list)

A. form

  • Border-collapse (Control whether the borders of adjacent cells in a table are merged into a single border)
  • Border-spacing specifies the spacing between table borders
  • Caption -side
  • Empty-cells (sets whether to display empty cells in the table)
  • ○ Page setup (for printing)
  • orphans
  • page-break-inside
  • widows

A. other

  • Cursor (mouse pointer)
  • Quotes (used to specify a quotation mark style)

3. Attribute values:

You can use the inherit value for any property if you want to show that the value of the property is the same as the value set by the corresponding parent element for the overwrite property. For example, there is an article element that sets a border. Borders are usually not inherited, so {boreder: inherit} allows paragraphs to get the same border style.

3.2 Predefined values: Most CSS values can be predefined. For example, border: None; Without quoting, none is a predefined value.

3.3 Length and percentage: Many CSS properties have the value of length. The only exception is 0, which may not have units. All lengths must contain numbers and units, such as 3em, 10px, 60%.

3.4 Pure numbers: Only a few CSS attributes accept numbers without units, the most common ones being line-height, Z-index, and opacity. For example, line-height: 1.5.

The CSS properties allow developers to specify the URL of another file, especially an image. Background-image is one such property. In this case, use the URL (file.ext), where file.. Ext is the path and filename of the destination.

Background: url (bg-pattern.png);Copy the code

3.6 CSS Colors: You can use color keywords and values in hexadecimal, RGB, HSL, RGBA, HSLA, and other formats to specify colors for CSS properties.

Color: RGB (99, 0,127); //89 is the amount of red in the color, 0 is the amount of green in the color, 127 is the amount of blue in the color. Color: # 59007 f; // backrgound-color:rgba(89,0,127,1); // Same as RGB color: HSL (282,100%,25%); //282 represents the hue, 100% saturation, 25% brightness.Copy the code

CSS manipulation style sheets

Create styles to apply CSS to multiple web pages, a single web page, or individual HTML elements. These applications are implemented in three ways: external styles (methods first), embedded stylesheets, and inline styles (not recommended).

1. Create a linked external style sheet: Create a new file with the.css extension, edit the CSS to define the web style, and save the document in plain text in the desired directory. In the HEAD section of the HTML page, type:

   <link rel="stylesheet" href="url.css" />
Copy the code

When a change is made to an external stylesheet, all pages that reference it are automatically updated as well.

! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" A href = "url. CSS" / > / / links to external style sheet < / head > < body > < / body > < / HTML >Copy the code

2. Create an embedded style sheet: Enter the style element in the HEAD section of your HTML document and define as many style rules as you want.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> img{ border:4px solid red; } </style> </head> <body> </body> </html>Copy the code

3. Apply inline styles: In the start tag of the HTML element you want to format, type style=” Style rules.”

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> <img src="xxx.jpg" style="border: 4px solid red" /> </script> </body> </html>Copy the code

Define selectors

Selectors can style all elements of a given type, and some allow us to apply formatting rules based on the element’s class, context, state, and so on. The selector determines which elements the style rules apply to: for example, adding Georgia to all p elements, a 12-pixel high format, requires creating a selector that recognizes only p elements and not affects other elements in the code. If you want to set special indentation formatting for the first P element in each region, you need to create a slightly more complex selector that recognizes only the first P element in each region of the page.

3.1 Selectors can define five different criteria for selecting elements to be formatted:

□ Element type or name:

H1 {color: red; }Copy the code

□ Element context:

h1 em{color:red; }Copy the code

□ The class or ID of the element (class selector recommended) :

.error{color:red; } / / class # gaudi {color: red; }//ID strong.error{color:red; }Copy the code

□ A pseudo-class or pseudo-value of an element:

a:link{color:red; }Copy the code

□ Whether the element has certain attributes and values:

a[title]{color:red'}
Copy the code

□ Select the first or last child:

Li: first - child {color: red; Child {} li: last - color: red; }Copy the code

□ Select the first letter or line:

p:first-letter{color:red; }// p:first-line{color:red; } / / the first lineCopy the code

3.2 Select connection elements by state

Select the link element to format by state step: Enter name the link element name,

□ Link □visited □focus □hover □active

a:link{ color:red; } a:visited{color:orange;} a:visited{color:orange; } a:focus{color:purple; } a:hover{color:green; } a:active{color:blue; // Turns blue when the link is activated}Copy the code

Specify an element group:

h1,
h2{
color:red;
}
Copy the code

Using selectors in combination:

em{color:red} .project em{color:red; } combination.architect. Project em{color:red; } //. Architect parent element class nameCopy the code