skip to Main Content
afsnit-h6

H1 - H6, "a-familien" m.m.

WordPress bygger på de helt basale og fælles opensource-HTML5- og CSS3-standarder, som er 100% ens - uanset om man håndkoder, arbejder i Adobe Dreamweaver eller et andet CMS-system (Joomla, TYPO3 etc.)
Herunder lidt om de basale "HTML-tags", som kan vælges via WordPress'  TinyMCE-bjælke.

body

Det yderste HTML-tag, som omslutter alt indhold på en side.
Kan ikke umiddelbart HTML-redigeres i WordPress.

I style sheetet

body {
    font-family: Source Sans Pro;
    font-size: 16px;
    color: #000;
    line-height: 1.3;
}

Afsnit - p - paragraph/ brødtekst

HTML i fanen Tekst:

Afsnit - p - paragraph/ brødtekst

I WordPress vises p-tagget ikke i fanen Tekst.

I style sheetet

p {
}

I dette tilfælde er alle egenskaber arvet fra body-tagget.

Overskrift 1

HTML i fanen Tekst:

<h1>Overskrift 1</h1>

I style sheetet

h1 {
    font-size: 2em;
    line-height: 1.2em;
    text-transform: uppercase;
    margin-bottom: 0px;
    font-weight: 600;
    color: #222;
    line-height: 1.5;
    margin: 0px;
}

Overskrift 2

HTML i fanen Tekst:

<h2>Overskrift 2</h2>

I style sheetet

h2 {
    font-size: 1.5em;
    text-transform: uppercase;
    margin-bottom: 0px;
}

Overskrift 3

Overskrift 4

Overskrift 5
Overskrift 6

HTML i fanen Tekst:

<h3>Overskrift 3</h3>
<h4>Overskrift 4</h4>
<h5>Overskrift 5</h5>
<h6>Overskrift 6</h6>
  • Punktopstilling 1
  • Punktopstilling 2
  • Punktopstilling 3

HTML i fanen Tekst:

<ul>
     <li>Punktopstilling 1</li>
     <li>Punktopstilling 2</li>
     <li>Punktopstilling 3</li>
</ul> 

I style sheetet

ul{
    list-style: none;
    margin: 0px 0px 0px 0px;
}
li{
    padding: 0px 0px 1em 1.4em; 
    list-style: none;
}
li:before {
    position: absolute;
    content: " ";
    font-family: FontAwesome;
    color: darkgrey;
    left: 16px;
    font-size: 0.9em;
    padding-top:0.08em;
}
  1. Nummereret liste
  2. Nummereret liste
  3. Nummereret liste

HTML i fanen Tekst:

<ol>
    <li>Nummereret liste</li>
    <li>Nummereret liste</li>
    <li>Nummereret liste</li>
</ol>

Blockquote - bruges ofte til citater.
Det er meget forskelligt fra tema til tema hvordan det ser ud.

HTML i fanen Tekst:

<blockquote>Blockquote - bruges ofte til citater.
Det er meget forskelligt fra tema til tema hvordan det ser ud.</blockquote>

 

HYPERLINKS/ A-FAMILIEN

HTML i fanen Tekst:

Basis hyper<a href="#">link</a>

Et hyperlink har fire stadier, og rækkefølgen vist herunder er vigtig:

  1. Ikke-besøgt link: a
  2. Besøgt link: a:visited
  3. Mouse-over på link: a:hover
  4. Ved klik på link: a:active

Det er sjældent, at se a:visited brugt, og du kan sagtens slette denne.
Hvis du tilføjer a:visited brugt igen, så husk at den skal stå mellem a og a:hover.

I style sheetet

/* Links */
{
    color: red; 
    text-decoration: underline; 
    font-weight: bold;
}
a:visited {
    color: green;
}
a:hover {
    color: blue;
}
a:active {
    color: black;
}

HOVER-EFFEKTER

LINK med fade (opacitet)

HTML i fanen Tekst:

<p class="linkfade"><a href="#">LINK</a> med fade (opacitet)</p>

I style sheetet

.linkfade a{
 font-size: 80px;
 font-weight: 900;
 opacity: 1;
 transition: opacity .25s ease-in-out;
 -moz-transition: opacity .25s ease-in-out;
 -webkit-transition: opacity .25s ease-in-out;
}
.linkfade a:hover {
 opacity: 0.5;
 text-decoration: none;
 }

LINK med farveskift

HTML i fanen Tekst:

<span class="farveskift"><a href="#">LINK</a></span> med farveskift

I style sheetet

.farveskift a{
     color:#000000;
     font-size:80px;
     font-weight:bolder;
     -webkit-transition-property:color, text;
     -webkit-transition-duration: 1s, 1s;
     -webkit-transition-timing-function: linear, ease-in;
     -moz-transition-property:color, text;
     -moz-transition-duration:1s;
     -moz-transition-timing-function: linear, ease-in;

     -o-transition-property:color, text;
     -o-transition-duration:1s;
     -o-transition-timing-function: linear, ease-in;
}
.farveskift a:hover{
     color: white;
}

 

BLUR

HTML i fanen Tekst:

<span class="blur"><a href="#">LINK</a></span> med farveskift

I style sheetet

.blur {
    -webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
.blur:hover {
    color: white;
    text-shadow: 0px 0 15px #000;
}

 

 

DREJ
rundt

HTML i fanen Tekst:

<p class="roter">DREJ
<small>rundt</small></p>

 

I style sheetet

.roter {
 font-size: 30px;
 line-height: 1em;
 text-align: center;
 width: 150px;
 height: 150px;
 padding-top: 40px;
 border-radius: 50%;
 background: yellow;
 -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
 transition: width 2s, height 2s, transform 2s;
}

.roter:hover {
 width: 200px;
 height: 200px;
 -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
 transform: rotate(180deg);
}

 

 

 

Back To Top
Search