آموزش CSS Reset و آشنایی با کاربرد های آن در طراحی سایت

اگر به هر نحوی با طراحی سایت سر و کار داشته باشید، حتما تا امروز بار ها و بارها با فایل reset.css مواجه شده اید. اگر برایتان این سوال مطرح شده که فایل reset.css چیست و چه کاربردی دارد، این نوشته ی نسبتا کوتاه و کاملا ساده، مخصوص شماست. امروز به همراه وان اسکریپت می آموزیم که CSS Reset چیست و چه کاربردی دارد و در آخر هم یاد میگیریم که چگونه میتوانیم یک فایل css.reset بسازیم و آن را در طراحی صفحات و سایت های دلخواه خود به کار ببریم. با ما همراه شوید.

CSS Reset چیست و چه کاربردی دارد؟

تا حالا پیش آمده که یک فایل HTML ایجاد کرده و بدون اضافه کردن هیچ نوع استایل، آن را در یک مرورگر باز کنید؟ اگر این کار را انجام داده باشید حتما متوجه شده اید که مرورگر ها، هر یک دارای استایل های پیشفرضی برای عناصر مختلف موجود در یک صفحه HTML هستند و هرگاه که استایلی توسط طراح برای یک عنصر خاص در نظر نگرفته شده باشد، مرورگر از استایل های پیشفرض خود جهت نمایش آن عنصر خاص استفاده میکند.

مثلا اکثر مرورگر ها، لینک ها را به رنگ آبی و لینک های مشاهده شده را به رنگ بنفش نشان میدهند و یا اندازه های پیشفرض خاصی را برای تگ های h1, h2 و … در نظر میگیرند. دقیقا به همین دلیل است که مثلا دکمه های ارسال در هر مرورگر، شکل و رنگ خاص خود را دارند.

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

آموزش ایجاد فایل reset.css

ایجاد فایل ریست css هیچ نوع پیچیدگی خاصی ندارد. تنها لازم است که عنصری را در این فایل از قلم نیاندازیم. برای سادگی کار میتوانید کد زیر را کپی کرده و در فایل reset.css خود قرار دهید:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

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;

}

ایجاد فایل reset.css مخصوص HTML5

فایل ریست بالا هیچ ایرادی ندارد ولی این کد در رابطه با صفحاتی که قرار است به طور کامل با HTML5 طراحی شوند، بهینه سازی شده و ۱۰۰ درصد کاربردی نیست. بنابراین بهتر است برخی از تگ ها مانند acronym, center یا big را از آن حذف کنیم و یا برای برخی تگ ها مانند abbr, dfn یا mark استایل های اختصاصی تر و بهتری تعریف کنیم. بنابراین برای استفاده در HTML5 بهتر است کد زیر را در فایل CSS Reset خود به کار ببرید:

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

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

body {
    line-height:1;
}

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

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

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

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

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

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

100

101

102

html5doctor.com Reset Stylesheet

v1.6.1

Last Updated: 2010-09-17

Author: Richard Clark - http://richclarkdesign.com

Twitter: @rich_clark

html, body, div, span, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

abbr, address, cite, code,

del, dfn, em, img, ins, kbd, q, samp,

small, strong, sub, sup, var,

b, i,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, figcaption, figure,

footer, header, hgroup, menu, nav, section, summary,

time, mark, audio, video {

margin:0;

padding:0;

border:0;

outline:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

}

body {

line-height:1;

}

article,aside,details,figcaption,figure,

footer,header,hgroup,menu,nav,section {

display:block;

}

nav ul {

list-style:none;

}

blockquote, q {

quotes:none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content:'';

content:none;

}

a {

margin:0;

padding:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

}

/* change colours to suit your needs */

ins {

background-color:#ff9;

color:#000;

text-decoration:none;

}

/* change colours to suit your needs */

mark {

background-color:#ff9;

color:#000;

font-style:italic;

font-weight:bold;

}

del {

text-decoration: line-through;

}

abbr[title], dfn[title] {

border-bottom:1px dotted;

cursor:help;

}

table {

border-collapse:collapse;

border-spacing:0;

}

/* change border colour to suit your needs */

hr {

display:block;

height:1px;

border:0;

border-top:1px solid #cccccc;

margin:1em 0;

padding:0;

}

input, select {

vertical-align:middle;

}

