HTML und CSS - Der schnelle Einstieg - by Christian Drapatz

HTML und CSS – Der schnelle Einstieg
Cascading Style Sheets (englische Aussprache [kæsˌkeɪdɪŋˈstaɪlʃiːts]; für gestufte
Gestaltungsbögen), kurz CSS genannt, ist eine Stylesheet-Sprache für elektronische
Dokumente und zusammen mit HTML und DOM eine der Kernsprachen des World Wide
Webs. Sie ist ein sogenannter „living standard“ (lebendiger Standard) und wird vom World
Wide Web Consortium (W3C) beständig weiterentwickelt. Mit CSS werden
Gestaltungsanweisungen erstellt, die vor allem zusammen mit den Auszeichnungssprachen
HTML und XML (zum Beispiel bei SVG) eingesetzt werden.

Farben

àFarbpalette : https://wiki.selfhtml.org/wiki/Grafik/Farbpaletten

Größe und Abstand

Margin > Aussenabstand
Padding > Innenabstand

Schrift

1em = normale Text
2em = doppelt so groß wie der normale Text

Style-Tag definieren

Bzw.

Bilder

CSS3 für Webdesigner
SCHRIFTEN

LINK: https://css-tricks.com/snippets/css/using-font-face/

Link: https://fonts.google.com

Beispiel:

font-family: 'Raleway', sans-serif;

Beispiel:

       body {font-family: 'Raleway', sans-serif;}
       h1 {font-family: 'Permanent+Marker', sans-serif; color: blue;}
       p {font-family: 'Pacifico', sans-serif; color: red;}

Document

  Google Fonts

Verschiedene Schriftarten

  All their equipment and instruments are alive.

Gibt man die Font-Adresse im Browser ein, dann bekommt man sofort das CSS

/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'),
url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.
woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'),
url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0IT4ttDfA.wof
f2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}

àDiese Datei wird vom Browser geladen.

Praktische Beispiele:

Schriften über Google geholt > link href

Schriften verwenden >

Altere Browser kennen diese Einheit nicht

Deswegen „Fallback“

Angewendet auf die Beispiel-HTML-Seite

Pixel àFallback für ältere Browser
REM àAngabe für neuere Browser

Text mit Schatten

ABSTÄNDE DEFINIEREN

ICONS

Link: https://github.com/Automattic/genericons-neue

body {font-family: 'Raleway', sans-serif;}
       h1 {font-family: 'Permanent+Marker', sans-serif; color: blue;}
       p {font-family: 'Pacifico', sans-serif; color: red;}

  Document

Google Fonts

  Verschiedene Schriftarten

  All their equipment and instruments are alive.

autorenew autorenew 

check_circle check_circle 

done done 

get_app get_app

home home 

settings settings

warning warning

error error        

add_circle add_circle

remove_circle remove_circle 

file_download file_download 

check check 

close close

Google Icons

Font Awesome Icons

body {font-family: 'Raleway', sans-serif;}
h1 {font-family: 'Permanent+Marker', sans-serif; color: blue;}p {font-family: 'Pacifico',
sans-serif; color: red;}

       div.button {
              marin-bottom: 2em;
       }

       a{
              display: inline-block;
              text-decoration: none;
              color: black;
              background: #eee;
              padding: 1em;
              border: 1px solid #ccc;
              font-size:16px;
       }

       .download:before {
             content: 'get_app';
             font-family: 'Material Icons';
             font-size: 10;
             font-weight: normal;
             position: relative;
             top: 2px;
             margin-right: 4px;
       }

Document

  Google Fonts

  Button plus Icons

  Icon per HTML einbinden
  
       get_appDownload
  
  Icon per CSS einbinden
  
       Download

Bootstrap Icons

-->

body {font-family: 'Raleway', sans-serif;}
h1 {font-family: 'Permanent+Marker', sans-serif; color: blue;}
p {font-family: 'Pacifico', sans-serif; color: red;}

       div.button {
              marin-bottom: 2em;
              }

       a{
              display: inline-block;
              text-decoration: none;
              color: black;
              background: #eee;
              padding: 1em;
              border: 1px solid #ccc;
              font-size:16px;
              }

       .download:before {
             content: 'get_app';
             font-family: 'Material Icons';
             font-size: 10;
             font-weight: normal;
             position: relative;
             top: 2px;
             margin-right: 4px;
             }

       ul.iconlist {
               padding: 0;
               margin: 0 0 0 2rem;
       }

       .iconlist li:before {
               content: 'arrow_forward';
               font-family: 'Material Icons';
               font-size: 16;
               font-weight: normal;

line-height: 1
               vertical-align: middle;
               margin-right: 6px;
               color: green;
       }

       .iconlist li {
               list-style-type: none;
               text-indent: -22px;
       }
  
  Document

  Google Fonts

  Button plus Icons

  Icon per HTML einbinden
  
       get_appDownload
  
  Icon per CSS einbinden
  
       Download
  
  Liste
  
        Icon 1
        Icon 2
        Icon 3

BOXEN

Ist-Zustand:

body {font-family: 'Raleway', sans-serif;}
h1 {font-family: 'Permanent+Marker', sans-serif; color: blue;}
h2 {font-family: 'Permanent+Marker', sans-serif; color: blue;}
p {font-family: 'Pacifico', sans-serif; color: black;}

Document

Titel

Sowohl das Erstellen neuer Entwicklungszweige (branching), als auch das Verschmelzen
zweier oder mehrerer Zweige (merging) sind integrale Bestandteile der Arbeit mit Git und
fest in die Git-Werkzeuge eingebaut.[9] Git enthält Programme, mit deren Hilfe sich die
nicht-lineare Geschichte eines Projektes einfach visualisieren lässt und mit deren Hilfe man
in dieser Geschichte navigieren kann. Branches in Git sind (im Gegensatz zu anderen SCMs)
sehr performant implementiert: Ein Branch stellt nur eine Reference, kurz ref, eine Textdatei
mit einer Commit-ID, dar, die in einem Repository im Verzeichnis .git/refs/heads (z. B.
.git/refs/heads/master für den immer vorhandenen master-Branch) liegt und auf einen
bestimmten Commit verweist. Über dessen Parental Commits, also Eltern-Commits, lässt
sich die Branch-Struktur rekonstruieren. Durch diese Eigenschaften lassen sich weiterhin
sehr große und effiziente Entwicklungsstrukturen, wie bei Git selbst oder dem Linux-Kernel,
realisieren, bei denen jedes Feature und jeder Entwickler einen Branch oder ein eigenes
Repository haben, aus dem der Maintainer dann Commits über Merge oder Cherry-pick
(Nutzen einzelner Commits) in den Hauptzweig des Projekts (master) übernehmen kann.
   
Untertitel

Jeder Benutzer besitzt eine lokale Kopie des gesamten Repositoriums, inklusive der
Versionsgeschichte (history). So können die meisten Aktionen lokal und ohne
Netzwerkzugriff ausgeführt werden. Es wird nicht zwischen lokalen Entwicklungszweigen
und Entwicklungszweigen entfernter Repositories unterschieden. Obwohl es keinen
technischen Unterschied zwischen verschiedenen Repositorien gibt (außer dem zwischen
normalen und bare-Repositorien auf Servern, bei denen kein Working-Tree, also die echten
Dateien existiert), gilt die Kopie, auf die von einer Projekt-Homepage aus verwiesen wird,
häufig als das offizielle Repositorium, in das die Revisionen der Entwickler übertragen
werden. Es existieren spezielle Remote-tracking branches, das sind Referenzen (siehe Nicht-
lineare Entwicklung), die auf den Stand eines anderen Repositoriums zeigen.
   
Ziel: Der Text Unterhalb „h1“ und „h2“ soll zweispaltig dargestellt werden (wie bei einer
Zeitung).

body {font-family: 'Raleway', sans-serif;}
              h1,h2 {font-family: 'Permanent+Marker', sans-serif; color: blue;}
              p {font-family: 'Pacifico', sans-serif; color: black;}

              h1 + p {
              -webkit-columns: 3;
              -moz-columns: 3;
              columns: 3;
              }

              h2 + p {
              -webkit-columns: 3;
              -moz-columns: 3;
              columns: 3;

}

  Document

   Titel
   
        Sowohl das Erstellen neuer Entwicklungszweige (branching), als auch das
Verschmelzen zweier oder mehrerer Zweige (merging) sind
        integrale Bestandteile der Arbeit mit Git und fest in die Git-Werkzeuge eingebaut.[9]
Git enthält Programme, mit deren Hilfe sich
        die nicht-lineare Geschichte eines Projektes einfach visualisieren lässt und mit deren
Hilfe man in dieser Geschichte navigieren kann.
        Branches in Git sind (im Gegensatz zu anderen SCMs) sehr performant
implementiert: Ein Branch stellt nur eine Reference, kurz ref,
        eine Textdatei mit einer Commit-ID, dar, die in einem Repository im Verzeichnis
.git/refs/heads (z. B. .git/refs/heads/master für den
        immer vorhandenen master-Branch) liegt und auf einen bestimmten Commit
verweist. Über dessen Parental Commits, also Eltern-Commits,
        lässt sich die Branch-Struktur rekonstruieren. Durch diese Eigenschaften lassen sich
weiterhin sehr große und effiziente Entwicklungsstrukturen,
        wie bei Git selbst oder dem Linux-Kernel, realisieren, bei denen jedes Feature und
jeder Entwickler einen Branch oder ein eigenes
        Repository haben, aus dem der Maintainer dann Commits über Merge oder Cherry-
pick (Nutzen einzelner Commits) in den Hauptzweig des
        Projekts (master) übernehmen kann.
   
  Untertitel
  
        Jeder Benutzer besitzt eine lokale Kopie des gesamten Repositoriums, inklusive der
Versionsgeschichte (history). So können die meisten
        Aktionen lokal und ohne Netzwerkzugriff ausgeführt werden. Es wird nicht zwischen
lokalen Entwicklungszweigen und Entwicklungszweigen
        entfernter Repositories unterschieden. Obwohl es keinen technischen Unterschied
zwischen verschiedenen Repositorien gibt (außer dem
        zwischen normalen und bare-Repositorien auf Servern, bei denen kein Working-Tree,
also die echten Dateien existiert), gilt die Kopie,
        auf die von einer Projekt-Homepage aus verwiesen wird, häufig als das offizielle
Repositorium, in das die Revisionen der Entwickler
   übertragen werden. Es existieren spezielle Remote-tracking branches, das sind
Referenzen (siehe Nicht-lineare Entwicklung), die auf
   den Stand eines anderen Repositoriums zeigen.

àJetzt mit abgerundeten Linien

body {font-family: 'Raleway', sans-serif;}
              h1,h2 {font-family: 'Permanent+Marker', sans-serif; color: blue;}
              p {font-family: 'Pacifico', sans-serif; color: black;}

h1 + p {
              -webkit-columns: 3;
              -moz-columns: 3;
              columns: 3;
              }

              p.beispiel {
                     width: 25em;
                     padding: 1em;
                     line-height: 1.7;

                      background: #eee;
                      border: 8px solid #ccc;

                      border-radius: 40px;
              }

  Document

  Titel
  
       Sowohl das Erstellen neuer Entwicklungszweige (branching), als auch das
Verschmelzen zweier oder mehrerer Zweige (merging) sind
       integrale Bestandteile der Arbeit mit Git und fest in die Git-Werkzeuge eingebaut.[9]
Git enthält Programme, mit deren Hilfe sich
       die nicht-lineare Geschichte eines Projektes einfach visualisieren lässt und mit deren
Hilfe man in dieser Geschichte navigieren kann.
       Branches in Git sind (im Gegensatz zu anderen SCMs) sehr performant
implementiert:

Oder mit

Beispiel:

Alle Eigenschaften in „MAIN“ sind transparent

Opacity àAusschalten

Background: rgba(255, 255, 255, 0.75) àeinschalten

Ist-Zustand:

Wenn die Maus über den Text liegt, dann soll was passieren àAlpha-Kanal ändern

Mit

Bekommt man einen sanften Übergang à transition

GGf. Einen Delay einbauen

Man kann auch spezielle Elemente ansteuern....

Oder mit Rotation