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 - Egenskaber - Class - ID - Height - Width - Centrering - Margin - Border - Padding - Boksmodellen - Position - Text - Font - Farver - Backgruond - Table - List-style - Selectors - CSS3 - Media - Dropdown |
HTML | <b> - <br> - <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> - HTML5 - <head> - <title> - <body> - <frame> - <frameset> - <iframe> - <style> - <table> - <td> - <tr> - <th> - <tbody> - <thead> - <tfoot> - <form> - <input> - <textarea> - <label> - <select> - <option> - Radio button - Checkbox - Dropdown - Input text - Input password - Submit knap - Billede - Embedding Youtube - Kommentarer - Omdirigere |