Log in
Top posters
amirx_taek1!(†эямίлατσя) (513) | ||||
†эямίлατσя (385) | ||||
*per$eus* (299) | ||||
jav+d (183) | ||||
amirha$an (165) | ||||
sadegh_akbari21 (141) | ||||
n0!se (136) | ||||
mashr0ob (126) | ||||
amir*1995 (126) | ||||
Rastin (120) |
Latest topics
» New nimbuss blasterby blst-maker 15/12/2018, 11:04 am
» About codder
by blst-maker 27/8/2018, 4:30 am
» morteza pashaie
by amirx_taek1!(†эямίлατσя) 16/11/2014, 4:06 pm
» Youtube Facebook Hack 2011
by blst-maker 13/11/2014, 5:15 am
» Facebook 2.1 Version Free Download
by blst-maker 12/11/2014, 1:36 pm
» How To Hack Facebook Login Page
by blst-maker 12/11/2014, 1:34 pm
» dmp nimbuzz
by blst-maker 25/10/2014, 10:03 am
» 12 16 Nude Junior Girls
by blst-maker 25/10/2014, 10:00 am
» ReCoveR ID's By CReator password or cracked password or by
by shayan123456 5/10/2014, 12:14 am
» new broken ip Nimbuzz cracker by cobra very fast
by hrb1826 4/10/2014, 9:24 am
» ids arabic farsi symbol 3word for sell
by neymar.cfz.11 8/9/2014, 11:27 am
» nimbuzz hack mod.apk android
by neymar.cfz.11 8/9/2014, 11:08 am
» nimbuzz dc android networld-team
by neymar.cfz.11 6/9/2014, 9:54 am
» bombus 2014
by --)xerxes 6/9/2014, 1:31 am
» XMl jadide hacke java
by neymar.cfz.11 24/8/2014, 11:28 am
» XML jadide hack android and java
by neymar.cfz.11 24/8/2014, 11:26 am
» new vps bot upteate
by neymar.cfz.11 24/8/2014, 11:26 am
» phonegap GUI
by blst-maker 9/8/2014, 7:37 am
» badbuzz master anti flood
by blst-maker 29/7/2014, 11:17 am
» packup! nimbuzz
by blst-maker 29/7/2014, 11:03 am
Online Stat
CSS Reset چیست و چه کاربردی دارد؟
:: programing :: PHP
Page 1 of 1
CSS Reset چیست و چه کاربردی دارد؟
احتمالا تا به حال با اصطلاح CSS Reset برخورد کرده باشید.شاید قبلا از فایلهایی با این عنوان استفاده کرده باشید.معمولا فایلهایی که با عنوان Css Reset استفاده میکنیم شامل یک سری کدهای CSS هستن که یه سری کار انجام میدن.اما واقعا باید ببینیم این فایل و کدهای داخلش چی هستن و چه کاربردی دارن.
به زبان ساده CSS Reset یک سری کدهای CSS هستن که میان تناقضاتی که بین مرورگرها هست رو برطرف میکنن.مثلا اگر یه صفحه HTML درست کنید و یک متن داخلش قرار بدید میبینید که این متن از کناره های صفحه فاصله داره.این فاصله ممکنه توی مرورگرهای مختلف فرق داشته باشه.
حالا کدهای مربوط به CSS Reset میان و این تناقضات رو رفع میکنن.یکی دونمونه از کدهاشون رو باهم بررسی میکنیم بعد لیستی از فایلهای CSS Reset براتون میذارم تا ازش استفاده کنید.
اختلافاتی که مرورگرها باهم دارن توی مواردی مثل margin , font-size , paddin , border و چند مورد دیگه است.مثلا توی مرورگر اینترنت اکسپلورر نسخه های قدیمی ترش دور عکس ها سر خود یک حاشیه میندازه که توی بقیه مرورگرها این مورد نیست.(مریضه شما به دل نگیرین!)
خوب برای اینکه مرورگر IE سرخود نیاد دوی عکسها حاشیه بندازه میایم از کد زیر استفاده میکنیم :
img{
border:0
}
یا مثلا این کد :
html,body {
margin:0;
padding:0;
}
این کد میاد فاصله عناصر HTML رو از کناره های صفحه صفر میکنه که توی همه مرورگرها یه جور نشون داده بشه.
شاید از خودتون بپرسید که اینکار که خوب نیست!!! شاید من بخوام دور عکسام حاشیه داشته باشم یا عناصرم از کناره های فاصله داشته باشه.
حرف شما کاملا درسته اما اگر میخواید عکستون حاشیه داشته باشه باید دوباره بهش استایل بدید.کد بالا میاد کاری میکنه که عکس توی همه مرورگرها یه جور نمایش داده بشه.حالا با یک استایل دیگه میتونین استایل دلخواه رو به عکستون بدید.
img{
border:1px solid #0f0;
}
خوب دیگه فکر کنم تا همینجا کافیه توضیح دادنش.حالا اگر میخواین از CSS Reset ها استفاده کنید یه سری از این کدها رو براتون میذارم که حالشو ببرید :
۱ – Yahoo CSS Reset
/*
Yahoo! CSS Reset (YUI 2)
[You must be registered and logged in to see this link.]
CSSresetr.com
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
2 – Eric Meyer’s CSS Reset
/*
Eric Meyer's CSS Reset
[You must be registered and logged in to see this link.]
v1.0 | 20080212
CSSresetr.com
*/
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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
3 – Tripoli CSS Reset
/*
Tripoli Reset
[You must be registered and logged in to see this link.]
CSSresetr.com
*/
* { margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none; }
code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font: inherit; font-size: 1em; white-space: normal; }
dfn, i, cite, var, address, em { font-style: normal; }
th, b, strong, h1, h2, h3, h4, h5, h6 { font-weight: normal; }
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td, center { text-align: left; vertical-align: top; }
body { line-height: 1; background: white; color: black; }
q { quotes: "" ""; }
ul, ol, dir, menu { list-style: none; }
sub, sup { vertical-align: baseline; }
a { color: inherit; }
hr { display: none; } /* we don't need a visual hr in layout */
font { color: inherit !important; font: inherit !important; color: inherit !important; } /* disables some nasty font attributes in standard browsers */
marquee { overflow: inherit !important; -moz-binding: none; }
blink { text-decoration: none; }
nobr { white-space: normal; }
4 – HTML5 Doctor CSS Reset
/*
HTML5 Doctor Reset v1.6.1
[You must be registered and logged in to see this link.]
CSSresetr.com
*/
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;
}
به زبان ساده CSS Reset یک سری کدهای CSS هستن که میان تناقضاتی که بین مرورگرها هست رو برطرف میکنن.مثلا اگر یه صفحه HTML درست کنید و یک متن داخلش قرار بدید میبینید که این متن از کناره های صفحه فاصله داره.این فاصله ممکنه توی مرورگرهای مختلف فرق داشته باشه.
حالا کدهای مربوط به CSS Reset میان و این تناقضات رو رفع میکنن.یکی دونمونه از کدهاشون رو باهم بررسی میکنیم بعد لیستی از فایلهای CSS Reset براتون میذارم تا ازش استفاده کنید.
اختلافاتی که مرورگرها باهم دارن توی مواردی مثل margin , font-size , paddin , border و چند مورد دیگه است.مثلا توی مرورگر اینترنت اکسپلورر نسخه های قدیمی ترش دور عکس ها سر خود یک حاشیه میندازه که توی بقیه مرورگرها این مورد نیست.(مریضه شما به دل نگیرین!)
خوب برای اینکه مرورگر IE سرخود نیاد دوی عکسها حاشیه بندازه میایم از کد زیر استفاده میکنیم :
img{
border:0
}
یا مثلا این کد :
html,body {
margin:0;
padding:0;
}
این کد میاد فاصله عناصر HTML رو از کناره های صفحه صفر میکنه که توی همه مرورگرها یه جور نشون داده بشه.
شاید از خودتون بپرسید که اینکار که خوب نیست!!! شاید من بخوام دور عکسام حاشیه داشته باشم یا عناصرم از کناره های فاصله داشته باشه.
حرف شما کاملا درسته اما اگر میخواید عکستون حاشیه داشته باشه باید دوباره بهش استایل بدید.کد بالا میاد کاری میکنه که عکس توی همه مرورگرها یه جور نمایش داده بشه.حالا با یک استایل دیگه میتونین استایل دلخواه رو به عکستون بدید.
img{
border:1px solid #0f0;
}
خوب دیگه فکر کنم تا همینجا کافیه توضیح دادنش.حالا اگر میخواین از CSS Reset ها استفاده کنید یه سری از این کدها رو براتون میذارم که حالشو ببرید :
۱ – Yahoo CSS Reset
/*
Yahoo! CSS Reset (YUI 2)
[You must be registered and logged in to see this link.]
CSSresetr.com
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
2 – Eric Meyer’s CSS Reset
/*
Eric Meyer's CSS Reset
[You must be registered and logged in to see this link.]
v1.0 | 20080212
CSSresetr.com
*/
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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
3 – Tripoli CSS Reset
/*
Tripoli Reset
[You must be registered and logged in to see this link.]
CSSresetr.com
*/
* { margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none; }
code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font: inherit; font-size: 1em; white-space: normal; }
dfn, i, cite, var, address, em { font-style: normal; }
th, b, strong, h1, h2, h3, h4, h5, h6 { font-weight: normal; }
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td, center { text-align: left; vertical-align: top; }
body { line-height: 1; background: white; color: black; }
q { quotes: "" ""; }
ul, ol, dir, menu { list-style: none; }
sub, sup { vertical-align: baseline; }
a { color: inherit; }
hr { display: none; } /* we don't need a visual hr in layout */
font { color: inherit !important; font: inherit !important; color: inherit !important; } /* disables some nasty font attributes in standard browsers */
marquee { overflow: inherit !important; -moz-binding: none; }
blink { text-decoration: none; }
nobr { white-space: normal; }
4 – HTML5 Doctor CSS Reset
/*
HTML5 Doctor Reset v1.6.1
[You must be registered and logged in to see this link.]
CSSresetr.com
*/
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;
}
dear,lord- Member
- Posts : 33
Points : 89
Join date : 2013-07-14
:: programing :: PHP
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
|
|