parsgreen.com
article

کار با border و outline در css

css-border-outline

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

ایجاد خط با ویژگی border در css


با استفاده از ویژگی border در css می توان به راحتی انواع مختلف خطوط را برای لایه ها و عناصر صفحات وب تعریف و تنظیم کرد، برای انجام این کار، ویژگی border معمولا از تنظیمات و مقادیر زیرمجموعه خود استفاده می کند که به طور دقیق، رنگ، اندازه خطوط، نوع و... را مشخص می کنند، به مثال زیر که یک کلاس در css است توجه کنید.
<style type="text/css">
.block{
    border:#999 solid 1px;
}
</style>
برای دیدن پیش نمایش مثال ها، به انتهای این مطلب رجوع کنید.
در کلاس ساده بالا، به راحتی یک خط به صورت solid یا جامد (خطوط معمولی) با کد رنگی 999# و اندازه 1 پیکسل ایجاد کرده ایم، به این صورت کلاس بالا به طور پیش فرض این خط را در هر چهار طرف (بالا، پائین، چپ و راست) لایه یا عنصر در صفحات وب ترسیم خواهد کرد، برای ترسیم خطوط در css، نوع یا همان style آنها باید الزاما تعیین شود (به فرض solid، dotted و...) اما تنظیم سایر موراد اختیاری است، برای ترسیم خطوط متفاوت نیز، می توان از مقادیر زیر برای style در border استفاده کرد:
- dashed: برای ترسیم خطوط با فاصله (علامت dash یا -).
- dotted: برای ترسیم خطوط با فاصله (علامت نقطه یا dot).
- double: برای ترسیم خطوط به صورت دوتایی یا دوبل.
- groove: برای ترسیم خطوط به شکل شیاری و برجسته.
- hidden: برای ترسیم خطوط پنهان در صفحه.
- inset: برای ترسیم خطوط سه بعدی با برجستگی داخلی.
- outset: برای ترسیم خطوط سه بعدی با برجستگی بیرونی.
- none: هیچ خطی ترسیم نمی شود.
- ridge: برای ترسیم خطوط شیاری و برجسته.
- solid: برای ترسیم خطوط معمولی.
برای مقادیر اندازه عرض خطوط نیز می توان از مقادیر پیکسل، درصد و... استفاده کرد، علاوه بر این از سه مقدار زیر هم می توان برای این مقصود استفاده نمود:
- medium: ایجاد خطوط با اندازه استاندارد و پیش فرض مرورگر.
- thin: ایجاد خطوط نازک و ظریف.
- thick: ایجاد خطوط ضخیم و برجسته.
برای مقادیر رنگ نیز می توانید از کدهای هگز (مانند 0000FF#) یا rgb (مانند (255,100,125)rgb) و همچنین عنوان های رنگی (مانند red ،blue، green و...) استفاده کنید.
به مثال زیر توجه کنید.
<style type="text/css">
.block{
    border:#CC0 dotted thick;
    height:25px;
    width:25%;
}
</style>
و همچنین مثالی دیگر:
<style type="text/css">
.block{
    border:outset 4px rgb(96,124,66);
    display:block;
    height:20em;
    width:25%;
}
</style>

شیوه های نگارش (syntax) خاصیت border در css


شیوه تعریف و نگارش (syntax) خاصیت border در css به حالتی که در بالا از آن استفاده کرده ایم محدود نمی شود، در واقع حالت فوق نوع کاربرد مختصر نویسی این خاصیت است، اگر بخواهید از border به شکل سفارشی تری استفاده نمائیم، به فرض برای هر ضلع یک لایه در صفحه، یک نوع خاص از خط و با اندازه و رنگ متفاوت داشته باشیم، می توانیم از سایر پارامترهای این خاصیت به شکل زیر استفاده نمائیم.
- تعریف خطوط برای یک ضلع خاص:
بدین منظور از border-right، border-left، border-top و border-bottom استفاده می کنیم، به عنوان مثال:
<style type="text/css">
.block{
    border:#6C6 solid thin;
    border-bottom:double yellow;
    display:block;
    height:300px;
    width:300px;
}
</style>
کلاس فرضی بالا، برای لایه ای که از این کلاس برای آن استفاده می شود، سه خط به صورت solid در سمت بالا، چپ و راست ترسیم خواهد کرد و در پائین لایه، از ویژگی border-bottom پیروی کرده و خط را به صورت double ایجاد می کند.
مثالی دیگر:
<style type="text/css">
#block{
    border-top:#333 solid medium;
    border-bottom:#666 dashed thin;
    border-left:#999 dotted thick;
    border-right:#CCC inset 1px;
    display:table;
    height:350px;
    width:500px;
}
</style>
اگر آی دی بالا را در یک صفحه html به یک بلاک نسبت دهید، خواهید دید که اضلاع مختلف بلاک، با خطوط متفاوت (از لحاظ نوع، رنگ و اندازه) تنظیم شده است؛ البته این نوع استایل نویسی صرفا جنبه آموزشی دارد و ممکن است در طراحی واقعی، تنها از چند نوع خاص از خطوط استفاده شود.
علاوه بر این، سه پارامتر color، style و width را می توان به صورت جداگانه نیز برای خطوط در css تعریف کرد، البته این روش همیشه هم ضروری نیست و با شیوه مختصر نویسی نیز می توان به راحتی خطوط مختلف را ترسیم کرد، اما در مواقعی ممکن است استفاده از این سبک کاربرد داشته باشد؛ بدین منظور از سه خاصیت ذکر شده به صورت زیر استفاده می شود:
- border-width (یا به شیوه ترکیبی به صورت به فرض border-bottom-width): برای تعیین عرض خطوط.
- border-color (یا به شیوه ترکیبی به صورت به فرض border-top-color): برای تعیین رنگ خطوط.
- border-style (یا به شیوه ترکیبی به صورت به فرض border-left-style): برای تعیین نوع خطوط.
به مثال زیر توجه کنید.
<style type="text/css">
#block{
    border:#6C6 solid;
    border-width:2px;
    display:block;
    height:300px;
    width:300px;
}
</style>
همچنین مثالی دیگر:
<style type="text/css">
#block{
    border-color:#06C;
    border-style:solid;
    border-width:5px;
    display:block;
    height:300px;
    width:300px;
}
</style>
و همچنین مثال زیر:
<style type="text/css">
#block{
    border-color:#06C #666 #060 #F90;
    border-style:solid dotted double inset;
    border-width:5px 3px medium thin;
    display:block;
    height:300px;
    width:300px;
}
</style>
همانطور که پیش تر گفتیم، استفاده از ویژگی style برای خاصیت border جهت ترسیم آن ضروری و سایر موارد از قبیل رنگ و اندازه اختیاری است، یعنی یک خط در صفحات وب با css بدون وجود یکی از مقادیر style برای border قابل ترسیم شدن نیست.

