search
HomeWeb Front-endCSS TutorialChapter 1 Basic understanding of CSS

About CSS Introduction

CSSS is the abbreviation of "Cascading Style Sheets", which is translated as "cascading style sheet" in Chinese, and some people only translate it as "style sheet". CSS is used for the layout and style design of web pages. In the so-called "new web pages", CSS is undoubtedly a very important part. CSS is based on the existing foundation to make up for the deficiencies in the existing HTML specifications and make web design more flexible. This teaching document is going to introduce you to the application of CSS! This article does not introduce all the specifications of CSS, but only introduces you to the syntax parts and application methods that are more commonly used and likely to be used in web page writing. Also, since the compatibility between the two browsers is gradually getting further away, we will carefully indicate the browsers that support this syntax for you. IE has supported some grammars since 3.0, and this will also be noted for you.

A brief introduction to each chapter

For the convenience of your reference and study, here is a brief explanation of the content contained in each chapter of this teaching document! Let you have a direction and concept for reference. Basically, the first two chapters focus on the establishment of concepts and basic cognition, that is, some root work for you; the third chapter provides you with additional explanations and explanations of other methods or features in application and settings. introduce. Chapters 4 to 6 focus on the introduction of syntax, parameters and properties, that is, the stuff that is really built in the style sheet. Chapter 1 Basic understanding of CSS: That’s it! Let me introduce you to some basic concepts and understanding of CSS. Chapter 2 Application Methods of CSS: Introducing you to the basic declaration, application methods and features of CSS. Chapter 3: Supplementary Applications of CSS: Introducing other declaration methods, applications and features of CSS. Chapter 4: CSS of page properties: Introducing you to the relevant syntax, parameters and properties of CSS of page properties. Chapter 5: Text-based CSS: Introducing you to the syntax, parameters and properties of text-based CSS. Chapter 6 Block-natured CSS: Introducing you to the block-natured CSS related syntax, parameters and properties.

Basic understanding of application

It is not difficult to apply CSSS, but please refer to the basic understanding here first. After you have a basic concept of some terms, you will have some ideas for the following teachings. Help, it doesn’t look too strenuous! 1. Understanding of basic terms: Element: that is, the tag in the basic syntax of HTML. Attribute: Attribute used to describe the characteristics of the label. For example:


, HR is the label, WIDTH is the attribute, and 80% is the value of the WIDTH attribute. Property (PRoperty): used to describe the characteristics of the component. Equivalent to attributes in basic HTML syntax. Style: has a set or array of properties to describe component characteristics. Selector: The component to which the style is applied. For example: In H3{ COLOR : BLUE }, H3 is the selector, COLOR is the property, and BLUE is the value of the COLOR property. 2. Understanding of basic units: There are two ways of unit expression: relative units and absolute units. Relative unit: "em": scale factor relative to the height of the letter. 『en』: Scale factor relative to font size. 『%』: Percentage relative to the length unit (usually the size of the current font). Absolute unit: "in": inches. "cm": centimeters. "mm": Millimeters. 『px』: pixel (system default unit). 『pc』: pica, unit of printing movable type. "pt": image point. Relative relationship: 1in= 6pc= 72pt= 2.54cm= 25.4mm 3. Understanding of color use: There are five ways to express color. 『#RRGGBB』: Three hexadecimal values ​​from 00 to FF represent the decimal values ​​of red, green and blue from 0 to 255 respectively. 『#RGB』: A simplified representation, using only three hexadecimal values ​​from 0 to F to represent the values ​​of the three primary colors of red, green and blue respectively. In fact, the browser will automatically expand to six hexadecimal values, such as "#ABC" will become "#AABBCC". However, it is obvious that this representation is not precise. "rgb(R,G,B)": Represents color by the three primary color values ​​of red, green, and blue with decimal values ​​from 0 to 255. "rgb(R%,G%,B%)": Use the relative numerical ratios of red, green, and blue to represent colors, such as "rgb(60%,100%,75%)". "Color_Name": express the color directly by the color name, there are 141 standard color names. 4. Understanding of URL representation: There are five ways of URL representation in CSS, and they are all legal declarations. You can choose them by yourself.


The above is the content of Chapter 1 Basic understanding of CSS. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


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
CSS Animations: Is it hard to create them?CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricks@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingCSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsModern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

Revisiting Image MapsRevisiting Image MapsMay 07, 2025 am 09:40 AM

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

State of Devs: A Survey for Every DeveloperState of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AM

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more. 

What is CSS Grid?What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

What is CSS flexbox?What is CSS flexbox?Apr 30, 2025 pm 03:20 PM

Article discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.