CSS: Kaskadowość

0:00Część tej lekcji będziemy omawiać Kaskada CSS a Kaskada.

0:04Jest to mechanizm który tak naprawdę

0:06składa się z wielu różnych cech języka CSS.

0:11Przede wszystkim chodzi o to jak CSS rozwiązuje konflikty

0:16gdy są takie same właściwości modyfikowane z różnymi wartościami z różnych miejsc.

0:23Oczywiście nie da się aplikować do jednego

0:27elementu zarówno koloru czerwonego jaki koloru zielonego jakby

0:31CSS domyślnie nie łączy tych dwóch kolorów bo nie byłoby to zdecydowanie intuicyjne

0:37więc Kaskada gość polega przede wszystkim na tym że jeżeli

0:40mamy element HTML owy i celujemy go w jakiś tam sposób.

0:46Przykładowo daliśmy mu sześć gemów szerokości oraz 8 wysokości i.

0:53Tutaj jest kolor Yellow Green

0:55co w przypadku jeżeli ustawiamy dwa razy grant na różne wartości.

1:00Spróbujmy tutaj red.

1:03Napiszemy.

1:05No i widzimy że ten Yellow Green został zignorowane czyli ta wartość niżej

1:11faktycznie wygrała nad tą wartością która tutaj się znalazła.

1:16Niektórych wartości CSS owe są dziedziczone czyli jeżeli np.

1:20ustawiły na badanie

1:22jakiś kolor możemy wziąć na przykład ten Yellow Green tak tylko na chwilę.

1:29Beck front.

1:31Green.

1:39Tutaj jest literówki przez 2 l.

1:43I usunięty z tego bossa Grand.

1:47To widzimy że faktycznie ten sam boks też jest jasno zielony.

1:52Czasem może to wynikać z niektórych

1:54właściwości że Domyślną wartością jest kolor np.

1:58transparent czyli przezroczyste.

2:01Natomiast w przypadku funtów czyli rozmiaru czcionki.

2:06Te wartości będą się do pewnego momentu.

2:11Przekazywać w górę.

2:13Czyli jeśli np.

2:14napady tutaj w Polsce.

2:18Ustaliliśmy.

2:20Front familii na lato.

2:22To znaczy że wszystkie elementy wewnątrz

2:25tego bandy czyli w tym przypadku nasz bokser otworzymy sobie narzędzia

2:30deweloperskie no to też będą miały ten front Family ustawiony na lato.

2:37Możemy to faktycznie podejrzeć w dyskusjach.

2:40To są właściwości które bezpośrednio na elemencie daliśmy poprzez klasę Box.

2:44Tutaj będą elementy nadane bezpośrednio w stylach i linowych.

2:49Część z tych informacji jest dziedziczone więc wartości mogą pochodzić również z

2:57elementów nadrzędnej względem naszego elementu który akurat stosujemy.

3:00Elementy które są niżej w kodzie źródłowym

3:04będą miały przewagę nad tymi które są wyżej.

3:07I jeśli jest sytuacja że dwa różne sektory sektory czyli tak naprawdę.

3:13Bloki kodu które.

3:16Deklaruje się za pomocą.

3:19Tego ciągu znaków który właśnie nazywa się elektorem.

3:22Tutaj postawimy dwa drzewa no to do tego dochodzi jeszcze.

3:28O specyfice tej będziemy mówić w osobnym kursie natomiast jeżeli tutaj postawimy

3:32grunt na czerwone i piszemy to w tym momencie ta zmiana się już nie

3:39zaopiekowała pomimo tego że nasz kod źródłowy jest niżej to pisaliśmy tutaj

3:43nową regułę ale ta reguła nie zaopiekowała się do tego elementu do tego boksera

3:49ponieważ specyfice tego elementu jest wyższe niż dla tego sektora.

3:56I tutaj też widzimy to w narzędziach

3:57deweloperskich że jest sektor D który ma ustawione jakieś style.

4:01Natomiast sektor kropka boks wygrywa w

4:06kontekście ważności i po prostu te style są atakowane.

4:09To jest taki bardzo podstawowy mechanizm CSS natomiast warto o nim pamiętać bo

4:14często zdarza się tak że mamy równe specyfice.

4:17I faktycznie kolejność kodu źródłowego czy

4:21właściwości wpływa na to który element się wędruje czy nie.

4:25No i tak jak wspominałem w poprzedniej lekcji jest jeden globalny nam spis dla

4:30CSS a to znaczy jeżeli nawet stworzyliśmy sobie w pliku miejsce sesji jakieś style

4:36to one tak czy siak będą przez ten sam mechanizm.

4:40Czyli jeśli Tutaj ustawiamy Belgrad na ciemny.

4:44Lecz później w naszym kodzie źródłowym bo

4:46faktycznie ten film jest niżej niż ten element CSS.

4:53To kolor ustawiony w tym miejscu będzie

4:57wygrywał ponieważ jest dalej w kodzie źródłowym a ma takie samo specjalisty.

5:01Dla niektórych może się to wydawać dosyć

5:03intuicyjne natomiast to się jeszcze troszkę komplikuje w przypadku media queer

5:09IS które tak naprawdę mają swoje własne specyfiki i w zależności

5:13od tego gdzie je wystawimy niekoniecznie będzie to miało znaczenie

5:17chyba że faktycznie media będą miały tą samą wagę w kontekście swojej siły.

5:23Tak bowiem

5:24to są podstawy Kaskada właśnie CSS czyli

5:27takie fundamentalne elementy czy mechanizmy z których CSS

5:32korzysta na co dzień i dlatego jest to pierwsza lekcja w tym

5:35kursie ponieważ bez zrozumienia tego ciężko będzie zrozumieć inne efekty

5:41uboczne czy zachowania CSS a przy bardziej skomplikowanych aspektach.

5:46W związku z czym ja polecam tutaj pobawić

5:49się kaskady nowością dziedziczenie i specyfice IT ale w następnej akcji

5:54czyli po prostu próbować jak elementy będą się aplikować.

5:58Jeśli będziemy po prostu przekładać na szkodę z jednego miejsca na drugie czyli

6:02po prostu kopiuj i wklej w inne miejsce w naszym koncie jeżeli masz własny projekt

6:08możesz zrobić taki eksperyment i sprawdzić czy twój kot będzie zachowywał się inaczej

6:14w zależności od tego gdzie dany sektor ustawić.

6:17Jeśli tak to jest duże prawdopodobieństwo

6:19na to że coś z tym CSS jest nie tak i być może niektóre patenty w kontekście CSS

6:27oczywiście czy architektury będą przydatne dla ciebie

6:31aby uniknąć problemów z zarządzaniem CSS em na większej skali.

6:36W związku z czym zapraszam Cię do

6:38następnej lekcji w której będziemy mówili o specyfice.