6.0 KiB
6.0 KiB
HTML and CSS3 Cheat Sheet
Table of Contents
-
1.2 HTML Elements
1.3 Headings
1.4 Paragraphs
1.5 Lists
1.6 Links
1.7 Images
-
2.1 Forms
2.2 Tables
2.3 Semantics
2.4 Media Elements
2.5 IFrames
-
3.1 Selectors
3.2 Box Model
3.4 Text Styling
3.5 Fonts
-
4.1 Flexbox
4.2 Grid
4.3 Transitions
4.4 Transforms
4.5 Animations
-
5.1 Media Queries
5.2 Viewport
-
6.1 Floats
6.2 Positioning
6.3 Display Property
6.4 Box Sizing
-
7.1 Canvas
7.2 SVG
7.3 Web Components
7.4 Drag and Drop
-
8.1 Custom Properties (CSS Variables)
8.2 CSS Grid Layout
8.3 Filter Effects
HTML Basics
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<section>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</section>
<h2>Section 1</h2>
<p>This is a paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="Description of the image">
</body>
</html>
HTML Advanced
<!-- Forms -->
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<input type="submit" value="Submit">
</form>
<!-- Tables -->
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John Doe</td>
<td>25</td>
</tr>
</table>
<!-- Semantics -->
<aside>
<h3>Side Content</h3>
<p>Additional information.</p>
</aside>
<!-- Media Elements -->
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<!-- IFrames -->
<iframe src="https://www.example.com" width="600" height="400" frameborder="0"></iframe>
CSS3 Basics
/* Selectors */
h1 {
color: #3498db;
}
/* Box Model */
div {
width: 200px;
height: 100px;
padding: 10px;
margin: 20px;
border: 2px solid #2ecc71;
}
/* Colors and Backgrounds */
body {
background-color: #ecf0f1;
}
/* Text Styling */
p {
font-size: 16px;
font-weight: bold;
}
/* Fonts */
body {
font-family: 'Arial', sans-serif;
}
CSS3 Advanced
/* Flexbox */
.container {
display: flex;
justify-content: space-between;
}
/* Grid */
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
/* Transitions */
button {
transition: background-color 0.3s ease;
}
button:hover {
background-color: #e74c3c;
}
/* Transforms */
.box {
transform: rotate(45deg);
}
/* Animations */
@keyframes slide {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.slider {
animation: slide 1s ease-in-out;
}
Responsive Web Design
/* Media Queries */
@media only screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
/* Viewport */
meta {
width: device-width;
initial-scale: 1.0;
}
CSS Layout
/* Floats */
.float-left {
float: left;
}
/* Positioning */
.absolute-position {
position: absolute;
top: 10px;
left: 20px;
}
/* Display Property */
.inline-block {
display: inline-block;
}
/* Box Sizing */
box-sizing: border-box;
Advanced HTML Techniques
<!-- Canvas -->
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#3498db';
ctx.fillRect(0, 0, 200, 100);
</script>
<!-- SVG -->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<!-- Web Components -->
<my-custom-element></my-custom-element>
<!-- Drag and Drop -->
<div id="drag" draggable="true">Drag me!</div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData('text');
var draggedElement = document.getElementById(data);
event.target.appendChild(draggedElement);
}
</script>
Advanced CSS Techniques
/* Custom Properties (CSS Variables) */
:root {
--main-color: #3498db;
--secondary-color: #e74c3c;
}
body {
background-color: var(--main-color);
}
button {
background-color: var(--secondary-color);
}
/* CSS Grid Layout */
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
.grid-item {
padding: 20px;
text-align: center;
border: 1px solid #ccc;
}
/* Filter Effects */
.image-container {
filter: grayscale(50%);
}
/* Clipping and Masking */
.clipped-element {
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}