Forum Mjukvara Programmering och digitalt skapande Tråd

!DOCTYPE html/css

1 2
Skriv svar
Permalänk
Medlem ★
●
Skrivet av Bryal:

Variabler i allmänhet är ju väldigt trevligt. Smidigt när man mobilanpassar sidan att bara behöva ändra på ett par variabler för de vanliga bredderna istället för att behöva modifiera vart och vartannat element.

Hurvida SASS är bättre kan jag inte direkt uttala mig om då jag aldrig använt det, men spontant känns det ju överlägset att inte vara beroende av ett byggsystem / ett kompileringssteg för att styla sin enkla hemsida. Vad tjänar man på att använda det mer komplexa SASS vs. att bara skriva ren CSS? Känns lite som när man drar in onödigt beroende på jQuery för att lösa problem där lika många rader Javascript hade kunna göra samma sak.

Gå till inlägget

SASS gör bland annat att du kan dela upp din styling i flera olika filer, t.ex. en fil för bara variabler, en för bara navbaren och en för footern. No more scrolling. Alla dessa kompileras sedan ihop till en CSS fil.

Du kan även använda mixins som är likt functions i JS.
Du kan använda if-satser och loopar. Med detta kan du göra en dynamisk media query som du bara passar parametrar till då du behöver den.

Du kan nästa din styling oändligt om så önskas. Mycket enklare att läsa och underhålla.

Det finns färdiga funktioner som t.ex. Darken och Lighten som kan ta en färg och göra procentuell mörkare eller ljusare.

Du kan enkelt skapa upp flera klasser med en loop.
Låt oss säga att du har 20 färger och vill skapa klasser för olika buttons, text och bakgrundsfärger. Då kan du bara köra alla i en loop, som deklarerar upp alla klasser med namnen du vill ha, t.ex. text-red, bg-red, btn-red.

SASS kompilerar till en CSS-fil som din webbläsare använder. Detta kan du automatisera vid en build med t.ex. webpack eller gulp. Kompilera all SASS och minifiera den.
Annars kan du köra preprocessors som Koala, det programmet känner av då du ändrar i din SASS och kompilerar allt till din CSS fil varje gång du sparar.

Rekommendera dig att skriva SASS, du kommer aldrig vilja gå tillbaka till CSS.
Det är inte som jQ och JavaScript, då sass kompileras till CSS, bara att det är enklare för dig att jobba i.

Skickades från m.sweclockers.com

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av ssoffipropp:

Tack så mycket!
Radbytningen sker dock inte automatiskt.. Ska det egentligen bara funka att hoppa ner några rader i dokumentet utan att skriva <br>?

Gå till inlägget

Ja precis. Du ska använda dig av <p> på din text som automatiskt skapar radbrytning. Sedan kör du margin, padding eller andra egenskaper för att skapa ditt utseende.

Har ändrat din kod lite utefter semantiska element istället för div. Har även lagt till en egenskap i css. Väldigt oklart om jag lyckades ändra utefter hur din hemsida är tänkt då det var svårt att koppla vilken div du ville stänga osv osv... Har även ändrat alla bildernas namn till cross1.jpg för att själv testa så det fungerade som tänkt, bara att ändra tbx..