ایجاد خط برجسته با ویژگی outline در css


اگرچه ترسیم خطوط با border در css در بیشتر موارد نیازهایمان را در طراحی صفحات وب مرتفع می کند، اما قدرت css از این هم فراتر رفته و ورای خطوط border امکان ایجاد خطوط دیگری را نیز می دهد که به آنها outline می گویند، همان طور که از نام آن پیدا است، outline برای ایجاد خطوط (فراتر از border) به کار گرفته می شود، استفاده از این قابلیت معمولا به جهت برجسته نمودن یا تنظیم موقعیت یک بلاک کاربرد دارد، البته این ویژگی در مقایسه با border از بیشتر خاصیت های آن استفاده می کند (به جزء موارد مربوط به جهت های مختلف left، right، top و bottom)، لذا اگر نحوه کار border را به درستی فرا بگیرید، تنظیم خطوط  outline چندان مبهم نخواهد بود؛ تنها تفاوت بین border و outline در این است که اندازه border جزء عنصری که از آن استفاده می کند محسوب می شود (و به اندازه آن عنصر اضافه می شود)، اما اندازه outline مستقل بوده و جزء عنصر وابسته نیست.
به مثال زیر توجه کنید.
<style type="text/css">
#block{
    border:8px solid #69F;
    outline:solid 8px #F00;
    display:block;
    height:50px;
    width:100px;
}
</style>
برای دیدن پیش نمایش مثال ها، به انتهای این مطلب مراجعه کنید.
از آنجایی که تنظیمات outline کاملا مشابه با border است (به جزء موارد مربوط به جهت های مختلف left، right، top و bottom)، در اینجا صرفا به ذکر چند مثال بسنده می کنیم .
<style type="text/css">
.block{
    outline:inset #999 thick;
    display:block;
    height:500px;
    width:200px;
}
</style>
مثالی دیگر:
<style type="text/css">
.block{
    border:#36F dotted 10px;
    outline:#CCC 10px;
    outline-style:solid;
    display:block;
    height:500px;
    width:200px;
}
</style>
و همچنین مثال زیر:
<style type="text/css">
.block{
    border:#333 thick solid;
    outline-color:#09C;
    outline-style:ridge;
    outline-width:thick;
    display:block;
    height:100px;
    width:100px;
}
</style>

