Søg
Avatar billede moejensen Nybegynder
29. juli 2005 - 13:48 Der er 21 kommentarer og
1 løsning

Første bogstav større end de andre

Kan man lave noget css, så det første bogstav altid er med en større skrifttype end de andre, men uden det skal i flere forskellige tags?
Avatar billede softspot Forsker
29. juli 2005 - 13:52 #1
mener den hedder :first-letter

p:first-letter { font-size: 15px; }
Avatar billede roenving Novice
29. juli 2005 - 13:56 #2
Ja, der er en pseudo-selector i css2, som styrer det første bogstav, men den ser ikke ud til at virke i IE ...

http://www.w3.org/TR/REC-CSS2/selector.html#first-letter

-- den virker udmærket i Mozilla !-)
Avatar billede moejensen Nybegynder
29. juli 2005 - 13:57 #3
det virker sku, tusind tak. laver du et svar
Avatar billede moejensen Nybegynder
29. juli 2005 - 13:58 #4
jeg testede det lige i IE 6, og der virker det fint
Avatar billede softspot Forsker
29. juli 2005 - 13:59 #5
jeps, både i mozilla firefox og ie 6
Avatar billede softspot Forsker
29. juli 2005 - 14:00 #6
Du fik svaret der! :)
Avatar billede roenving Novice
29. juli 2005 - 14:04 #7
Det virker ikke hos mig ?-)

Hvordan er betingelserne for at få det til at virke, doctype f.eks. ?o]
Avatar billede softspot Forsker
29. juli 2005 - 14:09 #8
f.eks. fungerer det for mig med flg. doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
Avatar billede milandt Nybegynder
29. juli 2005 - 14:09 #9
faktisk blev ::first-letter første gang defineret i css 1, og ikke css 2.

bemærk at det er ::first-letter og ikke :first-letter

ref: http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors
Avatar billede softspot Forsker
29. juli 2005 - 14:09 #10
men også med

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
Avatar billede softspot Forsker
29. juli 2005 - 14:10 #11
Det fungerer nu ellers fint med et kolon :)
Avatar billede roenving Novice
29. juli 2005 - 14:14 #12
Gaaab ...

-- den omvendte situation end den, vi er vant til ...

-- normalt disabler IE væsentlige dele af css (bl.a. box-modellen), hvis man angiver en doctype uden dtd-link, men lige denne virker ikke, i hvert fald hvis man angiver en 4.01-dtd ,-(
Avatar billede jesper-moeller Nybegynder
29. juli 2005 - 19:20 #13
roenving >> Det bør virke for dig ??? Du har ikke et gammelt stylesheet i cachen eller noget ligende  ???

>Det fungerer nu ellers fint med et kolon :)

: eller :: begge dele er rigtige
For at sige det enkelt så er forskellen CSS versions nummeret

:first-letter
er CSS 1 (og 2) pseudo-elements

p::first-letter
er et CSS 3 pseudo-element

:first-letter  er en efektiv måde at feks. starter tekstblokke med stort bogstav.
Men det bliver først rigtigt sjovt når man kombinere den med :first-line, :before og :after
og når man først har styr på den del bliver brug af  'content' en herlig detalie

i CSS 3 skulle mulighederne for den slags styling udvidet meget. Feks er ::second ::third osv. -letter, og -line blandt  men CSS3 er stadig en arbejds standart og man bør derfor være varsom med brugen af CSS3 elementer.
Medmindre ens sider er XHTML  skulle der ikke være nogen grund til at begynde at bruge CSS3 elementer, ikke at det vil skade din side, der vil højst være noget styling der misses af nogle browsere. Men fordi CSS 3  egenligt er udviklet med henblik på XHTML. og indtil browserne foralvor begynder at understøtte XHTM og CSS 3, vil en del være "spildt" arbejde.
Grundlægende vil jeg sige... Brug CSS 2.1 når du laver HTML4.01 dokumenter .... Laver du XHTML så brug CSS 2.1 og 3 men vær opmærksom på at CSS3 stadigt er under udarbejdelse, og visse elementer, functioner ol, stadigt kan ændre sig. samt at mange vil kunne have problemer med at deres browser ikke forstår CSS 3

