سلام دوستان عزیز وقت شما بخیر.امیدوارم که حالتون خوب باشه و آماده یکی از آموزش های دیگه وردپرس باشید که خب البته با یک آموزش حرفه ای بار دیگر در خدمت شما هستیم.پس در ابتدا باید خدمت شما عرض کنم که اگر حرفه ای هستید میتوانید این اموزش را تا انتها پیش ببرید.در غیراینصورت مطمئنا نمیتوانید به صورت کامل این آموزش را به انتها برسانید.پس در صورتی که حرفه ای نیستید کمی صبرکنید تا در آینده این آموزش را مطالعه کنید. در ادامه با ما همراه باشید با معرفی فایل CSS Reset و کاربرد آن در طراحی وب.
فایل CSS Reset و کاربرد آن در طراحی وب
دوستان عزیزم اگر به هر نحو با طراحی سایت سر و کار داشته باشید و سرو کار الان هم دارید، حتما تا امروز بار ها و بارها با فایل reset.css مواجه شده اید و در مورد آن اطلاعات خوبی نیز دارید اما خب شاید در این مورد اطلاعات شما کامل نباشد که خب ما وظیفه داریم تا آن را برای شما کامل کنیم.
اگر برایتان این سوال مطرح شده که فایل reset.css چیست و چه کاربردی دارد، این نوشته ی نسبتا کوتاه و کاملا ساده، مخصوص شماست که بدانید اصلا این فایل چیست و برای چه استفاده میشود.پس دوستان توجه کنید که امروز در این اموزش بررسی میکنیم که CSS Reset چیست و چه کاربردی دارد و در آخر هم یاد میگیریم که چگونه میتوانیم یک فایل css.reset بسازیم و آن را در طراحی صفحات و سایت های دلخواه خود به کار ببریم. پس با ما همراه باشید چون برای شما صحبت های بسیار خوبی داریم
CSS Reset چیست و چه کاربردی دارد؟
دوستان در ابتدا بررسی میکنیم که اصلا CSS Reset چیست و چه کاربردی دارد؟ دوستان تا حالا پیش آمده که یک فایل HTML ایجاد کرده و بدون اضافه کردن هیچ نوع استایل، آن را در یک مرورگر باز کنید؟ مطمئنا در صورتی که شما طراح وب سایت بوده باشید این کار را انجام داده اید اگر این کار را انجام داده باشید حتما متوجه شده اید که مرورگر ها، هر یک دارای استایل های پیشفرضی برای عناصر مختلف موجود در یک صفحه HTML هستند و هرگاه که استایلی توسط طراح برای یک عنصر خاص در نظر نگرفته شده باشد، مرورگر از استایل های پیشفرض خود جهت نمایش آن عنصر خاص استفاده میکند خب تا اینجا به صورت کامل متوجه این موضوع شدید؟ اگر نشدید بهتر است با یک مثال گفته های خود را بیشتر توضیح دهم
دوستان توجه کنید مثلا اکثر مرورگر ها، لینک ها را به رنگ آبی و لینک های مشاهده شده را به رنگ بنفش نشان میدهند که خب این مورد را همه دیده اید و با ان آشنا هستید و یا اندازه های پیشفرض خاصی را برای تگ های h1, h2 و … در نظر میگیرند.
فایل CSS Reset و نمایش وب سایت در مرورگر های مختلف
دقیقا به همین دلیل است که مثلا دکمه های ارسال در هر مرورگر، شکل و رنگ خاص خود را دارند. به عنوان یک طراح، احتمالا یکی از اهداف مهم شما این است که سایتی که طراحی میکنید، در همه ی مرورگر ها، شکل و شمایل و نمایی یکسان داشته باشد که خب این مورد هم مطمئنا در تجربیات شما هست و با آن رو به رو شده اید. دقیقا همینجاست که فایل CSS Reset کاربرد پیدا میکند. هدف از ایجاد این فایل این است که تمامی استایل های پیشفرض مرورگر را به یک حالت صفر یا نال برگردانیم تا مطمئن شویم اگر عنصری در سایت بدون استایل بماند، در تمامی مرورگر ها، نمایی کاملا یکسان خواهد داشت. بدیهی است که آنچه در این فایل تعریف میکنیم، فقط یک استایل پایه ای است و بعدا در فایل های استایل اصلی ، نمای عناصر را به دلخواه بازنویسی خواهیم کرد.
اما خب دوستان در این قسمت سوالی که ممکن است پیش بیاید این است که چطور این فایل را بسازیم؟
آموزش ایجاد فایل reset.css
دوستان اصلا کار سختی نیست.توجه کنید که ایجاد فایل ریست css هیچ نوع پیچیدگی خاصی ندارد و به راحتی میتوان ان را ایجاد کرد. تنها لازم است که عنصری را در این فایل از قلم نیاندازیم. برای سادگی کار میتوانید کد زیر را کپی کرده و در فایل reset.css خود قرار دهید :
/* https://bigtheme.ir/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 طراحی شوند، بهینه سازی شده و 100 درصد کاربردی نیست و مطمئنا اگر شما در مورد 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;
}
سخن آخر
خب دوستان رسیدیم به پایان کار.ابتدا یک خسته نباشید به شما باید بگویم.اما خب دوستان در پایان به این نکته توجه ویژه داشته باشید که در زمان اجرای استایل ها، استایلی که در آخر تعریف شده، اولویت بالاتری نسبت به استایل های اولیه دارد که ممکن است این نکته را بدانید. بنابراین فایلی که در آخر قرار بگیرد، کلیه ی استایل های قبلی خود را بازنویسی خواهد کرد. با در نظر داشتن این تعریف، بدیهی است که فایل ریست میبایست در ابتدای استایل ها فراخوانی شده و استایل های اصلی، پس از این فایل فراخوانی شوند. در غیر این صورت حتی استایل های اصلی شما نیز با فایل ریست بازنویسی خواهند شد
خب دوستان این آموزش وردپرس هم به اتمام رسید.خیلی ممنونم از توجه شما
منبع: بیگ تم مرجع افزونه وردپرس ، قالب وردپرس ، آموزش وردپرس و هک وردپرس
سپاس خیلی به دردم خورد جواب سوالم رو گرفتم که این فایل رو چجوری استفاده کنم که استایلای خودمو هم ریست نکنه .
ممنون از سایتتون