Added HTML and CSS sheet.
This commit is contained in:
parent
8105fe6bf9
commit
f661565b3d
|
|
@ -0,0 +1,296 @@
|
|||
# HTML and CSS3 Cheat Sheet
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [HTML Basics](#html-basics)
|
||||
1.1 [Document Structure](#document-structure)
|
||||
1.2 [HTML Elements](#html-elements)
|
||||
1.3 [Headings](#headings)
|
||||
1.4 [Paragraphs](#paragraphs)
|
||||
1.5 [Lists](#lists)
|
||||
1.6 [Links](#links)
|
||||
1.7 [Images](#images)
|
||||
|
||||
2. [HTML Advanced](#html-advanced)
|
||||
2.1 [Forms](#forms)
|
||||
2.2 [Tables](#tables)
|
||||
2.3 [Semantics](#semantics)
|
||||
2.4 [Media Elements](#media-elements)
|
||||
2.5 [IFrames](#iframes)
|
||||
|
||||
3. [CSS3 Basics](#css3-basics)
|
||||
3.1 [Selectors](#selectors)
|
||||
3.2 [Box Model](#box-model)
|
||||
3.3 [Colors and Backgrounds](#colors-and-backgrounds)
|
||||
3.4 [Text Styling](#text-styling)
|
||||
3.5 [Fonts](#fonts)
|
||||
|
||||
4. [CSS3 Advanced](#css3-advanced)
|
||||
4.1 [Flexbox](#flexbox)
|
||||
4.2 [Grid](#grid)
|
||||
4.3 [Transitions](#transitions)
|
||||
4.4 [Transforms](#transforms)
|
||||
4.5 [Animations](#animations)
|
||||
|
||||
5. [Responsive Web Design](#responsive-web-design)
|
||||
5.1 [Media Queries](#media-queries)
|
||||
5.2 [Viewport](#viewport)
|
||||
|
||||
6. [CSS Layout](#css-layout)
|
||||
6.1 [Floats](#floats)
|
||||
6.2 [Positioning](#positioning)
|
||||
6.3 [Display Property](#display-property)
|
||||
6.4 [Box Sizing](#box-sizing)
|
||||
|
||||
7. [Advanced HTML Techniques](#advanced-html-techniques)
|
||||
7.1 [Canvas](#canvas)
|
||||
7.2 [SVG](#svg)
|
||||
7.3 [Web Components](#web-components)
|
||||
7.4 [Drag and Drop](#drag-and-drop)
|
||||
|
||||
8. [Advanced CSS Techniques](#advanced-css-techniques)
|
||||
8.1 [Custom Properties (CSS Variables)](#custom-properties-css-variables)
|
||||
8.2 [CSS Grid Layout](#css-grid-layout)
|
||||
8.3 [Filter Effects](#filter-effects)
|
||||
8.4 [Clipping and Masking](#clipping-and-masking)
|
||||
|
||||
## HTML Basics
|
||||
|
||||
```html
|
||||
<!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
|
||||
|
||||
```html
|
||||
<!-- 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
|
||||
|
||||
```css
|
||||
/* 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
|
||||
|
||||
```css
|
||||
/* 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
|
||||
|
||||
```css
|
||||
/* Media Queries */
|
||||
@media only screen and (max-width: 600px) {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
/* Viewport */
|
||||
meta {
|
||||
width: device-width;
|
||||
initial-scale: 1.0;
|
||||
}
|
||||
```
|
||||
|
||||
## CSS Layout
|
||||
|
||||
```css
|
||||
/* 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
|
||||
|
||||
```html
|
||||
<!-- 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
|
||||
|
||||
```css
|
||||
/* 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%);
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
### A compendium of various technical "cheat sheets".
|
||||
|
||||
- [HTML and CSS](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/HTML.md)
|
||||
- [JavaScript](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/javascript.md)
|
||||
- [JavaScript Object Notation](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/JSON.md)
|
||||
- [Markdown](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/markdown.md)
|
||||
|
|
|
|||
Loading…
Reference in New Issue