مقدمه ای بر CSS

CSS که مخفف عبارت Cascading Style Sheet می باشد یکی از عناصر ضروری و مهم هر صفحه اینترنتی بوده که توسط آن می توان به عناصر استایل مورد نظر را اعمال کرد. منظور از استایل دهی به عناصر، اعمال کلیه تغییرات ظاهری و بصری از جمله: عرض، ارتفاع، رنگ، نوع حاشیه، نوع فونت و ... می باشد.

نحوه استفاده

دستورات CSS به سه روش در صفحات وب قابل استفاده می باشند.

Inline CSS

در این حالت دستورات CSS درون خاصیت style مربوط به تگ مورد نظر نوشته می شوند.

<p style="color: red;">Welcome to Beno</p>

هنگامی که قصد دارید از CSS بصورت inline استفاده نمایید می بایست نکات زیر را رعایت کنید.

  • دستورات CSS در خاصیت style مربوط به تگ مورد نظر و بین علامت های " " قرار می گیرند.
  • مقدار دهی ویژگی های CSS با استفاده از علامت : می باشد.
  • در صورتیکه قصد اعمال بیش از یک تنظیمات را داشته باشید، بین تنظیمات مختلف از علامت ; استفاده می شود.
<p style="color: red;font-size: 14px;">Welcome to Beno</p>

Internal CSS

در این روش دستورات CSS در بخش head و درون تگ <style> قرار می گیرند.

<head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
        p{
            color: red;
            font-size: 14px;
        }
    </style>
</head>

External CSS

در پروژه های واقعی آنقدر دستورات CSS زیاد می شوند که هیچ یک از دو روش فوق پاسخگو نخواهد بود و روش های ذکر شده تنها برای انجام تمرین مناسب می باشند. در چنین شرایطی دستورات CSS را در یک فایل مجزا به با پسوند CSS ایجاد کرده و آن ر در قسمت <head> به صفحه لینک می نماییم.

<head>
    <title>Beno Academy | Css Tutorial</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>