Inline CSS werkt niet van W3School

Status
Niet open voor verdere reacties.
En als je nog een voorbeeldje wil heb je style in body voorbeeld

Code:
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="" />

	<title>Untitled 6</title>
</head>

<body>
   <style>
/*<<<<//RGB  rood #FF0000 Groen#00FF00 Blue #0000FF>>>>>*/
.nentegel{
    display: inline;width: 100px; height: 100px;
}
.blauw{
  background-color: #0000FF;
}
.rood{
  background-color: #FF0000;
}
#rood{
    width: 500px; height: 100px;background-color: #FF9900;
}
        p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
}
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 50px;
  background-color: #2196F3;
  padding: 10px;
}
 
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
table, td, th {
  border: 1px solid black;
}
 
table {
  border-collapse: collapse;
  width: 100%;
}
 
th {
  text-align: left;
}
</style>
    
<title>(Type a title for your page here)</title>
</head>
 
<body>
<div class="nentegel blauw">test1</div>
<div class="nentegel blauw">test2</div>
<div class="nentegel blauw">test3</div>
<div class="blauw">test4</div>
<div class="nentegel rood">test1</div>
<div class="nentegel rood">test2</div>
<div class="nentegel rood">test3</div>
<div class="rood">test4</div>
<div id="rood">test5</div>
<p style="background: blue; color: blue;Font-family:arial; background-color: red;font-weight: bold; text-align:center;">1. Onthoud dat grote liefde en groot succes, grote risico's met zich brengen.</p> 
 <p style="background: blue; color: purple;font-size: 6"> Wanneer je verliest, verlies dan niet tegelijkertijd de les die je ervan hebt geleerd.</caption></p> 
<div class="grid-container"><div class="item1">3 Heb respect voor jezelf, respect voor anderen en neem verantwoordelijkheid voor je daden. </div></div><br>
<tr><th align="right"></th> 4. Onthoud dat niet krijgen wat je wilt soms het beste is wat je kon overkomen.</th></tr>
<p class="ex1">5. Ken de regels tot in extenso, zodat je weet hoe je ze het beste kunt overtreden.</p><br> <br>
6. Laat een kleine onenigheid niet een mooie vriendschap verpesten.<br> </p> 
<p style="color: silver-size: 50px;">7. Wanneer je beseft dat je een fout hebt gemaakt, neem dan onmiddellijk actie om die te herstellen.<br> </p> 
<p style="color: gray; font-size: 60px;">8. Neem elke dag tijd voor jezelf.<br> </p> 
<p style="color: red; font-size: 70px;">9. Sta open voor verandering, maar raak je normen en waarden niet kwijt </p>
<div style="background-color:blue;color:white;padding:2%;">10. Onthoud dat zwijgen soms het beste antwoord is.</div>
<div style="background-color:purple;color;white;padding:5%;">11. Leid een zodanig waardig leven dat wanneer je oud bent en terugkijkt je er opnieuw van kunt genieten.</div><br> 
<b>12. Een liefdesvolle sfeer in je huis legt de basis voor je leven</b><br> 
<u>13. Beperk je in meningsverschillen met geliefden tot het heden : Rakel het verleden nimmer op.</u><br> 
<i>14. Laat mensen delen in je wijsheid. <br> Het is dé manier om onsterfelijk te worden.</i><br> 
<font face="cursive">15. Behandel de aarde goed</font><br> 
<font face="arial"color="blue">16. Gá één keer per jaar ergens heen waar je nog nooit bent geweest.</font><br>
<font face="helvetica">17. Onthoud dat in de beste relatie je meer van elkaar houdt <br>
dan dat je elkaar nódig hebt.<br> 
<font face="fantasy">18. Meet de grootte van je succes af aan wat je ervoor hebt moeten opgeven.</font><br> 
<font size="5" color="green">19. Benader de liefde en het koken met roekeloze uitbundigheid.</font><br>
<font size="20" color="green">20. Ga lief met elkaar om.</font><br>


