11 niezbędnych tricków CSS, które powinien znać każdy webmaster

Ten artykuł jest przeznaczony głównie dla początkujących webmasterów. Znajdziesz tutaj kilka bardzo przydatnych reguł, których będziesz używać w większości projektów.

1. Wyśrodkowanie w poziomie

Wyśrodkowanie elementu jest czasami trudniejsze, niż mogłoby się wydawać. Różne elementy reagują na różne reguły CSS. Poniżej znajdziesz fragmenty kodu, które pomogą Ci wyśrodkować każdy element.

Wyśrodkowanie tekstu

text-align: center;

Wyśrodkowanie elementu blokowego

margin: 0 auto;

Wyśrodkowanie absolutne

<section class="parent">
   <div class="child">

   </div>
</section>
.parent {
   position: relative;
}

.child {
   position: absolute;
   left: 50%;
   transform: translate(-50%, 0%);
}

2. Wyśrodkowanie w pionie

Wyśrodkowanie jednej linii

li {
   height: 50px;
   line-height: 50px; /* wartość równa wysokości elementu */
}

Wyśrodkowanie absolutne

<section class="parent">
   <div class="child">

   </div>
</section>
.parent {
   position: relative;
}

.child {
   position: absolute;
   top: 50%;
   transform: translate(0%, -50%);
}

3. Stany linków

Style dla różnych stanów linków są często pomijane przed webdeveloperów. Ich brak może utrudnić użytkownikowi poruszanie się po stronie dlatego warto o nich pamiętać. Pseudoklasa :link odnosi się do wszystkich linków, które nie zostały jeszcze kliknięte. Pseudoklasa :visited odnosi się do linków, które zostały już kliknięte.

