żeby złamac tekst bez zbednej przerwy uzywam break czyli tagu br
co to są atrybuty? służą do opisywania tagów
jeśli chcesz na przykład opisać html w jakim języku będzie tworzona strona, po tagu html dajesz spację wpisujesz tag lang
kolejny ważny atrybut to title- tworzy on dymek z dodatkową informacją
Basia jest mamą
tag span jest tagiem pustym i słuzy do dodawania atrybutów
atrybut style służy do zmiany na przykład kolorow
po wybraniu tego atrybutu otwiera się lista z mozliwościami zmiany stylu strony
na przykład backgrand zmieni nam tło.
by dodać zdjęcia do strony, najpierw musimy je umiejscowić w folderze w tym przpadku w pieski
ważne jest by odpowiednio nazwać zdjęcie, jeśli znajdują się na nim pieski nazwijmi je dospowiednio
następnie do dodania zdjęcia służy tak img podajemy odpowiednio img następnie atrybut src
po czym alt czyli opis zdjęcia w przypadku gdy się nie wgra oraz
width i hight czyli rozmiar danego zdjęcia
nigdy nie zmieniamy rozmiaru ręcznie w visual studio code, a w edytotrze do zdjęc.
strony z których można pobrac fajne i darmowe zdjęcia na swoją strone internetową:
- https://pixabay.com/pl/
- https://unsplash.com/
- https://www.pexels.com/pl-pl/
img- image
src- source alt- alternative
meta tagi służą do opisywania strony, wązne jest by po tagu html gdzie ustawiamy język, dodać metatag z opisem języka
kodu w którym piszemy czyli UTF-8. Można dodać meta charset i po znaku równości utf-8.
na samym początku, jeszcze przed podaniem języka określamy również typ dokumentu: doctype i wpisujemy HTML
jak tworzyć listę na stronie, uporządkowaną czyli ponumerowaną i nieuporządkowaną czyli bez numeracji?
do tego będzie służyć tag <ol> z angielskiego order list po którym dajemy tag <li> z angielskiego list item czyli
pozycja na liście, przykład poniżej
Plan na dziś:
poćwiczyć rano
zrobić obiad
zrobić lekcje z kursu
pojechać na serwis auta
tutaj ma przeskoczyć z 23
może tym razem wyjdzie
Jeśli nie chcę mieć ponumerowanej listy użyję tagu <ul>, w tym przypadku będę miała wykropkowane pozycje:
Plan na dziś:
poćwiczyc rano
zrobić obiad
zrobic lekcje z kursu
pojechać na serwis auta
Jeśli chcę zmieniać pozycję między pozycjami w liście używam alt i strzałek i automatycznie zmienia się
również numeracja na liście.
Skróty w emecie ułatwiające pracę:
wybieram tak w tym przypadku <ul>
wpisuję znak mniejszości < i podaję nastepny tag, wtedy tworzymy tag w tagu
możemy go skopiowac dowolną ilość razy a pomiędzy nimi przechodzimy tab
uzywając alt i myszkę mogę tworzyć kursor na wszystkich przykładach i pisać w nich równocześnie
uzywając alt i myszkę mogę tworzyć kursor na wszystkich przykładach i pisać w nich równocześnie
ctrl shift i K kasują automatycznie całą linię
shit alt i strzałka kopiuje tekst ile razy chcę w daną stronę strzałki
ul>li[title=nawias kwadratowy w tym wypadku służy do atrybutów]{używając nawiasów z klamerką można od razu wpisac test}*3
używając klamerek mogę wpisac od razu tekst
używając klamerek mogę wpisac od razu tekst
używając klamerek mogę wpisac od razu tekst
Znak dolara pozwala nam na samoistne nemerowanie
sample1
sample2
sample3
sample4
sample5
Tworzenie definition list za pomoc tagów <dl> - tworzy nam listę definicji następnie dodajemy tag <;dt> co oznacza
definition term- czyli określenie które chcemy zdefiniować i tag <dd>- czyli definiotion description opisu danej definicji
przykład poniżej:
Tagi używane w html:
<title>
służy do nadania tytułu stronie internetowej
<body>
część strony która jest jej zawartością
Przy pomocy emeta mogę szybciej zrobić definition list, by w tym przpadku taki dt i dd znjadowały się na jednym poziomie
używam znaku plus, jeśli chcemy mieć w lisćie więcej definicji, dajemy w nawias dt + dd i mnożymy ile razy chcemy:
pies
ssak z rodziny psowatych
kot
ssak z rodziny kotowatych
by stworzyć link muszę rzucić anchor czyli koywicę i dodac atrybut href czyli hyper reference
na przyklad: zdjęcia śmiesznych piesków
By przejść na inną stronę internetową muszę podac jej adres zaczynając od htpps:// Google
dodając target: blank nowa strona otworzy się w zakładce, jednak nie jest to teraz zalecane.
Linkowanie do miejsca na stronie internetowej. Należy tak jak wyżej dodac anchor ale w miejscu
href nadać etykietę, póżniej stworzyć tą etykietę zaczynając od # tam gdzie ma przeskoczyć nam używając
również kotwicy tylko zamiast href dodać name, przykad poniżej:
etykieta top jest zarezerwowana w przglądarce, używając jej nie muszę tworzyć nic na gorze, zawsze przskoczy na samą górę
czołówka
Tworzenie linka do adresu mailowego
tworze tag o nazwie adres
wpisuje adres mailowy lub test który odniesie nas do maila
rzucam achor gdzie na href będzie mailto
jeśli chce by od razu był nadany temat maila, po adresie mailowym daje znak zapytania poczym daje subject i wpisuje jakie chce zapytanie
wielkość nagłówka może byc 1-6 przy czym 6 jest nawiększy
tworzy się go za pomocą tagu <h>
przykład poniżej
Czym jest nagłówek?
Nagłówek to zwykły tekst, ale jednak powiększony i umieszczony nad innym tekstem.
Te powiększenie powoduje, że skupiamy się na tego typu tekście bardziej niż na tym co jest pod nagłówkiem.
Jak tworzymy nagłówki w HTML?
Przy pomocy tagów <h1> do <h6>, gdzie h1 oznacza najważniejszy i największy nagłówek, a h6 najmniejszy. H to pierwsza litera od słowa header czyli z ang. nagłówek.
Gdzie możemy spotkać się z nagłówkami?
Przykładem nagłówka może być pisany dużo większą czcionką w gazecie tak jakby podtytuły poszczególnych tekstów. Taki nagłówek ma przyciągnąć uwagę lub zwiększyć czytelność.
Po co w takim w razie tworzymy nagłówki?
Po to je tworzymy, by skupić uwagę na KLUCZOWYM(najważniejszym) przekazie tekstu.
Niektóre części tekstu mogą kogoś nie interesować, a nagłówki pozwalają szybko przeskoczyć wzrokiem do konkretnej części tekstu, która interesuje użytkownika.
Nagłówkiem informujesz użytkownika krótko i zwięźle o czym będzie następny akapit. Przez co Twój tekst lepiej się czyta. A jeśli lepiej się go czyta to i użytkownik jest bardziej zadowolony. A to jest kluczowe do osiągnięcia jakiegokolwiek sukcesu.
Tworze nagłówki przy pomocy emeta :
Tekst 1
Tekst 2
Tekst 3
Tekst 4
Tekst 5
Tekst 6
cytowanie: można zrobić na 3 sposoby, przykłady są poniżej:
Albert Einstain
Wiadomo, że taki a taki pomysł jest nie do zrezalizowania. Jednak istanieje jakiś nieuk, który po prostu o tym nie wie. I on własnie dokonuje tego wynalazku.
Adam powiedział: Przekaż im, ze widzimy się jutro tam gdzie zawsze.
Lepiej zaliczyć się do niektórych niż do wszystkich.
Andrzej Sapkowski. Krew elfów.
Tworzenie skrótów oraz definicji
służą do tego dwa tagi skrót <abbr> - od abbreviacion
oraz tak <dfn> czyli define
zaznaczamy skrót i go opisujemy
HTLM to język znaczników do tworzenia stron WWW.
- tak robię spację
Tagi semantyczne-to tagi które nadają sens danym słowom, są domyślnie formatowane i warto ich używać, a nawet należy. Przykłady tagów semantycznych:
<strong>- silny, domyślnie formatuje pogrubiając, jeśli coś jest ważnego na stronie używamy go
<em>- emphasis - podkreślenie, nacisk na coś, domyślnie formatuje kursywą
&mark>- oznacza jak marker, domyślnie na żółto, ten tag najżadziej korzystać
Tagi które formatują nam tekst, ale lepiej używać ich efektu na pomocą CSS:
Tworzenie formularzy: Tworzymy je używając tagu <form> a następnie tagu <input>, możemy nadać też style inputowi, gdy tekst na byś widoczny to style jest zwykłym text natomaist gdy ma być niewidoczny to style jest password
Przykład poniżej:
Każdy formularz należałoby gdzieś wysłać, robimy to za pomocą kolejnego inputa o nazwie submit. Dodatkowo każdego inputa należy nazwać. By wysłać gdzieś dany formularz robi się to przy tagu form za pomocą action, czyli akcji gdzie masz dodać linka do ktorego po zalogowaniu uzytkownik zostanie przeniesiony. dodatkowo należy dodać metodę przesyłania, w tym wypadku post.
Pole radio- przy tworzeniu na przykład ankiety, bądź mozliwości wyboru, płatności czy przesyłki, gdzie użytkownik może wybrać jedynie jedną z dostępnych opcji, przykład na podstawie ankiety. Pole radio tworzymy poprzez
inputa radio:
Kolejną możliwością jest tworzenie checbox, które rózni się od pól radio możliwością wyboru nie jednego a kilku opcji. Przykład jest pokazany powużej przy wyborze hobby. Dodatkowo przy pomocy checbox możesz coś zaznaczyć i odznaczyć.
Najczęściej używane atrybuty w formularzach: checked- domyślnie zaznacza jedną z opcji required - wymagane pole do uzupełnia, bez podania nie da się wysłać formularza autofocus- automatyczne skupienie, kursywa zawsze po odświeżeniu będzie znajdowac się w tej rubryce, przykład z imieniem i nazwiskiem autocomplete- domyślnie jest ustawione zawsze, zapamietuje wpisaną wartość, jeśli chcesz wyłączyć dodajesz atrybut = off
size- rozmiar danej rubryki maxlength- maksymalna ilość znaków do wpisania placeholder- na jasno szaro wypełnia rubryki, podpowiada co należy wpisać value- automatycznie wpisana wartość w rubrykę, którą można zmienić
Tworzenie tabeli:
słuzy do tego tag <table>, wewnatrz którego używamy tagów
<tr> - czyli table row inaczej kolumny
<td>- czyli table data - komórki, wiersze
<th>- czyli table header- nagłówek tabeli
<caption> - podpis tabeli, dajemy na samej górze
Dodatkowo możemy wyodrębinić nagłowek uzywając tagu <thead>, oraz pozostałą część tagiem <tbody>
Rowspan- rozpietość na komórki, podaje na ile komórek ma byc rozpiety tekst
colspan- rozpietość na wiersze
można wyrównać za pomocą align
Nasze usługi
Nazwa
Cena zł
Mycie
30
Czesanie
40
Czyszczenie
30
tekst 1
tekst 2
tekst 3
tekst 1
tekst 2
tekst 3
tekst 1
tekst 2
tekst 3
Usługi salonu
Kategoria
Nazwa
Cena zł
Pielengnacja
Rytuał A
100
Rytuał B
120
Rytuał C
200
Strzyżenie
Włosy długie
200
Wsłosy średnie
100
Wsłosy krótkie
80
usługi wykonane przez stylistę
CSS- tworzenie id- identyfikatorów oraz klas- class. id jest jeden na stronie w css odnosimy się do niego porzez #, natomiast class może być wiele i odnosimy się do nich poprzez kropkę .
Display- z angielskiego wyświel. możemy mieć inline, block oraz inline-block
block
block
block
inline
inline
inline
inline-bloc
inline-bloc
inline-bloc
w display inline-block można ustawić sobie szerokość i wysokość bloku width i height. tekst będzie wyświetlany w lini natomiast stworzą się bloki
próba
class="row">
napiszemy cos
napiszemy cos
napiszemy cos
napiszemy cos
napiszemy cos
napiszemy cos
napiszemy cos
napiszemy cos
napiszemy cos
napiszemy cos
napiszemy cos
napiszemy cos
Obramowania, czyli border jak je ustawiać w CSS?
Brak obramowania
Solidna gruba linia- solid
Linie są wykropkowane- dotted
Linie w postaci serri kresek- dashed
Tworzy podwójną linię - double
Wcięcie efekt wyrzeźbienia- groove
Odwrotność groove- ridge
Efekt zapadnięcia- inset
Efekt wysunięcia- outset
Miksowanie wielu styli na raz
Reguła zegarka góra, prawa, lewa, dół
Jestem świetną programistką
Spełniam się w mojej pracy i jestem tam szczęśliwa
stwórzmy sobie dymek
SELEKTORY
Selektor
Wyjaśnienie
p
wybierz wszystekie elementy o nazwie p
.foo
wybierz wszystkie lementy które mają clasę foo
#id
wybierz wszystkie elementy które mają identyfikator id
div, p
wybierz wszystkie elemnty które mają div i p
div p
wybierz wszystkie elementy p które znajdują się w div
div .foo
wszystkie elementy o clasie foo które znajdują się w div
div p.foo
wybierz wszystkie p o klasie foo które znajdują się w div
Stany linków:
link- nieodwiedzony
visited- odwiedzony
oba linki mają ustwawiony domyślnie wyglad który zmieniamy w css wybierając a:link, visited.
Dodatkowo:
hover- hand over- po najechaniu na myszką pojawi się łapka i możemy zmienić na przykład kolor czcionki i tła
activ- mozemy zmienić kolor tła i po najechniu i przeciagnięciu myszką będzie jechał za nami.
lekcja o opasity czyli przźroczystość, w tym wypadku obrazka, ustawiajac a img na opacity np; 0.7 będzie on nieco przźroczysty, natomiast ustawiając a img:hover na 1 oznacza to, ze po najechaniu na obrazek myszką znów zmieni się na normalny.
To jest ważny komunikat!, tu ustawiona jest tylko przźroczystość tła za pomocą rgbc!
help me help me help me
Formatowanie i dekorowanie tekstu:
text-transform czyli transformowanie tekstu: lowercase (zmienia wszystkie litery na małe), uppercase (zmienia wszystkie litery na duże) i capitalize (zmienia każdą pierwszą literę słowa na dużą, jest to przydatne na przykład przy inputach imię i nazwisko)
text-align czyli wycentrowanie możemy do centrum- center, do lewego boku left, do prawego right oraz justify czyli wyrównuje nam oba boki
white-space: czyli interpretacja białych znaków pre-line będzie interpretowac entery, przydatne jeśli chcemy wkleic tabele; pre-wrap interpretuje i spacje i entery i jest przydatne jęli chcemy wpisac kod.
text-decoration: line, style, color (mozesz dekorować dowolnie tekst liniami, kropkami itp
przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania. przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania. przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania. przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania. przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
przykładowy tekst do formatowania.
Imie i nazwisko:
Hasło:
Text-indent czyli wcięcie pierwszego akapitu, mozemy je ustawiać w CSS, i tak pokaże to na tym przykładzie. Orócz tego mozemy zmieniac tylko pierwszą literę za pomocą ::first-letter i dobrowolnie ją formatowac w każdym akapicie.
Text-indent czyli wcięcie pierwszego akapitu, mozemy je ustawiać w CSS, i tak pokaże to na tym przykładzie. Orócz tego mozemy zmieniac tylko pierwszą literę za pomocą ::first-letter i dobrowolnie ją formatowac w każdym akapicie.
Czym różnią się px od em i %. Czcionka domyślnie jest ustawiona na 16px wielkości, jest to odgórnie w tagu body i strona dziedziczy od tego tagu wielkość czcionki. 1em jest to wartość tylu pixeli na ile ustawiona jest czcionka, czyli domyślnie 16px. Warto uzywać em jeślki ustawiamy ::first-letter. Procent natomiast stosować można w przypadku ustawiania szerokości. przykład pokazany na tym tekscie. Formatować tekst możemy równiez za pomocą line-height, czyli wysokość lini, domyślnie jest ustaiony na ok 1,2em, jeśli mamy dużo tekstu i chcemy by czytało sie go lepiej warto zmienić tą wartość na około 1.4em. Jeszcze mozemy zmieniać word-spacing czyli odstepy między słowami; 0,1em jest mniej więcej wartością domyślna, można użyć 0,4-0-8 by widać było różnice. Kolejną funkcją jest letter-spacing, tutaj można uzywać watości ujemnych wtedy będzie gęściej. Ale w praktyce 0,1em już da nam odstęp widoczny, taki teraz uzyje. można stosować w ttm przypadku wartości w pixelach.
Zabawa czcionkami :) Pierwszą opcją jest font-size czyli rozmiar czcionki, najcześciej podaje się w pixelach lub em. Można w innych jednostkach jednak raczej się już tego nie używa. Inna opcją jest ustawienie font-variant. mozemy tutaj wybrać opcję small caps, teraz ją wybrałam i widać że wszystko jest drukowaną literą jednak wszystkie litery oprócz pierszej w zdaniu są pomniejszone co daje taki ksiązkowy efekt.
Mamy również cos takiego jak font-famili. Jest to rodzina czcionek należąca jakby do jednej klasy. Domyślna czcionką jest times new roman. Ustawiając font famili po przecinku wybieramy inne czcionki. Ma to na celu pokazanie, że jeśli nie wczyta się pierwsza z nich ma wczytać się następna. Warto to ustawiać by unikąć sytuacji w której nie wczyta nam się strona jeśli u kogoś na kompie brakuje jakiejś czcionki.
Inną opcją jest font-weight czyli waga naszej czcionki. Znamy ustawienie bold, ale można też podawać grubość w wartościach od 100-900.
Mamy jeszcze coś takiego jak font-style. Tutaj możemy wybrać italic czyli pochyloną czcionkę, jeśli dana czcionka nie ma pochylenia w ustawieniach a my jednak bardzo ją chcemy, ustawiamy oblique. Wtedy nastąpi wymuszone pochylenie
Marginesy na stronie internetowej:) Marginesy ustawiamy w tagu body najczęściej, możemy ustawić margin 0 po czym w poszczególnych divach zmieniać. Teraz dla lepszej widoczności ustawiłam 10px w tagu body. w poszczególnych divach warto ustawiać paddingi. Teraz ustawię padiing oraz szerokość tego diva. Następnie opakuję go w kolejnego diva o id opakowanie. Jeśli wypełnimy kolorem bacground w divie lepiej mieć ustawione marginesy na 0 zeby to dobrze wyglądało, a nastepnie ustawiamy sobie padding. Mogę ustawić margines dla tego konkreknego diva o klasie margines. Będzie on poza paddingiem. Jeśli chcemy opakować danego diva musimy wziąć pod uwagę: szerokość tekstu, nastepnie padding z prawej i lewej, szerokość borderu z prawej i lewej oraz margines z prawej i lewej. W tym przypadku jest to 400+50+50+3+3+20+20=546.
Jeśli chcemy, żeby tekst pojawiał się nam obok danego bloku stosujemy w css tzn float możemy ustawić na left lub right. Wtedy dany blok/zdjęcie odpowiednie przesunie się w lewo lub prawo a tekst popłynie za nim. By tekst przestał podążać za obrakiem/blokiem ustawiamy mu style na clear i wybieramy odpowiednio left, right lub both. Natomiast jeśli chcemy ustawić dwa bloki/zdjęcia obok siebie oprócz flot musimy opadkować go w jednego diva o id kontener i nadać mu taką szerokość jaką mają dane bloki, uwzględniając bordery. Tekst, który ma znajdować się poniżej musi mieć style clear both. Wszytsko to ma na celu nie rozjeżdzanie się strony jeśli ktoś będzie zmieniał rozdzielczość.
Marginesy na stronie internetowej:) Marginesy ustawiamy w tagu body najczęściej, możemy ustawić margin 0 po czym w poszczególnych divach zmieniać. Teraz dla lepszej widoczności ustawiłam 10px w tagu body. w poszczególnych divach warto ustawiać paddingi. Teraz ustawię padiing oraz szerokość tego diva. Następnie opakuję go w kolejnego diva o id opakowanie. Jeśli wypełnimy kolorem bacground w divie lepiej mieć ustawione marginesy na 0 zeby to dobrze wyglądało, a nastepnie ustawiamy sobie padding. Mogę ustawić margines dla tego konkreknego diva o klasie margines. Będzie on poza paddingiem. Jeśli chcemy opakować danego diva musimy wziąć pod uwagę: szerokość tekstu, nastepnie padding z prawej i lewej, szerokość borderu z prawej i lewej oraz margines z prawej i lewej. W tym przypadku jest to 400+50+50+3+3+20+20=546.
Marginesy na stronie internetowej:) Marginesy ustawiamy w tagu body najczęściej, możemy ustawić margin 0 po czym w poszczególnych divach zmieniać. Teraz dla lepszej widoczności ustawiłam 10px w tagu body. w poszczególnych divach warto ustawiać paddingi. Teraz ustawię padiing oraz szerokość tego diva. Następnie opakuję go w kolejnego diva o id opakowanie. Jeśli wypełnimy kolorem bacground w divie lepiej mieć ustawione marginesy na 0 zeby to dobrze wyglądało, a nastepnie ustawiamy sobie padding. Mogę ustawić margines dla tego konkreknego diva o klasie margines. Będzie on poza paddingiem. Jeśli chcemy opakować danego diva musimy wziąć pod uwagę: szerokość tekstu, nastepnie padding z prawej i lewej, szerokość borderu z prawej i lewej oraz margines z prawej i lewej. W tym przypadku jest to 400+50+50+3+3+20+20=546.
Teraz pisząc ten tekst żeby nie rozjechał się obok podwójnego bloku musze wyszyścić mu style z obu stron.
Pozycjonowanie na stronie posicion mozemy ustawiać na absolutne, czyli stałe jednak przy scrolowaniu będzie się przesuwać, fixed czyli zafiksowane na stałe i takie właśnie jest ustawiony ten div, oraz relative czyli relatywne wzgledem czegoś.
tu jest pozycjonowanie relatywne a tu jest absolutne
Tutaj jest przepełnienie tekstu, czyli mamy ustawiony bacgrand color szerokość i wysokość bloczka, natopmiast tekstru jest za dużo by zmieścić się w danym bloku o określonej wyskości i szerokości. W tym przypadku ustawiamy overflow i możemy nadac mu wartość na przykład hoidden, wtedy wszystko co nie zmieści się w danym bloku będzie ukryte. Możemy ustawić mu auto, wtedy automatycznie pojawi się scrol którym można przsuwac tekst z góry na dół lub ustawiamy, lub ustawimy scrool i wtedy niezależnie czy tekst się mieści czy nie będzie scrool. Tutaj jest przepełnienie tekstu, czyli mamy ustawiony bacgrand color szerokość i wysokość bloczka, natopmiast tekstru jest za dużo by zmieścić się w danym bloku o określonej wyskości i szerokości. W tym przypadku ustawiamy overflow i możemy nadac mu wartość na przykład hoidden, wtedy wszystko co nie zmieści się w danym bloku będzie ukryte. Możemy ustawić mu auto, wtedy automatycznie pojawi się scrol którym można przsuwac tekst z góry na dół lub ustawiamy, lub ustawimy scrool i wtedy niezależnie czy tekst się mieści czy nie będzie scrool. Tutaj jest przepełnienie tekstu, czyli mamy ustawiony bacgrand color szerokość i wysokość bloczka, natopmiast tekstru jest za dużo by zmieścić się w danym bloku o określonej wyskości i szerokości. W tym przypadku ustawiamy overflow i możemy nadac mu wartość na przykład hoidden, wtedy wszystko co nie zmieści się w danym bloku będzie ukryte. Możemy ustawić mu auto, wtedy automatycznie pojawi się scrol którym można przsuwac tekst z góry na dół lub ustawiamy, lub ustawimy scrool i wtedy niezależnie czy tekst się mieści czy nie będzie scrool. Tutaj jest przepełnienie tekstu, czyli mamy ustawiony bacgrand color szerokość i wysokość bloczka, natopmiast tekstru jest za dużo by zmieścić się w danym bloku o określonej wyskości i szerokości. W tym przypadku ustawiamy overflow i możemy nadac mu wartość na przykład hoidden, wtedy wszystko co nie zmieści się w danym bloku będzie ukryte. Możemy ustawić mu auto, wtedy automatycznie pojawi się scrol którym można przsuwac tekst z góry na dół lub ustawiamy, lub ustawimy scrool i wtedy niezależnie czy tekst się mieści czy nie będzie scrool.
