آموزش ساخت فایل CSS reset
هدف از ایجاد فایل CSS Reset این می باشد که تمامی استایل های پیشفرض مرورگر را به یک حالت صفر یا نال برگردانیم تا مطمئن شویم اگر عنصری در سایت بدون استایل بماند، در تمامی مرورگر ها، نمایی کاملا یکسان خواهد داشت.
مرورگرها یک سری از استایل های پیش فرض را برای برخی از کدهای html درنظر می گیرند ، به عنوان مثال در فایل html زیر تعدادی محتوای فرضی به همراه لیست را داریم ، که نتیجه آن شکلی به صورت زیر خواهد بود .
<html> <html xmlns="http://www.w3.org/199/xhtml" dir="rtl" lang="fa-IR"> <head> <title> ساخت فایل ریست سی اس اس </title> </head> <body> <p> با پیمودن عملی این مراحل می توان به موفقیت بیشتر در زمینه فرمت بندی صفحات دست یافت .استفاده از دستورات style در سیستم CSS می توان با ایجاد تعدادی از قواعد style به فرمت بندی مطلوب در متن پرداخت هر دستور Style شامل یک گزینش گر می باشد . و به دنیال آن متغییرهایی قرار می گیرند که نوع واندازه مطلوب هر مشخصه را می توان در بخش مربوط به آن وارد کرد به عنوان مثال به دستور زیر دقت کنید . </p> <ul> <li> ایتم لیست نمونه </li> <li> ایتم لیست نمونه </li> <li> ایتم لیست نمونه </li> <li> ایتم لیست نمونه </li> </ul> </body> </html>
و مشکل بزرگتر این می باشد که مرورگرهای مختلف به اشکال مختلفی استایل های پیش فرض را اجرا می کنند . و به همین دلیل این مسئله می تواند برای ما مشکل ساز شود و باید از فایل css reset استفاده کنیم .
این تغییرات پیش فرض شامل فاصله بین خطوط ، حاشیه ها ، marginها و خصوصیاتی برای متن می باشد . البته این تغییرات پیش فرض به خودی خود بد نیستند و در مواردی که فایل CSS لود نمی شود و یا موجود نیست می تواند تا حدود زیادی از بهم ریختن صفحه جلوگیری نماید .
- توصیه می شود : آموزش استایل دهی به فرم ها توسط CSS
نحوه ساخت فایل CSS reset
برای ساخت یک فایل ریست باید یک فایل css ایجاد کنیم و نام آن reset.css می گذاریم .
در فایل htm خود هم باید بین تگ های <head> کد مربوط به آن را که ذر ادامه آمده است جایگذاری کنیم .
<link rel="stylesheet" type="text/css" href="teset.css" />
حال باید ، در فایل reset.css کدهایی را وارد کنیم تا از استایل دهی پیش فرض مرورگر برای برخی از کدها جلوگیری کنیم .
برای نوشتن کدهای فایل reset.css باید در ابتدا به نیازهای خود نگاه کنیم ، ضروری ترین نیازی که در یک صفحه داریم padding ها و marginهای پیش فرض را برای تمامی عناصر صفر کنیم . این تقریبا رایج ترین نیازی می باشد که در هر فایل ریستی باید باشد .
*{
padding: 0;
margin: 0;
}
در بالا ، سلکتور ستاره که تمام عناصر صفحه را انتخاب می نماید .
به عنوان مثال در فایل ریست سی اس اس ما می خواهیم فونت های صفحه را به tahoma تغییر بدهیم .
body {
font-family: tahoma;
}
در ادامه خط کناری تصاویر را ۰ می کنیم . تا تمام تصاویر صفحه بدون border باشند .
img {
border: U;
}
در صورت نیاز می توانید ، مقادیر دیگری را به این فایل اضافه کنید. کد کاملتر این فایل می تواند به مانند شکل زیر باشد.
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
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;
}
امیدوارم این مقاله برای شما مفید قرار گرفته شده باشد.
دیدگاه ها