منبع اصلی نوشتار زیر در این لینک قرار دارد

Reset CSS

همیشه توضیح اینکه چطوری میشه که همه بروزرها یه سایت رو به یه شکل نشون ندن و همه اونها سایت رو یک دست نشون بدن عذاب آور بوده. در حقیقت من میخوام اینبار یه کم درباره این قضیه که اصولا بهش Reset CSS هم میگن توضیح بدم. یه سری مسایل دیگه هم هست که در مورد CSS میتونه کمک کنه، البته این مسایل شاید یه کم قدیمی باشن برای حرفه ای ها ولی قبلا هم تو یه کامنت، در جواب یه کامنت دیگه گفتم، اگه حرفه ای نیست و اصلا بدرد نمیخوره میتونید راحت چشمتونو ببندید و یه سایت دیگه رو باز کنید که حرفه ای تره :D.

اینکه هر بروزری یه تفسیری از استاندارد داره خودش به اندازه کافی بد هست. اما اینکه هر بروزر یه چیزی رو بعنوان پیشفرض در نظر میگیره دیگه قابل چشمپوشی نیست. مثلا اگه یه عنصر margin نداشته باشه، یعنی صریحا براش یه مقدار تو سی اس اس استفاده نشده باشه اونوقت چی؟ همینو در باره border یا padding در نظر بگیرید. یا مثلا تگهایی مثل abbr یا del و امثال اینها، پیشفرضشون چیه؟ تگهای منطقی چی؟ strong تو طراحی هر کسی میتونه یه معنی داشته باشه، البته اینکه تقریبا همه بروزرها strong رو به عنوان بولد تتفسیر میکنن چیزی رو عوض نمیکنه،‌strong, em یا همه این تگها منطقی هستن و طرز تلقی شما از اونها مهمه.
اینجاست که Reset کردن سی اس اس بداد میرسه. این قسمت رو در نظر بگیرید :

 * {
	margin : 0px;
	padding : 0px;
	border : 0px;
}

این یه راه ساده است برای خلاص شدن از خیلی مشکلها. اینرو میتونید به عنوان یه Reset CSS ساده در نظر بگیرید. مشکل ساز ترین این خصایص همین سه تا هستن. باقی هم میتونن مشکل ساز باشن ولی نه به این اندازه. این ساده ترین کار ممکنه!
اما باقی تگها رو هم میشه اضافه کرد. مثلا درک شما از تگ strong شاید با طراحی من متفاوت باشه، خوب اینجا وقتشه که شروع کنید. یکی دو تا مثال هست تو وب که من اونها رو اینجا میذارم البته با ذکر منبع، اولیش که از این آدرس گرفتم :

/* v1.0 | 20080212 */

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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

دومیش هم مربوط به یاهو هست و بهتره که مستقیما به همون جا لینک بشه :

<!-- Source File -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">

باز هم هست، اینجوری :)‌
اما یکی که من خودم درست کردم و یه کم با نیازهای خودم سازگارش کردم، و یه سری کلاسهای عمومی رو هم توش تعریف کردم اینه :

/*
	Global CSS
	Copyright (C) 2009 Cyber Rabbits
*/

 /***** Global Settings *****/

 html, body {
	 border:0;
	 margin:0;
	 padding:0;
 }

 body {
	font:10pt Tahoma,Arial, Helvetica, sans-serif;
 }

 /***** Headings *****/

 h1, h2, h3, h4, h5, h6 {
	 margin:0;
	 padding:0;
	 font-weight:normal;
 }

 h1 {
	 padding:30px 0 25px 0;
	 letter-spacing:-1px;
	 font-size:2em;
 }

 h2 {
	 padding:20px 0;
	 letter-spacing:-1px;
	 font-size:1.5em;
 }

 h3 {
	 font-size:1em;
	 font-weight:bold;
 }

 /***** Common Formatting *****/

 p, ul, ol {
	 margin:0;
	 padding:0 0 1.25em 0;
 }

 ul, ol {
	padding:0 0 1.25em 2.5em;
 }

 blockquote {
	 margin:1.25em;
	 padding:1.25em 1.25em 0 1.25em;
 }

 small {
	font-size:0.85em;
 }

 img {
	border:0;
 }

 sup {
	 position:relative;
	 bottom:0.3em;
	 vertical-align:baseline;
 }

 sub {
	 position:relative;
	 bottom:-0.2em;
	 vertical-align:baseline;
 }

 acronym, abbr {
	 cursor:help;
	 letter-spacing:1px;
	 border-bottom:1px dashed;
 }

 /***** Links *****/

 a,
 a:link,
 a:visited,
 a:hover {
	text-decoration:underline;
 }

 /***** Forms *****/

 form {
	 margin:0;
	 padding:0;
	 display:inline;
 }

 input, select, textarea {
	font:1em Tahoma, Arial, Helvetica, sans-serif;
 }

 textarea {
	 width:100%;
	 line-height:1.25;
 }

 label {
	cursor:pointer;
 }

 /***** Tables *****/

 table {
	 border:0;
	 margin:0 0 1.25em 0;
	 padding:0;
 }

 table tr td {
	
 }

 /***** Wrapper *****/

 #wrap {
	 width:936px;
	 margin:0 auto;
 }

 /***** Global Classes *****/

 .clear         { clear:both; }
 .float-left    { float:left; }
 .float-right   { float:right; }

 .text-left     { text-align:left; }
 .text-right    { text-align:right; }
 .text-center   { text-align:center; }
 .text-justify  { text-align:justify; }

 .bold          { font-weight:bold; }
 .italic        { font-style:italic; }
 .underline     { border-bottom:1px solid; }
 .highlight     { background:#ffc; }

 .wrap          { width:960px;margin:0 auto; }

 .img-left      { float:left;margin:4px 10px 4px 0; }
 .img-right     { float:right;margin:4px 0 4px 10px; }

 .nopadding     { padding:0; }
 .noindent      { margin-left:0;padding-left:0; }
 .nobullet      { list-style:none;list-style-image:none; }
 .ltr {text-align : left;direction : ltr}
 .rtl {text-align : right;direction : rtl}

دیگه بیشتر از این نیست. همین هم کافیه، ساده ولی مفید.



برچسب ها : , , ,