• ساختار کلی CSS
  • کامنت گذاری
  • سلکتور

ساختار کلی CSS را می توان در تصویر زیر مشاهده نمود، که به طور کلی به دو بخش سلکتور (selector) و "اعلان" (declaration) تقسیم می شود. با استفاده از سلکتور می توان تعیین نمود که در کدام یک از المان ها تغییر ظاهری رخ دهد، و در قسمت "اعلان" می توان ماهیت این تغییرات را مشخص کرد. سلکتورها انواع مختلفی دارند که ساده ترین آنها همان تگ های html است. زمانی که یک تگ html نوشته شده و استایلی به آن اختصاص داده می شود، این تگ به عنوان سلکتور عمل کرده و آن استایل را به تمام تگ های مشابه اختصاص می دهد (در تصویر زیر، رنگ و اندازه فونت تمام تگ های <p> قرمز و 25 پیکسل خواهد شد). علاوه بر تگها می توان از کلاس ها و آیدی هم به عنوان سلسکتورهای بسیار مهم نام برد که در ادامه توضیح داده می شوند.

 

 

پس از آنکه با استفاده از سلکتور مشخص شد که چه المانی باید تغییر کند، در قسمت "اعلان" نوع تغییر باید مشخص شود. در این قسمت ابتدا باید ویژگی مورد نظر (رنگ، اندازه، حاشیه و ...) مشخص شود که به آن property گویند. سپس مقدار مطلوب (زرد، قرمز، بولد و ...) به عنوان value به آن اختصاص داده شود. در تصویر فوق، color و font-size هر کدام یک property هستند، که مقدار مطلوب red و 25پیکسل به آنها اختصاص داده شده است تا رنگ و اندازه تگ های <p> تغییر یابد. توجه نمایید که دستورات CSS درون آکولاد قرار می گیرند و انتهای هر دستور نیز باید علامت "؛" قرار داده شود تا دستور اجرا گردد.

 

برخی propertyها مانند border می توانند دارای چند مقدار باشند. در این حالت می توان به راحتی همچون تصویر زیر چند مقدار به یک property اختصاص داد. در تصویر زیر برای تگ های <p> یک حاشیه نقطه چین، قرمز و با ضخامت 3 پیکسل در نظر گرفته شده است.

 

 

نحوه نوشتن CSS در هر دو روش external و internal یکسان است، اما در روش in-line از آنجایی که مستقیم درون تگ مورد نظر نوشته می شود، دیگر نیازی به نوشتن سلکتور نخواهد بود.

در برخی موارد نیاز است تا درون بلاک کدها توضیحاتی در مورد یک یا چند کد نوشته شود، اما این توضیحات توسط سیستم خوانده نشوند. در این حالت می توان با قرار دادن این موارد بین /* و */ آنها را به کامنت (کلمه comment به معنای "نظر شخصی یا توضیح" است) تبدیل کرد. همچنین در موارد دیگری نیز ممکن است کدهایی نوشته شود که اگرچه در حال حاضر نیازی به اجرای آنها نیست، اما در آینده باید اجرا شوند. به جای حذف کردن این گونه کدها می توان با استفاده از این روش، آنها را به کامنت تبدیل نمود تا در وقت مناسب از حالت کامنت خارج شده تا توسط سیستم اجرا شوند.

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

 

} p

    /* set a color for the text: */

    ;color: blue

    /* set the color, thickness and style for the border: */

    border: 3px dotted red;

    /* background-color: yellow; */

{

 

همان طور که در تصویر زیر مشاهده می شود، تمام دستورات فوق اجرا شد، به جز تغییر در رنگ پس زمینه متن که به صورت پیش فرض باقی مانده است.

 

 

 

سلکتور چیست؟

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

سلکتور تگ

در این نوع از سلکتورها کافی است تنها نام تگ مورد نظر را نوشته و استایل های دلخواه برای آن در نظر گرفته شود. از این پس تمامی این استایل ها به تمامی تگ های همنام با سلکتور اختصاص داده می شوند. به عنوان مثال کد زیر را در نظر بگیرید. در این کد چند تگ <p> و چند تگ <div> برای نوشتن متن استفاده شده اند.

 

<body>

    <p>

        Lorem ipsum dolor sit amet consectetur adipisicing.

    <p/>

    <p>

        Lorem ipsum dolor sit amet consectetur.

    <p/>

    <div>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita.

    <div/>

    <p>

        Lorem ipsum dolor sit amet consectetur adipisicing.

    <p/>

    <p>

        Lorem ipsum dolor sit amet consectetur.

    <p/>

    <div>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita.

    <div/>  

<body/>

 

در کد CSS زیر از سلکتور p استفاده شده است تا تمام متون قرار گرفته درون تگ های <p> به رنگ آبی تغییر کنند و از سلکتور div استفاده شده است تا تمام متون قرار گرفته درون تگ های <div> به رنگ سبز تغییر یابند.

 

} p

    ;color: blue

{

} div

    ;color: green