<!DOCTYPE html>
<html lang="sv">
 
  <head>
    <meta charset="utf-8">
    <title>Sofies sida</title>
    <link rel="stylesheet" href="styles.css" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
     
  <body>
     <div id="wrapper">
        <header class="lankar">       
            <a href="#betyg">Betygsmål</a>
            <a href="#serier">Serier och filmer</a>
            <a href="#citat">Favoritcitat</a>
            <a href="#foto">Fotografier</a>
        </header>
        <!-- rubrik -->
       <h1>Välkommen hit!</h1>

       <main class="box1">
            <!-- underrubrik 1 -->
            <h2> Vem är jag?</h2>
            <!-- stycke -->
            <article class="stycke">
               <p> massa text </p><br>
            </article>
       
            <!-- underrubrik 2 -->        
            <h2 id="betyg">Mitt mål med denna kurs?</h2>
            <p>massa text </p>
            <p class="betyg"> Mitt betygsmål? <font color="red">text</font></p><br>
            
            <!-- favoritserier -->        
            <h2 id="serier">Serier och filmer</h2>

            <p>lite text </p><br>
            <section class="serie">  
                <table>
                    <tr>
                        <th>Serier</th>
                        <th>Filmer</th>
                    </tr>
                    <tr><td>Power</td><td>Dirty Dancing</td></tr>
                    <tr><td>Peaky Blinders</td><td>A walk to remember </td></tr>
                    <tr><td>Arrow</td><td>The holiday</td></tr>
                    <tr><td>Innan vi dör</td><td>Safe heaven</td></tr>
                    <tr><td>Greys anatomy</td><td>Blood and bone</td></tr>
                    <tr><td>Game of thrones</td><td>Columbiana</td></tr>
                    <tr><td>The 100</td><td>En oväntad vänskap</td></tr>
                    <tr><td>Lethal weapon</td><td>Walk the line</td></tr>
                    <tr><td>Hamilton</td><td>Five feet apart</td></tr>
                    <tr><td>Bodyguard</td><td>The hard way</td></tr>
                </table>
            </section> <br>

            <!-- Favoritciat -->
            <h2 id="citat">Favoritcitat från serier/filmer</h2>
            <q> You were like coming up for fresh air. It's like I was drowning and you saved me</q><br> - Derek Shepherd, Greys anatomy <br> <br>
            <q>If two people were meant to be together,eventually they'll find their way back</q> <br> - Chuck Bass, Gossip girl <br> <br>
            <q>Never let the fear of striking out, keep you from playing the game</q><br> - A cinderella story <br><br>
            <q>I like getting older, I feel like I'm finally aging into my personality</q><br> - Nick Miller, New girl
              
            <!-i- fotografier -->
            <h2 id="foto">Fotografier</h2>
            <figure class="flex-img">
                <img src="cross1.jpg" alt="crossbild">
                <img src="cross1.jpg" alt="crossbild">
                <img src="cross1.jpg" alt="bild på gravidmage">
                <img src="cross1.jpg" alt="bild på gravidmage">
                <img src="cross1.jpg" alt="bild på gravidmage">
                <img src="cross1.jpg" alt="bild på gravidmage">
                <img src="cross1.jpg" alt="bild på gravidmage">
             </figure>
        </main>
        <br>
        <footer class="box2">
            <a href="#toppen">
            <h3>Tillbaka till toppen</h3>
            </a>
        <footer> 
    </div>   
 </body>

</html>

och här kommer CSS:en.. Enda ändringen är de två längst ner, flex-img. Den la jag till så du skulle slippa ha width och <br> vid dina bilder. Nu sköts det med CSS istället.

body{
    background-color: #A7895D;
    
}

/*box till sidan*/
.box1{
    width: 700px;
    height: auto;
    background-color: #FFFFFF;
    padding: 10;
    border: 1px solid #000000;
    margin: auto;
   
}


/*Huvudrubrik*/
h1{
    font-size: 70;
    font-family: janetta silloam;
    text-align: center; 
    font-style: normal;

    
}
/*underrubriker*/
h2{  
    background-color: #EEDDC4;
    font-family: georgia;
    font-size: 20;
        
}

/*text*/
.stycke{
    text-align: center;
    font-family: georgia;
    font-size: 14;
}

p { font-size: 14px;
}

/*LÄNKARNA*/
.lankar{
    text-align: center;
    text-decoration: none; 
    font-family: georgia;
    margin-top: 20px;
}

a { 
    background-color: #9F9484;
    text-decoration: none; 
    padding: 3px; }

