Reset CSS
- Data publikacji
- Ostatnio edytowano
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 - 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 - 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.