</body>
</html>
 
@KenikavanBis: Je hele code is niet valid. Je hebt twee </head>'s
 
Beste mensen

Harrtelijk dank voor al uw suggesties en adviezen....
 
Graag gedaan, en succes :)
 
HTML:
<html>
 
<head>
	
<title>(Type a title for your page here)</title>
</head>
 
<body>
<p style ="text-shadow: 2px 2px red;">			</p>
<p style ="text-align: center;">			 		</p>
<p style ="font-family: verdana, sans-serif;"> 	</p>
<p style ="line-height 1.5;">					</p> 
<p style ="text-decoration: underline;"> 		</p>
<p style ="box-sizing: border-box;"> 			</p>
<p style ="height: 100px;"> 						</p>
<p style ="font-weight: bold;">					</p>
<p style ="border-style: dotted;"> 				</p> 
<p style ="padding: 20px;"> 						</p>	
<p style ="border-radius: 30px;"> 				</p>
<p style ="color: blue;"> 						</p>
<p style ="border-top-width: 4px;"> 				</p>
<p 
<p > </p>	
<p > </p>
<p > </p>
<p > </p>
<p > </p> 
<p > </p>	
</body>
 
</html>

Moet er nog een paar
 
Oke, je bent goed op weg! :)
Kijk nog eens naar de lijst en je komt er wel!

PS: transform en outline zijn wel leuk, de rest mag je zelf wel opzoeken.
 
Laatst bewerkt:
Beste PHP4U

ik heb alle regels een style attribuut gegeven, toch vraag ik mij oprecht af of deze allemaal voldoen aan die eisen verschillende 'eigenschap' en 'value'
Toch werken er veel niet...
ik heb deae code geschreven in dreamweaver en bekijk het resultaat door middel van 'LIVE'view

HTML:
<html>
 
<head>
	
<title>(Type a title for your page here)</title>
</head>
 
<body>
<p style ="text-shadow: 2px 2px red;">1. Onthoud dat grote liefde en groot succes, grote risico's met zich brengen							</p>
<p style ="text-align: center;">2. Wanneer je verliest, verlies dan niet tegelijkertijd de les die je ervan hebt geleerd					</p>
<p style ="font-family: verdana, sans-serif;">3. Heb respect voor jezelf, respect voor anderen en neem verantwoordelijkheid voor je daden 	</p>
<p style ="line-height 1.5;">4. Onthoud dat niet krijgen wat je wilt soms het beste is wat je kon overkomen									</p> 
<p style ="text-decoration: underline;">5. Ken de regels tot in extenso, zodat je weet hoe je ze het beste kunt overtreden. 				</p>
<p style ="box-sizing: border-box;">6. Laat een kleine onenigheid niet een mooie vriendschap verpesten 										</p>
<p style ="height: 100px;"> 7. Wanneer je beseft dat je een fout hebt gemaakt, neem dan onmiddellijk actie om die te herstellen.			</p>
<p style ="font-weight: bold;">	8. Neem elke dag tijd voor jezelf.																			</p>
<p style ="border-style: dotted;"> 9. Sta open voor verandering, maar raak je normen en waarden niet kwijt									</p> 
<p style ="padding: 20px;">10. Onthoud dat zwijgen soms het beste antwoord is. 																</p>	
<p style ="border-radius: 30px;">11. Leid een zodanig waardig leven dat wanneer je oud bent en terugkijkt je er opnieuw van kunt genieten. 	</p>
<p style ="color: blue;">12. Een liefdesvolle sfeer in je huis legt de basis voor je leven 													</p>
<p style ="border-top-width: 4px;">13. Beperk je in meningsverschillen met geliefden tot het heden : Rakel het verleden nimmer op 			</p>
<P style="text-transform: capitalize;">14. Laat mensen delen in je wijsheid.																</p>	
<p >15. Behandel de aarde goed 																												</p>
<div style="border:1px solid #707070; border-left:0">16. Gá één keer per jaar ergens heen waar je nog nooit bent geweest 					</div
<div style="position: absolute; left: 10px; top: 100px;"> Onthoud dat in de beste relatie je meer van elkaar houdt 							</div>
<p > </p> 
<p > </p>	
</body>
 