a:link { color: #000000; }
a:visited { color: #000000; }
a:active { color: saddlebrown}

.betyg{
    font-size: 20;
    font-family: cursive
}

/*Tabell med serier och filmer*/
table, td, th{
    border-collapse: collapse;
    border: 1px solid black;
    padding: 4px;
    text-align: center;
    
}
table{ 
    margin: auto;}
th{ 
    background-color: #A7895D; 
}

/*WRAPPER*/

#wrapper { 
    width: 730px; margin: auto;
    border: 4px solid #A7895D;
    padding: 5;
    background-color: #EEDDC4;
}


h3 { text-align: center}


/* flex-img är klassens namn, och när jag lägger ett img efteråt så kommer det påverka alla element som har
typen img i den klassen. */
.flex-img img{
    display: flex;
    max-width: 670px;
    height: auto;
    flex-direction: column;
    margin: 10px;
}

/* Bara en exempelklass likt ovan, fast med p istället. Skapar du en <p> innuti div class="flex-img" så kommer alla dessa p
få storleken 30000px */

.flex-img p{
    font-size: 30000px;
}
Senast redigerat
Visa signatur

10700K | NVIDIA RTX 3080

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av zaibuf:

SASS gör bland annat att du kan dela upp din styling i flera olika filer, t.ex. en fil för bara variabler, en för bara navbaren och en för footern. No more scrolling. Alla dessa kompileras sedan ihop till en CSS fil.

Du kan även använda mixins som är likt functions i JS.
Du kan använda if-satser och loopar. Med detta kan du göra en dynamisk media query som du bara passar parametrar till då du behöver den.

Du kan nästa din styling oändligt om så önskas. Mycket enklare att läsa och underhålla.

Det finns färdiga funktioner som t.ex. Darken och Lighten som kan ta en färg och göra procentuell mörkare eller ljusare.

Du kan enkelt skapa upp flera klasser med en loop.
Låt oss säga att du har 20 färger och vill skapa klasser för olika buttons, text och bakgrundsfärger. Då kan du bara köra alla i en loop, som deklarerar upp alla klasser med namnen du vill ha, t.ex. text-red, bg-red, btn-red.

SASS kompilerar till en CSS-fil som din webbläsare använder. Detta kan du automatisera vid en build med t.ex. webpack eller gulp. Kompilera all SASS och minifiera den.
Annars kan du köra preprocessors som Koala, det programmet känner av då du ändrar i din SASS och kompilerar allt till din CSS fil varje gång du sparar.

Rekommendera dig att skriva SASS, du kommer aldrig vilja gå tillbaka till CSS.
Det är inte som jQ och JavaScript, då sass kompileras till CSS, bara att det är enklare för dig att jobba i.

Skickades från m.sweclockers.com

Gå till inlägget

Jag skriver bara minimalistiskt eleganta webbsidor, så webpack, gulp, och allt vad det är ligger inte ens på min radar att någonsin använda. Det var vissa fina features du beskrev där, men inget som låter värt komplexiteten för mina syften. Om jag hade haft behov av att dela upp i flera filer eller generera CSS med loopar ser jag mest det som ett tecken på att min styling har blivit för komplex.

Simpelt men stiligt, med fokus på innehåll. För det räcker ren CSS gott och väl.

Visa signatur

Arbets- / Spelstation: Arch Linux - Ryzen 5 3600 - RX 7900 XT - 32G DDR4
Server: Arch Linux - Core i5-10400F - 16G DDR4

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

@kwame: Jag har funderat på att gå ett kurs i webbutveckling. Kan du göra min uppgifter åt mig då?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av ToddTheOdd:

@kwame: Jag har funderat på att gå ett kurs i webbutveckling. Kan du göra min uppgifter åt mig då?

Gå till inlägget

Hahah, SÅ hjälpsam var jag väl ändå inte?! =D
Mest förvånad att en kurs i webbutveckling inte lär ut att använda sig av semantiska taggar
som bland de första de lär ut, och ja, vad som faktiskt hör hemma i <head>. Tyckte enklaste
sättet att lära ut det var att ändra i den faktiska koden =]

Visa signatur

10700K | NVIDIA RTX 3080

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