CSS-class: Forskelle mellem versioner
Bar (diskussion | bidrag) m 1 version importeret |
Bar (diskussion | bidrag) Ingen redigeringsopsummering |
||
| (En mellemliggende version af den samme bruger vises ikke) | |||
| Linje 2: | Linje 2: | ||
==Generel class== | ==Generel class== | ||
Man kan definere en generel class der virker alle steder som f.x. fremhaev: | Man kan definere en generel class der virker alle steder som f.x. fremhaev: | ||
<pre> | <pre> | ||
.fremhaev { | .fremhaev { | ||
| Linje 22: | Linje 22: | ||
Det giver følgende visning: | Det giver følgende visning: | ||
[[ | [[Image:class1.png]] | ||
==Speciel class på et tag== | ==Speciel class på et tag== | ||
| Linje 48: | Linje 48: | ||
Dette giver følgende visning: | Dette giver følgende visning: | ||
[[ | [[Image:class2.png]] | ||
==id== | ==id== | ||
| Linje 74: | Linje 74: | ||
Kunne få følgende visning: | Kunne få følgende visning: | ||
[[ | [[Image:class3.png]] | ||
Nuværende version fra 1. aug. 2022, 13:34
Når man bruger CSS-class, så er det når man skal have flere ting, som skal have det samme egenskab.
Generel class
Man kan definere en generel class der virker alle steder som f.x. fremhaev:
.fremhaev {
font-weight:bold;
color:red;
background-color:yellow;
}
Med denne class kan man fremhæve dele af en tekst, som koden her viser:
<p>In my younger and more vulnerable years my father gave me some advice that I've been <span class="fremhaev">turning</span> over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the <span class="fremhaev">advantages</span> that you've had.'</p>
Det giver følgende visning:
Speciel class på et tag
Hvis man ønsker det, så kan man begrænse en class til kun at fungere på en bestemt type tags, det kunne f.x. være ens billeder man ville formattere lidt forskelligt. Man kunne så oprette flere typer img-classes som følger:
img.normal {
border-style:solid;
border-width: 3px;
width: 50px;
}
img.important {
border-style:solid;
border-width:15px;
width: 130px;
}
Man ville så kunne angive to billeder med hver sin class, som i det viste eksempel, og andre tags vil ikke kunne reagere på "normal" og "important".
<img class="normal" src="smiley.gif" alt="Smiley face" /> <img class="important" src="smiley.gif" alt="Smiley face" />
Dette giver følgende visning:
id
Man bruger oftest CSS-id, når der er en ting, man gerne vil have, der skal være enestående, det kan f.x. være en del af siden som en menu.
Man definerer et id som følger:
#menu {
float: left;
width: 150px;
padding: 10px;
}
Hvis dette sættes ind i en side, hvor der er menu og content defineret, så vil man med følgende kode:
<div id="menu"><h2>menu</h2> Her skal stå noget der linker rundt til alle siderne </div> <div id="content"> <img class="normal" src="smiley.gif" alt="Smiley face" /> <img class="important" src="smiley.gif" alt="Smiley face" /> </div>
Kunne få følgende visning:
Forskellen mellem class og id
Så der er sådan set, ikke den helt store forskel på CSS-class og CSS-id - man kan anvende class til en enkelt ting, og man kan anvende id til flere ting på ens side, men den grundlæggende mening er som beskrevet.
Når man skal skrive en CSS-id selector, så skal man bruge "#".
| 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 |