{

 

همان طور که در تصویر مشخص است، تگ های <p> و <div> به ترتیب به رنگ آبی و سبز تغییر یافته اند. نکته حائز اهمیت آن است که با انتخاب یک تگ به عنوان سلکتور و نوشتن استایل برای آن، این استایل به تمامی تگ های همنام با آن تگ که درون این صفحه قرار دارند، اختصاص داده می شود.

 

 

حال چنانچه بخواهید استایل مورد نظر را به چند نوع تگ تخصیص دهید، کافیست از یک علامت ویرگول یا کاما بین سلکتورهای استفاده نمایید. در کد زیر، استایل نوشته هم به تگ های p و هم به تگ های div اعمال خواهد شد.

 

} p , div

    ;color: purple

{

 

همان طور که در تصویر نشان داده شده است، تمامی متون قرار گرفته در تگ های p و div به رنگ بنفش در آمده اند.

 

 

سلکتور class

در سلکتور تگ با انتخاب یک تگ و نوشتن استایل برای آن، این استایل به تمامی تگ های همنام اختصاص داده می شد. اما چنانچه بخواهیم استایل مورد نظر به یک سری از المان ها (از یک یا چند نوع تگ مختلف) اعمال شوند، برای آن المان ها یک کلاس با نام دلخواه تعریف نموده و از این نام به عنوان سلکتور کلاس استفاده می نماییم. برای متمایز کردن نام کلاس ها هنگام معرفی به عنوان سلکتور، کافی است یک نقطه در ابتدای نام کلاس قرار داده شود. با این کار سیستم متوجه خواهد شد که با یک کلاس مواجه است و باید استایل نوشته شده را برای تمامی تگ هایی که از جنس این کلاس هستند اعمال کند.

 

 

در کد زیر برای دو تگ p و یک تگ div کلاسی با نام دلخواه myText تعریف شده است.

 

<body>

    <p>

        Lorem ipsum dolor sit amet consectetur adipisicing.

    <p/>

    <p class="myText">

        Lorem ipsum dolor sit amet consectetur.

    <p/>

    <div>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita.

    <div/>

    <p class="myText">

        Lorem ipsum dolor sit amet consectetur adipisicing.

    <p/>

    <p>

        Lorem ipsum dolor sit amet consectetur.

    <p/>

    <div class="myText">

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita.

    <div/>  

<body/>

 

در کدهای CSS زیر برای تغییر رنگ تمامی المان هایی که از کلاس myText هستند، در ابتدای نام کلاس یک نقطه گذاشته، سپس استایل مورد نظر جهت تغییر رنگ متن به قهوه ای نوشته شد.

 

} myText.

    ;color: brown

{

 

 همان طور که مشاهده می شود، تمام المان هایی که نام کلاس آنها myClass هستند، به رنگ قهوه ای نمایش داده شده اند.

 

 

سلکتور ID

همان طور که در آموزش سلکتور کلاس آموختیم، می توان با تعریف کلاس برای چند المان (از تگ های مختلف)، به همه آنها یک استایل واحد اختصاص داد. اما ممکن است حالتی پیش آید که نیاز باشد یک استایل خاص را تنها به یک المان اختصاص دهیم. در این حالت از مفهومی به نام آی دی (id) استفاده می شود. برای متمایز ساختن المانها از یکدیگر می توان به آنها یک id با نامی دلخواه و منحصر به فرد اختصاص داد، تا هر زمان که این نام فراخوانده شود، استایل نوشته شده تنها به این المان اختصاص داده شود. توجه فرمایید که لازم است برای هر المانی که یک آی دی تعریف می شود، حتما از یک نام منحصر به فرد نیز استفاده گردد. به عبارت دیگر، هیچ دو المانی دارای آی دی یکسان نباشند.

برای متمایز کردن نام id هنگام معرفی به عنوان سلکتور، کافی است یک علامت # در ابتدای نام id قرار داده شود. با این کار سیستم متوجه خواهد شد که با یک id مواجه است و باید استایل نوشته شده را برای المانی اعمال کند که دارای یک id با همین نام است.

 

 

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

 

<body>

    <p>

        Lorem ipsum dolor sit amet consectetur adipisicing.

    <p/>

    <p class="myText">

        Lorem ipsum dolor sit amet consectetur.

    <p/>

    <div>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita.

    <div/>

    <p class="myText" id="myTextId">

        Lorem ipsum dolor sit amet consectetur adipisicing.

    <p/>

    <p>

        Lorem ipsum dolor sit amet consectetur.

    <p/>

    <div class="myText">

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita.

    <div/>  

<body/>

 

سپس این المان در سند CSS، با استفاده از علامت # پیش از نام id آن (myTextID) فراخوانده می شود تا رنگ آن به صورتی تغییر یابد.

 

} myTextId#

    ;color: pink

{

 

همان طور که در تصویر مشخص است، تنها رنگ المانی تغییر یافته است که نام id آن برابر با myTextId بود.

 

best tracker