zrobić - Kurs HTML i CSS
Pozycjonowanie CSS / Obcinanie {clip}...obraz o wymiarach 200 pikseli na 200 pikseli, i chcemy wyciąć jego górny lewy kwadratowy fragment o wymiarach 50 pikseli na 50 pikseli, możemy to zrobić następująco: "clip: rect(0, 50px, 50px, 0)". Ta deklaracja clip określa obszar, który ma być widoczny, a wartości to kolejno: górny margines, prawy margines, dolny margines i lewy margines. W tym przypadku, przycinamy górny lewy fragment o wymiarach 50px na 50px.
- Drukowanie CSS / Rozmiar papieru @page {size}
...fragment kartki papieru. Użytkownik może co prawda samodzielnie zmienić orientację papieru przed uruchomieniem wydruku, ale nie wszyscy potrafią to zrobić. W takiej sytuacji wygodniej będzie podpowiedzieć drukarce, aby użyła poziomej orientacji papieru (tzw. krajobraz), dzięki czemu zdjęcie będzie można oprawić w ramkę i powiesić na ścianie 😉 W większości domowych drukarek domyślnym formatem papieru jest A4. Jednak często posiadają one uniwersalny podajnik, do którego można załadować...
- Menu w CSS / Rozdzielenia struktury i prezentacji dokumentu
...100 podstron z artykułami. Na każdej podstronie zostało wstawione menu nawigacyjne. Jeśli teraz zechcesz zmienić jego wygląd, co będzie lepiej zrobić: modyfikować ręcznie 100 plików, czy dokonać zmiany tylko w jednym - zewnętrznym arkuszu stylów? No dobrze, stronę można wykonać w technologii ramkowej lub korzystając ze skryptów na serwerze, takich jak PHP - wtedy również będzie wystarczyło zmienić tylko jeden plik. Są jednak przynajmniej dwa dodatkowe powody, dla których czyste...
- Układ wielokolumnowy CSS / Liczba kolumn {column-count}
...Aby podzielić stronę HTML na kolumny za pomocą właściwości CSS column-count, należy przypisać liczbę kolumn do odpowiedniego kontenera. Jak zrobić dwie kolumny tekstu w HTML? Aby stworzyć dwie kolumny tekstu w HTML przy użyciu właściwości CSS column-count, można przypisać wartość 2 do liczby kolumn. Na przykład: .tekst { column-count: 2 }.
- Menu w CSS / Pionowe menu
...w menu zgodnie z normalnym formatowaniem listy, czyli w pionie. Domyślny sposób prezentacji oczywiście nie jest zadowalający. Pierwsze co musimy zrobić, to usunąć wyróżniki punktów wykazu (tzw. markery) oraz zniwelować niepotrzebny margines z lewej strony: ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } W efekcie uzyskamy: Czcionki Tekst Tło Marginesy Obramowanie W niektórych przeglądarkach nie jest konieczne wstawienie wszystkich powyższych...
- Układ elastyczny CSS / Wyrównanie wiersza {align-items, align-self}
...pozwala ustawić w różny sposób każdy z elementów kontenera elastycznego. Jeżeli jednak wszystkie mają być wyrównane tak samo, korzystniej będzie zrobić to dla nich wspólnie. Pytania i odpowiedzi {align-items} Co robi "align-items"? W kontekście flexbox CSS, właściwość align-items służy do określenia, jak elementy mają być wyśrodkowane wzdłuż osi poprzecznej (prostopadłej do głównej osi). Możliwe wartości to "flex-start" (domyślne, wyśrodkowanie u góry), "flex-end" (wyśrodkowanie u...
- CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">
...że w pliku *.html może się znajdować tylko jeden znacznik nagłówka dokumentu. Zatem nie tworzymy nowego, tylko używamy już istniejącego! Jak zrobić zewnętrzny CSS? Zewnętrzny arkusz stylów można utworzyć przy pomocy dowolnego edytora CSS albo jeszcze lepiej przy pomocy edytora HTML z wbudowaną obsługą również języka CSS. Arkusz stylów zapisujemy na dysku w pliku z rozszerzeniem *.css, a następnie możemy go dołączyć do dokumentu HTML za pomocą odpowiedniego znacznika w sekcji...
- CSS dla zielonych / Arkusz stylów CSS
...arkuszy stylów na stronach internetowych, zobacz rozdziały: Wewnętrzny arkusz stylów, Zewnętrzny arkusz stylów. Pytania i odpowiedzi Jak zrobić style w CSS? W tym celu można się posłużyć edytorem CSS albo jeszcze lepiej edytorem HTML z wbudowaną obsługą również języka CSS. Utworzone style zapisujemy w dowolnym pliku z rozszerzeniem *.css, który stanowi tzw. arkusz stylów, a następnie dołączamy go do dokumentu HTML [zobacz: Wstawienie arkusza stylów]. Czym są i do czego służą...
- CSS dla zielonych / Wyrównanie tekstu CSS {text-align}
...akapitach. Dzięki temu będzie on bardziej czytelny dla użytkownika. W pojedynczym dokumencie HTML może się znajdować wiele oddzielnych akapitów. Co zrobić, aby tekst w każdym z nich był ułożony tak samo? Dzięki możliwościom jakie dają style CSS, nie musimy tego robić dla każdego akapitu osobno. Wystarczy że w arkuszu CSS wpiszemy następującą regułę stylów: p { text-align: wyrównanie; } Dzięki temu tekst we wszystkich akapitach na stronie zostanie wyrównany w określony sposób: left...
- Dziedziczenie stylów CSS / Wymuszenie dziedziczenia {...: inherit}
...nie zawsze jest to możliwe. Wyobraźmy sobie, że np. wszystkim znacznikom pogrubienia w akapicie nadaliśmy jakiś kolor. Ale jednocześnie chcielibyśmy zrobić jeden wyjątek: jeśli pogrubienie znajduje się wewnątrz pochylenia, to powinno mieć kolor taki jak cały akapit. Nie możemy zatem w prosty sposób usunąć koloru, bo wtedy utracilibyśmy go dla wszystkich elementów pogrubienia, a nie tylko w tym jednym, o który nam chodzi. Właśnie na taką okoliczność została stworzona wartość inherit, którą...