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