Poprawny szablon dla Joomla. cz. III

Rozpoczniemy od czystego szablonu, bez deklaracji definiujących rozmieszczenie (układ), zawierającego jedynie właściwości typograficzne. Czysty szablon pomoże przyspieszyć proces projektowania witryny. To nie jest produkcyjny plik CSS. Wszystkie style nie muszą być zdefiniowane, ale gdy zostanie wykorzystany, trzeba je będzie, oczywiście, usunąć.

Ten czysty plik CSS ma kilka właściwości:

Skrótowy zapis właściwości CSS

Istnieją możliwości skróconego zapisu każdego stylu. Kiedy już określisz właściwości w regule, stwórz skróconą wersję i usuń wersje długie. Składnia jest następująca:

font: font-size |font-style | font-variant | font-weight | line-height | font-family

Oto przykład:

font-size:100%;
font-family:Arial,Helvetica,sans-serif;
font-style:italic;
font-weight:bold;
line-height:130%em;

I zapis skrócony zamiast powyższego:

font: 100%/130% italic bold Arial,Helvetica,sans-serif;

Trzy właściwości: |font-style | font-variant | font-weight | można zapisać w dowolnej kolejności.

Więcej o składni skróconych zapisów czytaj w: An Introduction to CSS shorthand properties lub po polsku w opracowaniu kurs css, skrótowy zapis właściwości (Patryk 'yarpo' Jar)

Ogólne wyzerowanie

Na początku tego pliku CSS dla Joomla zastosowano kilka stylów, które ustawiają wszystkim elementom pewne zerowe właściwości (później ustawimy je ponownie według przyjętych przez nas, a nie przeglądarki kryteriów) Pierwsze style to:

* {
margin: 0;
padding: 0;
}
 
body {........ 
font-size: 76.1%;........
}

Wszystkim elementom nadawany jest zerowy margines i zerowe dopełnienie oraz ustalany jest rozmiar czcionki na 76.1%. To ustawienie zapewnia, że w dużej grupie przeglądarek uzyskasz ten sam albo zbliżony rozmiar czcionek. Wszystkie rozmiary czcionek w następnych regułach będą określane w emach. Skorzystaj z poniższego odnośnika, aby poznać efekt eksperymentów typograficznych, które przeprowadził Owen Briggs:

An experiment in typography at The Noodle Incident (Owen Briggs)

Znaczniki nagłówków i tytułów w Joomla CSS

Niekiedy będę wyłączać tytuły Joomla! i stosować w zawartości znaczniki H1/H2. Zwykle czynię tak, by uzyskać premie SEO. Bez względu jednak na konsekwencje dla pozycjonowania, zdefiniuję właściwości dla tytułów Joomla w grupie z deklaracjami właściwości znaczników Hx, na przykład:

h1,.componentheading {...

To moja osobista preferencja, ty na pewno możesz rozdzielić reguły dla znaczników Hx i tytułów Joomla!.

display: none;
height:0;
text-indent: -3000px;

Zaokrąglone narożniki w Joomla

Na końcu czystego arkusza CSS jest kod umożliwiający uzyskiwanie w Joomla zaokrąglonych narożników. To ta sama technika, jaka stosowana jest na joomla.org. i wymaga modułu oznaczonego w pliku index.php stylem "-3".

Już? Gotowe? Tak. Tutaj jest czysty szablon CSS. Uwaga: Ten arkusz nie zawiera żadnych reguł określających układ strony. Rozpatrzymy tę kwestię później.

Ten czysty plik szablonu Css dla Joomla jest bezpłatny, dla Ciebie, bierz i stosuj. Jeżeli go wykorzystasz, może prześlesz mi pocztą e-mail Twój projekt?

Teraz zapewne chcesz wiedzieć, jak korzystać z tego czystego arkusza stylów? Dobrze. Gdy już określisz reguły dla stylów, w Twój pliku zapewne znajdą się puste, niezdefiniowane style. Skorzystaj z poniższego narzędzia, aby się ich pozbyć. Bądź uważny. Najpierw przetestuj je, aby poznać sposób i skutki działania.

Formatuj i Optymalizuj CSS

Tłum. Stefan Wajda [aka zwiastun]
Źródło: Tutorial 4: A Blank Template CSS file for Joomla
Przedruk tylko za zgodą autora i redakcji