Reset CSS

W tej części kursu CSS poznamy technikę zwaną reset CSS. Nie jest ona niczym skomplikowanym, lecz może przydać się nam podczas projektowania strony internetowej.

Jak wiemy, różne elementy HTML posiadają w sobie czasami różne domyślne właściwości CSS, narzucone przez różne przeglądarki internetowe.

Przykładowo:

czcionka tekstu umieszczona w elemencie - b - jest pogrubiona
czcionka tekstu umieszczona w elemencie - i - jest pochylona
  • elementy listy - ul - posiadają wyróżnik oraz marginesy
  • elementy listy - ul - posiadają wyróżnik oraz marginesy
  • elementy listy - ul - posiadają wyróżnik oraz marginesy

element - p - posiada domyślny górny i dolny margines zewnętrzny

Powyżej zostały przedstawione przykładowe elementy HTML, które posiadają w sobie różne domyślne właściwości CSS (pogrubiona czcionka, wyróżniki listy itd.).

Technika reset CSS pozwala na zresetowania wszystkich domyślnych cech wyglądu, wszystkich elementów HTML. Wystarczy umieścić na początku kodu pliku CSS następujący zapis:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display:block;
}

body {
  line-height:1;
}

ul, ol {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content:'';
  content:none;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

Rezultat:

czcionka tekstu umieszczona w elemencie - b - nie jest już pogrubiona
czcionka tekstu umieszczona w elemencie - i - nie jest już pochylona
  • elementy listy - ul - nie posiadają już wyróżnika oraz marginesów
  • elementy listy - ul - nie posiadają już wyróżnika oraz marginesów
  • elementy listy - ul - nie posiadają już wyróżnika oraz marginesów

element - p - nie posiada domyślnych marginesów zewnętrznych

W następnej części kursu CSS zajmiemy się budową rozwijanego poziomego menu CSS.