در پایان به این نکته توجه ویژه داشته باشید که در زمان اجرای استایل ها، استایلی که در آخر تعریف شده، اولویت بالاتری نسبت به استایل های اولیه دارد. بنابراین فایلی که در آخر قرار بگیرد، کلیه ی استایل های قبلی خود را بازنویسی خواهد کرد.

با در نظر داشتن این تعریف، بدیهی است که فایل ریست میبایست در ابتدای استایل ها فراخوانی شده و استایل های اصلی، پس از این فایل فراخوانی شوند. در غیر این صورت حتی استایل های اصلی شما نیز با فایل ریست بازنویسی خواهند شد.

Facebook

Twitter

نوشته شده در اکتبر 30, 2016 / 3,467 نمایش / کد مطلب : 15834

دیدگاه خود را به اشتراک بگذارید

دیدگاهتان را بنویسید لغو پاسخ

مطالب مرتبط

فرم ورود به سایت زیبا و فارسی

توسط صادق محمدزاده در تاریخ نوامبر 5, 2016

با سلام خدمت شما کاربران عزیز وان اسکریپت، امروز برای شما عزیزان فرمی حرفه ای جهت ورود کاریران به سایت را آماده دانلود کرده ایم. این فرم در سایت های خارجی برای فروش گذاشته شده است که توسط وان اسکریپت فارسی سازی و به صورت رایگان بری دانلود قرار گرفته…

آموزش ساخت منوی کشویی در سایت + افزونه

توسط آرش حسینی در تاریخ اکتبر 28, 2016

درست کردن منو زیر منو با jquery و امروزه هم با CSS3 کار چندان مشکلی نیست ولی خب برای دوستانی که یه مقدار آشنایی کمتری دارند سخت است. امروز یه بسته خیلی خوب داریم که دیگه از این به بعد میتوانید به راحتی آب خوردن منو های سایت خودتون رو…

روش صحیح قرار دادن فایل فلش در سایت

توسط نگار مظفری در تاریخ اکتبر 27, 2016

هرچند در حال حاضر استفاده از فایل های فلش به نسبت سالهای گذشته با کاهش روبرو شده ولی این نوع فایل ها، هنوز هم در اینترنت کاربرد دارند. چه به یک پلیر نیاز داشته باشید و چه مایل باشید یک انیمیشن در سایت خود پخش کنید و یا حتی اگر…

آموزش ایجاد افکت های مختلف چرخش عکس

توسط نگار مظفری در تاریخ اکتبر 27, 2016

آموزش ایجاد افکت های مختلف چرخش عکس با رفتن ماوس به روی آن! چندی قبل (یکمی بیشتر از چندی قبل!) با هم روش کمرنگ کردن تصویر در هنگام قرار گیری ماوس به روی آن را مرور کردیم. امروز تصمیم داریم با هم روش چرخش تصویر با استفاده از CSS را…

افزونه اسلایدر حرفه ای وردپرس Slider Revolution به همراه افزودنی های کامل

توسط صادق محمدزاده در تاریخ اکتبر 25, 2016

اسلایدرهای حرفه ای بسازید! اسلایدر ها در برخی از سایت ها برای مثال گالری ها و... یکی از بخش های اساسی سایت می باشد که باید به صورت حرفه ای پیاده سازی شود. امروز در وان اسکریپت افزونه ای قدرتمند به نام Slider Revolution را برای شما عزیزان آماده دانلود…

دانلود اسکریپت لایک MeReactions

توسط صادق محمدزاده در تاریخ اکتبر 16, 2016

واکنش های جذاب در سایت خود ایجاد کنید! امروزه گزینه "لایک" یا "پسندیدن" را که می شونیم به یاد سایت ها و شبکه های اجتماعی محبوبی میفتیم که یکی از اساسی ترین ویژگی های آن ها همین امکان نمایش واکنش افراد به پست ها و مطالب می باشد. قرار دادن…

عضویت در خبرنامه

آخرین بازدید شده ها

تبلیغات متنی

درخواست شما

آموزش CSS Reset و آشنایی با کاربرد های آن در طراحی سایت

CSS Reset چیست و چه کاربردی دارد؟

آموزش ایجاد فایل reset.css

ایجاد فایل reset.css مخصوص HTML5

دیدگاه خود را به اشتراک بگذارید

دیدگاهتان را بنویسید لغو پاسخ

مطالب مرتبط