`

Powrót do strony głównej.

Powrót do moje lekcje programowania.

Sekcja 11 - Fundamenty CSS

Sekcja 11 zarchiwizowana

Spis treści:

Lekcja 57. Czym jest CSS? - 29.11.2022

Spis treści.
lekcja 57 na Udemy
Lekcja X

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 - 29.11.2022

Spis treści.
lekcja 58 na Udemy
Lekcja X

To jest testowy tekst

To jest testowy tekst

To jest testowy tekst

To jest testowy tekst

To jest testowy tekst

Video Kursy
NazwaCena(zł)
C++49
PHP39
Java45
        
            
            #article58 p
            {
                font-weight: bold;
                font-size: 25px;
            }
            
            #article58 table
            {
                border-collapse: collapse;
                font-size: 0.8em;
                min-width: 150px;
                box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
            }

            #article58 th
            {
                font-weight: bold;
                border-bottom: 1px solid #f3f3f3ca;
                font-size: 1.1em;
            }

            #article58 table tr
            {
                background-color: #009879;
                color: #ffffff;
                text-align: left;
            }

            #article58 th, td
            {
                padding: 12px 15px;
            }

            #article58 tbody tr
            {
                border-bottom: 1px solid #dddddd;
            }

            #article58 tbody tr:nth-of-type(even)
            {
                background-color: #f3f3f3ca;
                color: #009879;
            }

            #article58 tbody tr:last-of-type
            {
                border-bottom: 2px solid #f3f3f3ca;
            }

            #article58 caption
            {
                font-weight: bold;
                padding: 10px;
                font-size: 1.5em;
            }
        
    
                        

                        
                    

Lekcja 59. Czym jest kaskada? Co oznacza "C" w CSS? - 03.12.2022

Spis treści.
lekcja 59 na Udemy
Lekcja X
kaskada
znaczenie kaskady
>

To jest testowy tekst

To jest testowy tekst

To jest testowy tekst

To jest testowy tekst

To jest testowy tekst

        
#article59 p
{
font-weight: bold;
font-size: 25px;
color: blue;
}
        
    
                        

                        
                    

Lekcja 60. class vs id -

Spis treści.
lekcja 60 na Udemy
Lekcja X

To jest testowy tekst

To jest testowy tekst

To jest testowy tekst

To jest testowy tekst

To jest testowy tekst

Arkadiusz Włodarczyk
                        
                            .center
{
    text-align: center;
}
/*.input-text
{
    color: blue;
    width: 50px;
}*/
#adres-domowy
{
    color: red;
}
.input-text
{
    width: 50px;
}
#zamowienie .input-text
{
    color: blue;
}
#koszyk .input-text
{
    color: red;
}
.larger
{
    font-size: 35px;
}
                        
                    

Lekcja 61. id vs class -

Spis treści.
lekcja 61 na Udemy
Lekcja X
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.
                        
                            
                        
                    

Lekcja 62. Przydatne rozszerzenia CSS w VSC -

Spis treści.
lekcja 62 na Udemy
Lekcja X
                        
                            
                        
                    

Lekcja 63. Div vs span | block vs inline -

Spis treści.
lekcja 63 na Udemy
Lekcja X
Arkadiusz Włodarczyk
stan cywilny: żonaty
Testowy tekst
Testowy tekst
Testowy tekst
Testowy tekst
Testowy tekst
                        
body
{
    background-color: 	#cfd9df;
    margin: 0;
}
div
{
    background-color: aqua;
}
span
{
    background-color: red;
}

.text
{
    width: 800px;
    text-align: center;
}
#unique-sample
{
    text-align: center;
}  
                        
                    

Lekcja 64. display: block/inline/inlineblock -

Spis treści.
lekcja 64 na Udemy
Lekcja X
block
block
block
inline
inline
inline

inline-block
inline-block
inline-block
                        
                            body
                            {
                                background-color: 	#cfd9df;
                                margin: 0;
                            }
                            .type1
                            {
                                background-color: red;
                                display: block;
                            }
                            .type2
                            { 
                                background-color: green; 
                                display: inline;   
                            }
                            .type3
                            {    
                                background-color: blue;
                                display: inline-block;
                                width: 200px;
                                height: 150px;
                                text-align: center;
                            }
                        
                    

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

Spis treści.
lekcja 65 na Udemy
Lekcja X
block
block
block
inline
inline
inline

inline-block
inline-block
inline-block
                        
                            body
                            {
                                background-color: 	#cfd9df;
                                margin: 0;
                            }
                            .type1
                            {
                                background-color: red;
                                display: block;
                            }
                            .type2
                            { 
                                background-color: green; 
                                display: inline;   
                            }
                            .type3
                            {    
                                background-color: blue;
                                display: inline-block;
                                width: 200px;
                                height: 150px;
                                text-align: center;
                            } 
                        
                    

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

Spis treści.
lekcja 66 na Udemy
Lekcja X
type1
type1
type1
type1 & type2
type2
type2
tralala

To jest testowy tekst o niczym.

To jest testowy tekst o niczym.

To jest testowy tekst o niczym.

                        
                            body
{
    background-color: 	#cfd9df;
    margin: 0;
    color: gray;
}
div
{
    color: beige;
    font-weight: bold;
}
.type1
{
    background-color: red;
    color: blueviolet;
}

.type2
{ 
    background-color: green;
    font-size: 35px;
}
#test
{
    color: red;
    font-weight: unset;
}
#test p
{
    color: black;
}
                        
                    

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

Spis treści.
lekcja 67 na Udemy
Lekcja X
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
                        
                            body
{
    background-color: 	#cfd9df;
    margin: 0;
}
div
{
    margin: 10px;
}

.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;
}
                        
                    

68. Zaokrąglone krawędzie -

Spis treści.
lekcja 68 na Udemy
Lekcja X
Świat jest okrągły!!!
To jest dymeczek
                        
                            body
                            {
                                background-color: 	#cfd9df;
                                margin: 0;
                            }
                            div
                            {
                                margin: 10px;
                            }
                            
                            
                            .definicja{
                                border-left: 5px solid crimson;
                                background-color:darkgray;
                                border-radius: 10px;
                            }
                            input
                            {
                                margin: 10px;
                                border-radius: 10px;
                            }
                            .dymek
                            {
                                background-color: aqua;
                                width: 300px;
                                text-align: center;
                                border-radius: 99px 20px 99px 0px;
                                padding: 20px;
                            } 
                        
                    

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

Spis treści.
lekcja 69 na Udemy
Lekcja X
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

                        
body
{
    background-color: 	#cfd9df;
    margin: 0;
}
div .foo
{
    color: red;
}
                        
                    

Lekcja 70. Tabele w CSS oraz padding -

Spis treści.
lekcja 70 na Udemy
Lekcja X
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
                           
                            body
                            {
                                margin: 0;
                                background-color: #cfd9df;
                            }
                            
                            table
                            {
                                margin: 10px;
                                border-collapse: collapse;
                            }
                            table td
                            {
                                padding: 10px;
                            }
                            caption, table th
                            {
                                padding: 5px;
                                font-size: 24px;
                            }
                            table tr
                            {
                                border-bottom: 1px solid black;
                            }
                           
                       

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

Spis treści.
lekcja 71 na Udemy
Lekcja X
Kot syberjski
                           
                            body
                            {
                                background-color:#cfd9df;
                                margin: 0;
                            }
                            
                            #menu_strony a:link, #menu_strony a:visited
                            {
                                text-decoration: none;
                                color: black;
                                border: 1px solid cornflowerblue;
                                background-color: white;
                                padding: 10px;
                                display: inline-block;
                            }
                            
                            #menu_strony a:hover, #menu_strony a:active
                            {
                                background-color: cornflowerblue;
                                color: white;
                            }
                            
                            a:link
                            {
                                text-decoration: none;
                            } 
                           
                       

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

Spis treści.
lekcja 72 na Udemy
Lekcja X
                           
                            body
                            {
                                background-color:#cfd9df;
                                margin: 0;
                            }
                            
                            /*
                            ul
                            {
                                list-style-image: url("../images/tick.png");
                            }
                            */
                            ul
                            {
                                list-style-type: none;
                            }
                            ul li::before
                            {
                                content: "\2714\00A0";
                                color: blue;
                            }
                           
                       

73. przeźroczystość: opacity vs rgba

Spis treści.
lekcja 73 na Udemy
Lekcja X
Video Kurs C# Video Kurs Java Video Kurs PHP Video Kurs SEO Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam praesentium laboriosam totam nemo, dolorem maxime consectetur voluptatibus dignissimos distinctio delectus magni qui pariatur dolor? Praesentium officia ullam quaerat numquam perferendis. Accusantium, pariatur facilis quos sunt cum temporibus aperiam sequi odio repellat aliquam velit nihil explicabo perspiciatis? Mollitia praesentium facilis aspernatur quam repellendus, recusandae cupiditate aperiam, numquam voluptatum eaque, fugiat voluptates. Incidunt, voluptas quia sapiente obcaecati harum impedit eligendi esse labore voluptatibus non ab ex, et assumenda! Distinctio dolorem quibusdam tempore alias perspiciatis quod nemo aut. Quis non beatae adipisci totam. Quos error, ullam amet perspiciatis quam praesentium odit, blanditiis quod quasi maiores non optio minus expedita obcaecati a harum numquam architecto porro dolor accusamus illo placeat laudantium. Culpa, esse impedit. Deleniti nihil, ullam voluptatem sit, unde nulla harum recusandae distinctio animi sequi dolores praesentium. Autem ex aliquid doloremque cum, nulla perspiciatis rerum. Labore illo reiciendis aperiam nisi perspiciatis, consequatur incidunt. Voluptates similique sequi alias! Est eveniet quaerat qui error nihil dolorem suscipit nulla nesciunt molestiae inventore iste, consequatur fugiat! Recusandae dolorum vel qui eum atque ea iure consectetur tenetur pariatur! Beatae, nisi! Quo quisquam officiis ex quasi a sequi cum accusamus, aliquam accusantium cumque vero. Facere, amet natus magni itaque mollitia veniam alias repudiandae obcaecati, reprehenderit fuga quos. Placeat, explicabo! Corporis voluptates praesentium quasi? Obcaecati, laudantium blanditiis itaque ipsa nam deleniti debitis fugiat autem voluptate cupiditate quod officia eius animi ex, libero porro neque quam optio tempore nisi ullam omnis. Quam at recusandae magnam, itaque pariatur repellendus officiis maxime tempore culpa hic numquam veniam. Voluptate error minima, inventore dolore vero eos aut delectus cum, doloribus necessitatibus praesentium accusantium, debitis atque. Repudiandae perferendis mollitia vitae a commodi ab porro eveniet praesentium sapiente laborum quibusdam odit ad omnis, veniam laboriosam laudantium nisi, iste molestias saepe ut pariatur optio. Qui delectus labore perferendis. Fugit enim quo voluptatem doloribus blanditiis labore officia laboriosam iusto reiciendis quas iste modi voluptatum optio, explicabo sit? Nemo earum nostrum quis minus quasi rem pariatur eum enim ad omnis. Sunt doloremque harum dolor consequuntur nihil corporis incidunt soluta aperiam repellat quibusdam quam, qui, expedita nulla molestiae, sint dolores? Fugit quidem nam laboriosam blanditiis sequi magnam voluptatibus doloremque eum ab? Eligendi, voluptatem nulla aliquid sint rem dicta hic officiis tempore enim quasi saepe excepturi laboriosam! Voluptates ut repellendus asperiores numquam hic, perspiciatis voluptatem delectus iusto! Dolorem quod deserunt architecto corrupti. Fugiat neque omnis odio facilis quasi hic distinctio tempora alias totam pariatur ex magnam, cupiditate voluptas est, excepturi inventore eveniet voluptate. Placeat voluptate similique corporis eligendi nam, ullam totam blanditiis. Asperiores earum porro est cupiditate sapiente iste, dolor explicabo sed eligendi ipsam ratione fugit, corrupti autem officiis ex molestias sunt, voluptas cum temporibus alias! Doloribus assumenda nemo nihil eaque minus? Molestiae, at. Eaque tempore nulla libero quos error qui explicabo quam sed quae molestias vel necessitatibus suscipit debitis hic atque asperiores unde beatae repellat vero, deleniti sequi. Culpa, in minus. Quaerat debitis necessitatibus harum rerum atque deserunt in. Atque ratione maxime, accusamus voluptates ea dolore sit enim explicabo dolorem illum incidunt commodi esse hic. Inventore officia ratione nostrum facere quos! Delectus, beatae qui nobis illum ad dolore esse nesciunt quod, aliquam facere eos voluptate alias est adipisci veniam? At quidem tempora dolor hic explicabo? Accusantium quis rem inventore debitis deleniti! Mollitia commodi dolor corrupti ipsum quaerat perspiciatis pariatur iste recusandae, nesciunt molestias dolore assumenda distinctio velit nam quod omnis asperiores ratione rerum. Quos placeat repudiandae aliquid neque eius consequuntur beatae? Sed fugiat laborum exercitationem voluptatibus minima, quis deserunt fuga provident eum veniam iste tenetur debitis, doloribus eius error sint reiciendis nihil nobis hic perspiciatis maxime culpa consequatur, quaerat amet! Mollitia! Cupiditate voluptates numquam, placeat labore nisi laborum reprehenderit reiciendis quaerat. Perferendis rerum laborum sint hic eaque commodi dolor harum ratione repudiandae quisquam fuga voluptates, praesentium reiciendis fugit itaque id quos! Necessitatibus corrupti corporis ducimus nostrum maiores asperiores tenetur nobis natus quam sint reprehenderit error, magnam voluptates totam ex itaque ullam accusantium voluptatum debitis sit voluptatibus odio, voluptas fugit. Quia, nisi. Cupiditate a nemo maiores unde, tempore iusto exercitationem alias consectetur quaerat assumenda, quae praesentium aut dolorum accusamus deserunt! Sit ducimus adipisci quae rem. Autem rerum cupiditate fuga tenetur minus pariatur. Voluptates expedita provident architecto ducimus corrupti rerum nulla, at amet neque tempora adipisci facere voluptatem dolore ut error ab labore cumque obcaecati iste quibusdam dolorem! Maiores omnis ad odit vero. Maxime molestiae quidem est in nobis quod numquam obcaecati non exercitationem aut aliquid corrupti dolore rerum vero dolores, distinctio perferendis deleniti impedit debitis quae culpa cumque? Nam, sint corrupti! Voluptatem. Ipsa tempora provident natus perspiciatis reiciendis quo architecto molestias soluta dignissimos esse? Ipsam laborum quidem blanditiis magni maxime in vel ipsa. Impedit, libero et vel ratione dolore praesentium recusandae omnis? Velit a perspiciatis alias eaque doloribus! Ullam mollitia autem eius temporibus dolor exercitationem tempora eaque ducimus qui accusantium aut rem hic, dolores modi voluptatem, sequi veritatis amet vitae. Natus, nulla. Tempora quibusdam magni asperiores ex quia excepturi harum? Accusamus repellendus voluptates dolorem perferendis voluptas quis quidem deserunt officia incidunt unde sequi a similique ipsam aperiam aliquid ipsa quia, voluptatem illum. Iste ut deleniti asperiores. Voluptates ex corrupti impedit! Iure maxime reprehenderit, soluta quis aliquam sint ducimus, repellat amet assumenda velit, fugiat animi vel ex in repudiandae dolorum! Sint, illum suscipit. Corporis sequi doloremque soluta magnam quae quod non. Eum ipsa minima at recusandae cupiditate quod ullam saepe. Tempora adipisci, labore aspernatur praesentium aliquid voluptatum laboriosam aperiam dicta, itaque eos repellendus? Voluptatum maxime, commodi ad delectus atque facilis error. Nemo dolores eveniet eligendi sint rerum, minima quos? Est facilis itaque voluptate vitae officia maiores et quas neque! Quisquam nisi aut magni? Iusto laudantium voluptatem aperiam nostrum. Quae, omnis dignissimos modi quaerat voluptatibus similique quia eum rerum? Id numquam exercitationem qui est omnis recusandae expedita et, fuga veritatis cumque aperiam dolores vel! Odit repudiandae autem modi excepturi earum vitae explicabo consequatur. Odit doloribus dolore illo molestias repellat, veritatis, commodi asperiores reiciendis enim delectus corporis quod esse voluptate id unde, cum laudantium architecto! Neque iure nemo, rem et iusto voluptate itaque laborum ut voluptatibus esse. Eos nobis nesciunt, molestias assumenda aut totam quas dolorem iure odio illo alias repellat dolore minima reprehenderit sapiente. Assumenda maiores maxime temporibus illo! Officia beatae quos fugiat ducimus suscipit at iure quo dicta odit labore dolorem consequuntur corporis maiores quam, repellat voluptate, sunt natus ab culpa ex! Exercitationem. Id placeat maxime veritatis laborum corrupti sed magni doloremque recusandae, amet impedit unde dolorem voluptas velit eveniet soluta architecto perspiciatis voluptate non nihil dolore? Porro impedit inventore doloremque officiis repudiandae. Voluptatum, optio praesentium similique eligendi expedita, nulla non excepturi consectetur quae assumenda quasi sed distinctio repellat necessitatibus quo eaque? Recusandae iste, dolorem blanditiis quam tenetur repudiandae doloremque deserunt repellendus sed. Omnis consectetur voluptatibus aut error accusamus ratione eum minima distinctio nesciunt, vel suscipit dignissimos ipsum ducimus esse non quibusdam magni adipisci doloribus rerum fugiat necessitatibus sed architecto qui animi. Beatae! Animi cupiditate deserunt, perferendis libero corrupti est alias nam. Earum porro libero cumque odio sequi, eveniet officiis sapiente. Labore, dicta ducimus. Sint quibusdam, aspernatur autem fugiat nam numquam libero quae? Officiis quaerat adipisci consequuntur sequi enim, nulla voluptatem voluptatibus laborum. Nobis, ipsum, ad a labore, cumque dolorem modi mollitia dolore quam libero consectetur. Omnis, illo. Corrupti amet minima doloremque officiis? Saepe illum qui ullam? Eius at odio earum dicta hic! Excepturi error eligendi suscipit numquam dignissimos optio tenetur magni. Vel exercitationem doloribus doloremque maxime ipsa eos nulla ea consequatur voluptas. Aliquam non ducimus nemo quis illum, amet, sequi nisi architecto quam saepe doloremque necessitatibus! Maiores officia commodi a obcaecati rerum accusamus architecto reprehenderit saepe, incidunt libero optio natus sequi neque! Dolorem minus, nostrum, illum officiis voluptatibus delectus cum natus nisi eum rerum ut ea fuga nulla, rem exercitationem recusandae impedit repellendus molestias? Molestiae reprehenderit perspiciatis sunt esse, ut iste deleniti! Ullam, consequatur autem sit esse repellendus minus aut consequuntur unde at, enim eum quaerat commodi reprehenderit? Error neque harum modi ipsum exercitationem, unde facilis consequuntur quia animi quas quisquam magnam. Commodi assumenda facilis vero labore quos corrupti non, officia autem exercitationem facere porro unde aut animi vel similique ipsum reiciendis numquam. Voluptatem, laudantium! Culpa quam amet, sed cupiditate sunt accusamus. Harum velit fugit magnam labore eius rem ipsum asperiores ab distinctio nihil blanditiis inventore veritatis nisi reprehenderit, consequatur totam illo praesentium neque exercitationem odio, fuga corrupti quidem! Dolor, dolorum dolorem! Nihil deserunt provident id temporibus voluptate pariatur expedita quas, placeat sapiente ea eum iusto veritatis asperiores! Sint facere eligendi, odit quis earum, magnam harum sapiente modi molestiae quia mollitia expedita? Non libero, fugiat dicta magni illo modi corporis deleniti incidunt nemo quas, dolores quam quibusdam doloremque similique dolorem odit, consequuntur sapiente. Autem commodi consequatur temporibus accusamus animi! Voluptate, consequuntur placeat? Nisi accusantium porro repellendus at itaque minus quae quam odit, id exercitationem eaque vitae soluta autem ex cupiditate atque facere veniam unde nam velit aut possimus et? Dicta, adipisci qui! Distinctio consequatur, eligendi, itaque expedita laborum sint error animi repellendus amet, delectus atque! Expedita quibusdam quisquam exercitationem veritatis! Deserunt non aliquam impedit dolor, ducimus quis consequuntur atque commodi ad soluta.
To jest super ważny komunikat!
                           
                            body
                            {
                                background-color:#cfd9df;
                                margin: 0;
                            }
                            
                            a img
                            {
                                opacity: 0.7;
                            }
                            a img:hover
                            {
                                opacity: 1;
                            }
                            #komunikat
                            {
                                width: 400px;
                                padding: 100px;
                                background-color: rgba(84, 152, 179, 0.9);
                                text-align: center;
                                position: fixed;
                                left: 50%;
                                top: 50%;
                                transform: translate(-50%, -50%);
                                
                            }  
                           
                       

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

Spis treści.
lekcja 74 na Udemy
Lekcja X

Help me! Help me! Help me!

Satysfakcja Gwarantowana
                           
                            body
                            {
                                background-color:#cfd9df;
                                margin: 0;
                            }
                            
                            [data-help]
                            {
                                cursor: help;
                            }
                            
                            [data-help]:hover::after
                            {
                                content: attr(data-help);
                                background-color: rgba(0, 255, 255, 0.781);
                                padding: 15px;
                                position: absolute;
                                border-radius: 10px;
                            }
                           
                       

75. Lekcja aktualizacyjna [INFORMACJA]

Spis treści.
lekcja 75 na Udemy
Lekcja X
                           

                           
                       

76. tła

Spis treści.
lekcja 76 na Udemy
Lekcja X
To jest przykładowy tekst.














To jest przykładowy tekst.

















































































































                           
                            <style type="text/css">
                            /*<![CDATA[*/
                            body
                            {
                                /*background-color: black;
                                background-image: url('logo-video-kurs-pl.png');
                                background-repeat: no-repeat;
                                background-position: 50% 50%;
                                background-attachment: fixed;*/
                                font-size: 10px;
                                
                                background: black url('logo-video-kurs-pl.png') no-repeat fixed 50% 50%;
                            }
                            div.przyklad
                            {
                                background-image: url('tlo.jpg');
                                background-repeat: no-repeat;
                                background-position: center;
                                font-family: Verdana;
                                background-color: #001f2d;
                                color: #0098a8;
                                text-decoration: none;
                                word-spacing: normal;
                                text-align: justify;
                                letter-spacing: 0;
                                line-height: 1.6em;
                                font-size: 1em;
                                
                                
                            }
                            div.przyklad2
                            {
                                font-family: Verdana;
                                background-color: #001f2d;
                                color: #0098a8;
                                text-decoration: none;
                                word-spacing: normal;
                                text-align: justify;
                                letter-spacing: 0;
                                line-height: 1.6em;
                                font-size: 1em;
                                
                            }			
                            /*]]>*/
                        </style>