امروز جمعه ۲ آذر ۱۴۰۳

آموزش ایجاد فایل CSS Reset و کاربرد آن در طراحی وب | فری اسکریپت

افکت های سی اس اس

مرجع افکت های طراحی وب CSS3

افکت های جیکوئری

افکت های آجاکس و جیکوئری طراحی وب

مرجع وردپرس

قالب ها و افزونه های حرفه ای وردپرس

مرجع اسکریپت

اسکریپت های کلون و نال شده آماده

آموزش ایجاد فایل CSS Reset و کاربرد آن در طراحی وب

آموزش ها, وردپرس

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

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

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;

}

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

آخرین بروزرسانی مطلب : ۱۹ مرداد ۱۳۹۸
منبع مطلب : فری اسکریپت

75 بازدید

محمد

۱۹ مرداد ۱۳۹۸

جدیدترین نسخه سی ام اس ها

وردپرس فارسی نسخه 4/4/2
تاریخ انتشار : ۱۹ مرداد ۱۳۹۸

جوملا فارسی نسخه 3/4/8
تاریخ انتشار : ۱۹ مرداد ۱۳۹۸

پرستاشاپ فارسی نسخه 1/6/1/2
تاریخ انتشار : ۱۹ مرداد ۱۳۹۸

دروپال فارسی نسخه 7/41
تاریخ انتشار : ۱۹ مرداد ۱۳۹۸

پیوندها

برچسب‌ها

دسته بندی مطالب

تماس با ما / نمونه کارها / نقشه سایت

کلیـه حقــوق مـادی و معنوی این وبسایت محفـوظ می باشد.

میزبانی توسط سرورهای قدرتمند هاست دانلود

آموزش ایجاد فایل CSS Reset و کاربرد آن در طراحی وب | فری اسکریپت

افکت های سی اس اس

افکت های جیکوئری

مرجع وردپرس

مرجع اسکریپت

آموزش ایجاد فایل CSS Reset و کاربرد آن در طراحی وب

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

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

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

مطالب پیشنهادی

جدیدترین نسخه سی ام اس ها

پیوندها

برچسب‌ها

دسته بندی مطالب