HTML and CSS teaching-Chapter 5 Use CSS styles

Chapter 5 Use CSS styles

Key points of this Chapter
Apply styles to HTML documents
CSS style code writing rules
Types and usage of CSS style selectors

Directory:
5.1 apply styles to HTML documents
5.2css style coding rules
5.3css style Selector
5.4 style priority

5.1 apply styles to HTML documents
1. Apply style methods
After the style is designed, apply the style to the HTML document.
And apply CSS to HTML pages.
 
(1) inline Style
Inline styles are written in the tag. They only start with their tags.
. The Inline style sheet uses the <style> flag.

(2) Internal Style Sheets
The internal style sheet is written in Valid. The internal style sheet also uses the <style> mark, written:
<Style type = "text/CSS">
/* Style rules */
</Style>

(3) external style sheets
CSS allows you to store all the samples in an external style table file ending with .css.
. You can flexibly apply an external style sheet to an HTML document.
. There are two methods for the external style sheet of the attachment. You can link them or import them.
.

2. Application style priority
All styles are stacked in a new virtual style sheet according to the following rules. If rules of different style sheets conflict, the rules to be applied are determined based on the priority, inline styles have the highest priority.
(1) browser default settings
(2) external style sheets
(3) Internal Style Sheets
(4) inline Style

5.2 CSS style code writing rules
1. style code writing rules
A css rule consists of a selector and a declaration. The Declaration consists of properties and values. The declaration is used to set the style of the specified selector.
Selector {property: Value}

--- If you need to specify multiple attributes for one selector, use semicolons to separate all attributes and values.
--- To reduce repeated declaration of a style sheet, you can combine several selectors in a style rule Definition Statement. Each selector is separated by commas.

2. Comment on the rule
When there are many rules in a style sheet, you can use annotations to manage the style sheet.
All comments start with a slash (/*) and end with a slash (*/). It can be used in complex and important styles, so that when you look at the previously designed style sheets later, you will know the role of each rule.

3. Rule flag
Annotations are important for reading the entire style sheet. However, by introducing the logo concept, you can track individual rules, which is very useful for complex style sheets. The marker uses the uncommon characters in the style sheet as the start of the comment, which helps you to search for rules using the search tool of the text editor.

4. Rule formatting
Indentation is mainly used to ensure that the Code is clear and readable. In actual use, you can click a tab key to indent the selector, and click the tab key twice to indent the statement and end the braces. Such typographical rules make query rules very easy.

This can avoid confusion even when the style sheet is increasing.

5. General rules for style naming
(1) the words used for naming should be words that are not specific to a certain State (such as color or font size), so as to prevent the name from being meaningless when the status changes.
(2) style class names consist of lowercase letters (A-z), numbers (0-9), underscores (_), and minus signs (-) that start with a letter.
(3) The style ID name consists of lowercase letters (A-z), numbers (0-9), and underscores (_) that do not start with a number.
(4) The words or abbreviations used by the module, type, status, and position should be kept in the above order, and the words should be used to clarify the purpose.

5.3 CSS style Selector
1. html tag Selector
An HTML page consists of many different tags. The HTML Tag selector in CSS is used to declare which tags use the CSS style. Therefore, the names of each HTML tag can be used as the names of the corresponding tag selector.

2. class selector
The class selector is the most common class selector used to define styles that require special expressions in HTML pages. The name of the class selector can be customized by the user. The attributes and values are the same as those of the HTML Tag selector and must comply with CSS specifications. The class selector name must have a dot (.) as the prefix.

If you want to use the specified class selector, you must declare it in the corresponding HTML tag in the form of class = "class selector name.

3. ID Selector
The ID selector can only be used once on an HTML page, which is more targeted. In the HTML Tag, you only need to use the ID attribute to call the ID selector in CSS. The ID selector name is customized by the user. The attribute and value are written in the same way as other tag selectors. However, in CSS, the ID selector name is prefixed with the "#" symbol.

4. Advanced Selector
(1) pseudo class selector and pseudo element Selector
The pseudo-class selector and pseudo-element selector can specify a style for a non-specific structure in the document, or specify a style for the state of some elements (including the document itself, it applies styles based on certain conditions rather than document structures.
Pseudo Class Name
: Link
: Visited
: Focus
: Hover
: Active

(2) intersection Selector
The intersection selector is composed of two selectors. The result is the intersection of the selected element ranges. The first must be the tag selector, and the second must be the class selector or ID selector. There must be no space between two selectors and continuous writing is required.

P. classname {
Color: #339; font-size: 16px ;}

(3) descendant Selector
The descendant selector can be used to find the descendant of a specific element or element group. The descendant selector is a string consisting of two or more single selectors separated by space characters. The descendant selector selects elements based on the context in the document. Two selectors are separated by spaces.

Div P {
Color: red;
}

(4) Child Selector
The difference between this selector and the descendant selector is that the child selector only refers to its direct descendant, or can be understood as acting on the first descendant of the child element. The descendant selector acts on all child elements. The child selector selects the child selector by space, and the Child selector selects the child selector by ">.

Div> P {
Color: red;
}

(5) attribute Selector
The attribute selector can find elements based on whether a property exists or its value, so it can achieve some very interesting results. We can think that the class and ID selector are actually attribute selectors, but they only select the class or ID value. Earlier Browsers Do not support attribute selectors, but the mainstream standard browsers currently support attribute selectors.

The format of the attribute selector is element followed by brackets. The brackets contain attributes or attribute expressions.

Simple and precise attribute value selectors are available.

5.4 style priority
Order of stacked importance:
(1) marked! Important user style.
(2) marked! The author style of important.
(3) Author style.
(4) User style.
(5) Browser/user proxy application style.