Introduction to CSS

Before you start learning CSS, you should make sure you have the following prerequisite knowledge:

HTML / XHTML

To learn HTML and XHTML , you can find relevant tutorials through the PHP Chinese website (php.cn) homepage

To learn CSS, you need to know what CSS is?

CSS refers to Cascading Style Sheets
Styles define how HTML elements are displayed
Styles are usually stored In the style sheet
Adding styles to HTML 4.0 is to solve the problem of separation of content and presentation
External style sheets can be extremely Greatly improve work efficiency
External style sheets are usually stored in CSS files
##Multiple style definitions can be cascaded into one

Styles solve a big problem

HTML tags were originally designed to define document content, as shown in the following example :

##This is a title

This is a paragraph.

Style sheets define how HTML elements are displayed, just like the HTML 3.2 font tag and color attributes do. Styles are usually saved in external .css files. External style sheets give you the ability to change the layout and appearance of all pages in your site at the same time by simply editing a simple CSS document.

In order to solve this problem, the World Wide Web Consortium (W3C), a non-profit standardization alliance, has taken on the mission of standardizing HTML and created styles outside of HTML 4.0.

Contemporary browsers all support CSS.

CSS style sheets greatly improve work efficiency Style Table defines how HTML elements are displayed

Style sheets define how HTML elements are displayed, just like the HTML 3.2 font tag and color attributes do. Styles are usually saved in external .css files. External stylesheets give you the ability to change the layout and appearance of all pages in your site simultaneously by editing a simple CSS document.

CSS Example

An HTML document can display different styles

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网（php.cn）</title>
    <style>
        h1{color: #00a0e9}
        p{background-color: #8de943
        }
        p.ex {margin-top:2cm;}
        p.bottommargin {margin-bottom:25%;}
    </style>
</head>
<body>
<h1>标题</h1>
<p>一个没有指定边距大小的段落。</p>
<p class="ex">一个2厘米上边距的段落。</p>
</body>
</html>

Run the program and try it

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> h1 {color:#00ff00;} p{color: #ffd4f0 } .ex {color:rgb(0,0,255);} </style> </head> <body> <h1>这是一个标题</h1> <p>这是一个普通的段落。请注意,本文是红色的。页面中定义的默认文本颜色选择器。</p> <p class="ex">这段文字是蓝色的</p> </body> </html>

submit Reset Code

Automatic operation

Introduction to 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]