HTML add css--style Selector

How to add a style to HTML. Two methods:

First, create a new CSS style sheet, the same directory as the original HTML, and then through the link tag links. such as: <link type= "Text/css" rel= "stylesheet" href= "lounge.css" > (link tag is a void element with no end tag.) ）

Second, use the style tag directly in the HTML source code. such as the:<style> style </style>,style tag embedded in the head.

Inserting a style into HTML will involve five style selectors.

1. Element selector to add a style to an element

As follows: the P element and the text within the H1 element apply the style inside the curly braces

<style>

P,h1{color:grey;

background-color:red;

Font-family:sans-serif;}

</style>

2. Class Selector, classes property

<style>Create a CSS class named in the label blue-text , and then apply the class to the HTML element.

Such as:

<style>

. Blue-text{color:black;}

</style>

<p class= "Blue-text" >

Note that in CSS style elements, the class selector should be added . as a prefix. In the class declaration of an HTML element, the class attribute cannot be added . as a prefix.

The class selector does not have to be specific to a label, and this CSS class is used whenever the element has a class tag applied to it.

3. ID property setting Style

Like class, an ID is defined for an element, and a declaration is created for the ID. Cases:

<p id= "Important" ></p>

<style>

#important {color:black;}

</style>

Note: Unlike class, you should add # as a prefix in CSS style elements, and there is no prefix in HTML. An ID corresponds to a CSS property.

4. Attribute selector, select an element to apply a style

such as: *[title]{color:red;}

All elements that contain the title attribute can apply the above style.

5. Descendant selectors are also called include selectors. Descendant selectors can select elements that are descendants of an element.

Select elements based on context

You can define descendant selectors to create rules that make these rules work in some document structures, but not in other structures.

For example, if you want to apply a style only to the EM element in the H1 element, you can write this:

H1 em {color:red;}

The above rule turns the text of the EM element as the descendant of the H1 element into red. Other EM text (such as EM in a paragraph or block reference) is not selected by this rule:

p>em{color;red;} indicates that the EM element next to P uses this style.
p+em{} uses this style with the EM element adjacent to the P element.
This style is applied to the p adjacent to the H1+P{}H1.

HTML add css--style Selector