[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.50,Default,,0000,0000,0000,,Pamiętacie, jak zrobiliśmy
Dialogue: 0,0:00:02.54,0:00:04.58,Default,,0000,0000,0000,,coś, co wyglądało jak pole,
Dialogue: 0,0:00:04.59,0:00:06.83,Default,,0000,0000,0000,,za pomocą znacznika „div”
Dialogue: 0,0:00:06.91,0:00:08.35,Default,,0000,0000,0000,,i określiliśmy kolor tła?
Dialogue: 0,0:00:08.35,0:00:10.86,Default,,0000,0000,0000,,Cóż, każdy element strony
Dialogue: 0,0:00:10.86,0:00:12.73,Default,,0000,0000,0000,,przeglądarka widzi jako pole,
Dialogue: 0,0:00:12.73,0:00:15.15,Default,,0000,0000,0000,,choćby według nas tak nie wyglądał.
Dialogue: 0,0:00:15.15,0:00:18.35,Default,,0000,0000,0000,,Polem jest ten nagłówek,
Dialogue: 0,0:00:18.35,0:00:22.13,Default,,0000,0000,0000,,ten akapit, a nawet ten „span",
Dialogue: 0,0:00:22.13,0:00:25.18,Default,,0000,0000,0000,,zrobiony przez nas wcześniej.\NNiektóre pola
Dialogue: 0,0:00:25.18,0:00:29.69,Default,,0000,0000,0000,,są duże, inne małe,\Njedne śródliniowe,
Dialogue: 0,0:00:29.69,0:00:32.84,Default,,0000,0000,0000,,jak „span”, drugie blokowe,
Dialogue: 0,0:00:32.84,0:00:35.71,Default,,0000,0000,0000,,jak „div”. Ale wszystkie\Nsą uważane za pola.
Dialogue: 0,0:00:35.71,0:00:38.76,Default,,0000,0000,0000,,Dlaczego to ma znaczenie?
Dialogue: 0,0:00:38.76,0:00:41.05,Default,,0000,0000,0000,,Bo istnieje tzw. „model pola”;
Dialogue: 0,0:00:41.08,0:00:44.10,Default,,0000,0000,0000,,który właśnie wkleiłam.
Dialogue: 0,0:00:44.10,0:00:46.03,Default,,0000,0000,0000,,Pole każdego elementu ma 4 części:
Dialogue: 0,0:00:46.03,0:00:48.51,Default,,0000,0000,0000,,treść, dopełnienie,
Dialogue: 0,0:00:48.52,0:00:52.36,Default,,0000,0000,0000,,obramowanie i margines.\NZa pomocą CSS zmodyfikujemy
Dialogue: 0,0:00:52.36,0:00:54.44,Default,,0000,0000,0000,,dopełnienie, obramowanie i marginesy.
Dialogue: 0,0:00:54.44,0:00:56.51,Default,,0000,0000,0000,,Zaraz określę, co to jest.
Dialogue: 0,0:00:56.51,0:00:59.18,Default,,0000,0000,0000,,Zacznijmy od marginesu.
Dialogue: 0,0:00:59.18,0:01:01.66,Default,,0000,0000,0000,,To przezroczysty obszar\Nwokół pola,
Dialogue: 0,0:01:01.67,0:01:03.82,Default,,0000,0000,0000,,oddzielający je od innych elementów.
Dialogue: 0,0:01:03.82,0:01:06.74,Default,,0000,0000,0000,,Szerokość marginesu określimy
Dialogue: 0,0:01:06.75,0:01:10.17,Default,,0000,0000,0000,,w naszych ulubionych pikselach.\NŻeby dodać 15 pikseli
Dialogue: 0,0:01:10.17,0:01:12.80,Default,,0000,0000,0000,,do marginesu po każdej stronie
Dialogue: 0,0:01:12.80,0:01:16.80,Default,,0000,0000,0000,,pola z informacjami,\Nnapiszemy „margin: 15 px”.
Dialogue: 0,0:01:16.85,0:01:22.28,Default,,0000,0000,0000,,Widzicie, że coś się zmieniło?
Dialogue: 0,0:01:22.31,0:01:25.03,Default,,0000,0000,0000,,A gdybyśmy chcieli inne marginesy
Dialogue: 0,0:01:25.03,0:01:27.24,Default,,0000,0000,0000,,po każdej stronie?
Dialogue: 0,0:01:27.24,0:01:29.65,Default,,0000,0000,0000,,Większe u góry niż po bokach?\NWpisujemy to
Dialogue: 0,0:01:29.65,0:01:31.57,Default,,0000,0000,0000,,zgodnie z kierunkiem wskazówek zegara,
Dialogue: 0,0:01:31.64,0:01:36.60,Default,,0000,0000,0000,,zaczynając od góry. Góra 15 pikseli,
Dialogue: 0,0:01:36.60,0:01:43.98,Default,,0000,0000,0000,,prawy zero, dolny 10, lewy 6.
Dialogue: 0,0:01:43.98,0:01:46.36,Default,,0000,0000,0000,,Można dla każdej strony\Nzastosować inne właściwości,
Dialogue: 0,0:01:46.36,0:01:48.81,Default,,0000,0000,0000,,ale chcemy zmienić\Ntylko część marginesów.
Dialogue: 0,0:01:48.81,0:01:51.06,Default,,0000,0000,0000,,Dodajmy trochę luzu\Nwokół zdjęcia kota,
Dialogue: 0,0:01:51.08,0:01:56.75,Default,,0000,0000,0000,,z prawej strony, i także…
Dialogue: 0,0:01:56.76,0:02:01.30,Default,,0000,0000,0000,,trochę więcej u dołu.
Dialogue: 0,0:02:01.30,0:02:03.79,Default,,0000,0000,0000,,Pozostałe marginesy\Nmogą być domyślne.
Dialogue: 0,0:02:03.79,0:02:06.74,Default,,0000,0000,0000,,Jest też specjalna wartość marginesu,
Dialogue: 0,0:02:06.74,0:02:08.64,Default,,0000,0000,0000,,która pomoże nam zrobić
Dialogue: 0,0:02:08.64,0:02:11.00,Default,,0000,0000,0000,,coś ciekawego ze stronami.\NPopatrzcie,
Dialogue: 0,0:02:11.00,0:02:14.23,Default,,0000,0000,0000,,dodając „div” wokół całej strony.
Dialogue: 0,0:02:14.23,0:02:17.46,Default,,0000,0000,0000,,Nadam jej ID: „container”.
Dialogue: 0,0:02:17.46,0:02:21.39,Default,,0000,0000,0000,,Wstawmy ten znacznik tutaj,
Dialogue: 0,0:02:21.39,0:02:25.95,Default,,0000,0000,0000,,żeby objął wszystko.\NTeraz dodamy regułę,
Dialogue: 0,0:02:25.95,0:02:29.37,Default,,0000,0000,0000,,by „div” miało szerokość 400 pikseli
Dialogue: 0,0:02:29.37,0:02:33.81,Default,,0000,0000,0000,,i było wyśrodkowane.
Dialogue: 0,0:02:33.81,0:02:37.74,Default,,0000,0000,0000,,Mogłabym określić margin-left: 100px;\N(lewy margines: 100 pikseli),
Dialogue: 0,0:02:37.74,0:02:40.75,Default,,0000,0000,0000,,bo wydaje mi się,\Nże teraz jest pośrodku,
Dialogue: 0,0:02:40.75,0:02:42.58,Default,,0000,0000,0000,,ale u was może nie być,
Dialogue: 0,0:02:42.59,0:02:45.07,Default,,0000,0000,0000,,jeśli macie większą lub mniejszą\Nprzeglądarkę.
Dialogue: 0,0:02:45.08,0:02:46.78,Default,,0000,0000,0000,,Chodzi o polecenie:
Dialogue: 0,0:02:46.86,0:02:49.28,Default,,0000,0000,0000,,„Daj taki margines, jak trzeba,
Dialogue: 0,0:02:49.28,0:02:52.82,Default,,0000,0000,0000,,równy po obu stronach”.
Dialogue: 0,0:02:52.82,0:02:56.34,Default,,0000,0000,0000,,To właśnie robi „margin: auto;”.
Dialogue: 0,0:02:56.34,0:02:57.84,Default,,0000,0000,0000,,Sposób, by wyśrodkować „div”.
Dialogue: 0,0:02:57.84,0:03:01.47,Default,,0000,0000,0000,,Gdy już jest pośrodku,
Dialogue: 0,0:03:01.47,0:03:04.01,Default,,0000,0000,0000,,wyróżnijmy je jeszcze bardziej,
Dialogue: 0,0:03:04.02,0:03:06.30,Default,,0000,0000,0000,,dodając obramowanie.
Dialogue: 0,0:03:06.33,0:03:10.33,Default,,0000,0000,0000,,Użyjemy własności CSS.
Dialogue: 0,0:03:10.36,0:03:13.48,Default,,0000,0000,0000,,Zróbmy obramowanie czerwone.
Dialogue: 0,0:03:13.48,0:03:15.28,Default,,0000,0000,0000,,Piszemy: „border” i musimy
Dialogue: 0,0:03:15.28,0:03:16.94,Default,,0000,0000,0000,,określić trzy cechy:
Dialogue: 0,0:03:16.94,0:03:19.78,Default,,0000,0000,0000,,grubość, styl i kolor.
Dialogue: 0,0:03:19.78,0:03:23.47,Default,,0000,0000,0000,,Dla cienkiej wpiszę „1 piksel”,
Dialogue: 0,0:03:23.47,0:03:25.63,Default,,0000,0000,0000,,ma być prosta, niewyszukana,
Dialogue: 0,0:03:25.64,0:03:28.97,Default,,0000,0000,0000,,wpiszemy więc „solid”,\Na żeby stała się czerwona…
Dialogue: 0,0:03:28.97,0:03:31.65,Default,,0000,0000,0000,,wyświetlę pole wyboru koloru.
Dialogue: 0,0:03:31.65,0:03:37.77,Default,,0000,0000,0000,,Ładna czerwień.\NDobrze. Tak, jak marginesy,
Dialogue: 0,0:03:37.77,0:03:39.92,Default,,0000,0000,0000,,możemy określić obramowanie
Dialogue: 0,0:03:39.92,0:03:42.79,Default,,0000,0000,0000,,np. tylko z jednej strony.
Dialogue: 0,0:03:42.80,0:03:46.08,Default,,0000,0000,0000,,Jeśli chcemy grubą fioletową\Nkrawędź u góry,
Dialogue: 0,0:03:46.08,0:03:49.24,Default,,0000,0000,0000,,dodamy właściwość„border-top:
Dialogue: 0,0:03:49.25,0:03:56.54,Default,,0000,0000,0000,,10px solid purple;”. Super!\NTeraz dodajmy ramkę
Dialogue: 0,0:03:56.54,0:03:59.78,Default,,0000,0000,0000,,i pobawmy się jeszcze
Dialogue: 0,0:03:59.78,0:04:02.22,Default,,0000,0000,0000,,stylami krawędzi. Przejdźmy do kota.
Dialogue: 0,0:04:02.22,0:04:07.60,Default,,0000,0000,0000,,Niech będzie 6 pikseli,
Dialogue: 0,0:04:07.60,0:04:12.98,Default,,0000,0000,0000,,kolor „groove red”.\NNie podoba mi się.
Dialogue: 0,0:04:12.98,0:04:16.40,Default,,0000,0000,0000,,Może podwójna?
Dialogue: 0,0:04:16.40,0:04:19.18,Default,,0000,0000,0000,,Spróbujmy ramkę.\NTak, wygląda to jak ramka!
Dialogue: 0,0:04:19.18,0:04:22.66,Default,,0000,0000,0000,,Może dodamy krawędzie
Dialogue: 0,0:04:22.66,0:04:25.98,Default,,0000,0000,0000,,do pola „official info”?\NNiech będzie· „border”...
Dialogue: 0,0:04:25.98,0:04:28.40,Default,,0000,0000,0000,,nie za grubo, dwa piksele.
Dialogue: 0,0:04:28.40,0:04:31.18,Default,,0000,0000,0000,,Linia kropkowana. Kolor…
Dialogue: 0,0:04:31.20,0:04:35.96,Default,,0000,0000,0000,,delikatna szarość. Albo nie,
Dialogue: 0,0:04:35.96,0:04:38.23,Default,,0000,0000,0000,,linia przerywana. O to mi chodziło.
Dialogue: 0,0:04:38.24,0:04:40.96,Default,,0000,0000,0000,,Jednak w tych krawędziach
Dialogue: 0,0:04:40.96,0:04:42.44,Default,,0000,0000,0000,,coś mnie trochę martwi.
Dialogue: 0,0:04:42.44,0:04:45.02,Default,,0000,0000,0000,,A raczej - bardzo.
Dialogue: 0,0:04:45.02,0:04:48.88,Default,,0000,0000,0000,,Widzicie, jak tekst pojawił się
Dialogue: 0,0:04:48.88,0:04:51.63,Default,,0000,0000,0000,,przy samym obramowaniu?
Dialogue: 0,0:04:51.63,0:04:53.44,Default,,0000,0000,0000,,I przy oficjalnych informacjach?
Dialogue: 0,0:04:53.44,0:04:56.52,Default,,0000,0000,0000,,Źle to wygląda,
Dialogue: 0,0:04:56.52,0:04:59.74,Default,,0000,0000,0000,,poza tym tekst jest nieczytelny.
Dialogue: 0,0:04:59.74,0:05:02.20,Default,,0000,0000,0000,,Tu przyda się dopełnienie\N(ang. padding).
Dialogue: 0,0:05:02.20,0:05:03.78,Default,,0000,0000,0000,,Jeśli elementy mają kolor tła
Dialogue: 0,0:05:03.78,0:05:05.39,Default,,0000,0000,0000,,lub obramowanie, potrzebujemy
Dialogue: 0,0:05:05.39,0:05:07.63,Default,,0000,0000,0000,,dopełnienia, żeby był odstęp
Dialogue: 0,0:05:07.63,0:05:10.09,Default,,0000,0000,0000,,między treścią a krawędziami.
Dialogue: 0,0:05:10.11,0:05:13.30,Default,,0000,0000,0000,,Zróbmy dopełnienie. Niech będzie…
Dialogue: 0,0:05:13.32,0:05:17.98,Default,,0000,0000,0000,,15 pikseli wokoło.
Dialogue: 0,0:05:17.99,0:05:21.24,Default,,0000,0000,0000,,Znacznie lepiej! Dodajmy też
Dialogue: 0,0:05:21.24,0:05:23.37,Default,,0000,0000,0000,,dopełnienie do informacji,
Dialogue: 0,0:05:23.37,0:05:27.88,Default,,0000,0000,0000,,może 6 pikseli. Pięknie.
Dialogue: 0,0:05:27.88,0:05:29.36,Default,,0000,0000,0000,,Obrazom nie jest to potrzebne,
Dialogue: 0,0:05:29.36,0:05:31.00,Default,,0000,0000,0000,,ponieważ dobrze wyglądają
Dialogue: 0,0:05:31.01,0:05:33.85,Default,,0000,0000,0000,,w takich ramkach. I gotowe:
Dialogue: 0,0:05:33.85,0:05:36.18,Default,,0000,0000,0000,,model pola. Margines, obramowanie,
Dialogue: 0,0:05:36.18,0:05:38.36,Default,,0000,0000,0000,,dopełnienie. Użyłam dużych wartości
Dialogue: 0,0:05:38.36,0:05:40.39,Default,,0000,0000,0000,,i jaskrawych kolorów dla przykładu,
Dialogue: 0,0:05:40.39,0:05:42.94,Default,,0000,0000,0000,,ale strona wygląda tandetnie.
Dialogue: 0,0:05:42.96,0:05:44.27,Default,,0000,0000,0000,,Żeby była elegancka
Dialogue: 0,0:05:44.27,0:05:46.69,Default,,0000,0000,0000,,i wyrafinowana,\Nstosujcie subtelniejsze
Dialogue: 0,0:05:46.69,0:05:49.12,Default,,0000,0000,0000,,odcienie bieli i szarości.
Dialogue: 0,0:05:49.12,0:05:50.87,Default,,0000,0000,0000,,Korzystajcie z tych właściwości.
Dialogue: 0,0:05:50.87,0:05:52.71,Default,,0000,0000,0000,,Wywierają wpływ
Dialogue: 0,0:05:52.00,0:05:53.72,Default,,0000,0000,0000,,na wygląd i styl strony.