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 tutorials to teach you to create a unique web page framework

PHPzOriginal: 2024-01-16 10:14:061280browse

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 basic syntax

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.

CSS style properties

The following introduces some commonly used CSS style properties, as well as their functions and usage.

2.1 Font attributes

font-family: used to set the font family (such as "Arial", "宋体", etc.).
font-size: used to set the font size (the unit can be px, em, rem, etc.).
font-weight: used to set the font weight (can be "normal", "bold", etc.).

2.2 Color attribute

color: used to set text color (you can use color name, HEX code, RGB or RGBA value, etc.).
background-color: used to set the background color of the element.

2.3 Box model attributes

width: used to set the width of the element.
height: used to set the height of the element.
padding: used to set the size of the internal padding of the element.
margin: used to set the margin size in the four directions of the element.
border: used to set the style, width and color of the element border.

2.4 Positioning attribute

position: used to set the positioning method of the element. Common values include "relative" (relative positioning) and "absolute" (absolute positioning) and "fixed" (fixed positioning).
top, bottom, left, right: used to set the top, bottom, left, and right distances between an element and its positioned parent element.

Example: Create a web page frame

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!

css html 选择器样式表外边距 position margin padding border background

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Design a comprehensive web page layout framework using CSSNext article：Design a comprehensive web page layout framework using CSS

See more

Simple and easy-to-understand CSS tutorials to teach you to create a unique web page framework

Related articles