How to use CSS styles and selectors

How to use CSS styles and selectors

Three ways to use CSS in HTML:

1. Inline style: set through the style attribute of the element

<p style="font-size:20px; color:red">hello</p>

Attributes are separated by semicolons.

2. Internal style: define the CSS style in the <style> element of <head>

<style>
    p{font-size: 20px;color: red}    
</style>

3. External style: define the CSS style in the CSS file, and then introduce the external style sheet through <style> in the <head> of HTML

p{font-size: 20px;color: red}
<link href="xxx.css" type="text/css" rel="stylesheet" />

Don't add the <style> tag in the css file, just write the css style directly.

The syntax of internal|external style is: selector{attribute name 1: attribute value 1; attribute name 2: attribute value 2}

In all three methods, attributes are separated by semicolons.

CSS comments:

/* Comments */

CSS Selectors

1. Element selector, class selector, id selector

p{color: red} /* Element selector, set styles for all p elements*/
.red{color: red} /* Class selector, referenced in the element by class="red"*/
#user{color: red} /* id selector, referenced in an element by id="user", can only be used once at most*/

2. Universal selector, group selector

*{color: red} /*Universal selector, set styles for all elements*/
h1,.red{color: red} /*Group selectors and set the same style for multiple selectors at the same time*/

3. Descendant selector, child selector, adjacent sibling selector, subsequent sibling selector

div p{color: red} /*Descendant selector, selects all <p> elements in <div>, no matter if <p> is the son, grandson, great-grandson...as long as <p> is the descendant of <div>*/
div>p{color:red} /*Child selector, selects <p>, <p> must be the child of <div>*/
div+p{color:red} /*Adjacent sibling selector, selects <p>, <p> must be the first sibling element after <div>*/
div~p{color:red} /*Subsequent sibling selector, selects all <p> elements after <div>, <p> must be a sibling element of <div>*/

4. Attribute Selector

[attr] /*Contains attr attribute*/
[attr=value] /*has attr attribute, and the attribute value is value*/
[attr^=value] /*There is an attr attribute, and the attribute value starts with value (as long as value starts with it, it's ok*/
[attr|=value] /*There is an attr attribute, and the attribute value starts with value, and the value and the following part are connected with -*/
[attr$=value] /*There is an attr attribute, and the attribute value ends with value*/
[attr*=value] /*There is an attr attribute, and the attribute value contains value (it is OK if it contains value)*/
[attr~=value] /*There is an attr attribute, and the attribute value contains the word value. Value must be a complete word (separated from other words by spaces)*/

Attribute selectors are often used together with other selectors, for example:

button[type="button"] /*Select all <button> with type="button" */

In attribute selectors, attr cannot be quoted, but value can be quoted or not.

5. <a> Links

a:link /*all unvisited <a>* elements/
a:hover /*Move the mouse to the <a> element*/
a:active /*When <a> is clicked*/
a:visited /*All visited <a>*/

These 4 settings are the styles of the <a> element at different times.

The :hover pseudo-class can be used on all elements.

6. Form Elements

:focus /*When focusing*/
:checked /*When selected*/
:enabled /*Available*/
:disabled /*disabled*/
:read-only /*Read-only*/

Can be used alone or with form elements:

:focus{ }
input:focus{ }

7. Empty Elements

:empty{ } /*all empty elements*/
p:empty{ } /*all empty <p> elements*/

Empty elements are elements without any attributes or content, for example: <p></p>.

8. Non

:not(p) /*Select all elements that are not <p>*/

Try to use only element selectors in (). Using other selectors is prone to errors.

9. Type series

p:first-of-type /*The first <p> in the same level*/
p:nth-of-type(n) /*The nth <p> of the same level*/
p:nth-last-of-type(n) /*The nth last <p> in the same level*/
p:last-of-type /*The last <p> in the same level*/
p:only-of-type /*The only one of the same level<p>*/

Example:

p:first-of-type{color:red}

<body>
    <h1></h1>
    <p></p> <!--Select-->
    <p></p>
    <div>
        <h2></h2>
        <p></p> <!--Select-->
        <p></p>
    </div>