</html>
 
Ik ken DreamWeaver niet, maar is die misschien niet zo verouderd dat die misschien veel CSS3 eigenschappen niet kent in de LIVE-view? Test het eens in de browser.

Bekijk ook eens via Caniuse.com of de eigenschappen in je browser werken. Ik hoop dat je geen oude versies draait ;).
 
Laatst bewerkt:
Toch werken er veel niet...
Het 'lijkt' alsof ze niet werken. Dit heeft ermee te maken dat je het resultaat pas ziet in combinatie met een andere eigenschp. Bijvoorbeeld box-sizing zie je pas in combinatie met width, height, padding of border . Height, padding en line-height uit je voorbeeld kan je zichtbaar maken door de achtergrond een kleur te geven . Border-style zie je in combinatie met border-color én border-width. Als je per <p> wilt beperken tot 1 eigenschap dan zou je alleen tekstopmaak (font... text...) kunnen gebruiken.
 
Beste Beheerder...

Het moeten 20 verschillende eigenschappen zijn en 20 verschillende values
 
Uit interesse, van wie komt die opdracht eigenlijk?
Veel properties hebben bovendien ook 'none' als value.
 
Dit draadje gaat heel erg lang worden :confused:
Hieronder staan er 10, de andere 10 kan je zelf vinden op www.w3schools.com/cssref/ en daar vind je ook de values.
background, border, box-shadow, color, cursor, font-family, font-size, font-style, font-variant, font-weight
 
Beste beheerder

u heeft gelijk

<p HTML ELEMENT
style="text-align CSS EIGENSCHAP
: left;"> Waarde

Dus eigenlijk kan ik alle 20 verschillende values en eigenschappen in <P Element zetten ?
 
Yep :p
Code:
<p style="background: yellow;">1 Gele achtergrond</p>
<p style="border: 2px dotted red;">2 Rode rand</p>
Enzovoort
 
dank u

zijn we er eindelijk....

Ik denk dat in P bijna alles aangeroepen kan worden
 
Beste

HTML:
<html>
 
<head>
	
<title>(Type a title for your page here)</title>
</head>
 
<body>
<p style ="text-shadow: 2px 2px red;">1. Onthoud dat grote liefde en groot succes, grote risico's met zich brengen							</p>
<p style ="text-align: center;">2. Wanneer je verliest, verlies dan niet tegelijkertijd de les die je ervan hebt geleerd					</p>
<p style ="font-family: verdana, sans-serif;">3. Heb respect voor jezelf, respect voor anderen en neem verantwoordelijkheid voor je daden 	</p>
<p style ="line-height 1.5;">4. Onthoud dat niet krijgen wat je wilt soms het beste is wat je kon overkomen									</p> 
<p style ="text-decoration: underline;">5. Ken de regels tot in extenso, zodat je weet hoe je ze het beste kunt overtreden. 				</p>
<p style ="box-sizing: border-box;">6. Laat een kleine onenigheid niet een mooie vriendschap verpesten 										</p>
<p style ="height: 100px;"> 7. Wanneer je beseft dat je een fout hebt gemaakt, neem dan onmiddellijk actie om die te herstellen.			</p>
<p style="background: yellow;">	8. Neem elke dag tijd voor jezelf.																			</p>
<p style ="border-style: dotted;"> 9. Sta open voor verandering, maar raak je normen en waarden niet kwijt									</p> 
<p style ="padding: 20px;">10. Onthoud dat zwijgen soms het beste antwoord is. 																</p>	
<p style ="border-radius: 30px;">11. Leid een zodanig waardig leven dat wanneer je oud bent en terugkijkt je er opnieuw van kunt genieten. 	</p>
<p style ="color: blue;">12. Een liefdesvolle sfeer in je huis legt de basis voor je leven 													</p>
<p style ="border-top-width: 4px;">13. Beperk je in meningsverschillen met geliefden tot het heden : Rakel het verleden nimmer op 			</p>
<P style="text-transform: capitalize;">14. Laat mensen delen in je wijsheid.																</p>	
<p >15. Behandel de aarde goed 																												</p>
<div style="border:1px solid #707070; border-left:0">16. Gá één keer per jaar ergens heen waar je nog nooit bent geweest 					</div
<div style="position: absolute; left: 10px; top: 100px;"> Onthoud dat in de beste relatie je meer van elkaar houdt 							</div>
<p > </p> 
<p > </p>	
</body>
 
</html>

Ik heb me verdiept in de font-inline styles maar dan veranderd er eigenlijk niet zo heelveel....
toch vind ik het raar dat niet alles werkt

Nou nogmaal bedankt voor alle suggesties
 
<td><p> <div> wat nog meer

Sorry voor de kilometers tekst die ik hier in dit topic plaats...

Deze drie elementen kan ik met inline opmaken maar de meeste werken niet

HTML:
<html>
 
<head>
	
<title>(Type a title for your page here)</title>
</head>
 
<body>
<p style ="text-shadow: 2px 2px red;">1. Onthoud dat grote liefde en groot succes, grote risico's met zich brengen							</p>
<p style ="text-align: center;">2. Wanneer je verliest, verlies dan niet tegelijkertijd de les die je ervan hebt geleerd					</p>
<p style ="font-family: verdana, sans-serif;">3. Heb respect voor jezelf, respect voor anderen en neem verantwoordelijkheid voor je daden 	</p>
<td style="font-style: italic; color: #ff0000;">4. Onthoud dat niet krijgen wat je wilt soms het beste is wat je kon overkomen				</td>
<p style ="text-decoration: underline;">5. Ken de regels tot in extenso, zodat je weet hoe je ze het beste kunt overtreden. 				</p>
<p style ="box-sizing: border-box;50px">6. Laat een kleine onenigheid niet een mooie vriendschap verpesten 										</p>
<p style ="height: 100px;"> 7. Wanneer je beseft dat je een fout hebt gemaakt, neem dan onmiddellijk actie om die te herstellen.			</p>
<p style="background: yellow;">	8. Neem elke dag tijd voor jezelf.																			</p>
<p style ="border-style: dotted;"> 9. Sta open voor verandering, maar raak je normen en waarden niet kwijt									</p> 
<p style ="padding: 20px;">10. Onthoud dat zwijgen soms het beste antwoord is. 																</p>	
<p style ="border-radius: 30px;">11. Leid een zodanig waardig leven dat wanneer je oud bent en terugkijkt je er opnieuw van kunt genieten. 	</p>
<p style ="color: blue;">12. Een liefdesvolle sfeer in je huis legt de basis voor je leven 													</p>
<p style ="border-top-width: 4px;">13. Beperk je in meningsverschillen met geliefden tot het heden : Rakel het verleden nimmer op 			</p>
<P style="text-transform: capitalize;">14. Laat mensen delen in je wijsheid.																</p>	
<p >15. Behandel de aarde goed 																												</p>
<div style="border:1px solid #707070; border-left:0">16. Gá één keer per jaar ergens heen waar je nog nooit bent geweest 					</div
<div style="position: absolute; left: 10px; top: 100px;"> Onthoud dat in de beste relatie je meer van elkaar houdt 							</div>
<p > </p> 
<p > </p>	
</body>
 
</html>

Via inspecteren heb ik bij google de fouten op willen sporen maar zonder succes....
Het gaat te ver om iemand te vragen om de fouten te corrigeren maar ik wil deze opdracht graag ad maken
Ik stuur een bijlage zodat u ziet dat het niet om huiswerk gaat maar gewoon de uitleg hoe het moet....
 

Bijlagen

  • Taakkaart Web09.pdf
    89,8 KB · Weergaven: 32
