{"id":71,"date":"2012-08-27T17:47:01","date_gmt":"2012-08-27T17:47:01","guid":{"rendered":"https:\/\/ai.hasebox.de\/index.php\/2012\/08\/27\/3-1-weitere-definitionen-fuer-schriften\/"},"modified":"2024-03-15T17:45:43","modified_gmt":"2024-03-15T17:45:43","slug":"3-1-weitere-definitionen-fuer-schriften","status":"publish","type":"post","link":"https:\/\/ai.hasebox.de\/index.php\/2012\/08\/27\/3-1-weitere-definitionen-fuer-schriften\/","title":{"rendered":"3.1 Weitere Definitionen f\u00fcr Schriften"},"content":{"rendered":"

Schrift und Abst\u00e4nde<\/h2>\n
\n
<\/dt>\n
font-weight:bold;<\/dt>\n
Die Schriftst\u00e4rke, zur Auswahl stehen normal|bold|bolder|lighter<\/dd>\n<\/dl>\n
\n
font-style:italic;<\/dt>\n
Anzeige der Schrift (kurz ob kursiv oder normal)
italic = kursive
oblique = schr\u00e4ggestellt
normal = normal<\/dd>\n<\/dl>\n
\n
letter-spacing:0.3em;<\/dt>\n
Abst\u00e4nde zwischen den einzelnen Buchstaben – sollte relativ angegeben werden, also in EM<\/dd>\n<\/dl>\n
\n
word-spacing:0.5em;<\/dt>\n
Abst\u00e4nde zwischen den einzelnen W\u00f6rtern – sollte relativ angegeben werden, also in EM<\/dd>\n
<\/dd>\n
border-bottem:5px dotted;<\/dt>\n
Unterstreicht mit 5 Pixel dicken punkten (solid = durchgezogen)<\/dd>\n<\/dl>\n

 <\/h2>\n

Farbe: Vordergrund- und Hintergrundfarbe<\/h2>\n
\n
color:#FF9F00;<\/dt>\n
Farbe f\u00fcr Vordergrund – angewendet auf Schrift ist dies die Farbe der Schrift. Kann entweder als Hex-Wert:“#FF9F00″ oder als Farbnamen angegeben werden: „orange“<\/dd>\n<\/dl>\n
\n
background-color:#FF00FF<\/dt>\n
Farbe f\u00fcr den Hintergrundbereich; auch diese als Hex-Wert oder Farbnamen.<\/dd>\n
<\/dd>\n<\/dl>\n

 <\/h2>\n

Rahmen von Tabellen<\/h2>\n
\n
border-color:#00FFFF;<\/dt>\n
Rahmenfarbe – soll nur ein Teil des Rahmens gef\u00e4rbt werden, dann:
border-top-color, border-right-color, border-bottom-color und border-left-color<\/dd>\n
border-width:4px;<\/dt>\n
Rahmenst\u00e4rke in Pixel
soll nur ein Bereich ge\u00e4ndert werden:
border-top-width, border-right-width, border-bottom-width und border-left-width<\/dd>\n
border-style: dotted;<\/dt>\n
Rahmenart bestimmen – folgende M\u00f6glichkeiten gibt es:
solid = durchgezogen
double = doppelt
none = kein Rahmen (unsichtbar)
hidden = kein Rahmen (unsichtbar)
dotted = gepunktet
dashed = gestrichelt
groove = 3D-Effekt
ridge = 3D-Effekt
inset = 3D-Effekt
outset = 3D-Effekt<\/dd>\n
<\/dd>\n<\/dl>\n

Aufgabe:<\/h3>\n

\u00dcberarbeite deinen Stundenplan. <\/p>\n

 <\/p>\n

Erstelle das Verzeichnis ai\/css\/stundenplan<\/p>\n

Erstelle hier Datei stundenplan.html<\/p>\n

 <\/p>\n

Erstelle das Grundger\u00fcst.<\/p>\n

Kopiere den code vom Stundenplan in das Grundger\u00fcst.<\/p>\n

Verweise auf die css Datei stundenplanstyle.css<\/p>\n

Erstelle die Datei ai\/css\/stundenplanstyle.css<\/p>\n

Weise den benutzten Schriften (h1 und p) einen neuen style zu.<\/p>\n

Weise der Tabelle einen neuen style zu.<\/p>\n

Benutze dazu die zuvor erw\u00e4hnten Attribute.<\/p>\n

Zum Beispiel:<\/p>\n

    \n
  • h1 – Farbe lila, Breite 1px und solid<\/li>\n
  • h2 – hellgrau, nur links und oben mit Rahmenst\u00e4rke von 10px und solid<\/li>\n
  • p – Schrift schwarz, unten und rechts gepunktet orange<\/li>\n<\/ul>\n

     <\/p>\n

    <table border=\"1\">
               <tr>
                 <td colspan=\"6\"><h1>Stundenplan<\/h1><\/td>
               <\/tr>
               <tr>
                 <td><\/td>
                 <td><b>Montag<\/b><\/td>
                 <td><b>Dienstag<\/b><\/td>
                 <td><b>Mittwoch<\/b><\/td>
                 <td><b>Donnerstag<\/b><\/td>
                 <td><b>Freitag<\/b><\/td>
              <\/tr>
              <tr>
                 <td>1<\/td>
                 <td>sp<\/td>
                 <td>ch<\/td>
                 <td>de<\/td>
                 <td>sp<\/td>
                 <td><a href=\"http:\/\/ai.schule-tremser-teich.de\"\/>wpu<\/a><\/td>
              <\/tr>
               <tr>
                 <td>2<\/td>
                 <td>sp<\/td>
                 <td>ch<\/td>
                 <td>bo<\/td>
                 <td>kla<\/td>
                 <td><a href=\"http:\/\/ai.schule-tremser-teich.de\"\/>wpu<\/a><\/td>
              <\/tr>
               <tr>
                 <td>3<\/td>
                 <td>weku<\/td>
                 <td>ma<\/td>
                 <td>ma<\/td>
                 <td>bio<\/td>
                 <td>de<\/td>
              <\/tr>
               <tr>
                 <td>4<\/td>
                 <td>weku<\/td>
                 <td>ma<\/td>
                 <td>ma<\/td>
                 <td>bio<\/td>
                 <td>de<\/td>
              <\/tr>
               <tr>
                 <td>5<\/td>
                 <td>de<\/td>
                 <td>en<\/td>
                 <td><a href=\"http:\/\/ai.schule-tremser-teich.de\"\/>wpu<\/a><\/td>
                 <td>en<\/td>
                 <td>weku<\/td>
              <\/tr>
               <tr>
                 <td>6<\/td>
                 <td>de<\/td>
                 <td>en<\/td>
                 <td><a href=\"http:\/\/ai.schule-tremser-teich.de\"\/>wpu<\/a><\/td>
                 <td>en<\/td>
                 <td>weku<\/td>
              <\/tr>
               <tr>
                 <td>7<\/td>
                 <td><\/td>
                 <td><\/td>
                 <td><\/td>
                 <td>west<\/td>
                 <td><\/td>
              <\/tr>
               <tr>
                 <td>8<\/td>
                 <td><\/td>
                 <td><\/td>
                 <td><\/td>
                 <td>west<\/td>
                 <td><\/td>
              <\/tr>
    <\/table><\/code><\/p>\n

    Ausrichtung von Elementen<\/h2>\n
    \n
    text-align:right;<\/dt>\n
    Ausrichtung von Text, m\u00f6glich sind: left|center|right|justify 
    left = linksb\u00fcndig ausgerichtet (Standard)
    center = zentriert ausgerichtet
    right = rechtsb\u00fcndig ausgerichtet
    justify = als Blocksatz ausgerichtet<\/dd>\n
    <\/dt>\n<\/dl>\n

    Aufgabe:<\/h3>\n
      \n
    • h1 – Textausrichtung rechts und Hintergrundfarbe lightskyblue<\/li>\n
    • h2 – Textausrichtung zentriert, Schriftfarbe wei\u00df, Hintergrundfarbe limegreen<\/li>\n<\/ul>\n

       <\/p>\n

      Grafik und Bilder<\/h2>\n
      \n
      background-image: url(„hintergrund.jpg“);<\/dt>\n
      F\u00fcr das Element wird ein Hintergrundbild geladen und in der Gr\u00f6\u00dfe des Elements angezeigt<\/dd>\n
      background-repeat:no-repeat;<\/dt>\n
      Verhaltensweise des Bilds – ob es nur einmal angezeigt wird oder wiederholt – folgende Werte sind m\u00f6glich:
      repeat = wiederholen (Standard)
      repeat-y = nur in Y-Richtung, also senkrecht wiederholen
      repeat-x = nur in X-Richtung, also waagerecht wiederholen
      no-repeat = nicht wiederholen, nur einmal anzeigen<\/dd>\n
      background-attachment:fixed;<\/dt>\n
      Wasserzeicheneffekt – Bild bleibt trotz Scrollen stehen – m\u00f6gliche Werte:
      scroll = mitscrollen (Standard)
      fixed = Hintergrundbild bleibt fixiert<\/dd>\n
      background-position:right;<\/dt>\n
      Ausrichtung des Bilds, m\u00f6gliche Werte:
      top = vertikal oben
      bottom = vertikal unten
      center = zentriert (horizontal wie vertikal)
      left = horizontal links
      right = horizontal rechts 
      Anmerkung: vertikal und Horizontal kann auch vermengt werden, z.B. soll es rechts oben sitzen: background-position:right top;<\/dd>\n<\/dl>\n

       <\/p>\n

       <\/p>\n

      \n
      <\/dd>\n<\/dl>\n

       <\/p>\n\n\n

      Im CSS kann man die Schriftgr\u00f6\u00dfe (font-size) in unterschiedlichen Einheiten angeben. Die bekannteste Gr\u00f6\u00dfe sind Pixel. Aber daneben gibt es auch noch die Einheiten em und rem. Was hat es damit auf sich?<\/strong><\/p>\n\n\n\n

      Pixel sind eine absolute Einheit. Das hei\u00dft, eine \u00dcberschrift, die die font-size<\/em> 20px<\/strong> hat, hat immer genau diese Gr\u00f6\u00dfe, n\u00e4mlich 20 Pixel. Ganz gleich, was um sie herum passiert.
      Wie gro\u00df eine \u00dcberschrift ist, die in 2.5em<\/strong> angegeben ist, kann man erst sagen, wenn man wei\u00df, in welcher Umgebung sie steht. Denn die Einheit em<\/strong> bezieht sich auf den n\u00e4chsth\u00f6heren Container.<\/p>\n\n\n\n

      Beispiel em<\/p>\n\n\n\n

      <div<\/strong> class=“content“ style=“font-size:1.0em“> <\/p>\n\n\n\n

      <h2<\/strong> style=“font-size:2.5em“>Eine Headline<\/h2<\/strong>> <\/p>\n\n\n\n

      <\/div<\/strong>><\/p>\n\n\n\n

      Weitere Schriftarten<\/h2>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      font-family: Baskerville, \"Baskerville Old Face\", \"Hoefler Text\", Garamond, \"Times New Roman\", serif;
      <\/code><\/pre>\n\n\n\n
      <\/div>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      font-family: Garamond, Baskerville, \"Baskerville Old Face\", \"Hoefler Text\", \"Times New Roman\", serif;
      <\/code><\/pre>\n\n\n\n
      <\/div>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      font-family: \"Century Gothic\", CenturyGothic, Geneva, AppleGothic, sans-serif;
      <\/code><\/pre>\n\n\n\n
      <\/div>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      font-family: Consolas, monaco, monospace;
      <\/code><\/pre>\n\n\n\n
      <\/div>\n","protected":false},"excerpt":{"rendered":"
      Schrift und Abst\u00e4nde font-weight:bold; Die Schriftst\u00e4rke, zur Auswahl stehen normal|bold|bolder|lighter font-style:italic; Anzeige der Schrift (kurz ob kursiv oder normal)italic = kursiveoblique = schr\u00e4ggestelltnormal = normal letter-spacing:0.3em; Abst\u00e4nde zwischen den einzelnen Buchstaben – sollte relativ angegeben werden, also in EM word-spacing:0.5em; Abst\u00e4nde zwischen den einzelnen W\u00f6rtern – sollte relativ angegeben werden, also in EM border-bottem:5px dotted; […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[50],"tags":[],"class_list":["post-71","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/71","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/comments?post=71"}],"version-history":[{"count":7,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/71\/revisions"}],"predecessor-version":[{"id":796,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/71\/revisions\/796"}],"wp:attachment":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/media?parent=71"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/categories?post=71"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/tags?post=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}