ReasonJun

Pseudo-Classes hover // Select while the mouse cursor is over the selector element .box { width: 100px; height: 100px; background-color: orange; transition: 1s; } .box:hover { width: 300px; background-color: royalblue; } active // Select while clicking the mouse on the selector element a:active { color: red; } focus // Select when the selector element is focused input:focus { background-color: o..

declaration method built-in way inline method Link method ⇒ Parallel method import method @import url("./box.css"); css selector basic // Universal Selector * { color: red; } // Type Selector li { color: red; } // Class Selector .orange { color: red; } // ID Selector #orange { color: red; } complex // Basic Combinator span.orange{ color: red; } // Child Combinator ul > .orange { color: red; } //..

img => The web page may not load the image immediately, but only when the user triggers an event to view the image. => The browser shows the optimized picture according to the status of the web page the user is viewing (considering size, sharpness, etc.). picture or "(min-width: 800px)" or "(min-width: 500px)" "(min-height)" or media="(orientation: portrait) and (min-width: 800px)" ⇒ You can dec..

BEM (Block Element Modifier) is a popular naming convention and methodology for organizing and structuring CSS classes in web development. It provides a systematic approach for naming and styling HTML elements to enhance code maintainability and reusability. The BEM methodology follows a specific naming convention that consists of three parts: Block, Element, and Modifier. Block: A block represe..

Viewport - `width=device-width`: Apply the same width as the width of each device - `initial-scale=1.0`: Set the initial screen scale (magnification degree) of the screen - `user-scalable=no`: Set whether the user can expand (`yes`)/reduce (`no`) the device screen - `maximum-scale=1`: The maximum value that the user can scale the screen to - `minimum-scale=1`: the minimum value that the user can..

DIV The element is a versatile container that is often used for grouping and structuring content. It has no inherent meaning and is primarily used for styling purposes or as a container for other elements. Hello World => Stack vertically. => has the largest size. => possible => possible Hello World Hello World p The element represents a paragraph of text. It is used to structure and separate blo..