CSS Reset چیست ؟ [دانلود]

امیر شیخ زاده آموزش 14 ژانویه 2019

خانه ⁄ وبلاگ ⁄ آموزش ⁄ CSS Reset چیست ؟ [دانلود]

CSS Reset چیست :

به صورت پیش فرض تمامی مرورگر ها برای المان ها html خصوصیات را در نظر گرفته اند اگر شما در هنگام طراحی صفحه خود برای المانی خصوصیاتی را تعریف نکنید مرورگر به صورت پیش فرض از آن استفاده خواهد کرد. در اینجا CSS Reset به کمک شما خواهد آمد به طور مثال تگ <a> در مرورگر ها به رنگ آبی و زیر خط دار نمایش داده میشود.

کاربرد CSS Reset در طراحی چیست :

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

h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
margin:0;
padding:0;
}

h1,h2,h3,h4,h5,h6 {

font-size:100%;

font-weight:normal;

margin:0;

padding:0;

}

چرا باید از CSS Reset استفاده کنیم :

به شخصه به عنوان یک طراح بزرگترین چالشم در طراحی صفحه های وب نمایش یکسان وب سایت در مرورگرهای متفاوت هستش برای همین استفاده از سی اس اس ریست باعث می شود صفحه طراحی شده توسط شما در همه صفحه ها به صورت یکسانی به نمایش در بیاد و خصوصیات پیشفرض مرورگر ها صفر بشه ( البته باید خودتون برا همه المان ها خصوصیات دلخواهتون رو بنویسید )

نحوه استفاده از CSS Reset چگونه است :

خیلی راحت فایل قرار گرفته شده یا کد های زیر رو در ابتدای فایل CSS پروژه خودتون قرار بدید ( نکته : همان طور که می دونید ترتیب کلاس های سی اس اس خیلی مهم هستش هر کلاس هر چقدر پایین تر از قبلی باشه کلاس بالاتر قرار گرفته رو بازنویسی می کنه .

دانلود فایل CSS Reset Html5

/* 
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;

}

برای امتیاز به این نوشته کلیک کنید!

[کل: 1 میانگین: 5]

CSS Reset چیست ؟ [دانلود]

CSS Reset چیست :

کاربرد CSS Reset در طراحی چیست :

چرا باید از CSS Reset استفاده کنیم :

نحوه استفاده از CSS Reset چگونه است :

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