Home > Article > Web Front-end > Simple and easy-to-understand CSS tutorials to teach you to create a unique web page framework
Simple and easy-to-understand CSS tutorial, teach you to create a unique web page framework
CSS (Cascading Style Sheets) is a markup used to define the style and layout of web pages language. Through CSS, we can change the appearance of web pages such as fonts, colors, sizes, spacing, etc., and control the position and arrangement of web page elements. This tutorial will introduce you to basic CSS syntax and commonly used style attributes, and provide specific code examples to help you quickly master how to use CSS to create a unique web page framework.
CSS uses selectors and declarations to define styles. Selectors are used to select HTML elements to apply styles, while declarations consist of one or more attributes and their corresponding values. The following is a simple CSS rule example:
h1 { color: red; font-size: 24px; font-weight: bold; }
The selector in the above code is "h1", which means that the element to which the style is applied is the <h1></h1>
tag. The declaration part in curly braces contains three properties and their corresponding values, namely "color", "font-size" and "font-weight". These properties define the font color, size, and weight of the element.
The following introduces some commonly used CSS style properties, as well as their functions and usage.
2.1 Font attributes
2.2 Color attribute
2.3 Box model attributes
2.4 Positioning attribute
The following is an example showing how to use CSS to create a simple web page frame.
HTML code:
<!DOCTYPE html> <html> <head> <title>CSS Tutorial</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>Welcome to CSS Tutorial</h1> </header> <nav> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav> <section> <h2>About Us</h2> <p>This is a CSS tutorial to help you learn CSS and create unique web page layouts.</p> </section> <footer> <p>© 2021 CSS Tutorial. All rights reserved.</p> </footer> </body> </html>
CSS code (style.css):
/* 全局样式 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } /* 头部样式 */ header { background-color: #333; padding: 20px; color: #fff; } header h1 { font-size: 30px; } /* 导航栏样式 */ nav { background-color: #f2f2f2; padding: 10px; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { display: inline; margin-right: 10px; font-size: 18px; } /* 主内容样式 */ section { padding: 20px; background-color: #fff; } section h2 { color: #333; } section p { color: #666; } /* 页脚样式 */ footer { background-color: #333; padding: 10px; color: #fff; font-size: 14px; text-align: center; }
In the above example, we add different CSS styles to different HTML elements. Achieve different appearance effects. By setting global styles, header styles, navigation bar styles, main content styles, and footer styles, we create a simple web page framework.
In actual use, you can modify the CSS style attributes and adjust the layout and appearance of the web page according to your own needs.
Through this tutorial, you have understood the basic syntax and common style attributes of CSS, and learned how to use CSS to create a simple web page framework. I hope this tutorial was helpful and allowed you to create unique web pages using CSS. Wish you more success with CSS!
The above is the detailed content of Simple and easy-to-understand CSS tutorials to teach you to create a unique web page framework. For more information, please follow other related articles on the PHP Chinese website!