خانه / مقالات سئو / آموزش فایل CSS Reset و کاربرد آن در طراحی وب سایت

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

آموزش فایل CSS Reset و کاربرد آن در طراحی وب سایتReviewed by ali khazraei on May 31Rating: 5.0آموزش فایل CSS Reset و کاربرد آن در طراحی وب سایتآموزش فایل CSS Reset و کاربرد آن در طراحی وب سایت

فایل CSS Reset و کاربرد آن در طراحی وب

سئو: لطفا از فایل CSS Reset و کاربرد آن در طراحی وب دیدن فرمایید.

فایل CSS Reset و کاربرد آن در طراحی وب

 

فایل CSS Reset و کاربرد آن در طراحی وبReviewed by محمد رضا ملکی on May 10Rating: 5.0

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

فایل CSS Reset و کاربرد آن در طراحی وب

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

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

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

اما خب دوستان در این قسمت سوالی که ممکن است پیش بیاید این است که چطور این فایل را بسازیم؟

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

/* http://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فایل CSS Reset و کاربرد آن در طراحی وب, dfnفایل CSS Reset و کاربرد آن در طراحی وب 
    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;

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

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

 

[ad_2] منبع:سئو و بهینه سازی
امیدواریم که از فایل CSS Reset و کاربرد آن در طراحی وب لذت برده باشید.لطفا نظرات خود را درباره فایل CSS Reset و کاربرد آن در طراحی وب با ما در میان بگذارید.

درباره ی مدیر

علی خضرائی هستم وبمستر سایت اکسپرت سئو, 5 سال هست که در زمینه سئو فعالیت دارم

همچنین ببینید

آموزش سئو حرفه ای سایت

آموزش سئو حرفه ای سایت

آموزش سئو حرفه ای سایتReviewed by ali khazraei on Jul 25Rating: 5.0آموزش سئو حرفه ای …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.