مثال و پیش نمایش آنلاین


برای آشنایی بیشتر با نحوه کار border و outline می توانید از مثال های زیر و پیش نمایش آنلاین آن استفاده نمائید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | کار با خطوط در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block{
    border:#333 thick solid;
    display:block;
    height:100px;
    width:100px;
}
.block-dot{
    border:#F60 2px dotted;
    display:block;
    height:100px;
    width:100px;
}
.block-multi{
    border-bottom:#666 dashed 2px;
    border-top:#F60 solid 2px;
    border-left:#9C0 dotted 2px;
    border-right:#69F double;
    display:block;
    height:100px;
    width:100px;
}
.outblock{
    border:#333 thick solid;
    outline:#090 thick dashed;
    display:block;
    height:100px;
    width:100px;
}
.outblock-dot{
    border:#F60 2px dotted;
    outline:#F00 2px solid;
    display:block;
    height:100px;
    width:100px;
}
.outblock-multi{
    border-bottom:#666 dashed 2px;
    border-top:#F60 solid 2px;
    border-left:#9C0 dotted 2px;
    border-right:#69F double;
    outline-color:#CCC;
    outline-style:double;
    outline-width:thick;
    display:block;
    height:100px;
    width:100px;
}
</style>
</head>
<body>
استفاده از border برای ترسیم خطوط در یک بلاک div به صورت solid:<br /><br />
<div class="block">
</div>
<hr />
استفاده از border برای ترسیم خطوط در یک بلاک div به صورت dotted:<br /><br />
<div class="block-dot">
</div>
<hr />
استفاده از border برای ترسیم خطوط در یک بلاک div به صورت چندگانه:<br /><br />
<div class="block-multi">
</div>
<hr />
استفاده از border و outline برای ترسیم خطوط در یک بلاک div به صورت solid و dashed:<br /><br />
<div class="outblock">
</div>
<hr />
استفاده از border و outline برای ترسیم خطوط در یک بلاک div به صورت dotted و solid:<br /><br />
<div class="outblock-dot">
</div>
<hr />
استفاده از border و outline برای ترسیم خطوط در یک بلاک div به صورت چندگانه:<br /><br />
<div class="outblock-multi">
</div>
</body>
</html>
پیش نمایش 
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» آشنایی با کلاس (class) و آی دی (id) در css
» نحوه تنظیم لینک (link) در استایل css
» مقدمه ای بر CSS، جادوگر طراحی وب!
» نحوه تنظیم لیست با تگ ul li در css
» کاربرد خاصیت display در CSS
commentنظرات (۱۲ یادداشت برای این مطلب ارسال شده است)
نویسنده: حسن
زمان: ۱۳:۳۹:۱۹ - تاریخ: ۱۳۹۱/۰۵/۳۰
سلام
آموزش های css و php و my sql رو زیاد کنین...
سایت شما به نظر من یکی از بهترین هاست
پاسخ: 
سلام
نظر لطف شماست.
آهسته و پیوسته در حال انجام این کار هستیم.
نویسنده: سعید
زمان: ۱۶:۱۳:۳۴ - تاریخ: ۱۳۹۱/۰۵/۳۱
با سلام مجدد
یه مشکلی پیدا کردم خواستم از شما بپرسم :
من الان سایتم کامل طراحی و برنامه نویسی کردم . داشتم آماده میشدم رایتش کنم روی سی دی ببرم به استادمون تحویلش بدم که یکدفعه متوجه یه چیزی شدم. من مانیتورم 19 اینچ با رزولیشن 900 * 1440 . قالبم رو با جدول طراحی کردم (میدونم یکم قدیمیه این روش ) ولی خوب من css خیلی بلد نیستم که بخوام باهاش قالب درست کنم. الان یکدفعه یه سوالی ذهنم رو مشغول کرد که من جدول اصلی سایت که کل محتویات درون اون قرار گرفتن عرضش 1200 هستش . خوب توی مانیتور من اندازه اش خیلی مناسبه . ولی نمیدونم اگه این سایت رو توی مانیتور کوچیک مثلا 17 اینچ یا 14 یا 15 اینچ باز کنن چه جوری نمایش داده میشه ؟ آیا خیلی بزرگ میشه و عرض صفحه دارای اسکرول میشه .فونتها تغییر میکنن ؟؟ به نظرتون من باید چیکار کنم . وقتم ندارم که بخوام از اول قالب درست کنم. از قالبم هم خیلی خوشم میاد. آیا راهی هست که بدون دردسر بشه اندازه رو طوری کرد که خودکار در مانیتورهای مختلف با اندازه مناسب نشون داده بشه ؟؟ ممنون میشم راهنمایی کاملی بکنید.
پاسخ: 
سلام
چون از مقادیر پیکسلی ثابت برای طراحی استفاده کرده اید (که معمولا هم بیشتر قالب ها به این سبک است)، در مانیتورهای 17 اینچ، تا حدودی اسکرول خواهید داشت، چون این مانیتورها از حداکثر 1024 پیکسل عرض استاندارد پشتیبانی می کنند و مابقی را به صورت اسکرول نشان می دهند، در 14 و 15 اینچ نیز حتما اسکرول خواهید داشت، مگر اینکه مقادیر را به در صد تعیین کنید که این کار معایبی هم خواهد داشت؛ به طور مثال:
<table width="90%">
</table>
فونت مطالب را اگر به پیکسل تعیین کرده باشید، به طور کلی تغییری نمی کنند، البته برخی مانیتورهای قدیمی ذاتا فونت ها را برجسته تر نشان می دهند.
راه دیگر این است که کل قالب را با مقادیر کوچکتر مقدار دهی کنید، یعنی کوچکتر از 1000 پیکسل (به فرض 960 پیکسل)، متاسفانه زیر بنای کار شما اشتباه بوده و برای تصحیح آن ناچارید کمی وقت بگذارید.
نویسنده: مریم
زمان: ۱۳:۲۷:۰۴ - تاریخ: ۱۳۹۱/۰۶/۰۸
سلام
میشه در مورد کد display و position توضیح بدید
باتشکر
پاسخ: 
سلام
سوالی که پرسیدید خیلی کلی است، چرا که display و position دو خاصیت پرکاربرد در css و با جزئیات زیاد هستند، به طور خلاصه display برای مشخص کردن نحوه نمایش عنصر مورد نظر (به طور مثال با مقادیر block, table, compact و...) و position برای تعیین موقعیت و نوع حالت شناور بودن عنصر در صفحه (به طور مثال با مقادیر absolute, relative, fixed و...) به کار می روند، درک کامل این خاصیت ها نیازمند یک مطلب آموزشی جداگانه است که طبق روال، به آن نیز خواهیم پرداخت.
نویسنده: مصطفی
زمان: ۱۵:۵۵:۰۸ - تاریخ: ۱۳۹۲/۱۱/۱۹
سلام
من میخوام table border یکدست قرمز داشته باشم مثل یه خط بدون سایه و حاشیه چطور میتونم؟ با تشکر
پاسخ: 
سلام
با استفاده از CSS این کار ممکن است، کافی است برای تگ table و td از خاصیت border با تنظیمات دلخواه استفاده کنید.
نویسنده: یوسف
زمان: ۱۳:۱۱:۵۲ - تاریخ: ۱۳۹۲/۱۲/۲۴
از کدام خاصیت می توان یک قاب را در اطراف یک تصویر درج کرد
پاسخ: 
ترکیب border و outline برای تگ img
نویسنده: شاهین
زمان: ۱۵:۰۵:۳۰ - تاریخ: ۱۳۹۳/۰۲/۲۱
سلام ایا با css میشه رنگ سطرهای جدول رو یکی در میان تغییر داد یا باید با جاوا اسکریپت این کارو کرد؟
پاسخ: 
سلام
کافی است برای هر سطر یک کلاس متفاوت داشته باشید (دو کلاس CSS باید داشته باشید که یکی در میان به تگ های td نسبت داده شوند).
نویسنده: مژگان
زمان: ۱۵:۴۸:۲۲ - تاریخ: ۱۳۹۳/۰۳/۲۳
من میخوام که طوری باشه که وقتی روی هر کدام از عکس های داخل پیج کلیک کنم بوردر رو اون باشه فقط و به عبارتی به حالت انتخاب در بیاد. ممنون میشم راهنماییم کنی.
پاسخ: 
انجام این کار ساده نیست! نیاز به ترکیب جاوا اسکریپت و CSS دارد که تنظیم دقیق آن بسیار وقتگیر خواهد بود، صرفا جهت آشنایی بیشتر:
<style type="text/css">
body, html {
height:100%;
width:100&;
}
.normal{
position:absolute;
border:4px solid #FFF;
z-index:888;
}
.select{
position:absolute;
border:4px solid #09F;
z-index:888;
}
.unselect{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
overflow:hidden;
z-index:887;
background-color:#096;
}
</style>
<script type="text/javascript">
function changeCSS(id, action){
if(action == 'select'){
document.getElementById(id).className = 'select';
}
else{
document.getElementById(id).className = 'normal';
}
}
</script>
<img class="normal" id="test" onclick="changeCSS('test', 'select');" src="image.jpg" alt="image" height="200" width="200">
<div class="unselect" onclick="changeCSS('test', 'normal');"></div>
نکته: استفاده از این نمونه کد در حالت کاربردی امکانپذیر نیست و تنها یک الگویه اولیه محسوب می شود!
نویسنده: ho.ma
زمان: ۱۶:۲۷:۳۱ - تاریخ: ۱۳۹۳/۰۸/۱۸
سلام و خسته نباشید من برای استفاده از حاشیه یه مشکل داشتم اونم اینه که وقتی حاشیه روی یک div اعمال میکنم مثلا روی منو یا container دور div حاشیه رو نشون میده اما سمت چپ رو نشون نمیده ولی وقتی روی wrapper انجام میدم حاشیه رو کامل نشون میده. ممکنه که من کلی حاشیه بدم ولی روی بعضی از عناصر حاشیه رو کنسل کنم. با تشکر
پاسخ: 
سلام
دقیقا متوجه مشکل شما نشدیم! خصوصیات CSS متاثر از همدیگر هستند، یعنی بدون بررسی دقیق استایل صفحه و کدنویسسی HTML نمی توان علت مشترکی برای تمام موارد ذکر کرد.
نویسنده: مسعود ج
زمان: ۱۵:۱۷:۳۹ - تاریخ: ۱۳۹۳/۰۹/۱۰
آقا بی انصافی تشکر نکنم...
واقعا خسته نباشی........
خداقوت.....
نویسنده: داوود
زمان: ۱۱:۵۱:۴۵ - تاریخ: ۱۳۹۴/۰۵/۲۸
سلام آقای مهندس؛
آقای مهندس در خصوص سوال مژگان خانوم با توجه به اینکه الان css3 خیلی از کارها رو راحت کرده و به نوعی گاهی اوقات بی نیاز از جاوااسکریپت آیا این کد راحت تر نیست!
img:hover{
outline:2px solid #333333 ;
outline-radius:25px;
}
البته کد بالا رو در css2.1 هم میشد نوشت ولی منظورم از خاصیت جدیدی هست به نام attr که فکر کنم جواب بده. اگه اشتباه میکنم لطفا بهم بگید.
مثلا اینجوری بنویسیم:
content: " (" attr(img) ")";
البته چون راستش هنوز این دستور رو عملی کار نکردم، ضمنی نوشتم و ممکنه ایراد داشته باشه عزیزم.
پاسخ: 
سلام
نیاز این کاربر یک رابط کاربری اینتراکتیو یا همان تعاملی است، یعنی هنگامی که یک تصویر کلیک می شود باید استایل آن تغییر کند و در عین حال سایر تصاویر از حالت انتخاب خارج شوند! قاعدتا کنترل این موارد نیاز به یک زبان اسکریپت نویسی مانند جاوا اسکریپت در کنار CSS دارد، عبارت "هر چیزی را بهر کاری ساخته اند" در وب نیز صدق می کند!
نویسنده: داوود
زمان: ۱۰:۲۵:۵۱ - تاریخ: ۱۳۹۴/۰۶/۱۱
سلام؛
آقای مهندس من برای طراحی یه منو نیاز به شکل یه ذوزنقه داشتم، همینجوری که سرچ میکردم به مورد جالبی برخورد کردم. بعنوان نمونه این سایت رو ببینید:
https://css-tricks.com/examples/ShapesOfCSS/
مثلا برای ایجاد یک مثلث از این کد استفاده کرده:
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
حالا اگه همین رو بخوایم رو به پایین باشه دقیقا میایم و بجای border-bottom از border-top استفاده می کنیم. میخواستم ببینم کلا برای اینجور اشکال چجوری میشه که با همین تقریبا سادگی این شکلها پدید میاد؟ من فکر می کردم کدهای بیشتر و طولانی تری رو باید استفاده کنیم. همچنین تو همین مثلث برام جالب بود که با تغییر یه border میشه جهت مثلث رو عوض کرد.
ممنونم ازتون.
پاسخ: 
سلام
این موارد در کنار استایل های ساده به قابلیت های CSS نیز مربوط می شوند، به طور مثال برای حالتی که درج کرده اید، ابتدا با border-left یک فضای خالی در سمت چپ به میزان 50 پیکسل ایجاد می شود که به دلیل transparent بودن، رنگی ندارد و شفاف است! سپس همین حالت برای سمت راست اعمال می شود، در نهایت border برای قسمت bottom با رنگ قرمز در نظر گرفته می شود، در نهایت با توجه به اینکه جهت ها از چه سمتی باشند، مرورگر border ها را با هم ترکیب کرده و شکل نهایی را نمایش می دهد! به هر صورت اینها قابلیت هایی است که در CSS تعبیه شده، هرچند کمتر استفاده می شوند!
نویسنده: مهدی عباسیان
زمان: ۱۳:۴۳:۳۲ - تاریخ: ۱۳۹۵/۰۸/۱۱
سلام آموزشتون بسیار عالی هستش من تازه طراحی رو شروع کردم و سایت شما واقعا کمکم کرد ممنون




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

1 × 8
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...