روشهای به کارگیری CSS
سه روش برای به کارگیری CSS وجود دارد:
1- محلی: (Inline) در صورتیکه تا به حال از CSS استفاده نکرده‌اید بهتر است از این روش ساده استفاده کنید، اگر چه با این روش نمی‌توان یک style را برای یک مجموعه تگ در آن واحد اعمال کرد.
در این روش درون تگ HTML ای که می‌خواهیم قالب آن را تغییر دهیم ویژگی style را مانند زیر تایپ می‌کنیم
2- داخلی: (Internal)
این روش برای صفحات مجزایی که متن طولانی دارند بسیار مناسب می‌باشد. بدین صورت میتوان style را در بالای سند HTML برای کل متن تعریف نمود.
در اینحالت در داخل تگ < head > تگ < style > را مانند زیر تایپ کنید.
3- خارجی: (External)
در صورتیکه بخواهید از یک style در چندین صفحه استفاده کنید این روش را به کار ببرید. در این حالت میتوان برای تمام صفحات وب ظاهر متداول و یکسانی بوجود آورد. یعنی به جای آنکه برای هر صفحه از style های داخلی استفاده کنید می‌توانید تمام صفحات را با یک style خارجی طراحی کنید.
نکته: url در یک style sheet خارجی(HREF)، مرتبط با محل فایل مذکور بر روی server می‌باشد.
در این حالت هر تغییری که در صفحه style sheet ایجاد شود به طور اتوماتیک در همه صفحات اعمال خواهد شد.
طریقه نوشتن CSS در روش داخلی و خارجی
طریقه نوشتن CSS در روش داخلی و خارجی به یکی از صورتهای عمومی زیر است:
فعلا فرض را بر این می‌گذاریم که selector همان تگ HTML است.
نکات مورد توجه:
- خصوصیات هر تگ بایستی بین دو علامت {} قرار داده شوند. در ضمن بین هر خصوصیت و مقدار مربوطه به آن علامت ( : ) قرار داده می‌شود.
- میتوان چند خصوصیت از یک تگ را به یکباره تعریف نمود. در این حالت خصوصیات مختلف را با علامت ( ; ) از هم جدا می‌کنند.
- میتوان خصوصیات چندین تگ را به یکباره تعریف نمود. البته مي بايستي هر کدام از تگها را با علامت (, ) از هم جدا نمود.
به عنوان مثال:
رنگ فونت هر سه تگ را قرمز می‌کند.
- از آنجا که تمام عناصر موجود در CSS توسط Browser ها شناخته نمی‌شود بهتر است محتویات داخل تگ < style > را بین دو علامت http://www.www.www.iran-eng.ir/img/css/7.gif قرار داده تا مشخصه های تگ در Browserهايي كه اين عناصر را نمي‌شناسند به صورت اشتباه نشان داده نشوند.
موارد مورد استفاده به جاي Selector
سه روش برای به کارگیری CSS وجود دارد:
1- محلی: (Inline) در صورتیکه تا به حال از CSS استفاده نکرده‌اید بهتر است از این روش ساده استفاده کنید، اگر چه با این روش نمی‌توان یک style را برای یک مجموعه تگ در آن واحد اعمال کرد.
در این روش درون تگ HTML ای که می‌خواهیم قالب آن را تغییر دهیم ویژگی style را مانند زیر تایپ می‌کنیم
http://www.www.www.iran-eng.ir/img/css/1.gif
2- داخلی: (Internal)
این روش برای صفحات مجزایی که متن طولانی دارند بسیار مناسب می‌باشد. بدین صورت میتوان style را در بالای سند HTML برای کل متن تعریف نمود.
در اینحالت در داخل تگ < head > تگ < style > را مانند زیر تایپ کنید.
http://www.www.www.iran-eng.ir/img/css/2.gif
3- خارجی: (External)
در صورتیکه بخواهید از یک style در چندین صفحه استفاده کنید این روش را به کار ببرید. در این حالت میتوان برای تمام صفحات وب ظاهر متداول و یکسانی بوجود آورد. یعنی به جای آنکه برای هر صفحه از style های داخلی استفاده کنید می‌توانید تمام صفحات را با یک style خارجی طراحی کنید.
http://www.www.www.iran-eng.ir/img/css/3.gif
نکته: url در یک style sheet خارجی(HREF)، مرتبط با محل فایل مذکور بر روی server می‌باشد.
http://www.www.www.iran-eng.ir/img/css/4.gif
در این حالت هر تغییری که در صفحه style sheet ایجاد شود به طور اتوماتیک در همه صفحات اعمال خواهد شد.
طریقه نوشتن CSS در روش داخلی و خارجی
طریقه نوشتن CSS در روش داخلی و خارجی به یکی از صورتهای عمومی زیر است:
فعلا فرض را بر این می‌گذاریم که selector همان تگ HTML است.
http://www.www.www.iran-eng.ir/img/css/5.gif
نکات مورد توجه:
- خصوصیات هر تگ بایستی بین دو علامت {} قرار داده شوند. در ضمن بین هر خصوصیت و مقدار مربوطه به آن علامت ( : ) قرار داده می‌شود.
- میتوان چند خصوصیت از یک تگ را به یکباره تعریف نمود. در این حالت خصوصیات مختلف را با علامت ( ; ) از هم جدا می‌کنند.
- میتوان خصوصیات چندین تگ را به یکباره تعریف نمود. البته مي بايستي هر کدام از تگها را با علامت (, ) از هم جدا نمود.
به عنوان مثال:
http://www.www.www.iran-eng.ir/img/css/6.gif
رنگ فونت هر سه تگ را قرمز می‌کند.
- از آنجا که تمام عناصر موجود در CSS توسط Browser ها شناخته نمی‌شود بهتر است محتویات داخل تگ < style > را بین دو علامت http://www.www.www.iran-eng.ir/img/css/7.gif قرار داده تا مشخصه های تگ در Browserهايي كه اين عناصر را نمي‌شناسند به صورت اشتباه نشان داده نشوند.
موارد مورد استفاده به جاي Selector
در فرمول فوق به جای selector موارد زیر را میتوان به کار برد:
1- HTML tag
2- Class
می توان اجزا داخل سند HTML را به صورت classهای مختلف طبقه بندی نمود تا بتوان هر کدام را به ترتیب استفاده نمود.
در این حالت در تگ مورد نظر، عبارت CLASS=classname را که در آن classname نام class مناسب می‌باشد را تایپ کنید و سپس در قسمت style صفحه html مانند نمونه زیر:
نکته: از class فقط در styleهای داخلی و خارجی میتوان استفاده کرد.
3-Contextual
4- تو در تو (Nested)
میتوان چند تگ را به صورت تو در تو قرار داد. در این صورت توسط یک فاصله (space) آنها را از هم جدا می‌کنند.
به عنوان مثال:
تمام قسمتهایی که داخل تگ h1 توسط EM علامتگذاری شده‌اند بصورت قرمز نشان می‌دهد اما تگهای EM موجود در بقیه متون دیگر بصورت قرمز نوشته نمی‌شوند.
5-پیوندها(Link)
کلمه link را برای تغییر ظاهر پیوندهایی که هنوز بر روی آنها کلیک نشده است تایپ کنید.
کلمه visited را برای تغییر ظاهر پیوندهایی که کلیک شده‌اند تایپ کنید.
کلمه active را برای تغییر ظاهر پیوندها در زمانی که کلیک می‌شوند تایپ کنید.
کلمه hover را برای تغییر ظاهر پیواندها در زمانیکه نشانگر موس روی آنها قرار می‌گیرد تایپ کنید.
1- HTML tag
http://www.www.www.iran-eng.ir/img/css/8.gif
2- Class
می توان اجزا داخل سند HTML را به صورت classهای مختلف طبقه بندی نمود تا بتوان هر کدام را به ترتیب استفاده نمود.
در این حالت در تگ مورد نظر، عبارت CLASS=classname را که در آن classname نام class مناسب می‌باشد را تایپ کنید و سپس در قسمت style صفحه html مانند نمونه زیر:
http://www.www.www.iran-eng.ir/img/css/9.gif
نکته: از class فقط در styleهای داخلی و خارجی میتوان استفاده کرد.
3-Contextual
http://www.www.www.iran-eng.ir/img/css/10.gif
4- تو در تو (Nested)
میتوان چند تگ را به صورت تو در تو قرار داد. در این صورت توسط یک فاصله (space) آنها را از هم جدا می‌کنند.
http://www.www.www.iran-eng.ir/img/css/11.gif
به عنوان مثال:
http://www.www.www.iran-eng.ir/img/css/12.gif
تمام قسمتهایی که داخل تگ h1 توسط EM علامتگذاری شده‌اند بصورت قرمز نشان می‌دهد اما تگهای EM موجود در بقیه متون دیگر بصورت قرمز نوشته نمی‌شوند.
5-پیوندها(Link)
http://www.www.www.iran-eng.ir/img/css/13.gif
کلمه link را برای تغییر ظاهر پیوندهایی که هنوز بر روی آنها کلیک نشده است تایپ کنید.
کلمه visited را برای تغییر ظاهر پیوندهایی که کلیک شده‌اند تایپ کنید.
کلمه active را برای تغییر ظاهر پیوندها در زمانی که کلیک می‌شوند تایپ کنید.
کلمه hover را برای تغییر ظاهر پیواندها در زمانیکه نشانگر موس روی آنها قرار می‌گیرد تایپ کنید.