بخش های اصلی

آموزش HTML 5

آموزش HTML - سبک دهی (Style)

قوانین styleها، چگونگی نمایش اطلاعات در مرورگرهای وب را توصیف می کند.

Style دادن به عناصر HTML

HTML در زمینه نحوه نمایش اطلاعات کاملاً محدود است. اساساً HTML اطلاعات را به صورتی ساده نمایش می دهد. در دسامبر 1996، w3c، CSS (Cascading Style Sheets) را برای فرآهم آوردن روشی بهتر برای style دادن به عناصر HTML معرفی کرد.

با CSS براحتی می توان رنگ متن یا پشت زمینه را تعیین کرد، اندازه و style فونت ها را را مشخص کرد، فضای خالی زیادی میان عناصر ایجاد کرد، border و outline به عناصر اضافه کرد و ... .

اضافه کردن style به عناصر html

اطلاعاتِ مربوط به style می تواند در فایلی جداگانه نوشته شود یا در خود فایل html تعبیه شود. روش های زیر، سه روش برای پیاده سازی style دادن به اطلاعات در فایل HTML هستند (به ترتیبِ اولویت زیاد به کم).

  • Inline styles:  استفاده از خصیصه ی style در تگ شروع HTML.
  • Style تعبیه شده (Embeded): استفاده از عنصر <style> در تگ head.
  • Style sheet خارجی: استفاده از عنصر <link> که به یک فایل CSS خارجی اشاره می کند.

در این آموزش همه ی این style sheet ها را یکی یکی توضیح خواهیم داد:

Inline styles

Styleهای inline با قرار دادن مستقیم قوانین CSS در تگ شروع، برای اعمال قوانین استایلی منحصر به فرد به کار می روند.

خصیصه های style شامل یک سریِ جفت از پراپرتی های CSS  ((property و مقادیر (value) هستند. هر جفت "property: value" با علامت (;) از هم جدا می شوند، دقیقاً به همان صورتی که در style sheet های تعبیه شده (embedded) و خارجی (external) می توانید بنویسید. درنظر داشته باشید همه ی این جفت ها باید در یک خط نوشته شوند و بعد از علامت (;) ، خط جدید ایجاد نکنید.

مثال زیر به شما نشان می دهد که چطور رنگ (color) و سایزِ فونتِ (font-size) متن را تغییر دهید:

مثال

<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:18px;">This is a paragraph.</p>
<div style="color:green; font-size:18px;">This is some text.</div>

معمولاً استفاده از روش inline style، روش خوبی نیست. از آنجایی که قوانین styleها مستقیماً در تگ های html تعبیه می شوند، بخش نمایش با بخش محتوای کد، ترکیب می شود؛ این امر هدف استفاده از CSS را نقض می کند.

نکته: استفاده از شبه عناصر (pseudo-elements) و کلاس ها (-classes) در روش inline-style امکان پذیر نیست.بنابراین از استفاده از این روش برای به کار گرفتن خصیصه های style خودداری کنید. استفاده از style sheet خارجی ((external style sheet برای اضافه کردن style به فایل HTML روش بهتری است.

Style sheetهای تعبیه شده (Embedded style sheets)

Style sheetهای تعبیه شده (Embedded style sheets) یا داخلی (internal) فقط فایلی که در آن تعبیه شده اند را تحت تأثیر قرار می دهند.

Style sheetهای تعبیه شده (Embedded style sheets) در بخش  <head> از فایل HTML با تگ <style> تعریف می شوند. می توانید هر تعداد عنصر <style> در بخش <head> از فایل HTML تعریف کنید. مثال زیر را ببینید:

مثال

<head>
    <style type="text/css">
        body {background-color: YellowGreen;}
        p {color: Black;}
    </style>
</head>

Style sheetهای خارجی (External Style Sheets)

Style sheet خارجی برای زمانی که استایل به تعداد زیادی صفحه اعمال می شود متناسب است.

یک style sheet خارجی همه ی قوانینِ استایل ها را در فایلی جداگانه نگهداری می کند و شما می توانید از هر فایل HTML ای در سایتتان به آن لینک بزنید. Style sheetهای خارجی انعطاف پذیرترین style sheet هستند چون می توانید با استفاده از آن ها با تغییر یک فایل ظاهر کل سایت را تغییر دهید.

به دو روش می توانید فایل های style sheet را به فایل خود اضافه کنید – لینک کردن (linking) و وارد کردن (importing):

لینک کردن style sheet های خارجی

یک style sheet خارجی می تواند با استفاه از تگ <link> به یک فایل HTML لینک شود. تگ <link> در بخش <head> قرار می گیرد.

مثال

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

وارد کردن (Importing) style sheetهای خارجی

قانون @import راهی دیگر برای بارگذاری (load) style sheet خارجی است. عبارت @import به مرورگر دستور می دهد تا یک style sheet خارجی را بارگذاری (load) کرده و از استایل هایش استفاده کند.

می توانید به دو روش از این قانون استفاده کنید. آسان ترین روش استفاده از آن در بخش head است. به یاد داشته باشید که ممکن است دیگر قوانین CSS نیز در عنصر <style> وجود داشته باشند.

مثال

<style type="text/css">
    @import url("css/style.css");
    p {
        color: blue;
        font-size: 16px;
    }
</style>

به همین شکل می توانید از قانون @import برای وارد کردن (import) یک style sheet داخل یک style sheet دیگر نیز استفاده کنید.

مثال

@import url("css/layout.css");
@import url("css/color.css");
body {
    color: blue;
    font-size: 14px;
}

نکته: همه ی قوانین @import باید در ابتدای style sheet قرار بگیرند. هر قانون استایلِ تعریف شده در style sheet بطور خودکار قانونِ متناقض در style sheet وارد شده (imported) را حذف می کند.

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

آخرین مقالات

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد