1. Dator och IT
  2. Systemutveckling

Nybörjarhjälp med .html och .css

Svara
  • 1
  • 2
2018-04-17, 13:24
  #1
Drogo
Medlem
Om jag skriver detta i i min .html:

<p> class="two">
Göran
</p>

<p> class="two">
Jörgen
</p>

Om jag vill att båda ska ha samma font och storlek så kan jag gå in i .css och skriva:

.two {
font-family: sans-serif;
font-size: 120%;
}

So far so good, men om jag vill att de ska ha samma font/storlek men olik textfärg? Hur gör jag då?

/Nybörjare
Citera
2018-04-17, 13:28
  #2
DJ-Emerald
Medlem
Citat:
Ursprungligen postat av Drogo
Om jag skriver detta i i min .html:

<p> class="two">
Göran
</p>

<p> class="two">
Jörgen
</p>

Om jag vill att båda ska ha samma font och storlek så kan jag gå in i .css och skriva:

.two {
font-family: sans-serif;
font-size: 120%;
}

So far so good, men om jag vill att de ska ha samma font/storlek men olik textfärg? Hur gör jag då?

/Nybörjare

Du kan lägga till fler attribut i din css, typ:

Kod: 
.yellow
{
   color: yellow;
}

.orange
{
   color: orange;
}

Sen kan du ange i HTML så här till exempel:

HTML-kod: 
<p> class="two yellow">
Göran
</p>

<p> class="two orange">
Jörgen
</p>
Citera
2018-04-17, 13:41
  #3
Drogo
Medlem
Citat:
Ursprungligen postat av DJ-Emerald
Du kan lägga till fler attribut i din css, typ:

Kod: 
.yellow
{
   color: yellow;
}

.orange
{
   color: orange;
}

Sen kan du ange i HTML så här till exempel:

HTML-kod: 
<p> class="two yellow">
Göran
</p>

<p> class="two orange">
Jörgen
</p>

Det är en skoluppgift och jag får inte gå in och ändra i .html , utan allt ska ändras från .css

Förslag?
Citera
2018-04-17, 13:41
  #4
lasternassumma
Medlem
lasternassummas avatar
Citat:
Ursprungligen postat av Drogo
Om jag skriver detta i i min .html:

<p> class="two">
Göran
</p>

<p> class="two">
Jörgen
</p>

Om jag vill att båda ska ha samma font och storlek så kan jag gå in i .css och skriva:

.two {
font-family: sans-serif;
font-size: 120%;
}

So far so good, men om jag vill att de ska ha samma font/storlek men olik textfärg? Hur gör jag då?

/Nybörjare

Lägg gärna kod mellan code-taggar (eller liknande) så blir det lättare att läsa.
Du kan göra på flera sätt för att få olika färg. Ett exempel är att byta stilmall.

HTML-kod: 
<html>
<head>
<style>
.twor { font-family: sans-serif; font-size: 120%; color:red;}
.twog { font-family: sans-serif; font-size: 120%; color:green;}
.twob { font-family: sans-serif; font-size: 120%; color:blue;}
</style>
</head>
<body>

<p class="twor">Göran</p>
<p class="twog">Jörgen</p>
<p class="twob">Hans</p>

</body>
</html>
–
Citera
2018-04-17, 13:44
  #5
Drogo
Medlem
Citat:
Ursprungligen postat av lasternassumma
Lägg gärna kod mellan code-taggar (eller liknande) så blir det lättare att läsa.
Du kan göra på flera sätt för att få olika färg. Ett exempel är att byta stilmall.

HTML-kod: 
<html>
<head>
<style>
.twor { font-family: sans-serif; font-size: 120%; color:red;}
.twog { font-family: sans-serif; font-size: 120%; color:green;}
.twob { font-family: sans-serif; font-size: 120%; color:blue;}
</style>
</head>
<body>

<p class="twor">Göran</p>
<p class="twog">Jörgen</p>
<p class="twob">Hans</p>

</body>
</html>
–

Kruxet är att jag inte får ändra i .html, bara i .css.
Fler förslag?
Citera
2018-04-17, 13:47
  #6
lasternassumma
Medlem
lasternassummas avatar
Citat:
Ursprungligen postat av Drogo
Kruxet är att jag inte får ändra i .html, bara i .css.
Fler förslag?

Visst!

