lesson03_02 Style Rule Selector Basic tutorial

Style Rule Selector

Author: loncer More Learning resources at: wwww.loncer.cn

• HTML Selector

  is the HTML tag as selector, so that all the HTML tags in the Web page of the CSS application will be displayed according to the defined statements.

• Class Selector
  To divide the individual page elements created by an HTML tag into several categories, set the class of the HTML tag to a different value:

  For example: P1 P2 P3

  The style is defined as follows:

  Note: If the style sheet is defined, selector directly to (.) followed by the class name, this style rule applies to all HTML tags that class= the class name. The class selector is divided into two categories:
  
  
  1. Associate class selector:html tag name. Class name (you can define different rules for the same element).
  2. Standalone class selector:. Class name (you can define the same style rules for different elements).
• The ID Selector id attribute is used to define a particular HTML element, and only one element in a Web page file can use an ID value.

  In the Web page: text here

  The style is defined as follows:

• An association selector refers to a string of two or more single selectors separated by a space
  For example:
  P EM {Background:yellow}
  The "P EM" is the association selector, which represents

  The contents of the label pair in the label pair have a yellow background, and the contents of the label pair are not affected elsewhere.
  Note: The association selection defines a rule that has precedence over a single selector-defined rule.

• Combining selectors in order to reduce duplicate declarations of a style sheet, you can combine several selectors in a style rule definition.
  Example: h1,h2,h3,h4,h5,h6,td{color:red}
• A pseudo-element selector is a way of defining the various states of the same HTML element and part of the contents of the letter it contains.
  The format is as follows: HTML element: pseudo periodic Law {attribute: value}

  Common pseudo-elements are as follows

  element name	function
  A:active	Status when hyperlinks are selected
  A:hover	The cursor moves to the state on the hyperlink
  A:link	A state without any action
  a:visited	Visited hyperlink status
  P:first-line	The first line of text in a paragraph
  P:first-letter	The first letter in a paragraph

  
  Class selectors can be used with pseudo elements:
  HTML element. Class Name: pseudo element {attribute: value}

