Summary of css basics (css introduction, css syntax framework, css style sheet format, css selector)

css basic summary

1-css overview

css meaning
Cascading style sheets - Cascading style sheets, also known as css style sheets, cascading style sheets.
css role
html is responsible for "what's there" in the web page, while css is responsible for the "what does the content of the web page look like", which is used to define the format of the web page content
css syntax framework

/*Expanded Format - Recommended */
Selector {
    Attributes:value;/* Each line is called a "declaration" */
    ......;
    Attributes:value/* The last statement does not need to be followed by ";" */
}
/* compact format */
Selector {Attributes:value;......;Attributes:value}

style sheet format
The format of css style sheets can be divided into three categories according to the writing position: inline style sheets, internal style sheets, and external style sheets.

Inline style sheet
Set styles directly in element tags to easily modify the styles of certain tags. For example the following code:

<p color="red" font-size="10px" >section of writing</p>

Internal style sheet
First review the basic framework of the html file:

<html>
    <head>
        <title>page title</title>
    </head>

    <body>
        <!--Various labels-->
    </body>

The internal style sheet means that the style sheet is written in the html code, and the style is packaged in the <style> tag. Therefore, the frame of the html file becomes the following format:

<html>
    <head>
        <title>page title</title>
        <style><!--put head In the label, all labels in this structure can be selected and styled-->
            Selector{statement}
            ......
            Selector{statement}
        </style>
    </head>

    <body>
        <!--Various labels-->
    </body>

External style sheet: More commonly used in development, the structure (html) and style (css) are separated, and the CSS part is written as a .css file and introduced into the html page. The basic structure of a .css file is as follows:

Selector {
    Attributes:value;
    ......;
    Attributes:value
}
......
Selector {
    Attributes:value;
    ......;
    Attributes:value
}

In the html file, you need to use the <link> tag to import the css style sheet, the operation is as follows:

<html>
    <head>
        <title>page title</title>
        <!--introduce xx.css stylesheet in file-->
        <link rel="stylesheet" href="xx.css path of">
    </head>

    <body>
        <!--Various labels-->
    </body>

2-css selector

base selector

Tag selector
Select a category of tags to apply a certain format to all of them

label name {
    Attributes:value;
    ......;
    Attributes:value
}

/* in the label */
<h1>Title 1</h1>
<h1>Title 2</h1>
<p>paragraph text</p>

/* If the selector is h1, that selects all h1 tags for formatting*/

class selector
For the target tag, set the class attribute, that is, set the class name, select several tags according to the class name and apply a certain format

.class name {
   Attributes:value;
   ......;
   Attributes:value
}

/* in the label */
<h1 class="class1">Title 1</h1>
<h1 class="class2">Title 2</h1>
<h1 class="class1">Title 3</h1>
/* If the selector is .class1, select the first and third h1 tags;
If the selector is .class2, select the second h1 tag */

id selector
For the target tag, set the id attribute and select a tag according to the id value (note: only one tag can be selected, so the id value cannot be repeated) and apply a certain format

#classname {
   Attributes:value;
   ......;
   Attributes:value
}

/* in the label */
<h1 id="id1">Title 1</h1>
<h1 id="id1">Title 2</h1>
/* If the selector is #id1, select the first h1 tag;
And the second label is wrong. */

Wildcard selector
Selects all tags in the page, generally used to unify the style of all elements before formatting.

* {
   Attributes:value;
   ......;
   Attributes:value
}

/* In tags all tags will have some formatting applied */

Compound selector
First of all, let's introduce the relationship between labels. There are two basic relationships: parent-child relationship (inclusive relationship) and sibling relationship (parallel relationship). The following is the basic structure of the table tag:

<table>
    <tr><!--first row-->
        <th></th>
        <td></td>
        ......
        <td></td>
    </tr>
    ......
    <tr><!--the first n Row-->
        <th></th>
        <td></td>
        ......
        <td></td>
    </tr>
</table>

Where <table> and <tr> are parent-child relationships, and <th> and <td> are sibling relationships. The following uses the table tag as an example to introduce compound selectors

descendant selector
Select all child tags in parent tag

table tr {
   Attributes:value;
   ......;
   Attributes:value
}
/* table All tr tags in tags will be selected */

Here "table" and "tr" are tag selectors, and other basic selectors can also be used, such as the following code:

.choosen #special{
   Attributes:value;
   ......;
   Attributes:value
}

<table class="choosen"><!--Table 1-->
    <tr><!--first row-->
        <th></th>
        <td></td>
    </tr>
    ......
    <tr id="special"><!--the first n Row-->
        <th></th>
        <td></td>
    </tr>
</table>

<table><!--Table 2-->
    <tr><!--first row-->
        <th></th>
        <td></td>
    </tr>
    ......
    <tr id="special"><!--the first n Row-->
        <th></th>
        <td></td>
    </tr>
</table>
<!--at this time css selector, the selection is the first n Row-->

child selector
Selects the nearest first-level child element within the parent tag.

table>tr {
   Attributes:value;
   ......;
   Attributes:value
}
/* table Select the first tr tag in the tag, that is, select the first line */

union selector
Select multiple side-by-side labels for the same style setting

th,td {
   Attributes:value;
   ......;
   Attributes:value
}
/* table All th, td tags in tags will be selected */

Pseudo-class selector
A special class of selectors, mainly used to add special effects to certain tags.

Link pseudo-class: mainly for link tags <a href="xx" target="-self">text or image</a>

a:link{statement} /* Select all unvisited links */
a:visited{statement} /* Select all visited links */
a:hover{statement} /* Select the link the mouse is over, very common */ 
a:active{statement} /* Select the link that the mouse has clicked but has not finished clicking, that is, the selected link (active link) */

/* During the development process, the four link pseudo-classes do not necessarily need to be written out, you can only write a:hover{} , but if you write all four link pseudo-classes, you need to follow link --> visited --> hover --> active order */

Structural pseudo-class: Selects elements based on the relationship between elements in the HTML page.
Take the example of the <table> tag above.

table:nth-child(k){statement} /* Select the kth tr tag in the table tag, that is, the kth row, k <= total number of rows */
table:nth-last-child(k){statement} /* Select the kth tr tag from the bottom of the table tag, that is, the n-k th row, k <= the total number of rows */
table:first-child{statement} /* Select the first tr tag in the table tag, that is, the first row */
table:last-child{statement} /* Select the last tr tag in the table tag, the nth row */

focus pseudo-class: mainly used for the selection of form elements, select the label element on which the mouse is placed

input:focus{statement}

Tags: html css Front-end css3

Posted by evaoparah on Mon, 05 Sep 2022 22:15:53 +0530

Programs Team

Summary of css basics (css introduction, css syntax framework, css style sheet format, css selector)

css basic summary

1-css overview

2-css selector

Hot Tags