html/css

Status
Niet open voor verdere reacties.
G

gebruiker56

Gebruiker
Lid geworden
17 jul 2003
Berichten
884
Hoi,

Wie kan mij de volgende script uitleggen
ik snap wel het <style stukje> en het stukje tussen de <body>.
maar niet: <LINK href="speciaal.css" rel="stylesheet" type="text/css">
en waarom sluiten ze de style tag of op een LEGE regel (met })

Code: 
<HTML> 
<HEAD> 
<LINK href="speciaal.css" rel="stylesheet" type="text/css"> 

<STYLE> 

.eerste {Color: red;

Border : solid black;
} 
</STYLE>

</HEAD> 
<BODY> 
<P class="eerste"> yesyeysyesyesyesyesyesyesyesyesyesyesyes</P> 
</BODY> 
</HTML>
 
Laatst bewerkt:
Eerst nog een tip:
om problemen met IE te voorkomen wordt aangeraden om alle tags in lowercase te zetten:
dus <html> ipv <HTML>. Want in CSS wordt daar soms aan onderscheid in gemaakt (het is niet duidelijk waarom en in welk geval, maar het is zo)
HTML: 
<link
sja.. je gaat iets linken ;)
HTML: 
href=
net zoals in de <a>tag, de plaats van het document waar je naar linkt, zoals 'src=' bij de <img>tag
HTML: 
"speciaal.css"
het document waar CSS in staat (hetgeen wat je anders tussen <style></style> zou zetten)
HTML: 
rel=
link kan veel verschillende soorten dingen linken. 'rel' staat voor relatie. dit duidt dus aan welke relatie er bestaat tussen jouw html-document en datgene waar je naar linkt.
HTML: 
"stylesheet"
het gelinkte document is dus een stylesheet :)
HTML: 
type=
de taal van het gelinkte document
HTML: 
"text/css"
die taal is bij ons dus css
HTML: 
 />
einde van de tag

over dat afsluiten van de style-eigenschappen met } op een lege regel: Dit hoeft helemaal niet op een nieuwe regel te staan. CSS negeert witruimte tussen de eigenschappen. Veel mensen schrijven hun code gewoon in die uitlijning omdat zij dat makkelijk leesbaar vinden.
HTML: 
<style>.eerste{color:red;border:solid black;}</style>
heeft hetzelfde effect als:
HTML: 
<style> 
.eerste {
    Color: red;
    Border : solid black;
} 
</style>
Alleen vind ik dat 2de makkelijker leesbaar ;)

--Johan
 
Oke, TOP ik begrijp het wel :p snel he

maar als ik:
<LINK href="speciaal.css" rel="stylesheet" type="text/css">
weg haal werkt het nog steeds want ik heb maar 1 html bestand dus het nud zie ik er niet van in (of nog niet) want ik heb zoals ik zeg maar 1 bestand en dat is test.html :confused:
 
Die speciaal.css is ervoor zodat je de css code niet in je html bestand hoeft te plaatsen. Jij hebt het in je html bestand gezet dus die regel die jij weglaat is onnodig.
 
cverkooyen zei:
Die speciaal.css is ervoor zodat je de css code niet in je html bestand hoeft te plaatsen. Jij hebt het in je html bestand gezet dus die regel die jij weglaat is onnodig.
Klik om te vergroten...

OOOOOKE,

dus als ik 1 bestand maak met die regel kan ik in elke pagina zo me opmaak terug koppelen. als ik iets verander verander alles mee?

Tim
 
Correct!

In dat .css bestand kan je trouwens alles gewoon zo plaatsen:

.eerste {
Color: red;
Border : solid black;
}

zonder <style>..</style>
 
Oke, Top

Dus dan maak je een .css bestand waar je naartoe link en kan het stukje tussen <style> weg in je gewone pagina zeg maar?

zoniet heb je een minivoorbeeld?
 
Laatst bewerkt:
Een mini-voorbeeld :)

---------------------
bestand.html
---------------------
<HTML>
<HEAD>
<LINK href="style.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="eerste"> yesyeysyesyesyesyesyesyesyesyesyesyesyes</P>
</BODY>
</HTML>

---------------------
style.css
---------------------
.eerste {Color: red;

Border : solid black;
}
 
Hoi,

ja toppie zo boedoelde ik het ook ben soms niet zo duiderlijk (dat is tims taal)
maar bedankt TOPPIE!

MVG Tim
 
Viel wel mee hoor hoe onduidelijk je was, maakte een voorbeeld om verwarring te voorkomen! Succes verder!
 
Hoi,

