TulorkMedlem sedan aug. 2004952 inlägg
Hur använder jag span om jag vill ha den första bokstaven av ett ord i en <p> dubbelt så stor och i orange färg? Jag har kommit såhär långt
Detta är xhtml koden
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body class="page">
<h2 class="head">Span Usage</h2>
<span class="span"><p>hej på dig</p></span>
</html>
Detta är css:en
body.page{
background-color:#123456;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:12px
}
h2.head {
color:#FF0000;
font-style: italic;
font-size:200%;
text-decoration:underline;
}
span.span{
text-transform:Uppercase;"
}
Har försökt leta i tutorials osv, men hittar inte det jag söker. (Detta är skolgrejj....)
zcorpanMedlem sedan dec. 20042 269 inlägg
Du får inte lägga en P inuti en SPAN.
Du behöver inte ens SPAN. :)
<p>hej på dig</p>
p::first-letter { font-size:200%; color:orange; }
TulorkMedlem sedan aug. 2004952 inlägg
ne jag vet, hade kunnat göra detta på Många olika sätt som jag också kan, men det fick man inte för läraren, man skulle använda span...Men tack ska du ha
silfverMedlem sedan apr. 20039 709 inlägg
Tulork skrev:
ne jag vet, hade kunnat göra detta på Många olika sätt som jag också kan, men det fick man inte för läraren, man skulle använda span...Men tack ska du ha
:e Skön lärare.
Men i så fall så får du ju göra som zcorpan skrev, placera span-elementet rätt. Dvs. så här:
<p><span class="span">hej på dig</span></p>
Och ta bort citationstecknet du har efter "uppercase" i din css.
Och glöm inte avsluta </body> :p
TulorkMedlem sedan aug. 2004952 inlägg
hmm, jag får inte deet att funka med att använda span överhuvudtaget. utan span går det fin fint. Men hur ska det se ut i css filen? jag har skrivit såhär nu
<p><span class="span">hej på dig</span></p
och
span.span{
first-letterfont-size:200%;
color:orange;
}
tantenMedlem sedan nov. 20051 658 inlägg
Så har kanske:
En helt annan variant...som går att flytta ut till css-filen. Är inte så säker på att firstletter stöds av alla webbläsare...
<p><span style="float:left;color:orange;font-size:24px;line-height:48px;padding-top:-48px;padding-right:1px;font-family: verdana;">H</span><br />ej på dej</p>
Lite fuskigt kanske... Men kul om man vill ha stor bokstav bredvid ett helt textstycke...
Silfver...Det är svårt att lära gamla tanter sitta :birp
silfverMedlem sedan apr. 20039 709 inlägg
tanten, när du ska du lära dig att använda kod-taggarna? ;) Det går ju knappt läsa ditt kodexempel!
tantenMedlem sedan nov. 20051 658 inlägg
silfver skrev:
tanten, när du ska du lära dig att använda kod-taggarna? ;) Det går ju knappt läsa ditt kodexempel!
Fixat :)
zcorpanMedlem sedan dec. 20042 269 inlägg
Hmm, ok.
<p><span>hej på dig</span></p>
p::first-letter { font-size:200%; color:orange; }
Faktum kvarstår att du inte behöver SPAN. ;)
InsiderMedlem sedan jan. 20001 003 inlägg
Jag tror att er lärare vill att ni ska göra så här:
<p><span>H</span>ej på dig</p>
p span {font-size:200%; color:orange;}
Det är inte rätt... men han kanske tycker att det är ett pedagogiskt sätt att visa hur man selekterar enbart <span> elementet. Dumt. :l
zcorpanMedlem sedan dec. 20042 269 inlägg
Insider skrev:
Jag tror att er lärare vill att ni ska göra så här:
<p><span>H</span>ej på dig</p>
p span {font-size:200%; color:orange;}
Om man gör så kanske skärmläsare inte läser "hej" utan "hå, ej". Sökmotorer kanske inte indexerar "hej" som ett ord utan "h" och "ej" som två separata.
::first-letter borde användas för att ändra utseendet på första bokstaven; det är det den är till för. Säg det till din lärare Tulork. :)
nummersjuMedlem sedan aug. 2005190 inlägg
"p::first-letter { font-size:200%; color:orange; }"
varför ska man ha två stycken kolon (::)?
jarvkloMedlem sedan juli 20013 295 inlägg
Hmm...
Använder man CSS2 "ska" man det inte alls - där heter det helt enkelt t.ex. p:first-letter, men i CSS3 (som f.ö. inte har fastställts av W3C ännu även om en och annan webbläsare numera stödjer olika delar av ändå) används "::" för att skilja ut "pseudo-element" (::first-letter m.fl) på ett sätt som gör att de inte ska kunna misstolkas som "Pseudo-klasser" (:visited och :active m.fl)
Läs mer i http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#pseudo-elements och http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#pseudo-classes
. :birp