Det er faktisk først inde for de sidste par år at browsere er begyndt at understøtte CSS2 ordenligt (over 90%) så der går nok et par år enu før CSS3 kan betragtest som værende en standart, Det sker nok ikke før browserne får en bedre XHTML understøtelse, og selv derefter går der nok noget tid før det helt slår igennem
Den CSS vi bruger idag er faktisk fra 1998 (CSS2) og det er først nu der foralvor gøres brug af den i stort omfang, (den er dog blevet revideret et par gange siden (CSS2.1) senest febuar 2004, så forældet er den ikke ;-)

Her er W3C's CSS 2 specificationer ----> http://www.w3.org/TR/REC-CSS2/
Og her W3C's CSS2.1 specificationer --> http://www.w3.org/TR/2004/CR-CSS21-20040225/
(De er RET ens *G*)

Og mht :first-line , :first-letter , :before og :after pseudo-elements så se:
CSS2 - 5.Selectores - 5.12.1 til 5.12.3 ----> http://www.w3.org/TR/REC-CSS2/selector.html#q20
CSS2.1 - 5.Selectores - 5.12.1 til 5.12.3 --> http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#q20
(De er HELT ens *G*)
Avatar billede roenving Novice
30. juli 2005 - 00:41 #14
Hrm ...

>>jesper-moeller

-- hvis du bruger en doctype, som M$IE kan bruge som undskyldning for ikke at benytte sig af visse core css1-ting, f.eks. box-modellen og margin:auto og parallelt dermed tillade tåbeligheder som f.eks. at text-align indvirker på block-level elementer, vil IEsp2 åbenbart ikke tillade brug af pseudo-selektorer som f.eks. :first-letter ...

-- det vil den faktisk godt, hvis du ikke er interesseret i de vigtige css1-ting ...

-- og M$ har direkte udtalt, at de ikke vil understøtte css2, de betragter det som en mjidlertidig anbefaling, et gæt kunne være, at IE4-renderings-maskinen, som stadig er hjertet i IE6, ikke kan håndtere en hel del af de ting, som er indbefattet i css2 ...

-- hvordan du kan komme frem til 90% er mig en gåde, når den browser, som ifølge alle undersøgelser sidder på allermindst 75% af brugerne ikke understøtter css2 normalt, og kun ca. halvdelen, hvis man tvinger den til at respektere de mest grundlæggende ting ved at bruge en fuldt kvalificeret doctype inklusive dtd-link ...

-- det er så forstemmende, at den åbenbart disabler nogle css1-ting, hvis man tvinger den til at respektere nogle voldsomt vigtige ting (og det gælder, såvidt jeg har oplevet så først fra IEsp2 !-)
Avatar billede jesper-moeller Nybegynder
30. juli 2005 - 01:58 #15
>> roensving

Hvad jeg mente med var at 90% af moderne browsere idag i stører eller mindre grad understøtter CSS
(ved ganske ude mærket at 90% CSS understøtelse stadigt er en drøm :-)

Mht IE
IE 5.1 til mac blev netop kendt for at være den første browser der foralvor understøttede CSS2 (Og enda med langt mere en 50%) ... Bare en lille IE obs ;-)

At first-line og first-letter ikke virker skulle virke på IEsp2 er mig noget af en gåde.... ??
Det virker da som noget af en bug ?
Jeg skal ikke være skråsikker.... men er ellers ret sikker på jeg fornyligt har set det i funktion på IEsp2....
Har du evnt et test-page med et eksm. der ikke virker hos dig ???
Avatar billede roenving Novice
30. juli 2005 - 02:11 #16
Tjah, det er faktisk alt for nemt:

<?xml?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test :first-letter</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
p{width:300px;background-color:#a77;margin:0 auto;}
p:first-letter{font-size:x-large;}
</style>
</head>
<body>
<p>First-letter dur ikke</p>
</body>
<!-- Prøv at fjerne den ugyldige xml-deklaration i toppen !-) -->
</html>
Avatar billede roenving Novice
30. juli 2005 - 02:35 #17
-- og du kan også prøve at tilføje text-align:center i den første stylesheet-rule, og teste den mod at fjerne margin på p-rulen ...

-- et block-level-tag skal selvfølgelig ikke reagere på en inline-ting som text-align !-)
Avatar billede jesper-moeller Nybegynder
30. juli 2005 - 02:43 #18
Hmm.... ja...det virker lid underligt det ikke virker

Det skal jeg da lige leg med / teste...*S*.... kommer til en sp2 i weekenden.....


En hurtig indkydelse:
Har du prøvet shorthand font-style istedet for ???
p:first-letter{font:x-large;}
Avatar billede roenving Novice
30. juli 2005 - 02:46 #19
Næh, det er ikke faldet mig ind, da netop IE har problemer med short-hand font-ting ...
Avatar billede jesper-moeller Nybegynder
30. juli 2005 - 03:22 #20
Tja... jeg har nu haft god suces med at bruge shorthand..*S*
shorthand nulstiller jo evnt nedarvet fontegenskaber, vilket virkeligt er brugbart ved mere kompleks stylinger
Men var bare en hurtig ide det måske kunne have indvirkning på dit ?....
kunne umidelbart se ud som noget ala følgende sker hos dig
body {font-size:small;} -->
p{width:300px;background-color:#a77;margin:0 auto;} > P arver font-size:small; > og så glemmer/nægter EI at lade andet i den være anderledes ?? ... Ja....rent gætvæk lige pt.....den vil jeg lege med når jeg kommer til PC en
En lille hurtig test på om det evnt kunne være noget i den stil kunne være at prøve med p:first-letter {font-size:x-large !important}

en anden hurtig tanke kunne være brugen af absolute-size (Det har jeg aldrig haft god erfaring med)

er ikke lige ved en PC nu, så kan ikke lige lege med det / teste
Avatar billede roenving Novice
30. juli 2005 - 11:50 #21
-- øeh, læste du ikke, at hvis du tvinger IE til at overholde vigtige css1-ting som box-modellen og f.eks. margin:auto, så virkede det ikke ...

-- hvis du er ligeglad om IE opfører sig totalt skrupskørt omkring de ting, så fungerer :first-letter udmærket ...
Avatar billede olebole Juniormester
01. august 2005 - 00:37 #22
<ole>

jesper-moeller >> Det hjælper ikke så meget, at IE til Mac understøtter store dele af CSS2, når den ikke understøtter andre standarder - og ingen derfor gider bruge den (og der derfor heller ikke kommer flere IE'er til MacOS).
Da den IE, der faktisk er i brug på WWW, kun understøtter CSS2 yderst pletvist, er det et rigtig dårligt råd, du giver, når du opfordrer folk til at skrive i en senere version end CSS1.
De ganske få stakler, der stadig kæmper med IE/MacOS må zq efterhånden lære at klare sig på anden måde. Det kan ikke være meningen, vi skal blive ved med at tørre r.. på dem.

Hvis du skriver noget før DTD'en - eller udelader definitions URL'en i DTD'en - disabler du store og yderst væsentlige dele af CSS i IE6/Win ... herunder box-modellen. Det er vist ikke særligt smart  :)

/mvh
</bole>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 16:05 Samsung Galaxy vil ikke ud af "Sikker tilstand" Af ErikHg i Mobiltelefoner
08/0812:15 morf bilede Af knuldefar1942 i Fri debat
07/0822:13 Gemme største værdi Af Lemming@privat.dk i Excel
07/0821:39 Kvindelig journalist ved DR - hvad er hendes navn. Af ErikHg i Fri debat
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
White papers
Flere white papers »