Rubrik och stycke
Rubrik
Eftersom ovan är en rubrik har jag inte lagt in ett indraget första raden. (Rubriken är i sig ett eget stycke.)
Stycke
I följande stycken går vi igenom de olika attributen för stycke-koden (p-koden, p står för pragraph.) Hitintills har jag bara sett ett attribut för p-koden resten är stil-attribut (style). Alla stil-attributen är valfria. Och de kan komma i vilken ordning som helst. Här har jag försökt att lägga dem i en logisk ordning.
Så efter p-koden kan man skriva in justerings-attributet (align=). Sen kommer style="som inramas av två citattecken". Mellan citattecknen kommer attributen med ett kolon och avslutas med ett semikolon.
Alla stil-attributerna presenterade i den här lektionen är listade i filen: 035-koder-attribut-funktioner.ods.
Attributen har följande upplägg:
attribut: storlek;
eller attribut: färg;
eller attribut: funktion;
eller attribut: storlek funktion;
eller attribut: storlek funktion färg;
eller attribut: plats storlek funktion färg;
Förklaringarna av stil-attributerna för detta stycket finns inom denna ram. Man kan ha alla dessa attributer för ett stycke eftersom de inte är i konflikt med varandra.
Första raden indragen i stycket (text-indent) kan uttryckas i pt (points), px (pixlar, pixlar tar hänsyn till skärmupplösningen), procent%, cm eller mm. Det är bara att testa vilket man tycker passar bäst.
Text-justering (text-align) kan uttryckas i left (vänster), right (höger), center (mitten), justify (marginaljusterad.) Om man vill ha texten till vänster behövs inget attribut eftersom vänster är normalläget.
Marginal -övre -vänster -höger -nedre (margin-top, margin-left, margin-right, margin-bottom) kan uttryckas i pt, px, procent%, cm eller mm.
Färg (color) kan uttryckas i olika färger. Lektionen om färger är 090-färger.html (ex. blue, red, yellow, green o.s.v.) Där finns 145 namngivna färger.
Teckenstorlek (font-size) storleken kan uttryckas i pt, px, procent%, cm eller mm.
Ram (border) har storlek som kan uttryckas i pt, px, cm eller mm. Funktionen kan uttryckas solid (tät), double (dubbel), dashed (streckad) eller dotted (punkter).
Sen kan man lägga till färg.
Om man inte vill ha ramen runt om kan man istället välja: border-top, border-left, border-right eller border-bottom.
Ramskugga (box-shadow) kan ha 11 funktioner. Om siffran 0 ges till första och andra funktionerna läggs skuggan runt om. Om första funktionen ges ett negativt tal läggs skuggan till vänster och med ett possitivt tal läggs skuggan till höger. Om andra funktionen ges ett negativt tal läggs skuggan där uppe och med ett possitivt tal läggs skuggan där nere. Den tredje funktionen ger graden av luddighet. Den fjärde funktionen ger bredden. Med den femte funktionen väljs färgen. Om den sjätte funktionen "inset" skrivs dit hamnar skuggan på insidan. Man kan ha flera rader av dessa sex funktionen med ett komma mellan dem. Ramen här i exemplet har två rader med funktionen, den första raden för utsidan och den andra raden för insidan. Ramskuggan fungerar med eller utan ram-koden. Så utan ramkoden blir skuggan ramen.
Mellanrum runt stycket (padding) kan uttryckas i pt, px, procent%, cm eller mm.
Om man inte vill ha padding runt om kan man istället välja: padding-top, padding-left, padding-right och padding-bottom.
Bakgrund (background) kan uttryckas i olika färger.
Rundade hörn i ramen (border-radius:50px) uttrycks i px. Med en funktion påverkar det alla hörn. Med två funktioner påverkar de diagonalerna- Med tre funktioner påverkar de tre hörn var för sig. Med fyra funktioner påverkar de alla hörnen var för sig. Med ett / mella andra och tredja funktionen påverkar det de horisontella och vertikala linjerna
Bakgrundsbild. Det går att lägga in en bakgrundsbild i stycket. Här är koden: (background-image: url(länken till bilden).)
Notera att om man vill trycka ut denna sida med Ctrl+p så måste man klicka i rutan "bakgrundsgrafik" för att få med bakgrundsfärgen eller bakgrundsbilden.
Teckenavstånd (letter-spacing) kan uttryckas i pt, px, cm eller mm, med minustal eller plustal.
Radavstånd (line-height) kan uttryckas i pt, px, procent%, cm eller mm. Detta behöver bara användas vid speciella behov. Utan det attributet sköter attributet för teckenstorleken om att hålla ett läsvänligt radavstånd.
Notera att siffror kan också uttryckas i XX.Xvh vilket ger ett avstånd i proption med höjden på bildskärmen. Eller de kan utryckas i XX.Xvw vilket ger ett avstånd i propotion med bredden på bildskärmen.
I de flesta fallan verkar px vara det bästa sättet att uttrycka storleken, eftersom det refererat till bildskärmens pixlar. Det finns ju i dag en uppsjö av bildskärmar med olika hög upplösning i pixlar.
Textdekoration (text-decoration) specificerar: plats, storlek, funktion och färg. Platserna: overline (över linjen) line-through (genom linjen) och underline (under linjen). Storlek: pt, px, procent%, cm eller mm. Funktionerna: solid (tät), double (dubbel), dashed (streckad), dotted (punkter) och wavy (vågig) och färg.
Teckensnitt familj (font-family) har många möjligheter. I filerna 060-korta-teckensnitt.html och 070-långa-teckensnitt.html finns många användbara teckensnitt. Här används teckensnittet sans-serif.
Sidbrytning (page-break-before: always) denna kod ger en ny sida när webbsidan trycks ut. Med tangenttrycket ctrl+p kan man se var det kan vara bra att lägga koden.
Observera att TECKENSNITT-VARIANTEN-koden (font-variant-caps: all-small-caps) ger följande utslag nedan: Notera att denna kod inte går att ha tillsammans med koden (font-size: 20pt) utan med teckensnittskoden (font size=1-7).
TECKENSNITT-VARIANTEN-koden (font-variant-caps: all-small-caps) gör alla till stora bokstäver med samma höjd som små bokstäver.
TECKENSNITT-VARIANTEN-koden (font-variant-caps: small-caps) gör alla till STORA bokstäver men de bokstäver som var skrivna som små bokstäverna får en lägre höjd.
TECKENSNITT-VARIANTEN-koden (font-variant-caps: unicase) gör de STORA bokstäverna lika låga som de små bokstäverna men de små bokstäverna b och f sticker upp och g, j, p, q och y sticker ner.
Tecken-tjocklek (font-weight: bold) ger fet stil.
Tecken-stilen (font-style: italic) ger kursiv stil.
I bland vill man skriv en text i kolumner. Den här texten har en kolumn bredd (column-width) på 5cm. Med denna koden så blir det så många kolumner som skärmbredden tilllåter.
Ibland när man vill ha texten i kolumener så vill man bestämma hur många kolumner man vill ha på sidan. Med koden (colums: 3) så får man tre kolumner som justeras efter bredden på skärmen.