Normalizált stíluslapok 0
Nemigazán használtam még a CSS reset-elést, ezért készítek egy bejegyzést róla, esetleges későbbi továbbgondolás céljából, illetve hátha valaki egy komment formájában megvilágítja mennyire van ennek jelentősége, a gyakorlatban. Miről is van szó?
Az hogy egy böngészőnek milyen CSS alapbeállításokkal kell rendelkeznie ezek szerint nem rögzíti semmi, például az elemek rendelkezhetnek különböző kezdőértékkel. Ahhoz hogy ezen beállításokat egységesítsük szükség van a normalizálásra. Legegyszerűbb módjának a rule-ok egy általunk beállított alaphalmazának becsatolását javasolják, amely a következő linken érhető el: Yahoo’s YUI Reset CSS rules : http://developer.yahoo.com/yui/reset/ , található ott egy videó is, alkalomadtán megtekintem, és beszámolok róla
. Egy konkrét listát is találtam, némiképp kisebb méretű mint ami, az előző link alatt szerepel.
/* BLOCK ELEMENTS */
html, div, map, dt, form { display:block; }
body { display:block; margin:8px; font-family:serif; font-size:medium; }
p, dl { display:block; margin-top:1em; margin-bottom:1em; }
dd { display:block; margin-left:40px; }
address { display:block; font-style:italic; }
blockquote { display:block; margin:1em 40px; }
h1 { display:block; font-size:2em; font-weight:bold; margin:0.67em 0; }
h2 { display:block; font-size:1.5em; font-weight:bold; margin:0.83em 0; }
h3 { display:block; font-size:1.125em; font-weight:bold; margin:1em 0; }
h4 { display:block; font-size:1em; font-weight:bold; margin:1.33em 0; }
h5 { display:block; font-size:0.75em; font-weight:bold; margin:1.67em 0; }
h6 { display:block; font-size:0.5625em; font-weight:bold; margin:2.33em 0; }
pre{ display:block; font-family:monospace; white-space:pre; margin:1em 0; }
hr { display:block; height:2px; border:1px; margin:0.5em auto 0.5em auto; }
/* TABLE ELEMENTS */
table { border-spacing:2px; border-collapse:separate;
margin-top:0; margin-bottom:0; text-indent:0; }
caption { text-align:center; }
td { padding:1px; }
th { font-weight:bold; padding:1px; }
tbody, thead, tfoot { vertical-align:middle; }
/* INLINE ELEMENTS */
strong { font-weight:bold; }
cite, em, var, dfn { font-style:italic; }
code, kbd, samp { font-family:monospace; }
ins { text-decoration:underline; }
del { text-decoration:line-through; }
sub { vertical-align:-0.25em; font-size:smaller; line-height:normal; }
sup { vertical-align: 0.5em; font-size:smaller; line-height:normal; }
abbr[title], acronym[title] { border-bottom:dotted 1px; }
/* LIST ELEMENTS */
ul { list-style-type:disc; margin:1em 0; margin-left:40px; padding-left:0;}
ol { list-style-type:decimal; margin:1em 0; margin-left:40px; padding-left:0;}
/* remove top & bottom margins for nested lists */
ul ul, ul ol, ul dl, ol ul, ol ol, ol dl, dl ul, dl ol, dl dl
{ margin-top:0; margin-bottom:0; }
/* use circle when ul nested 2 deep */
ol ul, ul ul { list-style-type:circle; }
/* use square when ul nested 3 deep */
ol ol ul, ol ul ul, ul ol ul, ul ul ul { list-style-type:square; }
Egyébként a Firefox beépített stíluslapja megtekinthető a resource://gre/res/html.css címen.
Hajrá CSS




iratkozz fel a komment RSS-re
Még nem született komment ehhez a bejegyzéshez