Code: 
<style type=”text/css”>
 Body {
   Font-family: Georgia, “Times New Roman”,
           Times, serif;
   Color: purple;
   Backgrounbd-color: #d8da3d }
h1 {
    font-family: Helvetica, Geneva, Arial, 
            Sunsans-Regular, sans-serif }
</style>

Wat kan ik hier verder mee heel onduiderlijk!

Tim
 
Laatst bewerkt:
Hoi,

ik ben er achter heeeeeeheeeeeee!

HTML: 
<html> 
<head> 

<style>
.Body { Font-family: Georgia, “Times New Roman”, Times, serif; 
        color: red; Background-color: #1a1a1a1a1 }
.h1   { font-family: Helvetica, Geneva, Arial, Sunsans-Regular, 
        sans-serif; color: green }
</style>


</head> 
<body> 
<p class="h1"> yesyeysyesyesyesyesyesyesyesyesyesyesyes</p> 
</body> 
</html>

maar als ik de punten weg haal voor h1 en body dat word inplaats van de achtergrondkleur de achtergrondkleur-tekst gekleurd klopt dit?

MVG Tim
 
Laatst bewerkt:
http://handleidinghtml.nl/css/selectors/selectors01.html
behandelt je vraag volledig, maar om even samen te vatten geef ik hier de 3 basisformules van CSS mee

Code: 
CSS - structuur
-----------------------
naam_van_een_html_tag { eigenschappen };
die eigenschappen zijn van toepassing op elk element, je hoeft aan je html-code niets toe te voegen.

Code: 
CSS - structuur
-----------------------
[b].[/b]een_zelfverzonnen_klassenaam { eigenschappen };
deze code wordt toegepast op elk element van die klasse, je moet aan de elementen die je deze opmaak wil geven 'class="dezelfde_zelfverzonnen_klassenaam"' meegeven

Code: 
CSS - structuur
-----------------------
[b]#[/b]een_zelfverzonnen_idnaam { eigenschappen };
deze code wordt toegepast op het element met dat id. een id mag in één html-document slechts éénmaal voorkomen. Aan het element in html voeg je 'id="die_zelfverzonnen_idnaam"' toe.

Als je wil post ik hier van elk nog een voorbeeldje ook,
-- Johan
 
Prima snap ik
maar als je de volgende een css maakt

.Body { Font-family: Georgia, “Times New Roman”, Times, serif;
color: red; Background-color: #1a1a1a1a1 }
.h1 { font-family: Helvetica, Geneva, Arial, Sunsans-Regular,
sans-serif; color: green }

moet je wel aangeven welke opmaak .h1 of .body je wil gebruiken


<P class="H1 of BODY"> TEKST</P>

MVG Tim
 
Laatst bewerkt:
Bekijk dit voorbeeld eens in je html editor en de browser.
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">

<!--  over het doctype http://www.w3.org/TR/html401/sgml/dtd.html -->
<html>

<head>
<title>(Type a title for your page here)</title>
<!--This page created on Wednesday, November 08, 2006 -->

<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<META name="description" content="starting with arachnophilia the html editor">
<META name="keywords" lang="nl" content="arachno, html, updat, email, content, starting, homepage">
<meta name="Author" content="Peter Vazed">
<META name="robots" content="index, follow">
<META name="revisit" content="7 days">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

<!-- <LINK rel="stylesheet" type="text/css" href="stijl.css"> -->

<STYLE TYPE="text/css">
<!--
A:link      { text-decoration: none; color: #0000a0;  }
A:visited   { text-decoration: none; color: #990000; }
A:active    { text-decoration: none; color: #0000FF; }
A:hover     { text-decoration: underline; color: #FF0000; }
p { padding:10px; }
.klgrs {background-color: #b1b1b1;padding: 4px 6px 4px 6px;}
.klgl {background-color: #eaebb8; padding: 1px 1px 1px 1px;}
.kl {font-family: verdana, tahoma, Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal;color:#80808a;}
.tomat {font-family: verdana, tahoma, Arial, Helvetica, "sans-serif"; font-size: 36px; font-weight: bold;color:#b0224d;}
.prijs
{font-family: verdana, tahoma, Arial, Helvetica;
 font-size: 12px;
 font-style: normal;
color:#ffffff;
}
.info 
{border-width:2px;
border-style:dotted;
border-color:#808080;
background-color: #f2f2f2;
font-family:verdana, tahoma, arial, "ms sans serif";
font-size:10px;padding: 10px 10px 10px 10px;}

Body 
{ Font-family: Georgia, “Times New Roman”, Times, serif;
color: red; 
background-color: #c0c0c0; 
}
h1 
{ font-family: Helvetica, Geneva, Arial, Sunsans-Regular,
sans-serif; color: #ff00ff;
}
.center{
text-align:center;
}-->
</STYLE>

</HEAD>
<body >

Hier is de content van de pagina
<h1>Dit is een kop, door H1 te gebruiken</h1>

<div class="info">Enige tekst met class info</div>
En de prijs is <span class="prijs">  100,-- Euro </span>per stuk.
<br>
 <span class="tomat">Dit is Koptekst: Tomat als zelfgemaakte style</span><br>
<br>

In de style wordt  <span class="klgl">body en h1 </span> gewoon ingegeven, dit omdat het  <span class="kl">gereserveerde </span> items zijn,<br>
zonder puntje ervoor.<br><br>


Met  <span class="klgrs">een puntje </span> moet je dus aanroepen met class.<br><br>


<div class="info">Geef je style duidelijke namen om makkelijker te gebruiken.<br>
Koptekst als Tomat wil zeggen donker rood,<br>
klgl als  <span class="klgl">achtergrondkleur </span>: geel </div>
<br>
<br>
</body>

</html>
 
peter vazed zei:
Bekijk dit voorbeeld eens in je html editor en de browser.
............
[/PHP]
Klik om te vergroten...


Hoi, Kan inderdaat ook, ik ga het morgen op me gemak bekijkjen maar zover ben ik eigenlijk nog niet, Toch bedankt want ik ga toch kijken of ik het ga snappen, zo te zien is het erg duiderlijk!!

Tim
 
gebruiker56 zei:
Hoi, Kan inderdaat ook, ik ga het morgen op me gemak bekijkjen maar zover ben ik eigenlijk nog niet, Toch bedankt want ik ga toch kijken of ik het ga snappen, zo te zien is het erg duiderlijk!!

Tim
Klik om te vergroten...

tja. in het begin snapte ik het ook niet, doch door te doen kom je er wel achter..

Info:
http://www.w3.org/Style/CSS/

maar let op:
je pagina dient wel een juiste html header (Doctype) te hebben om de css goed weer te geven.


Twee weken geleden deze site gemaakt
http://www.zeepoort.nl/esther
ook met een stylesheet erin.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan