1. Dator och IT
  2. Systemutveckling

Nybörjarhjälp med .html och .css

Svara
2018-04-17, 19:24
  #25
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(242, 255,254);
    
    } 

h1 {
    color: purple; /* Färga till textrubriken */
    text-align: center; /* centrera rubriken */
    
}

#billy,#bob{
        
        border-color: darkred;
        border-width: 2px;
        margin: 10px;
        padding: 10px;
        border-style: solid;
        color: red;              
}

#bob {
        color: green;      
}

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

.three {
    font-size: 70%;
}

Det jag vill lyckas med nu är att fetmarkera texten som jag fetmarkerade i quoten. Hur kan jag precisera att det är just den texten jag vill modifiera genom att bara ändra i .css?
Citera
2018-04-17, 19:44
  #26
Nich
Medlem
Citat:
Ursprungligen postat av Drogo
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(242, 255,254);
    
    } 

h1 {
    color: purple; /* Färga till textrubriken */
    text-align: center; /* centrera rubriken */
    
}

#billy,#bob{
        
        border-color: darkred;
        border-width: 2px;
        margin: 10px;
        padding: 10px;
        border-style: solid;
        color: red;              
}

#bob {
        color: green;      
}

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

.three {
    font-size: 70%;
}

Det jag vill lyckas med nu är att fetmarkera texten som jag fetmarkerade i quoten. Hur kan jag precisera att det är just den texten jag vill modifiera genom att bara ändra i .css?

Eftersom det är en skoluppgift så vill jag inte ge dig en färdig lösning. Men det är altså det första p-elementet under #billy och det sista p-elementet under #bob du vill feta.

Tänk efter:

Finns det någon CSS-selector för "första barnet" till ett givet föräldraelement?
Finns det någon CSS-selector för "sista barnet" till ett givet föräldraelement?
Citera
2018-04-17, 19:54
  #27
Drogo
Medlem
Citat:
Ursprungligen postat av Nich
Eftersom det är en skoluppgift så vill jag inte ge dig en färdig lösning. Men det är altså det första p-elementet under #billy och det sista p-elementet under #bob du vill feta.

Tänk efter:

Finns det någon CSS-selector för "första barnet" till ett givet föräldraelement?
Finns det någon CSS-selector för "sista barnet" till ett givet föräldraelement?

Kod: 
#billy p:last-child, #bob p:last-child {
    font-weight: bold;

Tack, det gjorde susen. Nej, vill inte ha någon färdig lösning eftersom jag vill förstå vad jag gör.
Citera
2018-04-17, 19:55
  #28
Drogo
Medlem
Skrev fel i citatet, skulle vara last-child i bägge fallen!
__________________
Senast redigerad av Drogo 2018-04-17 kl. 19:58.
Citera
2018-04-17, 20:03
  #29
Drogo
Medlem
Kod: 
#billy p:first-child, #bob p:first-child {

}

Då förstår jag att jag kan avända first-child för att ändra om första textstycket. Här vill jag skapa ny rad efter "...elit." så att "Suspendisse" hamnar på ny rad. Finns det någon selector för det?
Citera
2018-04-17, 22:14
  #30
Nich
Medlem
Citat:
Ursprungligen postat av Drogo
Kod: 
#billy p:first-child, #bob p:first-child {

}

Då förstår jag att jag kan avända first-child för att ändra om första textstycket. Här vill jag skapa ny rad efter "...elit." så att "Suspendisse" hamnar på ny rad. Finns det någon selector för det?

Det låter som en konstig uppgift. I sådana fall skulle du markera första meningen med <span>, men nu får du ju inte ändra något i HTML-dokumentet om jag förstått det rätt? Kan du återge precis hur uppgiften lyder?
Citera
2018-04-18, 15:06
  #31
Drogo
Medlem
Citat:
Ursprungligen postat av Nich
Det låter som en konstig uppgift. I sådana fall skulle du markera första meningen med <span>, men nu får du ju inte ändra något i HTML-dokumentet om jag förstått det rätt? Kan du återge precis hur uppgiften lyder?


"Ditt mål i uppgiften är att ändra webbsidans layout genom att redigera
CSS-koden i kap-4-e.css så att webbsidan får följande utseende. Se bilden" Sen får man en bild som man ska efterlikna.

Jag löste det genom att:

Kod: 
#billy p:first-child, #bob p:first-child {
     
        white-space: pre-line; 
}

Det är ju som sagt första kapitlet i en grundkurs, så man ska väl hålla det enkelt!

Nu har jag ett annat problem som jag inte löst.

Här är min css-kod:

Kod: 
html {
    background-color: lightslategray;
}
body {
    margin: auto;
    width: 500px;
    padding-bottom: 0.1px; /*knep för div margin */
    background-color: rgb(242, 255,254); /* Bakgrundsfärg */
    
    } 


h1 {
    color: purple; /* Färga till textrubriken */
    text-align: center; /* centrera rubriken */
    
}



#billy,#bob{            /* Bakade ihop klasserna */
    
        border-color: darkred;  /* Färga kant-fonten*/
        border-width: 2px;      /* Kantbredd */
        margin: 10px;           /* Ger marginal till kantbredden */
        padding: 10px;          /* Ger utrymme så inte texten hamnar direkt i kanten */
        border-style: solid;    /* font-stil på kanten */
        color: red;             /* Textfärg */
        text-decoration: none;
}

#bob {
        color: green;  /* kanske inte bästa alternativet, men det fungerade */
}

#bob a {
        text-decoration: line-through;
}

#billy p:last-child, #bob p:last-child {
    font-weight: bold;                      /* Fetmarkerad text i sista paragrafen i #bob- och #billy-familjen*/
}

#billy p:first-child, #bob p:first-child {
     
        white-space: pre-line;  /* Radbyte i första paragrafen*/
}


.two, a { 
    
    font-size: 120%;          /*  Hade kunnat dela på klasserna, men ville pröva */
    text-decoration: none;
}

.three {
    font-size: 70%;    /* Eftersom klass 3 skulle ha samma font men inte samma size */
    font-family: sans-serif; 
}


Det jag vill göra är att få alla länkar (a) överstruken i diven #bob, förutom länken i klassen "two"

Jag har försökt med att:

Kod: 
}

#bob a {
        text-decoration: line-through;  //För att ge samtliga länkar i #bob överstruken text
}

.two, a { 
    
    font-size: 120%;        
    text-decoration: none; // För att ge länken i klass two normal text

Men länktexten i klass two förblir överstruken.. tips?
Citera
2018-04-18, 15:46
  #32
Nich
Medlem
Citat:
Ursprungligen postat av Drogo
"Ditt mål i uppgiften är att ändra webbsidans layout genom att redigera
CSS-koden i kap-4-e.css så att webbsidan får följande utseende. Se bilden" Sen får man en bild som man ska efterlikna.

Jag löste det genom att:

Kod: 
#billy p:first-child, #bob p:first-child {
     
        white-space: pre-line; 
}

Det är ju som sagt första kapitlet i en grundkurs, så man ska väl hålla det enkelt!

Nu har jag ett annat problem som jag inte löst.

Här är min css-kod:

Kod: 
html {
    background-color: lightslategray;
}
body {
    margin: auto;
    width: 500px;
    padding-bottom: 0.1px; /*knep för div margin */
    background-color: rgb(242, 255,254); /* Bakgrundsfärg */
    
    } 


h1 {
    color: purple; /* Färga till textrubriken */
    text-align: center; /* centrera rubriken */
    
}



#billy,#bob{            /* Bakade ihop klasserna */
    
        border-color: darkred;  /* Färga kant-fonten*/
        border-width: 2px;      /* Kantbredd */
        margin: 10px;           /* Ger marginal till kantbredden */
        padding: 10px;          /* Ger utrymme så inte texten hamnar direkt i kanten */
        border-style: solid;    /* font-stil på kanten */
        color: red;             /* Textfärg */
        text-decoration: none;
}

#bob {
        color: green;  /* kanske inte bästa alternativet, men det fungerade */
}

#bob a {
        text-decoration: line-through;
}

#billy p:last-child, #bob p:last-child {
    font-weight: bold;                      /* Fetmarkerad text i sista paragrafen i #bob- och #billy-familjen*/
}

#billy p:first-child, #bob p:first-child {
     
        white-space: pre-line;  /* Radbyte i första paragrafen*/
}


.two, a { 
    
    font-size: 120%;          /*  Hade kunnat dela på klasserna, men ville pröva */
    text-decoration: none;
}

.three {
    font-size: 70%;    /* Eftersom klass 3 skulle ha samma font men inte samma size */
    font-family: sans-serif; 
}


Det jag vill göra är att få alla länkar (a) överstruken i diven #bob, förutom länken i klassen "two"

Jag har försökt med att:

Kod: 
}

#bob a {
        text-decoration: line-through;  //För att ge samtliga länkar i #bob överstruken text
}

.two, a { 
    
    font-size: 120%;        
    text-decoration: none; // För att ge länken i klass two normal text

Men länktexten i klass two förblir överstruken.. tips?

För det första ska du inte använda kommatecken, utan mellanslag. För det andra måste du vara med specifik för att det ska fungera. Prova:

Kod: 
#bob .two a {
     text-decoration: none;
}
Citera
2018-04-18, 15:54
  #33
Drogo
Medlem
Citat:
Ursprungligen postat av Nich
För det första ska du inte använda kommatecken, utan mellanslag. För det andra måste du vara med specifik för att det ska fungera. Prova:

Kod: 
#bob .two a {
     text-decoration: none;
}


Ah, det fungerade. Men förstår inte varför jag måste vara specifik med vilken div det ska beröra? Om jag vill att det ska beröra alla länkar i class "two" så borde det väl räcka med att specificera class "two"?
Citera
2018-04-18, 16:03
  #34
Drogo
Medlem
Hm, det fungerade men fick ett följdproblem genom att den inte tar "font-size: 120%;" i class two nu.

Kod: 
#bob .two a { 
    
    text-decoration: none;
}

.two, #bob #billy {
    font-size: 120%;
}

Löste det på det sättet, men nu ville den ha kommatecken istället för mellanslag. Förstår inte skillnaden..
__________________
Senast redigerad av Drogo 2018-04-18 kl. 16:10.
Citera
2018-04-18, 18:34
  #35
vhe
Moderator
vhes avatar
Citat:
Ursprungligen postat av Drogo
Löste det på det sättet, men nu ville den ha kommatecken istället för mellanslag. Förstår inte skillnaden..

Kommatecken separerar två selektorer, om du vill att samma CSS skall applicera på två helt olika selektorer.
Mellanslag innebär en mer generisk form av tecknet >, dvs att det som står efter mellanslag skall ligga under elementet till vänster, men inte nödvändigtvis vara ett direkt barn.

Följande applicerar på element med klassen baz, som ligger i ett element med klassen bar, som i sin tur ligger i ett element med klassen foo.
Kod: 
.foo .bar .baz {
  color: green;
}

Följande applicerar på samtliga element som har antingen klassen foo, klassen bar, eller klassen baz.
Kod: 
.foo, .bar, .baz {
  color: red;
}
Citera
2018-04-23, 17:01
  #36
Drogo
Medlem
Kod: 
<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="utf-8" />
    <title>testa SVG</title>
      <link rel="stylesheet" href="cirkel.css" />
    <meta name="description" content="Webbteknik 1" />
  </head>
  <body>
    <h1>Uppgift 9B - testa SVG</h1>
    <svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="40" width="250" height="100" fill="rgb(20, 255, 20)" stroke="none" />
    <rect x="20" y="140" width="250" height="100" fill="rgb(120, 55, 20)" stroke="none" />
    <circle cx="180" cy="150" r="100" fill="rgba(50, 200, 50, 0.5)" stroke="black" stroke-width="3"/>
      <ellipse cx="170" cy="140" rx="120" ry="60" fill="rgba(50, 50, 250, 0.5)" />
    </svg>
  </body>
</html>

Det jag vill lyckas med är att ändra cirkelns fill, fill-width och stroke från min .css-fil.
Hur deklarerar jag cirkeln? Är cirkeln redan deklarerad? Isåfall, hur anropar jag den i .css?

Har försökt med att lägga till "<svg id="cirkel">" och sedan anropa den i .css med #cirkel men det funkar ju såklart inte.
Citera
Svara

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