CSS-font
Ved hjælp af fonts, eller på dansk: skrifttyper, kan vi bestemme alt om skrifttypen vi bruger. De forskellige ting kommer vi ind på længere nede.
Font family
Der findes to typer familier[1]:
family-name : Som fx. "times", "courier", "arial" osv.
generic-family. : Som fx. "serif", "sans-serif", "cursive", "fantasy" osv.
Eksempel:
<style type="text/css">
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
Giver disse skrifttyper:
Font size
Skal beskrive størrelsen på teksten.
Eksempel:
<style type="text/css">
h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%;}
</style>
Giver disse størrelser:
Font style
Stilen skal beskrive om teksten skal være kursiv, normal, italic eller noget helt andet.
Eksempel:
<style type="text/css">
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
Giver disse stile:
Font variant
Med dette kan man gøre små bokstaver, til blokbogstaver - hvor de stadig er mindre end normalt
Eksempel:
<head>
<style type="text/css">
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>
Det giver disse varianter:
Font weight
Med dette kan man bestemme tykkelsen på bogstaverne - altså om bogstaverne skal skrives meget tynde, eller meget tykke.
Eksempel:
<style type="text/css">
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style>
Det giver:
Referencer
| Webdesign | |
|---|---|
| CSS | Placering - Class - ID - Height - Width - Centrering - Margin - Border - Padding - Boksmodellen - Position - Text - Font - Farver - Backgruond - Table - List-style - Selectors - CSS3 - Media - Dropdown |
| HTML | <b> - <em> - <strong> - <i> - <cite> - <q> - <tt> - <code> - <samp> - <kbd> - <var> - <pre> - <sub> - <sup> - <h1> - <h6> - <p> - <br> - <li> - <ol> - <ul> - <a> - <a> på siden - <img> - <map> - <object> - <dd> - <dl> - <dt> - <hr> - <div> - <span> - <html> - <head> - <title> - <body> - <frame> - <frameset> - <iframe> - <style> - <table> - <td> - <tr> - <th> - <tbody> - <thead> - <tfoot> - <form> - <input> - <textarea> - <label> - <select> - <option> - Billede - Embedding Youtube - Kommentarer - Omdirigere |