#28. Formatowanie deklaracji CSS

Wartość deklaracji – cztery części

Przykłady które prezentowałem na moim blogu, oparte były już na takich deklaracjach czterowartościowych. Np. właściwość:Powyższa deklaracja to przykład tzw. skróconej deklaracji CSS. Nazwa dla niektórych właściwości odnosi się też do innej kwestii: kierunku podawania wartości. Zdarza się nieraz tak, że potrzebujemy zadeklarować różne wartości dla np. paddingów z różnych stron danego elementu. Jeśli chcemy, żeby górny padding wynosił 10 pikseli, prawy 5 pikseli i dolny 20 pikseli, to moglibyśmy to osiągnąć za pomocą trzech linii:Dzięki deklaracji czterowartościowej możemy zapisać powyższą deklarację tak jak poniżej:Zauważ, jeśli mamy 4 wartości, to kierujemy się zasadą ruchu wskazówek zegara: top – right – bottom – left. Pierwsza wartość odnosi się do górnej krawędzi, druga do prawej, trzecia do dolnej a czwarta do lewej. Poznane ułatwienie zapisywania deklaracji, jak i dwie następne skrócone deklaracje, które zobaczycie w kolejnych krokach, używamy również dla takich właściwości jak: margin oraz border-radius Spójrz na przykład. Pozmieniaj wartości i zobacz jak łatwo sobie ułatwić robotę!

laughing-cray-pon3z

laughing-cray-pon3z by danielminschinski

Wartość deklaracji – dwie części

Jeżeli w skróconej wersji deklaracji we właściwości mamy podane dwie wartości, to tworzymy kod z zasadą góra + dół i prawo + lewo, tzn. pierwsza wartość odnosi się do górnej i dolnej krawędzi, a druga wartość do prawej i lewej. Przykładowo, jeżeli chcemy aby margines górny i dolny wynosił 30px, natomiast prawy i lewy wynosił 20px, to możemy zapisać deklarację w następujący sposób:

laughing-cray-pon3z

laughing-cray-pon3z by danielminschinski

Wartość deklaracji – trzy części

Ostatnim wariantem deklaracji, który przedstawiam to podanie trzech wartości. Zasada jest następująca: góra, prawy + lewy, dół. Tzn. pierwsza wartość odnosi się do kierunku górnego, druga do prawego i lewego, a trzecia do dolnego. Przykładowo, jeżeli chcemy aby margines górny wynosił 30px, prawy i lewy wynosił 50px, a dolny 60px, to możemy zapisać deklarację w następujący sposób:

compassionate-lamport-nwv2w

compassionate-lamport-nwv2w by danielminschinski

Dobrnęliśmy do końca z kategorią “Zabawa z CSS” z “Planu nauki Frontend Developera”. Wszystkie materiały z tej kategorii które planowałem przełożyć na bloga udało się stworzyć – jestem dumny z siebie😁💪 

Zostało ćwiczenie do wykonania – strona wizytówka. Dla mnie to kolejne zadanie. Dla Was w najbliższym czasie😉 Następnie przedstawię Wam kolejne rozszerzenie “Planu nauki Frontend Developera”

🔽Zapraszam do subskrypcji🔽

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!