`

Powrót do strony głównej.

Powrót do moje lekcje programowania.

Sekcja 11 - Fundamenty CSS

Sekcja 11 - powrót

Lekcja 57. Czym jest CSS? - 31.05.2022

Spis treści.

Przedwstęp:

Ta lekcja to tekstowa wersja tego co zostanie przedstawione również w trochę inny sposób w postaci wideo. CSS to na tyle ważny materiał, że postanowiłem również napisać krótki artykuł, który możesz przeanalizować na spokojnie :)

Czym jest CSS?

CSS to z ang. Cascading Style Sheets czyli Kaskadowe Arkusze Stylów.

Słowo kaskada jest ciężkie do wytłumaczenia w tym kontekście także zanim zapoznam Cię z tym słowem to skupmy się na zrozumieniu pojęć “arkusze stylów”. Oczywiście czym jest kaskada powiem dokładnie później.

CSS to w skrócię język do tworzenia arkuszy, czyli plików z regułami które określają styl, czyli wygląd poszczególnych tagów na Twojej stronie (łatwo to teraz powiązać z ostatnimi członami nazwy ‘Style Sheets’ tzn. ‘Arkusze Stylów’). Tak więc zapamiętaj, że CSS jest odpowiedzialny za wygląd Twojej strony internetowej. HTML to tylko treść strony owinięta w tagi, które są m.in. wykorzystywane przez CSS.

Wykorzystywanie te polega na tym, że dobieramy (selekcjonujemy) tagi z pomocą tzw. selektorów.

Dla przykładu, aby zmienić kolor wszystkich akapitów (tag ‘p’ od paragraph) na Twojej stronie wystarczy napisać tylko:

p
{
color: red;
}

Selektory należy umieścić w pliku o rozszerzeniu .css i powiązać go w pliku o rozszerzeniu .html, aby przeglądarka wiedziała gdzie szukać wyglądu strony by móc ten wygląd zobrazować (wyrenderować).'p' to w tym wypadku selektor elementów (tagów), który po prostu mówi przeglądarce aby wybrać wszystkie akapity i zastosować regułę, która znajduje się pomiędzy klamrą otwierającą ‘{‘, a klamrą zamykającą ‘}’. Tak więc selektor elementów działa tak, że podaje się nazwę tagu, a pomiędzy klamrami co ma się z tymi tagami stać.

Większość reguł jest tak skontruowana, że jak na nie spojrzysz to od razu wiesz co robią. Są jednak takie, które przysparzają wiele problemów początkującym twórcom stron. Nie przejmuj się bo wszystkie zostaną wyjaśnione skromnie mówiąc przeze mnie ^^

Jak powiązać pliki reguł CSS z kodem HTML?

Spróbuj to zrobić teraz. Stwórz plik index.html, a następnie stwórz np. plik o nazwie np. test.css i powiąż go z plikiem HTML. Pamiętaj by połączenie te umieścić w nagłówku (head) strony, bo to właśnie tam przeglądarka szuka plików powiązanych (relacyjnych) do pliku html.

<link rel="stylesheet" type="text/css" href="test.css"> Tag link mówi przeglądarce, że należy połączyć i wczytać plik, który określony jest przez atrybuty tagu, czyli dodatkowe informacje tzn. plik ten jest powiązany w 'rel' (relation) tzn. w relacji z tym plikiem jako 'stylesheest', czyli arkusz styli, czyli taki który zmieni wygląd strony. Typ tego arkusza to tekst css tzn. 'text/css', a znajduje się on pod nazwą 'test.css'.

Dzięki temu ‘linkowi’, czyli połączeniu z plikiem CSS przeglądarka będzie wiedzieć gdzie znajdują się reguły odpowiedzialne za wygląd/styl tagów Twojej strony internetowej. Gdy umieścisz w tym pliku css regułę którą przedstawiliśmy wyżej to wszystkie akapity staną się koloru czerwonego.

Jakie są zalety stosowania CSS?

  • Wyobraź sobie, że masz 30 akapitów na stronie, które są koloru czerwonego. Gdybyś nagle zechciał zmienić kolor tych akapitów to musiałbyś zmieniać go 30 razy. Dzięki CSS możesz to zrobić jeden raz w zewnętrznym pliku. A co jeśli miałbyś te akapity na setkach podstron? Pozostawię te pytanie bez odpowiedzi, bo się włosy jężą na głowie ;)


  • Podmieniając plik CSS można udostępnić użytkownikowi naszej strony całkowicie inny wygląd dostosowany tylko pod niego. Każdy użytkownik może mieć stronę o innym wyglądzie, ale o takiej samej treści.


  • Strona się szybciej wczytuje, ponieważ plik CSS wczytywany jest tylko raz po czym przechowywany jest w pamięci podręcznej (cache) i jest najczęściej wpółdzielony ze wszystkimi podstronami.


  • Z powyższych punktów wynika również, że oszczędzasz czas, ponieważ możesz kontrolować layout (wygląd strony) z jednego pliku mając nawet kilkaset podstron.


  • Dzięki CSS możesz pokazać inną stronę użytkownikom korzystających ze smartfona, a inną korzystających z PC. Ba! możesz nawet zmienić wygląd podstrony dla osób, które chcą ją wydrukować, aby np. nie traciły kolorowego atramentu lub też ukryć menu, dla os. które zainteresowane są wydrukiem wyłącznie artykułu.


Dlaczego po poznaniu HTML powinieneś poznać CSS?

Treść bez wyglądu nie jest atrakcyjna. Tutaj nie ma żadnej filozofii :-)

Co oznacza słowo 'kaskada' w kontekście CSS?

Kaskada to inaczej stopniowy 'szereg'. Szereg oznacza, że coś jest ustawione w kolejności i ta kolejność ma znaczenie, ale jak to odnieść do CSS? Wyobraź sobię że nazywamy CSS następująco: Szeregowe Arkusze Stylów lub też inaczej WalcząceZeSobą Arkusze Stylów. Aby zrozumieć te słowo, należy wiedzieć, że każda przeglądarka nadaje jakiś domyślny styl dla wszystkich tagów oraz style można ustawić również w tej samej linii co tag. Najbardziej znaczące style to te, które ustawiono w linii z tagiem, po czym w arkuszach, a na końcu w przeglądarce.

Jak widzisz jest tu pewnego rodzaju szereg/kolejność, która ma znaczenie przy podejmowania decyzji, który styl zostanie zastosowany. Te style tak jakby 'walczą' ze sobą o to, który zostanie zastosowany. Właśnie dlatego CSS nazywa się kaskadowym, ponieważ możemy zmienić style na kilka różnych sposobów, ale niektóre 'stopnie' zmiany są ważniejsze od innych.



Lekcja 58. Style CSS - 1.06.2022

Spis treści.


słowo testowe - działa


                    
                        <p>słowo testowe - działa</p><br>

p
{
background-color: rgb(255, 0, 34);
font-weight: bold;
font-size: 25px;
width: 50%;
text-align: center;
}
                    
                


Lekcja Czym jest kaskada? Co oznacza "C" w CSS? - 2.06.2022

Spis treści.




Lekcja 60. class vs id - 3.06.2022 i 6.06.2022

Spis treści.
id to identyfikator. Identyfikator musi identyfikować coś jednoznacznie tzn. możesz nim zidentyfikować (odróżnić) tylko jeden element na stronie.

Tak więc id stosujesz dla unikalnego elementu, który występuje tylko raz na całą stronę. Kiedy mówię o stronie mam na myśli jedną stronę, a nie całą witrynę. Tzn. możesz powtórzyć id="test" na różnych podstronach, ale na jednej stronie może wystąpić tylko jeden raz identyfikator o jednej wartości np. "test".

class stosujesz dla elementów, których jest wiele na stronie.

Po co tak robić? Bo selektor # wybierający identyfikatory działa szybciej niż selektor '.'

Używając "#" szukasz tylko jednego elementu, tak więc po znalezieniu go w drzewie (strukturze) strony, przeglądarka nie musi szukać dalej.

Natomiast, jeśli stosowałbyś "class" dla wszystkich elementów to spowolnisz wydajność swojej witryny. Nie dużo, ale jednak.

Podsumowując stosujemy:

id, gdy na stronie jest tylko jeden taki element np. menu górne strony

class, gdy na jednej stronie może być kilka elementów, które potrzebują podobnego wyglądu z poziomu CSS np. lista/paragrafy etc.

To jest testowy tekst.

To jest testowy tekst.

To jest testowy tekst.

To jest testowy tekst.

To jest testowy tekst.












HTML

<span class="l60">
    <p id="l60a">To jest testowy tekst.</p>
    <p id="l60b">To jest testowy tekst.</p>
    <p id="l60c">To jest testowy tekst.</p>
    <p id="l60d">To jest testowy tekst.</p>
    <p id="l60e">To jest testowy tekst.</p>
</span><br><br>

<form id="zamowienie">
    <input class="input-text" type="text" name="" id=""><br>
    <input class="input-text" type="text" name="" id=""><br>
    <input class="input-text" type="text" name="" id=""><br>
    <input class="input-text" type="text" name="" id=""><br><BR></BR>
</form>

<form id="koszyk">
    <input class="input-text" type="text" name="" id=""><br>
    <input class="input-text" type="text" name="" id=""><br>
</form>


CSS

.l60
{
    text-align: center;
    width: 80%;
    background-color: aliceblue;
}

#l60a
{
    color: coral;
    font-weight: 100;
    background-color: blueviolet;
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
}

#l60b
{
    color: rgb(156, 80, 255);
    font-weight: 400;
    background-color: rgb(226, 43, 116);
    font-size: 25px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

#l60c
{
    color: rgb(255, 80, 98);
    font-weight: lighter;
    background-color: rgb(223, 226, 43);
    font-size: 30px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
}

#l60d
{
    color: rgb(19, 7, 50);
    font-weight: bolder;
    background-color: rgb(103, 80, 93);
    font-size: 35px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
}

#l60e
{
    color: rgb(26, 86, 138);
    font-weight: initial;
    background-color: rgb(94, 24, 11);
    font-size: 40px;
    font-family: 'Times New Roman', Times, serif
}

#komentarz
{
    color: green;
}
                    

    /*.input-text
    {
        color: blue;
        width: 500px;
    }*/  - komentarz


.input-text
{
    color: blue;
    width: 500px;
}

#zamowienie .input-text
{
    color: chartreuse;
}

#koszyk .input-text
{
    color: firebrick;
    width: 100px;
}

                


Lekcja 63. Div vs span | block vs inline - 7.06.2022

Spis treści.


Arkadiusz Włodarczyk
stan cywilny: żonaty

Arkadiusz Włodarczyk
stan cywilny: żonaty
Testowy tekst.
Testowy tekst.
Testowy tekst.
Testowy tekst.
Testowy tekst.

Testowy tekst. Testowy tekst. Testowy tekst. Testowy tekst. Testowy tekst.
                    
<p class="l61">Arkadiusz Włodarczyk <br>
stan cywilny: <span title="od 2017" class="l61a">żonaty</span></p>

<div class="l61">Arkadiusz Włodarczyk <br>
stan cywilny: <span title="od 2017" class="l61a">żonaty</span></div>

<div class="l61b">Testowy tekst.</div>
<div class="l61b">Testowy tekst.</div>
<div class="l61b">Testowy tekst.</div>
<div class="l61b">Testowy tekst.</div>
<div class="l61b">Testowy tekst.</div><br>

<span class="l61b">Testowy tekst.</span>
<span class="l61b">Testowy tekst.</span>
<span class="l61b">Testowy tekst.</span>
<span class="l61b">Testowy tekst.</span>
<span class="l61b">Testowy tekst.</span>

.l61
{
background-color: chocolate;
text-align: right;
}

.l61a
{
background-color: blueviolet;
}

.l61b
{
width: 500px;
background-color: rgb(0, 166, 255);
text-align: center;
}
                    
                


65. EMMET: Triki do tworzenia tagów z id i class - 8.06.2022

Spis treści.


                        
                            p.
                            <p class=""></p>

                            p.pierwsza_nazwa.druga_nazwa.trzecia_nazwa
                            <p class="pierwsza_nazwa druga_nazwa trzecia_nazwa"></p>

                            p#
                            <p id=""></p>

                            p#nazwa_identyfikatora
                            <p id="nazwa_identyfikatora"></p>

                            .
                            <div class=""></div>

                            .nazwa_klasy
                            <div class="nazwa_klasy"></div>

                            b>.pierwsza_nazwa
                            <b><span class="pierwsza_nazwa"></span></b>

                            ul>li*5
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>

                            ul>li.*5
                            <ul>
                                <li class=""></li>
                                <li class=""></li>
                                <li class=""></li>
                                <li class=""></li>
                                <li class=""></li>
                            </ul>

                            ul>li.type_$*5
                            <ul>
                                <li class="type_1"></li>
                                <li class="type_2"></li>
                                <li class="type_3"></li>
                                <li class="type_4"></li>
                                <li class="type_5"></li>
                            </ul>

                            ul>li#type_$*5
                            <ul>
                                <li id="type_1"></li>
                                <li id="type_2"></li>
                                <li id="type_3"></li>
                                <li id="type_4"></li>
                                <li id="type_5"></li>
                            </ul>

                            ul>#type_$*5
                            <ul>
                                <li id="type_1"></li>
                                <li id="type_2"></li>
                                <li id="type_3"></li>
                                <li id="type_4"></li>
                                <li id="type_5"></li>
                            </ul>

                            table>tr>td
                            <table>
                                <tr>
                                    <td></td>
                                </tr>
                            </table>

                            table>.tr>.td
                            <table>
                                <tr class="tr">
                                    <td class="td"></td>
                                </tr>
                            </table>

                            table>.tr*4>.td*5
                            <table>
                                <tr class="tr">
                                    <td class="td"></td>
                                    <td class="td"></td>
                                    <td class="td"></td>
                                    <td class="td"></td>
                                    <td class="td"></td>
                                </tr>
                                <tr class="tr">
                                    <td class="td"></td>
                                    <td class="td"></td>
                                    <td class="td"></td>
                                    <td class="td"></td>
                                    <td class="td"></td>
                                </tr>
                                <tr class="tr">
                                    <td class="td"></td>
                                    <td class="td"></td>
                                    <td class="td"></td>
                                    <td class="td"></td>
                                    <td class="td"></td>
                                </tr>
                                <tr class="tr">
                                    <td class="td"></td>
                                    <td class="td"></td>
                                    <td class="td"></td>
                                    <td class="td"></td>
                                    <td class="td"></td>
                                </tr>
                            </table>

                            Implicit tag names

                            .class
                            <div class="class"></div>

                            em>.class
                            <em><span class="class"></span></em>

                            ul>.class
                            <ul>
                                <li class="class"></li>
                            </ul>

                            table>.row>.col
                            <table>
                                <tr class="row">
                                    <td class="col"></td>
                                </tr>
                            </table>

                        
                    


Lekcja 66. Wybór najważniejszej reguły - jak uniknąć błędów w CSS? - 9.06.2022

Spis treści.




Lekcja 67. Krawędzie (obramowanie) wokół elementów - 12.06.2022

Spis treści.


Brak obramowania (domyślne): none
Solidna linia: solid.
Seria kropek: dotted.
Seria kresek: dashed
Podwójna linia: double
Wcięcie, efekt wyrzeźbienia: groove
Odwrotność groove: ridge
Efekt "zapadnięcia": inset
Efekt "wysunięcia" (przeciwieństwo inset): outset
Mix - można mixować wzsystko ;).
Świat jest okrągły!!!
Świat jest okrągły!!!
To jest ostateczna definicja
                        
                            <div class="none div">Brak obramowania (domyślne): none</div>    
                            <div class="solid div">Solidna linia: solid.</div>    
                            <div class="dotted div">Seria kropek: dotted.</div>
                            <div class="dashed div">Seria kresek: dashed</div>
                            <div class="double div">Podwójna linia: double</div>
                            <div class="groove div">Wcięcie, efekt wyrzeźbienia: groove</div>
                            <div class="ridge div">Odwrotność groove: ridge</div>
                            <div class="inset div">Efekt "zapadnięcia": inset</div>
                            <div class="outset div">Efekt "wysunięcia" (przeciwieństwo inset): outset</div>
                            <div class="mix div">Mix - można mixować wzsystko ;).</div>
                            <div class="definicja div">Świat jest okrągły!!!</div>
                            <div class="definicja2 div">Świat jest okrągły!!!</div>
                            <div class="definicja3 div">To jest ostateczna definicja</div>

.div
{
    margin: 20px;
    width: 300px
}

.none {border-style: none;}
.dotted {border-style: dotted;}
.dashed {border-style: dashed;}
.solid {border-style: solid;}
.double {border-style: double;}
.groove {border-style: groove;}
.ridge {border-style: ridge;}
.inset {border-style: inset;}
.outset {border-style: outset;}

.mix 
{
    width: 300px;
    border-bottom: 1px solid darkgreen;
}
.definicja
{
    border-left: 5px solid crimson;
    background-color:darkgray;
}

.definicja2
{
    border: 1px solid chocolate;
    border-left-width: 5px;
    border-top-style: none;
    border-right-style: none;
    width: 300px;
}

.definicja3
{
    border-style: none none double solid;
    width: 300px;
    text-align: center;
}
                        
                        top -    góra
                        right -  prawa
                        bottom - dół
                        left -   lewa
                
                        border: grubosc_bordera style kolor;
                
                        ZEGAREK
                
                        GORA
                        PRAWO
                        DOL
                        LEWO
                
                        border-style: 1 wart
                        1 wart - ustalana dla wszystkich obramowań
                        border-style: 1 wart 2 wart;
                        1 wart - ustalana dla gory i dolu
                        2 wart - ustalana dla lewej i prawej
                        border-style: 1 wart 2 wart 3 wart 4 wart;
                        1 wart - gora
                        2 wart - prawo
                        3 wart - dol
                        4 wart - lewo
                    


68. Zaokrąglone krawędzie - 13.06.2022

Spis treści.


To jest ostateczna definicja


To jest dymeczek.
                        
                            <div class="l68a">To jest ostateczna definicja</div><br>

                            <input type="text" class="l68b" placeholder="dymek na tekst">
                            <input type="text" class="l68b" placeholder="dymek na tekst">
                            <input type="text" class="l68b" placeholder="dymek na tekst"><br>
        
                            <div class="l68c div">To jest dymeczek.</div>
        

.l68a
{
    border-left: 15px solid rgb(199, 12, 49);
    background-color: rgb(121, 121, 121);
    border-radius: 10px;
}

.l68b
{
    border-radius: 10px;
    margin: 30px;
}

.l68c
{
    background-color: rgb(0, 98, 255);
    padding: 80px;
    border-radius: 100px 70px 40px 10px;
    text-align: center;
}
                        
                    


Lekcja 69. POWTÓRKA wiadomości związanych z selektorami - 14.06.2022

Spis treści.


Selektory
Selektor Wyjaśnienie
p wybierz wszystkie elementy o nazwie p
.foo wybierz wszystkie elementy których class='foo'
#identyfikator wybierz wszystkie elementy których id='identyfikator'
div, p wybierz wszystkie elementy o nazwie div oraz p
div p wybierz wszystkie elementy o nazwie p wewnątrz elementu div.
div .foo wybierz wszystkie elementy o class='foo', wewnątrz elementu div.
div p.foo wybierz wszystkie elementy o nazwie p, których class='foo' - wewnątrz elementu div.
* wybierz wszystkie elementy na stronie

Foo

Foo

not foo

not p, foo

tu jest tekst

                        
<table>
    <caption>Selektory</caption>
    <tr>
        <th>Selektor</th>
        <th>Wyjaśnienie</th>
    </tr>
    <tr>
        <td>p</td>
        <td>wybierz wszystkie elementy o nazwie <b>p</b></td>
    </tr>
    <tr>
        <td>.foo</td>
        <td>wybierz wszystkie elementy których class='<b>foo</b>'</td>
    </tr>
    <tr>
        <td>#identyfikator</td>
        <td>wybierz wszystkie elementy których id='<b>identyfikator</b>'</td>
    </tr>
    <tr>
        <td>div, p</td> 
        <td> wybierz wszystkie elementy o nazwie <b>div</b> oraz <b>p</b></td>
    </tr>   
    <tr>
        <td> div p</td>
        <td>  wybierz wszystkie elementy o nazwie <b>p</b> wewnątrz elementu <b>div</b>.</td>
    </tr>  
    <tr>
        <td> div   .foo</td>
        <td>  wybierz wszystkie elementy o class='<b>foo</b>', wewnątrz elementu <b>div</b>.</td>
    </tr>                 
    <tr>
        <td> div   p.foo</td>
        <td>  wybierz wszystkie elementy o nazwie <b>p</b>, których class='<b>foo</b>' - wewnątrz elementu <b>div</b>.</td>
    </tr>      
    
    <tr>
        <td>*</td>
        <td>wybierz wszystkie elementy na stronie</td>
    </tr>          
</table>

<div>
    <p class="foo">Foo</p>
    <p class="foo">Foo</p>
    <p>not foo</p>
    <div class="foo">not p, foo</div>
</div>

<p>tu jest tekst</p>
                        
                    


Lekcja 70. Tabele w CSS oraz padding -

Spis treści.


Nazwa zdjęcia gdy te się nie wyświetli

                        

                        
                    


71. Linki - tworzymy pierwsze menu poziome! :-)

Spis treści.
Nazwa zdjęcia gdy te się nie wyświetli

                    

                    
                

72. Wykazy list - zmiana domyślnych ikon | selektor ::before

Spis treści.
Nazwa zdjęcia gdy te się nie wyświetli

                    

                    
                

73. przeźroczystość: opacity vs rgba

Spis treści.
Nazwa zdjęcia gdy te się nie wyświetli

                    

                    
                

74. zmiana kursora myszki | własne atrybuty | selektor atrybutów | dymki

Spis treści.
Nazwa zdjęcia gdy te się nie wyświetli

                    

                    
                

75. Lekcja aktualizacyjna [INFORMACJA]

Spis treści.
Nazwa zdjęcia gdy te się nie wyświetli

                    

                    
                

76. tła

Spis treści.
Nazwa zdjęcia gdy te się nie wyświetli