</body>

As long as it is the first <p> of the same level.

10. Child series

p:first-child /*Matches <p>, <p> must be the first child element of its parent element*/
p:nth-child(n) /*Matches <p>, <p> must be the nth child element of its parent element*/
p:nth-last-child(n) /*Matches <p>, which is the nth last child element of its parent element*/
p:last-child /*Matches <p>, which must be the last child element of its parent element*/
p:only-child /*Matches <p>, <p> must be the only child element of its parent element*/

Example:

p:first-child{color:red}

<body>
    <h1></h1>
    <p></p>   
    <p></p>
    <div>
        <p></p> <!--Select-->
        <p></p>
    </div>
</body>

11. First word, first line

p:first-letter /*The first character of the <p> element*/
p:first-line /*The first line of the <p> element*/

12. :before :after

p:before{ /*Add content before <p>*/
    content:"hello"
}
p:after{ /*Add content after <p>*/
    content:"byebye"
}

The added content is an inline element by default, but it will be displayed on the same line as the <p> element (equivalent to putting the added content at the very front or back of the <p> element). What is added is not a real element, so it is called a pseudo-element.

Can be set to block level, the added content will be displayed as a block level element:

p:before{ /*Add content before <p>*/
    content:"hello";
    display: block
}
p:after{ /*Add content after <p>*/
    content:"byebye";
    display: block
}

You can set styles for added elements:

p:before{   
    content:"hello "; /* Attributes are separated by semicolons*/
    display: block; /*Set the style for the added content*/
    font-size: 20px;
    color:red
}

Add a picture:

p:before{   
    content:""; /* The content attribute is required and can be set to an empty string if no text is added*/
    display: block; /*Must be set to block level, width and height must be set, then the added background image can be displayed*/
    width: 100px;
    height: 100px
    background-image: url("1.png");
}

Clear floats:

p:before{   
    content:"";   
    clear: both
}

Pseudo-elements can use single or double colons.

:before <=> ::before
:after <=> ::after

In the selector with a colon, there are 4 pseudo-elements: first-letter, :first-line, :before, :after, and the rest are pseudo-classes.

Selectors can be used in combination.

In the same way (both internal|external styles), the priority of the id selector is the highest, the class selector is the second, and the attribute selector is the lowest. (The more specific and detailed the positioning, the higher the priority)

If the same CSS attribute is used, the priority is highest within the line, and internal and external priorities are the same. Look at the order of <link /> and <style> in <head>, the latter has a higher priority (the later rendered style will overwrite the previous style).

Summarize

The above is the introduction of CSS style usage and selectors. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<:  The problem of Chinese garbled characters appearing when connecting to MySQL database in Idea

>>:  JavaScript Regular Expressions Explained

Recommend

A brief discussion on how to use slots in Vue

How to define and use: Use the slot tag definitio...

MySQL Index Optimization Explained

In daily work, we sometimes run slow queries to r...

Solve the abnormal error when building vue environment with webpack

Table of contents First, configure package.json T...

How to use shtml include

By applying it, some public areas of the website c...

Detailed installation and configuration tutorial of MySQL flashback tool binlog2sql

Overview binlog2sql is an open source MySQL Binlo...

How to generate a unique server-id in MySQL

Preface We all know that MySQL uses server-id to ...

What codes should I master when learning web page design?

This article introduces in detail some of the tech...

js dynamically implements table addition and deletion operations

This article example shares the specific code for...

Bootstrap realizes the effect of carousel

This article shares the specific code of Bootstra...

CSS style writing order and naming conventions and precautions

The significance of writing order Reduce browser ...

In-depth explanation of Session and Cookie in Tomcat

Preface HTTP is a stateless communication protoco...

Manually implement js SMS verification code input box

Preface This article records a common SMS verific...

The correct way to use MySQL indexes and detailed explanation of index principles

1. Introduction Why do we need indexes? In genera...

How to install Zookeeper service on Linux system

1. Create the /usr/local/services/zookeeper folde...

SQL Aggregation, Grouping, and Sorting

Table of contents 1. Aggregate Query 1. COUNT fun...