آشنایی با style ها در زبان HTML
CSS زبانی برای استایل دهی به صفحاتی است که بر پایه HTML طراحی شده است. درحالی که HTML ساختار صفحه را فراهم می آورد، CSS با تعامل با مرورگر باعث به وجود آمدن ظاهر مناسب برای HTML در صفحه نمایش میشود.
برای مثال ممکن است شما از HTML برای تبدیل یک عبارت به یک سرتیتر سطح بالا استفاده کنید و از CSS برای استایل دهی به آن سرتیتر. مثلا این سرتیتر باید بزرگ، به رنگ قرمز و در مکانی باشد که به اندازه ی 50 پیکسل از گوشه ی سمت چپ مرورگر فاصله داشته باشد. در CSS به قوانینی که ظاهر یک قسمت مشخص از صفحه را تعیین میکنند style میگویند و به مجموعه ای از style ها style sheet گفته میشود.
شما میتوانید style ها را برای کار با هر تگ HTML ایی ایجاد کنید، برای مثال شما میتوانید استایل هایی ایجاد کنید که تصاویر در صفحه را فرمت بندی کنند. برای نمونه یک استایل میتواند یک تصویر را نسبت به دیگر عناصر ترازبندی کند، یک بوردر رنگی در اطراف تصویر ایجاد کند و فاصله ای به اندازه ی 50 پیکسل بین تصویر و دیگر عناصر موجود در صفحه تدارک ببیند.
مرورگر استایل هایی را که شما ایجاد کرده اید بر روی متون، تصاویر، هیدینگ ها و دیگر عناصر صفحه اعمال میکند. برای مثال شما میتوانید استایلی ایجاد کنید که روی یک پاراگراف مشخص در یک صفحه اعمال شود و فورا سایز متن، رنگ و فوت آن را تغییر دهد. شما میتوانید استایل هایی را ایجاد کنید که روی تگ های خاصی از HTML اعمال میشود برای مثال مرورگر تگ های <h1> در صفحه شما را به یک شکل نشان میدهد و اهمیتی ندارد که این تگ ها در کجای صفحه قرار داشته باشند و حتی شما میتوانید استایلی تعریف کنید که تنها روی یک تگ خاصی اعمال شود که قبلا به طریقی در HTML نشانه گذاری شده است.
حتی پیچیده ترین و زیبا ترین وب سایت ها هم مانند آن چیزی که در شکل زیر مشاهده میکنید با یک استایل CSS شروع شده اند. با اضافه کردن استایل ها به صفحات وب میتوانید صفحاتی را ایجاد کنید که موجب شگفتی کاربرانتان شود. چه در کار کردن با CSS یک حرفه ای باشید و یا یک تازه کار، نیاز است یک سری قوانینی را در مورد چگونگی ایجاد style ها و style sheet ها رعایت کنید. در این فصل به این قوانین خواهیم پرداخت.
ساختار یک Style
یک استایل به تنهایی ظاهر یک عنصر در یک صفحه را مشخص میکند. به عبارتی دیگر یک استایل دستورالعملی است که به مرورگر میگوید چطور عنصری در صفحه را فرمت بندی کند برای مثال رنگ یک عنصر هیدینگ را به آبی تغییر دهد، یک بورد قرمز اطراف یک تصویر ایجاد کند و یا ساید باری به عرض 150 پیکسل برای نگهداری لینک ها ایجاد کند. اگر یک استایل میتوانست صحبت کند حتما چیزی شبیه به این میگفت : "آهای مرورگر این را شبیه آن بکن".
در واقع یک استایل از دو قسمت تشکیل شده است : عنصری در صفحه که قصد اعمال فرمتی جدید را روی آن داریم که به آن selector یا انتخاب کننده میگویند و دستورالعمل هایی که نحوه ی فرمت بندی را مشخص میکند که declaration block یا بلاک اعلان نام دارد. برای مثال یک selector میتواند یک عنصر هیدینگ ، پاراگرافی از متن، یک تصویر و ... باشد و بلاک اعلان میتواند شامل قوانینی مانند تغییر رنگ هیدینگ به آبی، اضافه شدن یک بوردر قرمز رنگ اطراف پاراگراف، قرار دادن تصویر در وسط صفحه و ... باشد.
یک style در CSS شامل یک انتخاب کننده (selector) و بلاکی است که اعلان (declaration) در آن قرار میگیرد :
selector به عنصری از HTML اشاره دارد که قصد داریم استایل را روی آن اعمال کنیم.
بلاک اعلان خود شامل یک یا چندین تعریف است که با استفاده از علامت نقطه ویرگول (;) از هم جدا شده اند.
تعریف ها خود شامل نام صفت CSS و مقدار آن هستند که توسط یک علامت دو نقطه (:) از هم جدا شده اند.
تعریف ها در CSS همیشه با علامت نقطه ویرگول (;) خاتمه پیدا میکنند و بلاک اعلان همیشه توسط یک جفت بریس ({ }) احاطه شده است.
نمونه مثال زیر کدی را نشان میدهد که تمام عناصر <p> در صفحه ی HTML را وسط چین کرده و رنگ آنها را به قرمز تغییر میدهد :
} p
;color : red
;text-align : center
{
selector ها در CSS
از selector ها در CSS برای پیدا کردن و یا انتخاب یک عنصر HTML براساس مقدار name ، id ، class و صفات آن عنصر استفاده میشود.
انتخاب کننده عنصر
انتخاب کننده عنصر، عنصر را بر اساس نام آن عنصر پیدا یا انتخاب میکند.
با استفاده از انتخاب کننده ای که در مثال زیر نشان داده شده است میتوان تمام عناصر <p> در یک صفحه وب را انتخاب کرد و سپس بلاک اعلان را روی آن اعمال کرد :
} p
;text-align : center
;color : red
{
انتخاب کننده ی id
انتخاب کننده ی id ، از صفت id عنصر HTML جهت پیدا کردن یک عنصر منحصر به فرد استفاده میکند.
مقدار id یک عنصر در صفحه باید منحصر به فرد بوده و به همین دلیل انتخاب کننده ی id نیز یک عنصر منحصر به فرد را انتخاب میکند.
برای انتخاب یک عنصر با یک id خاص ، در ابتدای selector ، کاراکتر (#) را قرار داده و به دنبال آن، id عنصر را مینویسیم.
نمونه کد زیر فقط به عنصری با شناسه "id="para1 اعمال میشود.
} para1#
;text-align : center
;color : red
{
نکته : مقدار صفت id برای یک عنصر HTML نمیتواند با مقدار عددی آغاز شود به همین دلیل نوشتن انتخاب کننده ای همچون 2para# صحیح نیست.
انتخاب کننده class
انتخاب کننده ی class عناصری را انتخاب میکند که دارای صفت class خاصی باشند.
برای انتخاب عناصری با یک class خاص، در ابتدای selector ، کاراکتر نقطه (.) را قرار داده و به دنبال آن، مقدار class را مینویسیم.
در نمونه مثال زیر تمام عناصری که دارای مقدار "class="center باشند، وسط چین شده و مقدار رنگ آنها به قرمز تغییر خواهد کرد.
} center.
;text-align : center
;color : red
{
همان طوری که در مثال زیر نشان داده شده است میتوان دایره انتخاب selector را به یک نوع عنصر محدود کرد.
در مثال زیر تنها عناصر پاراگرافی (<p>) که دارای مقدار "class="center باشند وسط چین شده و رنگ قرمز روی آنها اعمال میشود.
} p.center
; text-align : center
; color : red
{
عناصر HTML میتوانند چندین مقدار برای صفت class داشته باشند.
در نمونه مثال زیر عنصر پاراگراف دارای دو مقدار center و large برای صفت class است که هر کدام میتوانند استایل جداگانه ای در CSS داشته باشند.
<p class = "center large " >This paragraph refers to two classes. </p >
نکته : مقدار صفت class برای یک عنصر HTML نمیتواند با مقدار عددی آغاز شود.
انتخاب کننده های گروهی
اگر شما عناصری داشته باشید که استایل یکسانی داشته باشند همانند مثال زیر :
} h1
;text-align : center
;color : red
{
} h2
;text-align : center
;color : red
{
} p
;text-align : center
;color : red
{
بهتر است برای صرفه جویی در نوشتن کد از selector های گروهی استفاده کنید.
کد بالا را میتوان توسط انتخاب کننده های گروهی به شکل زیر باز نویسی کرد. در این روش انتخاب کننده های توسط علامت ویرگول (,) از هم جدا میشوند :
} h1, h2, p
;text-align : center
;color : red
{
Comment ها در CSS
Comment ها برای توضیح کد های برنامه استفاده میشوند و ممکن است برای اصلاحات آینده به فهم شما از کد کمک کنند.
کامنت ها توسط مرورگر ها نادیده گرفته میشوند.
کامنت ها در CSS با */ آغاز و با /* خاتمه پیدا میکنند :
} p
;color : red
/* This is a single-line comment */
;text-align : center
{
This is */
a multi-line
/* comment
منبع:learnsource