GEEK GIRLS CARROTS

kurs HTML/CSS

 

 

 

edycja 1  Warszawa 2015

Link do prezentacji

http://goo.gl/b07ATk

Ćwiczenie na rozgrzewkę

<img src="plik1.jpg" />
<img src="folder1/plik2.jpg" />
<img src="folder1/folder2/plik3.jpg" />
<img src="http://lorempixel.com/400/200" />

CSS

Kaskadowe arkusze styli

.css

CSS

http://www.csszengarden.com/213

http://codepen.io/pixelass/full/YXXBmr/

http://codepen.io/AdrienBachmann/full/jPPgZw/

Spróbujmy wspólnie zajrzeć i  delikatnie zmienić stronę

Opis elementów w CSS

h1 {
    color: red;
}

Dołączamy style

<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        mamy ostylowana strone
    </body>
</html>

plik style.css znajduje się w folderze ze stroną przygotowaną wcześniej

Jak nie dołączać styli?

<html>
    <head>
        <style>
            #blok1 {
                background: red;
            }
        </style>
    </head>
        <body>
          <div id="blok1">
              jakis czerwony blok
          </div>
    </body>
</html>

Jak nie dołączać styli?

<html>
    <body>
          <div id="blok1" style="background: red">
              jakis czerwony blok
          </div>
    </body>
</html>

Ćwiczenie

<html>
    <body>
        <div id="logo">
            <h1>Moje logo</h1>
        </div>
        <div id="opis">
            <p class="paragraf">
                Text 1
            </p>
            <p class="paragraf">
                Text 2
            </p>
        </div>
    </body>
</html>

ID, CLASS - Różnice

Struktura pliku CSS

// <body>
body {
    background: yellow;
}


// <div id="mojBlok">, <p id="mojBlok">
#mojBlok {
    background: green;
    color: red;
}

//<p class="test">, <div class="test">
.test {
    font-size: 20px;
}


//wszystkie wystapienia <span> w środku class="test"
.test span {
    font-size: 18px;
}

Kolory

body {
    background: darkOrange;
    color: #DC143C
}

http://www.colorpicker.com/

http://www.w3schools.com/html/html_colornames.asp

body {
    background: #FF8C00;
    color: crimson;
}

Ćwiczenie

https://jsfiddle.net/o8g32jmj/

<html>
    <body>
        <div>
            Element 1
        </div>
        
        <div>
            Element 2
        </div>
        
        <div>
            <span>tekst 1</span>
            <span>tekst 2</span>
        </div>
    </body>
</html>

Jaka jest różnica pomiędzy div, a span?

block

inline

Czy nagłówki są block czy inline ?

<html>
    <body>
        <h1>Jestem nagłówkiem najwazniejszym</h1>
        <h2>Jestem drugim naglowkiem</h2>
    </body>
</html>

Model pudełkowy

http://www.w3schools.com/css/css_boxmodel.asp

Model pudełkowy

https://jsfiddle.net/skn2cLwn/2/

<div id="pudelko">
    <div class="srodkowe">
        Tresc srodka 1
    </div>
    <div class="srodkowe unikalny">
        Tresc srodka 2
    </div>
</div>

Różne sposoby zapisu padding, margin

.selektor {
    padding: 10px;
}

.selektorB {
    padding: 10px 20px;
}

.selektorC {
    padding: 10px 20px 30px 40px;
}

.selektorD {
    padding: 10 20px;
    padding-right: 40px;
}

Ćwiczenie

<div class="pudelko">
    <div class="pudelko">
        <div class="pudelko ostatnie">
            hej
            <div id="ostatnie" class="pudelko">
                hooo
            </div>
        </div>
    </div>
</div>

:hover :visited - wstęp do pseudoklas

<html>
    <body>
        <ul>
            <li>
                <a href="strona2.html">Link do strony 2</a>
            </li>
            <li>
                <a href="strona3.html">Link do strony 3</a>
            </li>
            <li>
                <a href="strona4.html">Link do strony 4</a>
            </li>
        </ul>
    </body>
</html>
a {
    color: red;
}

a:hover {
    color: blue;
}

a:visited {
    color: purple;
}

a:active {
    font-size: 40px;
}

http://www.w3schools.com/css/css_pseudo_classes.asp

pseudoklasy

p {
    color: green;
}

p::first-line {
    color: red;
}

Rozmiary fontów

<html>
    <body>
        <div id="main">
            tekst glowny trololo
            <p>
                tekst paragrafu
            </p>
        </div>    
    </body>
</html>
#main {
    font-size: 10px;
}

#main p {
    font-size: 2em;
}

Linki w tej samej stronie

<html>
    <body>
        <div id="sekcja1">
            jakis bardzo dlugi tekst
        </div>
        
        <div id="sekcja2">
            jakis bardzo dlugi tekst <br/>
            baaardzo długi tekst
        </div>
        
        <ul>
            <li>
                <a href="#sekcja1">Sekcja 1</a>
            </li>
            <li>
                <a href="#sekcja2">Sekcja 2</a>
            </li>
        </ul>
    </body>
</html>

http://pl.html.net/tutorials/html/lesson8.php

Prezentacja2

By code carrots

Made with Slides.com

Prezentacja2

Prezentacja 2 z zakresu HTML/CSS

  • 1,245

More from code carrots