From 27ccf70086435294313d46d4d7d72482f0e88157 Mon Sep 17 00:00:00 2001 From: Zachary Vance Date: Fri, 21 Jul 2023 14:15:05 -0400 Subject: [PATCH] Add things --- html-css-cheatsheet.html | 148 +++++++++++++++++++++++++++++++++++---- 1 file changed, 136 insertions(+), 12 deletions(-) diff --git a/html-css-cheatsheet.html b/html-css-cheatsheet.html index 7494141..f58e3dd 100644 --- a/html-css-cheatsheet.html +++ b/html-css-cheatsheet.html @@ -23,6 +23,7 @@ .cheatsheet > div > h3 { margin: 0; text-align: center; + font-family: serif; } ul { margin: 4px 0 2px 0; @@ -57,6 +58,9 @@ div.demo { border: 1px solid; } + .noanimate * { + animation: none !IMPORTANT; + } div.demo.resizeh.resizev { animation: resizer-v 2s ease-in-out infinite alternate, resizer-h 1.5s ease-in-out infinite alternate; @@ -85,6 +89,20 @@ .blue { background-color: lightblue; } .green { background-color: green; } .yellow { background-color: yellow; } + div.em { + width: 1em; + height: 1em; + border: 1px dashed grey; + background-color: white; + display: inline-block; + margin-left: 1px; + margin-top: 2px; + } + div.em ~ div.em { + width: 1em; + margin-left: 0; + border-left: 0; + } @keyframes resizer-v { 0% { height: 50%; @@ -117,8 +135,8 @@ -

(Work in progress) Za3k presents: An HTML and CSS cheatsheet!

-
+

(Work in progress) Za3k presents: An HTML and CSS cheatsheet!

(Oh my god stop animating)
+

Including CSS

@@ -147,8 +165,8 @@

Mobile browsing

<head>
-    <meta content="width=device-width, initial-scale=1"
-          name="viewport"/>
+    <meta content="width=device-width,
+          initial-scale=1" name="viewport"/>
 </head>
@@ -236,8 +254,69 @@ div.inner { position: absolute; -->
-

TODO: Flexbox

-
  • Flexbox (and "don't use the wrapping version") +

    Flexbox

    + +
    +
    +
    +
    +
    +
    +
    +
    + + 
    div.outer { display: flex; }
+div.inner { flex-grow: 1; }
+
+div.inner { flex: «grow» «shrink» «basis»; }
+div.inner { flex: 1 1 auto; }
    + + + +
    +
    +
    +
    +
    +
    +
    +
    + + 
    div.outer { display: flex; 
+            flex-direction: column; }
+div.inner { flex-grow: 1; }
    + + +
    +
    +
    +
    +
    +
    +
    +
    + + 
    div.outer { display: flex; 
+            flex-wrap: wrap; }
+div.inner { flex-grow: 1; 
+            min-width: 80px; }
    + + Wrapping flex creates sizing problems if you have more than two layers. Ex. fit-contents or min-content.
    • @@ -268,7 +347,15 @@ div.inner { position: absolute; left: 10px; }
    -

    TODO: Float

    +

    Float

    +
    +
    +
    pic 1
    +
    pic 2
    + Text wrapping around a photo in the news. +
    +
    + 
    div.inner { float: right; }
    @@ -293,9 +380,38 @@ div.inner { position: absolute;
    -

    TODO: Padding, Border, Margin

    -
  • Known: The box model (padding, border, margin?) -
  • box-sizing +

    Padding, Border, Margin

    + 
    margin: «top» «right» «bottom» «left»;
+margin: «top-and-bottom» «right-and-left»;
+margin: «all-sides»;
    + 
    padding: «top» «right» «bottom» «left»;
    + 
    border: «top» «right» «bottom» «left» «style» [«color»];
    + +
    +
    +
    +
    +
    +
    + + 
    div { box-sizing: content-box; /* default */
+      width: 2em;
+      height: 2em;
+      border: 0.5em solid red;
+      margin: 0.5em; }
    + +
    +
    +
    +
    +
    +
    + + 
    div { box-sizing: border-box;
+      width: 2em;
+      height: 2em;
+      border: 0.5em solid red;
+      margin: 0.5em; }
    • @@ -307,8 +423,8 @@ div.inner { position: absolute; span { font-size: 24px; } span { font-size: larger; } -
    Text Font
    - 
    span { font-family: sans; } TODO: name of font
    +
    Text Font
    + 
    span { font-family: "Lucida Sans", sans; }
    Bold Text
    span { font-weight: bold; }
    @@ -362,5 +478,13 @@ span { font-size: larger; }

    TODO: Adding JS+CSS Dynamically

    + +
    +

    Additional Resources

    + +
    -- 2.47.3