Basic syntax of CSS

Basic syntax rules

CSS rules consist of two main parts: the selector, and one or more declarations.

selector {
    declaration1; 
    declaration2;
    ... 
    declarationN;
}

The selector is usually the HTML element you need to change the style of. Each declaration consists of a property and a value. Each attribute has a value. Properties and values are separated by colons.

selector {property: value

For example:

h1{
   color:red;
   font-size:14px;
}

If there are more than 1 attributes, use semicolons to separate them. What this line of code does is define the text color inside the h1 element as red and set the font size to 14 pixels.

The diagram below shows you the structure of the above code:

QQ截图20161011103552.png

Note: If the value is greater than 1 word, you need to add quotation marks, as follows

p{font-family:"sans serif"}

Example:

Right-click in the editing area to create two files, index.html and MyCss.css

Enter the following codes for the two files respectively (brackets supports code completion) : index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引外部资源 MyCss.css-->
        <link rel="stylesheet" href="MyCss.css" type="text/css">
    </head>
    <body>
        <h1>
            PHP中文网
        </h1>
    </body>
</html>

MyCss.css

h1{
    color: red;font-size: 50px;
}

h1 The text color within the element is defined as red, and the font size is set to 50 pixels.

Ctrl+s Save the two files, click index.html to view the running effect:

QQ截图20161203142306.png

Continuing Learning

new file

<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title>  <link rel="stylesheet" href="MyCss.css" type="text/css"> </head> <body> <h1> PHP中文网 </h1> </body> </html>

submit Reset Code

Automatic operation

Basic syntax of CSS

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]