انجمن‌های فارس وب

این تاپیک به آموزش CSS اختصاص داده‌شده و هردفعه پست‌هایی در مورد آموزش CSS بهش اضافه می‌شه. فعلا در جلسه‌ی اول توضیحات مختصری در مورد CSS می‌دهم. لبخند

نبودن استانداردی برای صفحات وب در سال‌های اولیه‌ی عمر اینترنت باعث می‌شد که هر مرورگری تگ‌های خودش رو داشته باشه و یا این‌که تگ‌های جدیدی ارائه بده. در این صورت بعضی از صفحات وب فقط با مرورگر خاصی کامل و سالم Load می‌شدند؛ این بود که گروهی بنام W3C به فکر ارائه استانداردی واحد برای صفحات وب افتادند و شاید بشه گفت یکی از اهداف شکل‌گیری CSS همان جدا کردن محتوی از طراحی باشه، به این صورت که CSS مسئول نمایش ظاهری صفحات شد و XHTML دربرگیرنده‌ی محتوی و اطلاعات صفحات وب.

CSS یا همان Cascading Style Sheet روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل: متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون استفاده از کدهای HTML. بوسیله CSS می‌توانیم از دوباره نویسی کد‌های HTML جلوگیری کنیم که این خود باعث صرفه‌جویی در وقت، بالارفتن سرعت لود و کم‌شدن حجم صفحات می‌شود. برای مثال بوسیله CSS می‌توانیم یک بار ویژگی‌های فونت مورد استفاده در صفحه مثل: اندازه، زنگ و نوع را تعیین کنیم و دیگر مجبور نیستیم که در صفحات مختلف یا قسمت‌های مختلف یک صفحه دوباره این ویژگی‌ها را تعیین کنیم؛ پس بنابراین می‌توانیم با ایجاد یک تغییر ساده در CSS ظاهر همه‌ی صفحات را یک‌جا تغییر دهیم. مثلا فرض می‌کنیم 100 صفحه‌ داریم و می‌خواهیم رنگ متن تمام این صفحات عوض شود لازم نیست تمام این 100 صفحه را تغییر دهیم تنها کافی‌است که ویژگی رنگ مربوط به متن را در CSS تغییر دهیم. بنابراین با ایجاد یک تغییر ساده در یک فایل CSS ظاهر تمام آن 100 صفحه به راحتی تغییر می‌کند.

قبل از این‌که انواع استایل‌ها رو توضیح بدم لازم می‌دونم که در مورد DIV یه توضیحات مختصری بدم چون در خیلی از مثال‌ها از DIV استفاده شده.

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

This is some text <div style="color:#FF0000;">

<h4>This is a header in a div section</h4>

<p>This is a paragraph in a div section</p>

</div>

خروجی:

This is some text
This is a header in a div section

This is a paragraph in a div section

حالا خط به خط کد‌های بالا رو مرور می‌کنیم. در خط اول عبارت " This is some text" رو مشاهده می‌کنیم که در داخل DIV قرار نداره، بنابراین شامل ویژگی‌های تعریف شده در DIV نمی‌شه و به همان صورت در خروجی نمایان می‌شه. بعد از این عبارت به تگ DIV می‌رسیم که در آن استایلی وجود داره که خصوصیت رنگ رو برای متن‌های داخل DIV تعریف کرده و همانطور که ملاحظه می‌کنید تمام متن‌های داخل این DIV به رنگ قرمز درآمده‌اند. DIV می‌تونه شامل تگ‌های دیگری از HTML هم بشه و در مثال بالا تگ‌های <h4> و <p> در داخل این DIV قرار دارند. اگر توجه کرده‌ باشید می‌بینید که در خط اول بین بعد از عبارت " This is some text" تگ DIV گذاشته شده ولی در خروجی، محتویات پشت سر‌هم نشان‌داده نشده‌اند و محتویات DIV در سطر بعد نشان داده‌شده‌اند چون مرورگرها معولا قبل و بعد از تگ DIV به صورت خودکار یک خط جداکننده (Line Break) اضافه می‌کنند.

انواع استايلها:

Inline Style: اين نوع استايل در داخل تگهاي HTML به كار گرفته می‌شوند، و اين استايل فقط بروي همان تگ به خصوص تاثير خواهد گذاشت. برای افزودن استایل به یک تگ باید عبارت " "=style را وارد تگ مربوطه کنیم و ویژگیهای مورد نیاز خود را بین دو ( " ) وارد می کنیم. مثلاً فرض کنید می‌خواهیم به یک تگ DIV استایل اضافه کنیم، در این صورت تگ DIV به صورت زیر در می آید:

<div style="property:value">

برای نمونه وقتی بخواهیم متن داخل یک DIV به رنگ سبز نمایش داده شود می توانیم به صورت زیر تگ DIV را بنویسیم:

<div style="color:green">متن داخل DIV </div>

توجه کنید که بین ویژگی color و رنگ سبز ( green ) از علامت دو نقطه ( : ) استفاده شده نه از علامت مساوی که در تگهای HTML استفاده می شود. همچنین لازم نیست مقادیر مورد نظر را بین علامت های نقل قول ( " ) قرار دهیم. می توانید نتیجه به کارگیری کد بالا را در سطر زیر مشاهده کنید:
متن داخل DIV

به خاطر داشته باشید که برای اینکه خاصیت این استایل از بین برود باید تگی را که استایل در آن به کار رفته است ببندید. در اینجا تا زمانی که تگ DIV بسته نشده باشد متن ما به رنگ سبز نمایش داده خواهد شد.

این امکان نیز وجود دارد که به یک تگ HTML بیش از یک ویژگی افزوده شود. تنها کافی است بین ویژگیهای مختلف از یک نقطه ویرگول ( ; ) استفاده کنیم. برای مثال اگر بخواهیم متنی که در یک DIV قرار دارد به رنگ قرمز و به صورت ایتالیک باشد می توانیم به صورت زیر کد DIV را بنویسیم:

<div style="color:red; font-style:italic">این متن قرمز رنگ و ایتالیک است.</div>

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

در این روش می توانیم به هر تعداد که لازم باشد از ویژگیهای مختلف درون یک تگ HTML استفاده کنیم. به مثال زیر توجه کنید:

<div style="color:blue; font-style:italic; font-weight:bold; font-size:12pt; text-align:center">متن مورد نظر اینجا قرار می گیرد.</div>

در این مثال ما متنی را با رنگ آبی، ایتالیک، ضخیم، اندازه فونت 12pt و در وسط صفحه خواهیم داشت:

متن مورد نظر اینجا قرار می گیرد.

۲. Embedded or Global Style: در اين نوع، استايل نوشته شده در تمامي صفحه تاثير خواهد گذاشت، استایل بين دو تگ <head></head> به صورت زير نوشته خواهد شد. استفاده از استایل‌ها باعث می‌شود از چندبار نویسی کدها جلوگیری شود؛ برای این کار می‌توانیم یک استایل در بخش Head تعریف کنیم. یک استایل در HEAD با تگ <STYLE> آغاز می شود و با <STYLE/> به پایان می رسد. در قسمت زیر می توانید یک نمونه از استایل را که مشخصاتی را برای تگ <SPAN> تعریف می کند مشاهده کنید که در بخش HEAD در متن قرار گرفته است.

<head>

<style>

<!--

span { color:red; font-style:italic }

-->

</style>

</head>

این استایل با تگ <style> شروع می‌شود و همان‌طور که ملاحظه می‌کنید خط بعد را در قالب یک "توضیح" نوشتیم تا مرورگرهایی که از CSS پشتیبانی نمی‌کنند این استایل را نادیده بگیرند و آن‌را نمایش ندهند، اگرچه اکثر رورگرهای امروزی همه از CSS پشتیبانی می‌کنند. لازم به ذکر است در مواقعی که می‌خواهیم در مورد قسمتی از استایل توضیحاتی بنویسیم لازم است ٱن را در بین "<!—" و "-->" بنویسیم تا مروگر این توضیحات را به عنوان استایل در نظر نگیرد. در قسمت بعد این خط را مشاهده می کنید:

span { color:red; font-style:italic }

این خط مشخص می کند که هر بار که در صفحه از تگهای <span> <span/> استفاده می شود، متن بین آنها به رنگ قرمز و به صورت ایتالیک نمایش داده می شود. در نوشتن استایل باید در نظر داشته باشید که نباید از علامتهای کوچکتر و بزرگتر[ < و > ] که در اطراف تگهای HTML استفاده می شود، استفاده کنید. همچنین به جای استفاده از علامتهای نقل قول [" "] که در متن HTML استفاده می شود از آکولاد [ { } ] در اطراف خواص استایل استفاده می کنیم. خواص مختلف یک استایل هم به وسیله یک نقطه ویرگول [ ; ] از هم جدا می شوند.

وقتی ما استایلی را در بخش HEAD متن خود برای یک تگ خاص تعریف می کنیم برای محتویات همه تگهایی که استایل برای آن تعریف شده در صفحه مورد استفاده قرار می گیرد. برای مثال وقتی که ما کد بالا را در HEAD متن خود قرار دادیم، هر تگ <SPAN> که در صفحه استفاده شود دارای متنی قرمز و ایتالیک است و نیاز ندارید هر بار دوباره مشخصات متن مورد نظر را تعریف شود.

برای مثال کد زیر را وارد متن HTML خود می کنیم:

<span>این متن قرمز و ایتالیک است،</span> اما این متن خارج تگ <span> است و مشخصات آنرا ندارد.<br>

<span>این متن نیز قرمز و ایتالیک است.</span>

نتیجه را به صورت زیر مشاهده خواهید کرد:
این متن قرمز و ایتالیک است، اما این متن خارج تگ <span> است و مشخصات آنرا ندارد.
این متن نیز قرمز و ایتالیک است.

با این روش ما می توانیم تقریباً خواص همه تگهای HTML را کنترل کنیم، اما این کافی نیست. در قسمتهای بعدی روشهایی را معرفی می کنیم که یک استایل مشخص به وسیله تگهای مختلفی مورد استفاده قرار بگیرد. این کا را با استفاده از CLASS و ID انجام می دهیم که به آن خواهیم پرداخت.

مثالی دیگر:

<head>

<style type="text/css">

<!--

p { color: red; text-align: left; font-size: 8pt }

-->

</style>

</head>

اين نوع حالت از تغييرات تعريف شده بروي تمامي تگها پاراگراف اعمال خواهد شد که رنگ متن: قرمز، جهت متن: چپ، و اندازه فونت ۸ پوينت خواهد بود. توجه داشته باشيد در اين مثال سه حالت مختلف يک استايل را براي تگ پاراگراف تعريف کرديم که با استفاده از ";" حالتهاي مختلف آن از هم جدا شدند.
اگر بخواهيد اين حالت نوشته شده را براي چند تگ ديگر اعمال کنيد مي توانيد تگها را بااستفاده از کاما "," از هم جدا کنيد براي مثال:

h1, h2, h3, h4 { color: gold; font-family: sans-serif }

۳. Linked or External style sheet: نوع آخر هم معروف به استايلهاي خارجي هستند كه به صورت لينك فايل استايل را به صفحات خود لينك ميدهيد. فايلهاي استايل با فرمت CSS ذخيره ميشوند و به صورت زير به صفحات لينك داده ميشود.

<link href="url" rel="relation type" type="link type">

مثال:

<head>

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

</head>

در اين نوع از استايلها بعد از اينکه فايل استايل خود را آماده کرديد آنرا با فرمت CSS ذخيره کرده و آنرا همانند بالا فايل استايل را به قالب لينک مي کنيم. براي راحت بود در کار مي توانيد ابتدا استايلها را به صورت Internal استفاده کرده و بعد از اينکه کارتان تمام شد کدهاي نوشته شده بين دو تگ <style></style> را در نت پد کپي کرده و آنرا با فرمت CSS دخيره کرده و سپس با استفاده از فرمول بالا آن فايل را به قالب لينک دهيد.

يکي از مزيتهاي اين نوع استايل اين ميباشد که مي توانيد با داشتن يک فايل استايل براي چندين صفحه استفاده کنيد و از ديگر مزيت هاي آن با اين کار کدهاي قالب را به چند فايل تقسيم کرده و قالب را منظم تر ميشود.

فرض کنید می خواهیم برای چندین صفحه از یک سری استایل استفاده کنیم که در همه صفحات مشابه هستند. در این مورد می توانیم از یک فایل استایل خارجی استفاده کنیم تا نیازی به چندین بار نوشتن استایلها نباشد.

برای شروع با استفاده از یک ویرایشگر متن مانند Notepad در ویندوز یک فایل متنی ایجاد کنید. سپس اطلاعات زیر را در این فایل وارد کنید:

div { font-family:Arial }

.redtext { color:red }

حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هر نامی که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشته باشید که پسوند فایل باید css. باشد. ).

برای پیوند دادن یک فایل استایل خارجی به صفحه HTML باید از تگ <LINK> استفاده کنیم که در بخش HEAD در متن HTML قرار می گیرد. یک نمونه از این تگ را می توانید در اینجا ببینید:

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

شناسه "rel="stylesheet مشخص می کند که فایل مورد نظر شما یک استایل است.

شناسه "type="text/css مشخص کننده نوع متن فایل برای مرورگر است.

شناسه " "=href مشخص کننده محل قرار گرفتن فایل استایل شماست. شما می توانید از آدرس کامل فایل استفاده کنید و یا اگر فایل شما در همان پوشه ای است که متن HTML شما قرار دارد می توانید تنها از نام فایل استفاده کنید.

حالا متن HTML مورد نظر که می خواهید استایل به آن افزوده شود را باز کنید . خط زیر را بین تگ <HEAD> و <HEAD/> وارد کنید. مطمئن شوید که آدرس فایل CSS را درست وارد کرده اید:

<link rel="stylesheet" type="text/css" href="http://www.bonyanalam.ir/.../example.css">

شما باید این کد را در همه صفحاتی که می خواهید از استایل تعریف شده در فایل قبل استفاده کنید وارد کنید وگرنه صفحات آنگونه که طراحی شده اند نمایش داده نمی شوند.

حالا هر تگ DIV که در صفحات مورد نظر شما وجود داشته باشد محتویاتی با فونت Arial خواهد داشت. برای مثال فایل example.css به همین صفحه پیوند شده است و در صورتی که در این صفحه از DIV استفاده شود محتویات آن با فونت Arial نمایش داده می شوند:

<div>این متن با فونت Arial نمایش داده خواهد شد.</div>

این هم نتیجه:
این متن با فونت Arial نمایش داده خواهد شد.

همچنین وقتی که از کلاس redtext در تگها استفاده شود متن به رنگ قرمز نمایش داده می شود:

<p class="redtext">این متن به رنگ قرمز نمایش داده خواهد شد.<p>

نتیجه به این صورت خواهد بود:
این متن به رنگ قرمز نمایش داده خواهد شد.

meandyou

meandyou

meandyou

meandyou