Opdr: Geef elke regel een ander lettertype, letterkleur, uitlijning of achtergrond.
Je hoeft maar 4 eigenschappen te gebruiken, kies dan gewoon verschillende kleuren / lettertypes.

Opdr: Gebruik de tags: h1, h2, h3, h4, h5, h6, p, div, b, i, u
h1 t/ h6 zie ik nog niet, verander eens een p /p in een h1 /h1 dan komen er een hoop mogelijkheden bij.

Tip: b, i, u nemen slechts de ruimte in die ze nodig hebben, ze worden meestal ergens in de tekst opgenomen.
De andere zijn 'block' elementen, die worden even breed als de vrije ruimte die er is.
 
Beste beheerder

HTML:
<html>
 
<head>
	
<title>(Type a title for your page here)</title>
</head>
 
<body>
<h1 style="color:blue;font-family: Arial, Helvetica, sans-serif font-size: 24px;"> 1. Onthoud dat grote liefde en groot succes, grote risico's met zich brengen</h1>
<h2 style="color:#00F93B;font-family: Helvetica,font-size: 70px;"> 2. Wanneer je verliest, verlies dan niet tegelijkertijd de les die je ervan hebt geleerd					</h2>
<h3 style ="color:#B39912; font-family:sans-serif">3. Heb respect voor jezelf, respect voor anderen en neem verantwoordelijkheid voor je daden 	</h3>
<h4 style="font-style: italic; color: #ff0000;font-family: Courier New">4. Onthoud dat niet krijgen wat je wilt soms het beste is wat je kon overkomen				</h4>
<h5 style="color:#C815D3; font-weight: 200; font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', 'serif'">5. Ken de regels tot in extenso, zodat je weet hoe je ze het beste kunt overtreden. 				</h5>
<h6 style ="margin-bottom: 9.33em;color: #045AB4">6. Laat een kleine onenigheid niet een mooie vriendschap verpesten 									</h6>
<div style="background-color:lightblue"> 7. Wanneer je beseft dat je een fout hebt gemaakt, neem dan onmiddellijk actie om die te herstellen.			</div>
<div style="background-color: #01B410;">	8. Neem elke dag tijd voor jezelf.																			</div>
<p style ="border-style: dotted;"> 9. Sta open voor verandering, maar raak je normen en waarden niet kwijt									</p> 
<div style="display: block; font-style: oblique;color: #2FB514">10. Onthoud dat zwijgen soms het beste antwoord is. 						</div>	
<p style ="font-size-adjust: auto;font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, 'sans-serif'; background-color: cadetblue; padding-right: 30px; ">11. Leid een zodanig waardig leven dat wanneer je oud bent en terugkijkt je er opnieuw van kunt genieten. 	</p>
<p style ="color: blue;">12. Een liefdesvolle sfeer in je huis legt de basis voor je leven 													</p>
<p style ="font-display: fallback; font-variant: small-caps; background-color: aqua">13. Beperk je in meningsverschillen met geliefden tot het heden : Rakel het verleden nimmer op 			</p>
<P style="font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, 'serif'; background: linear-gradient(red,yellow)">14. Laat mensen delen in je wijsheid.</p>	
<p style=" background: linear-gradient(blue, pink); font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif'">15. Behandel de aarde goed 																												</p>
<div style="border:1px solid #707070; border-left:#391617background: radial-gradient(red)">16. Gá één keer per jaar ergens heen waar je nog nooit bent geweest 					</div>
<div style="position: absolute; left: 10px; top: 100px;"> Onthoud dat in de beste relatie je meer van elkaar houdt 							</div>
<p > </p> 
<p > </p>	
</body>
 
</html>


Gisteren ben ik de hele dag bezig geweest....

Ziet dit er beter uit?

Het werkt nog steeds niet allemaal...
Kunt u mij helpen de laaatst e foutjes op te sporen?
 
Wat werkt er dan niet? En welke browser + versie gebruik je?
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan