مقدمه ای بر CSS

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

نحوه استفاده از دستورات CSS در صفحات وب

دستورات 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 | Html & 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>

انتخابگرها در CSS

هنگام استایل دهی به عناصر مختلف به روش Internal یا External ابتدا باید عنصری که قصد دارید به آن استایل دهید را انتخاب نمایید که به آن اصطلاحاً CSS Selector گفته می شود. تنظیمات (استایل) هر Selector بین علامت های { } قرار گرفته و پایان هر تنظیمات نیز مانند دستورات جاوا اسکریپت و سی شارپ علامت ; قرار می گیرد.

Id Selector (آیدی سلکتور)

هنگامی که قصد داشته باشید تنظیمات برای تنها یک عنصر اعمال شود ابتدا باید برای عنصر مورد نظر در تگ html یک id تعیین کرده و در بخش css توسط id selector استایل آن را اعمال نمایید. نشانه id selector در css علامت # می باشد.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Html & Css Tutorial</title>
    <style>
      #p1 {
        color: red;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <p id="p1">Welcome to Beno</p>
  </body>
</html>

Class Selector

در برخی موارد نیاز خواهید داشت تنظیمات روی گروهی از عناصر اعمال شوند. در این حالت می توانید برای عناصر مورد نظر یک کلاس مشترک تعیین کرده و سپس در بخش css تنظیمات را روی کلاس مورد نظر اعمال نمایید. نشانه کلاس در css علامت . می باشد.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Html & Css Tutorial</title>
    <style>
      .red {
        color: red;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <p class="red">Welcome to Beno</p>
    <p class="red">Enjoy Learning Css</p>
  </body>
</html>

Tag Selector

اگر قصد داشته باشید استایلی به تمامی تگ هایی از یک نوع اعمال کنید می توانید از Tag Selector استفاده نمایید. در این روش تنها ذکر نام تگ کافی می باشد.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Html & Css Tutorial</title>
    <style>
      p{
        color: red;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <p>Welcome to Beno</p>
    <p>Enjoy Learning Css</p>
  </body>
</html>

Attribute Selector

از این روش برای استایل دهی به عناصر بر اساس مقدار attribute آنها استفاده می شود. برای مثال فرض کنید دو تگ input به شکل زیر دارید:

<input type="button" value="Register" />

<input type="submit" value="Submit" />

اگر توسط tag selector اقدام به استایل دهی کنیم، استایل مورد نظر برای هر دوی آنها اعمال می شود. حال فرض کنید قصد داریم بدون استفاده از آیدی و کلاس استایل های متفاوتی را به این عناصر اعمال کنیم، در چنین شرایطی می توان از attribute selector استفاده کرد.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Html & Css Tutorial</title>
    <style>
      input[type='button']{
        color: red;
      }
      input[type='button']{
        color: green;
      }
    </style>
  </head>
  <body>
      <input type="button" value="Register" />
      <input type="submit" values="Submit" />
  </body>
</html>

در این مثال با آنکه هر دو تگ از نوع input می باشند اما تنظیمات متفاوتی بر اساس محتوای خاصیت type بر روی آنها اعمال می شود. درباره این selector در آینده بیشتر صحبت خواهیم کرد.

 یکی از هنرهای کد نویسی، استفاده از روش های مختلف و ترکیب آنها بصورتی می باشد که تعداد نام های استفاده شده (برای id و class) به حداقل ممکن برسند.

مثال: صفحه ای طراحی کنید که حاوی 5 پاراگراف باشد، پاراگراف اول و دوم با رنگ قرمز، پاراگراف سوم با رنگ بنفش و دو پاراگراف آخر با رنگ آبی باشند.

تحلیل: در این مثال برای عناصری که تنظیمات مشترک دارند می توان از کلاس و برای عنصری که تنظیماتش منحصربفرد می باشد می توان از id استفاده نمود.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Html & Css Tutorial</title>
    <style>
        .red{
            color: red;
        }
        #violet{
            color: violet;
        }
        .blue{
            color: blue;
        }
    </style>
  </head>
  <body>
      <p class="red">Welcome to Beno Academy</p>
      <p class="red">I hope you enojoy!</p>
      <p id="violet">In this Site you can learn everything.</p>
      <p class="blue">Programming</p>
      <p class="blue">Web Designing</p>
  </body>
</html>

پس ذخیره و اجرای صفحه، نتیجه اجرا به شکل زیر خواهد بود.

 نحوه استفاده از رنگ ها در CSS

رنگ یکی از قدرتمندترین ابزارهای طراحی سایت می باشد. رنگ می تواند برای جلب توجه، بیان معنا، ایجاد میل و حتی کسب وفاداری مشتری استفاده گردد. هنگامی که انتخاب رنگ ها به درستی انجام شود، می تواند بر نحوه تفسیر بازدیدکننده از آنچه که می بیند تأثیر گذار باشد و انتخاب مناسب آنها برای موفقیت وبسایت شما بسیار مهم است.

در CSS از خاصیت color برای تعیین رنگ عناصر استفاده می شود که مقدار آن را به چهار روش زیر می توان تعیین نمود.

نام رنگ

ساده ترین روش اعمال رنگ، استفاده از نام رنگ ها می باشد که همگی با تعداد مناسبی از آنها آشنایی داریم.

p{
    color: red;
}

RGB

RGB یکی از سیستم های تعیین رنگ می باشد که در آن تمامی رنگ ها از ترکیب سه رنگ قرمز، سبز و آبی تشکیل می شود. مقدار هر رنگ می تواند بین 0 تا 255 باشد.

rgb(red, green, blue)

مثال:

p{
    color: rgb(218,42,19);
}

حالت دیگری از rbg به نام rgba وجود دارد که در آن از 4 عدد استفاده می شود که عدد چهارم بیانگر میزان شفایت بوده و می تواند مقداری بین 0 تا 1 داشته باشد. 0 به معنی کاملا شفاف و 1 به معنی حالت عادی رنگ (بدون شفافیت) می باشد. هنگامی که یک عنصر شفاف باشد، عناصر زیری آن نیز قابل مشاهده خواهد بود.

p{
    color: rgba(189, 14, 130, 0.7);
}

HEX

یکی دیگر از روش های تعیین رنگ استفاده از کدهای هگزا دسیمال می باشد که شامل 6 کاراکتر می باشد (2 کاراکتر به ازای هر رنگ).

#rrggbb;

مثال:

p{
    color: #ff6347;
}

HSL

در CSS می توان از ترکیب رنگ، اشباع و سبُکی نیز رنگ عناصر را تعیین نمود.

hsl(hue, saturation, lightness)

Hue می تواند مقداری بین 0 تا 360 داشته باشد که در چرخه رنگ ها (color wheel) وجود دارد و در آن 0 بیانگر قرمز، 120 بیانگر سبز و 240 نیز آبی می باشد.

Saturation یک مقدار درصدی می باشد که در آن 0% به معنی خاکستری و 100% به معنی رنگ کامل می باشد.

Lightness نیز یک مقدار درصدی بوده که در آن 0% به معنی سیاه، 50% رنگی بین سیاه و سفید و 100% رنگ سفید می باشد.

مثال:

p{
    color: hsl(86, 100%, 50%);
}

برای hsl نیز همانند rgb، حالت شفاف کننده وجود دارد که توسط دستور hsla قابل اعمال می باشد.

p{
    color: hsla(86, 100%, 50%, 0.6);
}

مثال: صفحه ای دارای چهار پاراگراف طراحی کرده و به هر یک از آنها با استفاده روش های فوق رنگ های نارنجی، بنفش، سبز و قرمز را اعمال کنید.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
        #p1{
            color: orange;
        }
        #p2{
            color: rgb(128,0,128);
        }
        #p3{
            color: #00ff00;
        }
        #p4{
            color: hsl(0, 100%, 50%);
        }
    </style>
  </head>
  <body>
      <p id="p1">Paragraph 1</p>
      <p id="p2">Paragraph 2</p>
      <p id="p3">Paragraph 3</p>
      <p id="p4">Paragraph 4</p>
  </body>
</html>