آموزش CSS - مرزبندی(outlines)

با استفاده از ویژگی outline در CSS میتوان استایل یا شکل شمایل خط لبه ی بیرونی ( که در قسمت بیرونی عنصر ایجاد میشه ) را مشخص و یا تعریف کرد.

"outlines فضا را اشغال نمی‌کند"، منظور از این جمله این است که حاشیه یا خطوط خارجی (outlines) که اطراف یک عنصر گرافیکی یا شئ قرار می‌گیرند، به معنایی از فضای واقعی برای نمایش آن عنصر اشغال نمی‌کنند. به عبارت دیگر، حاشیه‌ها تنها به عنوان مرزها یا خطوط خارجی ظاهر می‌شوند و به اشکالی مستطیلی که واقعیت فیزیکی ندارند.این ویژگی به طراحان گرافیک و توسعه‌دهندگان وب امکان می‌دهد تا حاشیه‌ها را به دلخواه طراحی کنند بدون اینکه واقعاً فضای محاسباتی بیشتری اشغال شود. این قابلیت می‌تواند در ایجاد ظاهری شفاف و زیبا برای عناصر گرافیکی کمک کند.
"outlines نباید مستطیل شکل باشند"، به این اشاره دارد که حاشیه یا خطوط خارجی یک عنصر یا شئ، شکل یک مستطیل نداشته باشد. به عبارت دیگر، اطراف یک عنصر یا شئ باید به گونه‌ای طراحی شوند که شکل مستطیلی نگیرند. این ممکن است به منظور ایجاد ظاهری منحصر به فرد، زیبا و متفاوت از سایر عناصر در طراحی گرافیکی یا وب سایت‌ها باشد. به عبارت دیگر، حاشیه‌ها یا خطوط خارجی باید به شکلی مناسب و بدون ایجاد شکل مستطیلی به دور عنصر تنظیم شوند.
"outlines همیشه از همه طرف یکسان است" و نمی‌توانید مقادیر متفاوتی را برای طرف‌های مختلف یک عنصر مشخص کنید، به این اشاره دارد که حاشیه یا خطوط خارجی (outlines) که اطراف یک عنصر قرار می‌گیرند، باید از نظر ظاهری یکسان باشند.

به عبارت دیگر، شما نمی‌توانید ویژگی‌های مختلفی را برای هر طرف از یک عنصر تعیین کنید. مثلاً اگر می‌خواهید یک عنصر را با حاشیه اطراف آن بندازید، این حاشیه باید از همه جهات به یک اندازه و با یک شکل مشخص تعیین شود، و نمی‌توانید برای هر طرف از عنصر مقادیر متفاوتی برای حاشیه انتخاب کنید. این اصل معمولاً در طراحی وب یا گرافیک برای حفظ یکنواختی و استاندارد در ظاهر عناصر استفاده می‌شود.

توجه: ویژگی های outlines توسط IE 6 یا Netscape 7 پشتیبانی نمی شوند.

توجه:ویژگی outline بروی قسمت بیرونی یا خارجی یک عنصر تاثیر میگذارد و این یعنی این ویژگی بروی اندازه عرض و ارتفاع یک عنصر هیچ تاثیری ندارد ولی ویژگی border چون بروی قسمت داخلی عنصر تاثیر میگذارد به همین دلیل بروی اندازه عرض و ارتفاع عنصر تاثیر میگذارد.

ویژگی های outlines

ویژگی outline-width برای تنظیم عرض outlines استفاده می شود.
ویژگی outline-style برای تنظیم سبک خط برایoutlines استفاده می شود.
ویژگی outline-color برای تنظیم رنگ outlines استفاده می شود.
از ویژگی outline برای تنظیم هر سه ویژگی فوق در یک دستور استفاده می شود.

ویژگی outline-width

ویژگی outline-width عرض outline را که باید به کادر اضافه شود را مشخص می کند. مقدار آن باید طول یا یکی از مقادیر thin، mediumیا thick باشد، مانند ویژگی border-width.

عرض صفر پیکسل به معنای عدم وجود outline است.

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         این متن دارای outline نازکی است.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:solid;">
این متن دارای outline ضخیم است.      </p>
      <br />
      
      <p style = "outline-width:5px; outline-style:solid;">
این متن دارای outline 5 برابری است.      </p>
   </body>
</html>

ویژگی outline-style

ویژگی outline-style به شما امکان می‌دهد یکی از سبک‌های زیر را برای مرز انتخاب کنید :

none (بدون) :مقدار اولیه این ویژگی است که باعث می شود مرز کاملا نادیده گرفته شود و عرض آن هم مقدار 0 در نظر گرفته شود. مگر اینکه مرز تصویری برای عنصر تعریف کنیم.(معادل ; border-width:0)
solid : باعث ترسیم یک خط ساده و تخت به عنوان مرز می شود. .
dotted (نقطه‌ای) : این مقدار باعث می شود تا حاشیه بصورت نقطه ای باشد در نظر داشته باشید که برخی مرورگرها نقطه های مربعی بوجود می آورند و برخی دایره ای شکل ترسیم می کنند.
dashed (خط چین) : مرز را تبدیل به خط چین می کند.
double (دو خط جامد) :دو خط راست و ساده به موازی هم در اطراف عنصر کشیده می شوند که جمع ضخامت و فاصله بین این دو خط برابر با عرضی است که برای حاشیه تعیین می کنیم.
groove (شیاری) :این حالت ایجاد شکاف و تو رفتگی دور عنصر می باشد که با استفاده از دو رنگی که کمی روشن تر و کمی تیره تر از رنگ حاشیه هستند بوجود می آید.
ridge (ریجی) : این حالت مخالف groove است و یک حاشیه برجسته یا سه بعدی بوجود می آورد.
inset (درون فرو شده): زمانی که از این حالت استفاده می کنیم عنصر شبیه به این دیده می شود که انگار فرورفتگی دارد.
outset (بیرون فرو شده):حالت متضاد حالت inset است و گویا عنصر حالت برآمدگی دارد.
hidden (مخفی): مانند none است، با این تفاوت که برای اجزای جدول مرز استفاده می‌شود.

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
این متن دارای outline نازک است.      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;">
این متن دارای outline خط چین ضخیم است.      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;">
این متن دارای outline 5 برابر نقطه‌دار است.      </p>
   </body>
</html>

ویژگی outline-color

ویژگی outline-color به شما امکان می دهد رنگoutline را مشخص کنید. مقدار آن باید یا یک نام رنگ، یک رنگ هگزا، یا یک مقدار RGB باشد، مانند رنگ و ویژگی های رنگ حاشیه.

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         این متن دارای outline نازک قرمز رنگ است.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
این متن دارایoutline سبز و ضخیم است.      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
این متن دارای 5 برابر طرح آبی نقطه‌دار است.      </p>
   </body>
</html>

ویژگیoutline

ویژگی outline یک ویژگی مختصر است که به شما امکان می دهد مقادیری را برای هر یک از سه ویژگی که قبلاً در مورد آنها صحبت شد به هر ترتیبی اما در یک دستور مشخص کنید.

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline:thin solid red;">
این متن دارای outline نازک قرمز رنگ است.      </p>
      <br />
      
      <p style = "outline:thick dashed #009900;">
این متن دارای outline سبز و ضخیم است.      </p>
      <br />
      
      <p style = "outline:5px dotted rgb(13,33,232);">
این متن دارای 5 برابر طرح آبی نقطه‌دار است.      </p>
   </body>
</html>

نشانگرها(cursors) - درس قبلی

درس بعدی - ابعاد(dimension)