1, the introduction of

Cascading Style Sheets (CSS) are used to Style HTML elements to separate content from presentation

When an HTML element is defined by multiple CSS styles, the final style is determined in the following order (in descending order of priority) :

  • Browser Default Settings
  • External style sheets
  • Internal style sheet
  • Inline style

(1) External style sheets

External style sheets are ideal when styles need to be applied to many pages

We can link stylesheets using the <link> tag, which is typically located in the header of an HTML document

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Copy the code

(2) Internal style sheets

Internal style sheets can be used when individual files require special styles

We can define styles using the <style> tag, which is typically located at the head of an HTML document

<head>
    <style type="text/css">
        /* Here is the style definition */
    </style>
</head>
Copy the code

(3) Inline style

Inline styles can be used when individual elements require special styles

We can specify styles using the style attribute in the tag where we want to define inline styles

<p style="color: red;">This is a paragraph</p>
Copy the code

2, grammar,

CSS syntax rules consist of two parts: selectors and declarations

Selectors are used to locate HTML elements that need to be styled, and declarations are used to specify the style that HTML elements need to be styled

Because there is a lot to cover in selectors and declarations, we will use two articles to cover each

Article portal:

  • CSS learning Notes (2) selector
  • CSS learning Notes (3) Style declarations

The syntax is as follows:

selector { property: value; property: value; . }Copy the code

A simple example (the vertical navigation bar) is as follows, using an internal stylesheet to specify the style:

<! DOCTYPEHTML>
<html>
<head>
    <style>
        ul.linkList {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        ul.linkList a:link.ul.linkList a:visited {
            display: block;
            width: 120px;
            font-weight: bold;
            color: #FFFFFF;
            background-color: #bebebe;
            text-align: center;
            text-decoration: none;
        }
        ul.linkList a:hover.ul.linkList a:active {
            background-color:#cc0000;
        }
    </style>
</head>
<body>
    <ul class="linkList">
        <li><a href="https://github.com/forwhfang">Github</a></li>
        <li><a href="https://blog.csdn.net/wsmrzx">CSDN</a></li>
        <li><a href="https://www.cnblogs.com/wsmrzx">Blog garden</a></li>
    </ul>
</body>
</html>
Copy the code