كمك در css

[Asef]

سلام
وقتي يه ويژگي رو مثلا براي لينك ها تعريف ميكنيم:

a:hover { color:#92004E;}

امكان اين هست به طور جداگانه براي كلاس هاي ديگه هم اين كار انجام بشه؟

مثلا ما يه كلاس تعريف كنيم براي تيبل هامون و بخوايم كه ويژگي هاي مربوط به لينك ها در داخل اون تيبل متمايز از لينك هاي جاهاي ديگه باشه.


آيا همچين كاري امكان پذيره؟ البته من به طور مثال لينك رو گفتم، در حالت كلي همچين كاري رو چطور انجام ميشه داد؟

 

[Azemati]

سلام
وقتي يه ويژگي رو مثلا براي لينك ها تعريف ميكنيم:

a:hover { color:#92004E;}

امكان اين هست به طور جداگانه براي كلاس هاي ديگه هم اين كار انجام بشه؟

مثلا ما يه كلاس تعريف كنيم براي تيبل هامون و بخوايم كه ويژگي هاي مربوط به لينك ها در داخل اون تيبل متمايز از لينك هاي جاهاي ديگه باشه.


آيا همچين كاري امكان پذيره؟ البته من به طور مثال لينك رو گفتم، در حالت كلي همچين كاري رو چطور انجام ميشه داد؟

آره به گمونم مي‌شه. در مورد Div كه مي‌شه و به اين صورته مثلا:

.header a:link , .header a:active , .header a:visited {
color : #000; 
text-decoration : none; 
} 
.header a:hover {
color : #000; 
text-decoration : none; 
}

 

[Asef]

خود خودشه

css تا چه حد دست ما رو براي انجام كارهاي اينچنيني باز مي زاره؟ مثلا نوشتن استايل براي لينك هاي بولد در يك تيبل ! ويا ...

البته من مثلا براي تگ input اينو تست كردم و جواب ميده!

.myClass input {
 border-style: outset; border-width: 1px;
}

 

[شايان]

دست شما كاملا بازه ! شما كافيه به هر چيزي كه ميخواي يه ID بدي ( مثلا همون table كه ميگي ) بعد تو cssl بنويسي :

#ID a:link {

intoo har chi doost dari bezar ! mesle :

font-weight:bold;

text-decoration:none;

و ...

}

چيزايي كه اونجا بنويسي فقط براي همون table كه ID ش رو نوشتي اثر ميكنه !

 

[Asef]

دست شما كاملا بازه ! شما كافيه به هر چيزي كه ميخواي يه ID بدي ( مثلا همون table كه ميگي ) بعد تو cssl بنويسي :

#ID a:link {

intoo har chi doost dari bezar ! mesle :

font-weight:bold;

text-decoration:none;

و ...

}

چيزايي كه اونجا بنويسي فقط براي همون table كه ID ش رو نوشتي اثر ميكنه !

درسته البته من تقريبا اصلا از آي دي استفاده نميكنم!

منظورم بيشتر كارهايي اين چنيني بود:

مثلا نوشتن استايل براي لينك هاي بولد در يك تيبل يا هر جاي ديگه ...

 

[شايان]

والا متوجه نميشم ! " مثلا نوشتن استايل براي لينك هاي بولد در يك تيبل يا هر جاي ديگه ... " يعني شما ميخواي يه جاي خاصي مثلا تو يه Table ، لينك ها بلد باشه ؟! ( BOLD ؟؟!؟! )

 

[Asef]

والا متوجه نميشم ! " مثلا نوشتن استايل براي لينك هاي بولد در يك تيبل يا هر جاي ديگه ... " يعني شما ميخواي يه جاي خاصي مثلا تو يه Table ، لينك ها بلد باشه ؟! ( BOLD ؟؟!؟! )

نه ! يه درجه پيشرفته تر. مثلا كدي بنويسيم كه فقط روي لينك هايي كه داخل تيبل هستند و بلد (BOLD) هم هستند تاثير بزاره!

مثال واضح تر:

ما يه تيبل داريم كه داخلش يه سري متن + يه سري لينك وجود داره. بعضي از اين لينك ها بلد هستند و بعضي نه، به صورت عادي هستند. ميخوايم كد روي لينك هاي بلد فقط تاثير بزاره ...

البته همه اينهايي كه گفتم مثال خاص هستش! كلا قدرت CSS ميخوام بدونم در اين طور كارها چطوره
مرجعي هم باشه كه در اين زمينه خاص توضيح داده باشه خوبه

 

[شايان]

اخه اين سوالت يه كم عجيب غريبه ! اولا وقتي ميگي يه تيبل هست توش يه سري متن هست با يه سري لينك كه بعضي هاش بلد ه ! خب اين سوال پيش مياد كه اون لينك ها چطوري بلد شده ! لابد يه tag ي روش اثر كرده كه بلد شده ديگه ! خب دستورات CSS رو روي اون TAG انجام ميديم ! حالا اين به كنار ... اگه منظورت اينه كه CSS بياد تو يه متن بگرده ، اون كلمه ها يا لينك هاي رو كه مثلا رنگشون فلانه ... يا فونت فلان دارند يا اينطور مشخصه ها رو پيدا كنه بعد يه كاره خاصي باهاشون انجام بده ، فكر نميكنم ! يعني يا نميشه ، يا من اطلاعاتم كمه !

 

[Asef]

اخه اين سوالت يه كم عجيب غريبه ! اولا وقتي ميگي يه تيبل هست توش يه سري متن هست با يه سري لينك كه بعضي هاش بلد ه ! خب اين سوال پيش مياد كه اون لينك ها چطوري بلد شده ! لابد يه tag ي روش اثر كرده كه بلد شده ديگه ! خب دستورات CSS رو روي اون TAG انجام ميديم ! حالا اين به كنار ... اگه منظورت اينه كه CSS بياد تو يه متن بگرده ، اون كلمه ها يا لينك هاي رو كه مثلا رنگشون فلانه ... يا فونت فلان دارند يا اينطور مشخصه ها رو پيدا كنه بعد يه كاره خاصي باهاشون انجام بده ، فكر نميكنم ! يعني يا نميشه ، يا من اطلاعاتم كمه !

لابد يه tag ي روش اثر كرده كه بلد شده ديگه !

لابد ديگه ! منظور همينه !

چطور الان مياد ميگرده يه تگ رو پيدا ميكنه (در مرحله اول)، ... بياد تگ هايي كه داخل اون تگ هستند رو هم پيدا كنه الي آخر يكم زياده خواهيه نه؟

 

[Asef]

خوبي css اينه كه سورس رو كلي خلاصه نويسي ميكنه منم عاشق همينش شدم

 

[Azemati]

تا اونجا كه من مي‌دونم CSS اين قدرت رو نداره كه دو تا كار رو همزمان انجام بده! يعني تقريبا اون چيزي كه آصف خان مي‌خواست. به نظر من نمي‌شه.

 

[Asef]

تا اونجا كه من مي‌دونم CSS اين قدرت رو نداره كه دو تا كار رو همزمان انجام بده! يعني تقريبا اون چيزي كه آصف خان مي‌خواست. به نظر من نمي‌شه.

بله منم فكر نكنم ديگه تا اين حد جواب بده ! ممنون از شما و شايان

 

[whiteflag]

خوبي css اينه كه سورس رو كلي خلاصه نويسي ميكنه منم عاشق همينش شدم

به غير از خلاصه نويسي که اشاره کردين هک هاي اون يکي از جالب ترين چيزهاش هست .

 

[Azemati]

به غير از خلاصه نويسي که اشاره کردين هک هاي اون يکي از جالب ترين چيزهاش هست .

يعني چي هك‌هاش؟!

 

[whiteflag]

يعني چي هك‌هاش؟!

http://css-discuss.incutio.com/?page=CssHack

و اين کتاب:

بيشتر در مورد اين کتاب

 

[Ali_ix]

همونطور که شایان گفت بالاخره یک تگی اون متن یا لینک خاص رو به حالت Bold درآورده ...
مثلا اگر HTML باشه میشه تگ b یا اگر XHTML باشه میشه strong !
شما خیلی راحت میتونید این تگهارو کنترل کنید مثلا :

.maincontent strong {
color: green;
text-decoration: underline;
}

که این کد میاد متن یا لینکیی که درون تگ strong هست رو به رنگ سبز در میاره و خط زیرش میندازه !

حالا شما چیزی غیر از این میخوای ؟!

 

[Asef]

http://css-discuss.incutio.com/?page=CssHack

و اين کتاب:

بيشتر در مورد اين کتاب

ممنون وايت فلگ جان، ميشه يه توضيح مختصر خودتون راجع به اين بديد؟

 

[Asef]

همونطور که شایان گفت بالاخره یک تگی اون متن یا لینک خاص رو به حالت Bold درآورده ...
مثلا اگر HTML باشه میشه تگ b یا اگر XHTML باشه میشه strong !
شما خیلی راحت میتونید این تگهارو کنترل کنید مثلا :

.maincontent strong {
color: green;
text-decoration: underline;
}

که این کد میاد متن یا لینکیی که درون تگ strong هست رو به رنگ سبز در میاره و خط زیرش میندازه !

حالا شما چیزی غیر از این میخوای ؟!

علي جان من باز هم توضيح ميدم ! همين مثالي كه شما زديد رو من اينطور توسعه اش ميدم:

<head>
<style>
.maincontent b {
color: green;
text-decoration: underline;
}
</style>
</head>

<body>
<p class="maincontent">
<a href="http://site.com"><b>Bold Link</b></a>
<a href="http://site.com">Normal Link</a>
<br>
<b>Bold Text</b> Normal Text</p>
</body>

اگر نتيجه رو نگاه كنيد تمام تگ هاي بلد داخل پاراگراف تاثير ميپذيرند در صورتي كه هدف ما فقط لينك هاي بلد هست، نه مثلا تكست هاي عادي ...
كه شايد اگه بشه اينطور هم مديريت كرد باز هم به خلاصه نويسي كمك كنه (خرده نگيريد كه من زياد وارد نيستم در اين زمينه ها ... بيشتر براي بالا رفتن اطلاعات عمومي خودم هست كه ميپرسم )

 

[Ali_ix]

علي جان من باز هم توضيح ميدم ! همين مثالي كه شما زديد رو من اينطور توسعه اش ميدم:

<head>
<style>
.maincontent b {
color: green;
text-decoration: underline;
}
</style>
</head>

<body>
<p class="maincontent">
<a href="http://site.com"><b>Bold Link</b></a>
<a href="http://site.com">Normal Link</a>
<br>
<b>Bold Text</b> Normal Text</p>
</body>

اگر نتيجه رو نگاه كنيد تمام تگ هاي بلد داخل پاراگراف تاثير ميپذيرند در صورتي كه هدف ما فقط لينك هاي بلد هست، نه مثلا تكست هاي عادي ...
كه شايد اگه بشه اينطور هم مديريت كرد باز هم به خلاصه نويسي كمك كنه (خرده نگيريد كه من زياد وارد نيستم در اين زمينه ها ... بيشتر براي بالا رفتن اطلاعات عمومي خودم هست كه ميپرسم )

اصولا مشکلی نیست !

با CSS Selectorها میشه دقیقا اینهارو هدف قرار داد ! ولی الان دقیقا یادم نیست چه جور سلکتوری به کار میاد ! :blush:

اینجا رفرنس کاملش هست : http://www.w3.org/TR/CSS21/selector.html

اگر .maincontent a b نباشه حتما .maincontent a + b یا .maincontent a > b کمک میکنه ...
منتها اینجا بحث پشتیبانی مرورگرها از استانداردها پیش میاد ..که بعید میدونم IE از این دوتا سلکتور آخر پشتیبانی بکنه !

 

[Ali_ix]

اصولا مشکلی نیست !

با CSS Selectorها میشه دقیقا اینهارو هدف قرار داد ! ولی الان دقیقا یادم نیست چه جور سلکتوری به کار میاد ! :blush:

اینجا رفرنس کاملش هست : http://www.w3.org/TR/CSS21/selector.html

اگر .maincontent a b نباشه حتما .maincontent a + b یا .maincontent a > b کمک میکنه ...
منتها اینجا بحث پشتیبانی مرورگرها از استانداردها پیش میاد ..که بعید میدونم IE از این دوتا سلکتور آخر پشتیبانی بکنه !

همون اولی کار میکنه
اینطوری درست میشه :

<head>
<style>
.maincontent a b {
color: green;
text-decoration: underline;
}
</style>
</head>

<body>
<p class="maincontent">
<a href="http://site.com"><b>Bold Link</b></a>
<a href="http://site.com">Normal Link</a>
<br>
<b>Bold Text</b> Normal Text</p>
</body>