PDA

View Full Version : مبتدی: استفاده بخشی از کد css در جاها مختلف فایل css



bade saba
جمعه 26 اسفند 1390, 22:31 عصر
سلام
دوستان من یه بخش از فایل CSS ام رو میخام برای چندین آبجکت استفاده کنم و نمیخام این بخش از کد رو هی تکرار کنم چه راهی برای این وجود داره؟؟؟؟؟

مثلا این خاصیت transparency رو دارم با کد زیر
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;

/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50 )";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

/* Older than Firefox 0.9 */
-moz-opacity:0.5;

/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;

/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}

و 4 یا 5 تا div هم به صورت زیر دارم و میخام همشون این وضعیت transparency رو داشته باشند، چه باید کرد؟؟؟؟

.divBox1
{
position:absolute;
width:108px;
height:108px;
top:400px;
left:50px;
background-color:#33FF00;
z-index:2;
border-radius: 15px;
}

حالا اگه چند تا بخش مثل این trancparency داشته باشیم چه باید کرد و نخایم هی copy past کنیم.

یه چیزی تو مایه های تابع نوشتن تو زبان های برنامه نویسی معمول منظورمه

ممنون

cyrusthegreat
جمعه 26 اسفند 1390, 22:39 عصر
دوست عزیز

اینکار امکان پذیر نیست که شما مثل یه تابع ازش هرجا استفاده کنی. تنها راه حل موجود اینجوری نوشتن هست:


.transparent, .divBox1, .divBox2, .divBox3 {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;

/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Op acity=50)";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

/* Older than Firefox 0.9 */
-moz-opacity:0.5;

/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;

/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}



البته یه سری فریم ورک هایی هم اومدن که توش می شه متغییر و تابع و از این چیزها تعریف کرد ولی بار پردازشیشون خیلی بالاست.

bade saba
جمعه 26 اسفند 1390, 22:48 عصر
منظورتون اینه که من مثلا عبارت divBox1 رو چند جا بیارم؟؟؟؟ فایل CSS من اینجوری میشه؟؟؟

.transparent, .divBox1, .divBox2, .divBox3 {
...
}
.xyz, .divBox1 {
...
}
.divBox1 {
...
}



اینجوری divBox1 هم خواص trancparency رو میگیره هم خواص موجود در xyz رو و هم خواصی که در بخش خاص خودش اومده؟؟؟؟؟

cyrusthegreat
جمعه 26 اسفند 1390, 23:02 عصر
بله دقیقا. شما اینجوری می تونید به یک المنت، چندین سری از مقادیر رو اختصاص بدید. حتما هم نیاز نیست اولش .transparent یا .xyz بزنید. یک سری خواص رو می تونید به هر تعداد از المنت هایی که بخوایید و با جدا کردنشون با , اختصاص بدید.

clover
جمعه 26 اسفند 1390, 23:15 عصر
البته راه دیگه ای هم وجود داره و اون استفاده از چند مقدار برای خاصیت class هست:

<div class="transparent divBox1"></div>

این کار انعطاف بیشتری نسیت به روش قبل داره و از طرفی پیچیدگی CSS رو کاهش میده.

cyrusthegreat
جمعه 26 اسفند 1390, 23:18 عصر
این راه هم وجود داره. ولی خب ایشون فرمودن در CSS.

davood59
شنبه 27 اسفند 1390, 08:24 صبح
البته راه دیگه ای هم وجود داره و اون استفاده از چند مقدار برای خاصیت class هست:
کد HTML:
<div class="transparent divBox1"></div>
این کار انعطاف بیشتری نسیت به روش قبل داره و از طرفی پیچیدگی CSS رو کاهش میده.
دوست عزیز clover؛
میشه در خصوص کد فوق یه مقدار توضیح بیشتری بدید؟ ممنونتون میشم.
دوست عزیز cyrusthegreat ؛

بله دقیقا. شما اینجوری می تونید به یک المنت، چندین سری از مقادیر رو اختصاص بدید. حتما هم نیاز نیست اولش .transparent یا .xyz بزنید. یک سری خواص رو می تونید به هر تعداد از المنت هایی که بخوایید و با جدا کردنشون با , اختصاص بدید.
در این خصوص منظورتون اینه که همون خاصیت پدر فرزندی رو داریم اعمال می کنیم؟ یعنی هر خواصی که برای پدر اعمال بشه به همه فرزندان هم اعمال میشه؟

cyrusthegreat
شنبه 27 اسفند 1390, 12:31 عصر
دوست عزیز clover؛
میشه در خصوص کد فوق یه مقدار توضیح بیشتری بدید؟ ممنونتون میشم.
دوست عزیز cyrusthegreat ؛

در این خصوص منظورتون اینه که همون خاصیت پدر فرزندی رو داریم اعمال می کنیم؟ یعنی هر خواصی که برای پدر اعمال بشه به همه فرزندان هم اعمال میشه؟

دوست عزیز

در مورد اول، ما می تونیم به یک المت بی نهایت کلاس اختصاص بدیم. برای اینکار هر کلاس رو در class attr اون المنت با یک فاصله از هم جدا می کنیم. مثلا اگز ما دوتا کلاس داشته باشیم در CSS که اینجوری باشن:

.bold {
font-weight: bold;
}

.red-color {
color: #f00;
}


حالا المنتی رو اینجوری تو صفحه بگزاریم هم bold می شه و هم رنگش قرمز می شه.


<div class="bold red-color">EXAMPLE</div>


البته این مورد فقط برای class صادق هست و شما نمی تونی چندین ID رو برای یک المنت انتخاب کنی.

در مورد سوال دوم، بطور کلی خیر. خاصیت پدر فرزندی در کار نیست. فقط این نکته هست که ما می تونیم ده تا گروه از خواص رو داشته باشیم و به هر المنتی اختصاص بدیم. بطور مثال اگر html ما اینجوری باشه:


<div class="first">FIRST EXAMPLE</div>
<div class="secend">SECOND EXAMPLE</div>
<div class="THIRD">THIRD EXAMPLE</div>
<div id="last">LST EXAMPLE</div>


حالا CSS ما اینجوری باشه:

.second, #last {
font-weight: bold;
}

.first, .third, #last{
color: #f00;
}


می بینیم که کلاس first و third فقط به رنگ قرمز در میاد، کلاس second فقط bold می شه و ای دی last هم قرمز می شه . هم Bold.

به همین سادگی. به همین خوشمزگی