Forum Mjukvara Programmering och digitalt skapande Tråd

Multipla CSS element

1
Skriv svar
Permalänk
Medlem
●

Multipla CSS element

Hej! Jo det är så att jag håller på och lär mig CSS, som jag tycker är helt underbart. Men det är så att jag har tre olika text element på sidan som jag gett olika färger:

h1{color:#FFF000}
h2{color:#000000}
h3{color:#FFF111}

Men nu ska jag också välja var på sidan texten ska vara placerad.

Jag provade till exempel detta

h1{color:#FFF000; text-align: left}
h2{color:#000000; text-align: right}
h3{color:#FFF111; text-align: center}

Men det funkade ju inte. Så hur gör jag för att bestämma flera olika inställningar på samma element?

Hoppas ni fattar vad jag menar.

Redigera
Citera flera Citera
Permalänk
Medlem
●
h1{color:#FFF000; text-align: left;}
h2{color:#000000; text-align: right;}
h3{color:#FFF111; text-align: center;}

Du har glömt slutklämmen ;

Visa signatur

MSI B650 Tomahawk, 7800X3D, RTX 3080, 32GB DDR5 6000MHz, MSI MPG A850G

Redigera
Citera flera Citera
Permalänk
Testpilot
●
Citat:

Ursprungligen inskrivet av samurai 

h1{color:#FFF000; text-align: left;}
h2{color:#000000; text-align: right;}
h3{color:#FFF111; text-align: center;}

Du har glömt slutklämmen ;

Behövs faktiskt inte på det sista elementet, fast det kan ju vara snyggt att ha det

Visa signatur

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 16GB][Asus GeForce RTX 2060 Super Dual Evo OC]

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av samurai 

h1{color:#FFF000; text-align: left;}
h2{color:#000000; text-align: right;}
h3{color:#FFF111; text-align: center;}

Du har glömt slutklämmen ;

Tack! Men jag döpte klasserna till t1, t2 och t3 i stället och då funkar det tydligen inte. Funkar det bara med h1, h2, h3 osv?

h1{color:#FFF000; text-align: left;}
h2{color:#000000; text-align: right;}
h3{color:#FFF111; text-align: center;}

FUNKAR

t1{color:#FFF000; text-align: left;}
t2{color:#000000; text-align: right;}
t3{color:#FFF111; text-align: center;}

FUNKAR INTE

Korrekt?

Redigera
Citera flera Citera
Permalänk
Medlem
●
<style type="text/css">
h1.t1{color:#FFF000; text-align: left;}
h2.t2{color:#000000; text-align: right;}
h3.t3{color:#FFF111; text-align: center;}
</style>

<h1 class="t1">left?</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra.</p>

<h2 class="t2">right?</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra.</p>

<h3 class="t3">center?</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra.</p>

Så eller(?), totalt onödigt och nästan fel.

Visa signatur

Ännu en webbplats utan innehåll, fast den är ju ganska snygg att kolla på iallafall.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av CIC 

<style type="text/css">
h1.t1{color:#FFF000; text-align: left;}
h2.t2{color:#000000; text-align: right;}
h3.t3{color:#FFF111; text-align: center;}
</style>

<h1 class="t1">left?</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra.</p>

<h2 class="t2">right?</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra.</p>

<h3 class="t3">center?</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra.</p>

Så eller(?), totalt onödigt och nästan fel.

Det där ser ju mycket krångligare ut än det sättet jag gör det på:

<style type="text/css">
body
{ 
background: #FF3333 
}

h1{color:#FFF000; text-align: left;}
h2{color:#000000; text-align: right;}
h3{color:#FFF111; text-align: center;}

<style>

<h1>Text.</h1> <br>
<h2>Text.</h2> <br>
<h3>Text.</h3>

Edit: Aha du menar så, jo det går nog.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Bombur
Det där ser ju mycket krångligare ut än det sättet jag gör det på:

[code]
<style type="text/css">
body
{
background: #FF3333
}

h1{color:#FFF000; text-align: left;}
h2{color:#000000; text-align: right;}
h3{color:#FFF111; text-align: center;}

<style>

<h1>Text.</h1> <br>
<h2>Text.</h2> <br>
<h3>Text.</h3>

</code>

Ja... skrev ju det? Förstår inte vad du menade med ditt näst senaste inlägg.

Visa signatur

Ännu en webbplats utan innehåll, fast den är ju ganska snygg att kolla på iallafall.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av CIC
Ja... skrev ju det? Förstår inte vad du menade med ditt näst senaste inlägg.

Mmh, såg det nu. Trodde du inte visade koden för att göra så det går med t1 elementet, men det ser ju krångligare ut, så det finns nog ingen bra anledning att döpa om elementet sådär. Tack tack.

Redigera
Citera flera Citera
Permalänk
Medlem
●

CSS koden

.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.green {
color: #00FF00;
}
.red {
color: #FF0000;
}
.blue {
color: #0000FF;
}

HTML koden

<p class="green">Text</p>
<p class="red">Text</p>
<p class="blue">Text</p>
<p class="bue left">Text</p>
<p class="blue right">Text</p>
<p class="green center">Text</p>

Så hade jag löst det. Sätter nästan aldrig attribut på taggar utan använder class eller id.

Redigera
Citera flera Citera
Permalänk
Hedersmedlem
●

Beror ju på, om man ska styla alla huvudrubriker så är det ju självklart h1 man definerar, underrubriker h2, osv.

Sådant här blir bara fel:

<p style="font-size: 20px;">Min rubrik</p>

Tänk dig att man inte har stylesheets igång eller liknande, finns några andra problem med detta också.

Visa signatur

Vim
Kinesis Classic Contoured (svart), Svorak (A5)
Medlem i signaturgruppen Vimzealoter.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av m0REc
Beror ju på, om man ska styla alla huvudrubriker så är det ju självklart h1 man definerar, underrubriker h2, osv.

Sådant här blir bara fel:

<p style="font-size: 20px;">Min rubrik</p>

Tänk dig att man inte har stylesheets igång eller liknande, finns några andra problem med detta också.

OfT: Sluta klaga på mig hela tiden xevz.

OnT: Iofs... Det beror på hur man vill ha det som sagt.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Borde inte det här fungera?

h1{color:#FFF000; text-align: left; width: 100%;}
h2{color:#000000; text-align: right; width: 100%;}
h3{color:#FFF111; text-align: center; width: 100%;}

Det borde väl flytta texten som du vill? Eller cyklar jag igen?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Icanos
Borde inte det här fungera?

h1{color:#FFF000; text-align: left; width: 100%;}
h2{color:#000000; text-align: right; width: 100%;}
h3{color:#FFF111; text-align: center; width: 100%;}

Det borde väl flytta texten som du vill? Eller cyklar jag igen?

Fungerar presic lika bra som det förra :). Bara att det är jobbigt att skriva width: 100%;

Visa signatur

Ännu en webbplats utan innehåll, fast den är ju ganska snygg att kolla på iallafall.

Redigera
Citera flera Citera
Permalänk
Medlem
●

För att räta ut ett par saker:
En klass i CSS har en . (punkt) som prefix, ett element har inget prefix.
För rubriker ska man använda hx elementen, finns från 1 (störst) till 6
(minst).
Elementen tx existerar inte.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av nystan
För att räta ut ett par saker:
En klass i CSS har en . (punkt) som prefix, ett element har inget prefix.
För rubriker ska man använda hx elementen, finns från 1 (störst) till 6
(minst).
Elementen tx existerar inte.

t var bara ett random namn jag döpte den till.

Redigera
Citera flera Citera
Permalänk
Testpilot
●
Citat:

Ursprungligen inskrivet av Bombur
t var bara ett random namn jag döpte den till.

Det är ju det som är problemet, h-taggarna är inget random, dom är riktiga taggar.

Visa signatur

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 16GB][Asus GeForce RTX 2060 Super Dual Evo OC]

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av hunden
Det är ju det som är problemet, h-taggarna är inget random, dom är riktiga taggar.

Precis, fick veta det i tråden.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara