شروع کار با CSS

از کار با سی‌اس‌اس لذت ببرید، آموزش سی اس اس را همین حالا با سایت تکبیت شروع کنید

شروع کار با CSS

با عرض سلام

از آن‌جا که خروجی و تاثیر زبان سی‌اس‌اس مستقیماً توسط کاربران وب قابل مشاهده است لذا می‌توان از این زبان به عنوان مهمترین و پرکاربردترین گزینه برای طراحان رابط کاربری وب سایت‌ها (User Interface) یاد کرد. با استفاده از سی‌اس‌اس کلیه‌ی عناصر و محتوای موجود در صفحه وب از نظر چیدمان، رنگ‌بندی و حالت نمایش ساماندهی می‌شوند. حتی برخی پویانمایی‌ها را نیز می‌توانید با CSS3 انجام دهید. البته برای این زبان ماژول‌ها، کتابخانه‌ها و چارچوب‌های نرم‌افزاری مختلفی ارائه شده است. برای نمونه می‌توانید از ماژول‌های آماده Pure استفاده کنید و یا به سراغ چارچوب نرم‌افزاری Bootstrap بروید اما در صورتی که از قبل با خود زبان سی‌اس‌اس و ماهیت دستورات آن آشنا باشید ارزش بالاتری دارد چرا که می‌توانید کدهای شخصی (Custom) تولید کنید و از طرفی مشکلی برای کار با کتابخانه‌ها و تفسیر کدهای از قبل نوشته شده، نداشته باشید.

از کجا شروع کنیم؟

برای کد زنی با CSS سه روش وجود دارد که به ترتیب اولویت اجرا، عبارتند از:

  • روش درون خطی (Inline)
  • روش درون سندی (Internal)
  • روش فراخوانی از خارج سند (External)

روش درون خطی (Inline)

همانطور که می‌دانید صفحات وب از کدهای نشانه‌گذاری HTML تشکیل شده‌اند. با توجه به ساختار این کدها، یکی از روش‌های اعمال دستورات CSS استفاده از ویژگی Style است که درست در تگ آغازین هر عنصر می‌توان از آن استفاده کرد. به نمونه‌های زیر دقت کنید:

<p style="کدهای سی‌اس‌اس" > ...value... </p>

<h1 style="کدهای سی‌اس‌اس" > ...value... </h1>

استفاده از این روش چندان توصیه نمی‌شود زیرا هم از نظر فنی و هم از نظر بهینه‌سازی سایت در موتورهای جستجو (SEO) مناسب نیست. در موارد خاص از این روش استفاده کنید. البته ویرایشگرهای تحت وب به صورت خودکار از روش Inline برای صفحه‌آرایی استفاده می‌کنند که مشکلی وجود ندارد زیرا در این حالت کدها به صورت الگوریتمی مدیریت (ایجاد، ویرایش، حذف) می‌شوند.

در این روش برنامه‌نویس مجبور است به ازای هر عنصر HTML مجموعه دستورات جدا بنویسد که باعث شلوغی و افزایش حجم کد می‌شود. حال فرض کنید که بنا به دلایلی قواعد تعریف شده نیاز به تغییر داشته باشند، تمام کد به صورت سطر به سطر باید اصلاح شود که به احتمال زیاد زمان بیهوده و زیادی خواهد برد.

روش درون سندی (Internal)

در این سبک دستورات سی‌اس‌اس به یک تگ مخصوص به نام <style> منتقل می‌شوند. دقت کنید که ویژگی style با تگ <style> اشتباه گرفته نشود. ویژگی style را به هریک از تگ‌های زبان HTML می‌توان اعمال نمود زیرا یک ویژگی عمومی (Global Attribute) است اما تگ <style> تنها یک برچسب می‌باشد. این تگ باید در قسمت سرصفحه و در درون تگ <head> قرار داشته باشد. به مثال زیر دقت کنید:

<!doctype html>
<html>
    <head>
        <style>
            مجموعه دستورات سی‌اس‌اس
        </style>
    </head>
<body>
    کدهای بدنه صفحه
</body>
</html> 

در این شیوه امکان استفاده از انتخاب‌گرهای سی‌اس‌اس (Selector) وجود دارد به این معنا که می‌توان قواعد تعریف شده را به طیفی دلخواه از تگ‌های HTML اعمال نمود و حجم کد را کاهش داد اما همچنان معایـبی وجود دارد از جمله:

  1. با اینکه حجم کد در این روش، نسبت به روش درون خطی کمتر است اما باز هم حجم کلی سند مستعد زیاد شدن است.
  2. برنامه‌نویس مجبور است به ازای هر صفحه وب (Web page) مجموعه قواعدی را تعریف کند. اگر تعداد صفحات سایت زیاد باشد این کار عملاً ممکن نخواهد بود.

روش فراخوانی از خارج سند (External)

در این حالت کلیه کدهای سی‌اس‌اس در یک فایل جداگانه نوشته می‌شوند. پسوند این فایل css و ماهیت آن متنی می‌باشد. سپس توسط تگ زیر، این فایل در صفحه وب یا همان سند HTML فراخوانی می‌شود.

    <link href="http://path/to/file/style.css" rel="stylesheet" type="text/css">

این تگ حتماً باید در درون تگ <head> قرار داده شود تا جزء اولین آیتم‌هایی باشد که برای کامپیوتر کاربر (Client) ارسال می‌شود. بدیهی است که مقدار ویژگی href باید همان آدرس فایل سی‌اس‌اس مورد نظر شما باشد. اگر فایل شما بر روی کامپیوتر خودتان و در کنار فایل HTML قرار دارد می‌توانید از روش آدرس دهی نسبی (Relative) استفاده کنید. در مثال زیر فرض بر این است که جهت یادگیری سی‌اس‌اس، فایل شما به سادگی در کنار فایل HTML شما قرار دارد. در این حالت تنها ذکر نام فایل css در قسمت href کفایت می‌کند.

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

ساختار دستورات CSS

دستورات یا همان کدهای سی‌اس‌اس ساختار کلی و بسیار ساده‌ای دارند. این ساختار به صورت زیر است:

command : value(s) ;

منظور از command همان اسم دستور است و منظور از value(s) مقدار یا مقادیری است که دستور می‌تواند بپذیرد. کاراکتر سمی‌کالن ";" نشان‌دهنده انتها و اتمام یک دستور است. برای مثال یکی از دستورات سی‌اس‌اس، color نام دارد و مقادیری که می‌پذیرد همان اسم رنگ‌ به لاتین و یا کد رنگ در مبنای 16 می‌باشد. اگر تمایل به استفاده از کد رنگ دارید، قبل از آن باید علامت # قرار دهید. عملکرد دستور color به این صورت است که رنگ نوشته درون عنصر (مثلاً پاراگراف یا تگ div) را تنظیم می‌کند. برای مثال اگر مقدار دستور معادل red یعنی رنگ قرمز باشد و به تگ <p> اعمال شود رنگ نوشته پاراگراف قرمز خواهد بود. به نمونه زیر دقت کنید:

color:red;

البته در مثال بالا این کد به هیچ عنصری اعمال نشده و صرفاً جهت بیان ساختار ساده دستورات سی‌اس‌اس می‌باشد. در ادامه با استفاده از انتخاب‌گرهای سی‌اس‌اس (Selector) تعیین می‌کنیم که دستورات به کجا اعمال شوند.

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

border: 1px solid #AA559B;

انتخابگرهای سی‌اس‌اس CSS Selectors

اینکه کدهای سی‌اس‌اس ما به کجا قرار است اعمال شوند، توسط انتخابگرها مشخص می‌شود. بیش از پنجاه انتخابگر مختلف برای زبان سی‌اس‌اس تعریف شده است. در ادامه به منظور جلوگیری از طولانی شدن این آموزش پنج انتخاب کننده پرکاربرد را بیان می‌کنیم. سایر انتخاب کننده‌ها را در آموزش‌های جداگانه قرار می‌دهیم. دقت داشته باشید که انتخاب کننده‌ها در مد External و یا Internal قابل تعریف هستند و در حالت Inline نمی‌توان از آن‌ها استفاده کرد. پس پیشنهاد می‌شود طبق روش External یک فایل با پسوند css ایجاد و آن را در ویرایشگر متنی خود باز کنید. کدهای سی‌اس‌اس را در آن وارد و ذخیره کرده و سپس فایل را در سند HTML خود بارگذاری نمایید تا بتوانید با زدن کلید F5 در مرورگر خود خروجی کارتان را نگاه کنید. شکل کلی استفاده از انتخاب‌گرها عبارتست از:

selector {
    command1: value;
    command2: value;
    ...
} 

انتخاب‌گر .class

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

فایل سی‌اس‌اس به نام style.css

.paragraph{
    color: red;
    text-align:justify;
    direction: rtl;
}

سند HTML

<!doctype html>
<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <p class="paragraph">
        خوشحالم که با سی‌اس‌اس آشنا شدم. از این به بعد خواهم توانست ظاهر صفحاتم را تزیین کنم.
    </p>
    <p>
        کلیه حقوق سایت محفوض است
    </p>
</body>
</html>

کلاس paragraph تنها به اولین تگ <p> اعمال خواهد شد. لذا متن پاراگراف اول قرمز، چیدمان آن از نوع بلوک چین و جهت آن از راست به چپ خواهد بود. می‌توانید یک کلاس را به هر تگی اعمال کنید.

انتخاب‌گر #id

قواعد تعریف شده در این انتخاب‌گر، تنها به یک عنصر یکتا در سند HTML اعمال خواهند شد. این عنصر یکتا باید قبلاً توسط ویژگی عمومی id در سند HTML تعریف شده باشد. مثال:

فایل سی‌اس‌اس به نام style.css

#header{
    width: 100%;
    padding:5px;
}

سند HTML

<!doctype html>
<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="header">
        ...
    </div>
</body>
</html>

انتخاب‌گر *

قواعد موجود در این انتخاب‌گر به سادگی به کلیه‌ی تگ‌های سند HTML اعمال می‌شود. تمامی تگ‌ها دارای حاشیه‌ای به ضخامت 2 پیکسل خواهند بود.

*{
    margin: 2px;
}

انتخاب‌گر نام عنصر

قواعد تعریف شده به تمامی تگ‌های هم نوع اعمال خواهد شد. در این مثال تمام تگ‌های div دارای حاشیه‌ای به ضخامت 2 پیکسل خواهند بود.

div{
    margin: 2px;
}

انتخاب‌گر کاما

در این‌جا کاراکتر کاما مانند حرف اضافه‌ی "و" عمل می‌کند. می‌توانید چند تگ مختلف را همزمان انتخاب کنید تا دستورات سی‌اس‌اس مورد نظر خود را به آن‌ها اعمال کنید. در این مثال دستور margin به تمامی تگ‌‌های <div> و تگ‌های <p> اعمال شده است.

div,p{
    margin: 2px;
}

Thanks to: w3schools


مؤلف:
بازدید: 2535
تاریخ:

نظر خود را به عنوان اولین دیدگاه بیان کنید.

نام: * کد امنیتی: *
دیدگاه شما: *


وب سایت:
ایمیل: پنهان باشد
تلگرام: پنهان باشد
موبایل: پنهان باشد
جنسیت: آقا خانم اعلام نمی‌کنم
رنگ‌بندی: بنفش قرمز آبی سبز طلایی
  • درج کدهای HTML ممنوع است.
  • از ارسال تکراری خودداری فرمایید.
  • بهتر است با حروف پارسی دیدگاه خود را تایپ کنید.
  • به منظور کنترل و مدیریت محتوا، در صورت اضطرار، حق ویرایش و یا حذف نظر برای مدیریت محفوظ است.