HTML-kod: 
<html>
<head><meta charset="UTF-8">
<style>
.two:nth-child(1) { font-family: sans-serif; font-size: 120%; color:red;}
.two:nth-child(2) { font-family: sans-serif; font-size: 120%; color:green;}
.two:nth-child(3) { font-family: sans-serif; font-size: 120%; color:blue;}
</style>
</head>
<body>

<p class="two">Göran</p>
<p class="two">Jörgen</p>
<p class="two">Hans</p>

</body>
</html>

–
Citera
2018-04-17, 13:49
  #7
DJ-Emerald
Medlem
En annan variant är att använda en slags loop. Koden nedan kommer att göra varannan gul och varannan orange. Men det är så "avancerat" så TS skulle nog bli genomskådad på en sekund om att någon annan gjort det:

Kod: 
.two p:nth-child(2n+1) 
        {
        color: yellow;
        }

.two p:nth-child(2n+2) 
        {
        color: orange;
        }

Edit: Såg att ovanstående förslag var inne på typ samma spår.
__________________
Senast redigerad av DJ-Emerald 2018-04-17 kl. 13:51.
Citera
2018-04-17, 14:03
  #8
Drogo
Medlem
Citat:
Ursprungligen postat av lasternassumma
Visst!

HTML-kod: 
<html>
<head><meta charset="UTF-8">
<style>
.two:nth-child(1) { font-family: sans-serif; font-size: 120%; color:red;}
.two:nth-child(2) { font-family: sans-serif; font-size: 120%; color:green;}
.two:nth-child(3) { font-family: sans-serif; font-size: 120%; color:blue;}
</style>
</head>
<body>

<p class="two">Göran</p>
<p class="two">Jörgen</p>
<p class="two">Hans</p>

</body>
</html>

–



Hmmm.. får det inte riktigt att fungera. Både Jörgen och Göran får färgen grön
Citera
2018-04-17, 14:08
  #9
Nich
Medlem
Citat:
Ursprungligen postat av Drogo
Hmmm.. får det inte riktigt att fungera. Både Jörgen och Göran får färgen grön

Kan du visa din kod? Använd [code]-taggar.
Citera
2018-04-17, 14:11
  #10
Drogo
Medlem
missade CODE-taggar
__________________
Senast redigerad av Drogo 2018-04-17 kl. 14:16.
Citera
2018-04-17, 14:15
  #11
Drogo
Medlem
Kod: 
<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="utf-8" />
    <title>Uppgift 4E</title>
    <link rel="stylesheet" href="kap-4-e.css" />
  </head>
  <body>
    <h1>Uppgift 4E</h1>
    <div id="billy">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="two">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="three">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
    </div>
    <div id="bob">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="two">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="three">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
    </div>
  </body>
</html>


html {
    background-color: lightslategray;
}
body {
    margin: auto;
    width: 500px;
    padding-bottom: 0.1px; /*knep för div margin */
    background-color: rgb(204, 229,255);
    
    } 
    

h1 {
    color: purple;
    text-align: center;
    
}

.two:nth-child(1) { font-family: sans-serif; font-size: 120%; color:red;}
.two:nth-child(2) { font-family: sans-serif; font-size: 120%; color:green;}


#billy {
        
        background-color: rgb(204, 229, 255);
        border-color: darkred;
        border-width: 2px;
        margin: 10px;
        padding: 10px;
        border-style: solid;
                
}

#bob {
        background-color: rgb(204, 229, 255);
        border-color: darkred;
        border-width: 2px;
        margin: 10px;
        padding: 10px;
        border-style: solid;
}
Citera
2018-04-17, 14:18
  #12
Drogo
Medlem
Citat:
Kod: 
#billy {
        
        background-color: rgb(204, 229, 255);
        border-color: darkred;
        border-width: 2px;
        margin: 10px;
        padding: 10px;
        border-style: solid;
                
}

#bob {
        background-color: rgb(204, 229, 255);
        border-color: darkred;
        border-width: 2px;
        margin: 10px;
        padding: 10px;
        border-style: solid;
}

Om någon vet hur man "buntar" ihop #bob och #billy under samma (term?) så vore jag tacksam.
Har försökt med #billy , #bob {
text
}
__________________
Senast redigerad av Drogo 2018-04-17 kl. 14:21.
Citera
Svara
  • 1
  • 2

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Det är enkelt att registrera ett nytt konto

Bli medlem

Logga in

Har du redan ett konto? Logga in här

Logga in