a:link { color: #2A2F8B; }
a:visited { color: #551a8b; }

4. Wybranie elementu bez użycia klasy lub identyfikatora

Dzieci elementu

Ta reguła doda kolor czerwony tylko tym odnośnikom, które są dziećmi znacznika footer.

footer > a {
   color: red;
}

Konkretny element

Ta reguła pogrubi czcionkę tylko w drugim elemencie li listy ul.

ul li:nth-child(2) {
    font-weight: bold;
}

Pierwszy element danego typu

Ten kod ustawi wielkość czcionki pierwszego paragrafu znalezionego wewnątrz article.

article p:first-of-type {
   font-size: 20px;
}

Ostatni element danego typu

Ten kod ustawi wielkość czcionki ostatniego paragrafu znalezionego wewnątrz article.

article p:last-of-type {
   font-size: 20px;
}

5. Łatwe dopasowanie obrazka do kontenera

Czasami trzeba ustawić obrazek tak by dopasował się do szerokości kontenera, ale nie przekroczył własnych rozmiarów. Jest na to bardzo prosta reguła.

img {
    max-width:100%;
    height:auto;
}

Jeśli chcesz by obrazek rozciągnął się na cały kontener to zamiast max-width użyj width.

6. Efekt hover

Efekt hover to efekt, który powstaje po najechaniu i zjechaniu kursorem z elementu.

1

7. box-sizing: border-box

Ta reguła rozwiązuje problem, którym jest dodanie paddingu do wielkości kontenera, zamiast umieszczenia go w środku kontenera i niezmieniania rozmiarów.

1

8. Dodanie ikony jako punkt listy

Dodanie ikony Font Awesome zamiast zwykłego kółka może często urozmaicić listę. Zamiast \f058 możesz wpisać unicode dowolnej ikony. Unicode znajdziesz tutaj.

1

9. Wielkość liter

Wielkość liter w tekście możemy kontrolować przy pomocy text-transform.

1

10. Wysokość równa ekranowi

Jeśli chcesz, by sekcja posiadała wysokość równą ekranowi to możesz to zrobić używając jednostki vh.

section {
   height: 100vh;
}

Analogicznie jeśli chcesz rozciągnąć sekcję na połowę ekranu, to możesz napisać:

section {
   height: 50vh;
}

11. Reset stylów przeglądarki

Przeglądarki mają własne style CSS, według których wyświetlają strony. Często te style różnią się między przeglądarkami. Nam jednak zależy, by strona wyglądała identycznie na wszystkich przeglądarkach. Dlatego w swoich projektach powinieneś zawsze resetować domyślne style przeglądarki. Na tej stronie znajdziesz kod CSS, który resetuje style. Musisz go jedynie wkleić na początku swoich stylów CSS.

Spodobał Ci się artykuł? Dzięki naciśnięciu serduszka poniżej będę wiedział jakie treści tworzyć. Dzięki! :)

33 ilustracje wykonane w czystym CSS Jak zrobić preloader? Korona Ziemi z WebSlides – jak tworzyć prezentacje?
View Comments
  • Jest jeszcze jeden ważny trick. Clear dla elementów pływających, gdy dla kontenerów damy opływanie to nie mamy wtedy określonej wysokości dla kontenera nadrzędnego, a nie muszę mówić jaki to dla początkującego problem jak mu nagle główny kontener znika z podglądu.

  • Wyśrodkowanie absolutne – a nie lepiej
    .elementNaSrodku {
    position: absolute;
    margin-left: 0px;
    margin-right: 0px;
    left: 0;
    right: 0;
    }

    ?

  • Reset? Przecież o wiele lepsza jest normalizacja!
    http://blog.end3r.com/131/normalize-css-nie-resetuj-normalizuj/

    • Myślę, że zależy to głównie od rodzaju projektu. Nowoczesne layouty nie zawsze wyświetlają dany rodzaj nagłówka w ten sam sposób na całej stronie. W tym przypadku według mnie lepiej zacząć od resetu.

      Jest to też kwestia preferencji Webmastera 🙂

    • Normalizacja? W dobie samodzielnych komponentów wszystkie style globalne są ble 😉

      • Dobrze, gdy elementy da się łatwo zastosować w innym projekcie (BEM etc)

        Oprócz nich trzeba jednak jeszcze zbudować serwis (a nie same pojedyncze podstrony) – część treści będzie przecież generowana dynamicznie i na pewnym poziomie trzeba je potraktować globalnie (typografia, box-sizing itp.)

        • Czy ja wiem?

          body można potraktować jako komponent – strona wszak też jest komponentem. Typografia może być również zamknięta w komponencie (chociaż to ciut naciągane).

          Zresztą: komponenty mogą przecież mieć różną typografię – od fontu, po światło itd.

          • W sumie ciekawe podejście do tematu 😀

            Z tym zróżnicowaniem typografii lepiej wg mnie nie przesadzić, żeby całościowo serwis był spójny, a nie zbiorem przypadkowo rozmieszczonych komponentów, które twórca akurat miał gotowe na dysku 😀

            + przy większej ilości web-fontów może stać się to bardzo kosztowny zabieg

          • Akurat osobiście jestem raczej wyznawcą „native font stack” 😉

            Może uściślę o co mi chodziło z typografią: ostatnio myślę w kategoriach atomic designu, więc dla mnie typografia stanowi atom. Atom, który powinien wchodzić w skład KAŻDEGO większego organizmu (komponentu). Owszem, typografia może być mixinem albo configiem i będzie taka sama dla wszystkich komponentów w danej witrynie, niemniej umieszczenie tych stylów we wszystkich komponentach pozwala na o wiele większą elastyczność.

          • W sumie zastanowil mnie ostatnio ten problem.
            No wiec:
            Mam komponent ktory ma jakis tytul. Dla uspojnienia wyglądu dla portalu/apki powinien on jakoś pobierać wspólne style dla np tytułów. Więc albo go ostyluję poprzez jakieś globalne tagi hX (eee…) albo poprzez wspólną klasę. Czyli powinny być jakieś style per komponent, ale też klasy globalne nadające wygląd danym typom elementów.
            Wychodzi więc, że co byśmy nie robili, to i tak przy przenoszeniu między projektami nasze komponenty będą zależne od „srodowiska” do którego trafią. No bo w danym projekcie klasy tytułów mogą być ala „.title”, a w innym „.module-title”. Ewentualnie dany komponent miał by swoja BEMowska klasę „.module__title” która by extendowała albo używała mixina ze stylami dla tytułów. Tak czy siak gdzieś tutaj zatraca się automatyzacja przenoszenia. Może jakieś ujednolicenie nazw klas dla projektów by rozwiązało sprawę?

          • W sumie ostatnio ten problem można rozwiązać bez zmieniania ani linijki kodu w naszych komponentach BEM-owych. Wystarczy użyć zmiennych w CSS i przy ich pomocy przekazywać konfigurację komponentom.