آموزش HTML بخش شانزدهم :: روشهای مختلف استفاده از style sheet

در نسخه جديد(4/0) HTML امکان جداسازي کامل فرمت دهي از ساختار صفحات HTML فراهم شده است. در اين نسخه توصيه ميشود که تمامي اطلاعات مربوط به نمايش و ترازبندي به فايلهائي مجزا از صفحه HTML منتقل شوند. بخشي از صقحات HTML که مربوط به نمايش، ترازبندي و فرمت دهي است، استايل شيت يا "Style Sheet" ناميد شده و معمولا به صورت فايلي مجزا درون بخش <head> صفحات HTML معرفي ميگردند. در اين درس به صورت بسيار خلاصه با روشهاي مختلف استفاده از استايل شيتها در صفحات HTML آشنا خواهيد شد.

چگونگي استفاده از استايل شيتها:

مرورگرها از روي استيل هاي تعريف شده توسط استايل شيتها به فرمت دهي و نمايش اطلاعات درون صفحه HTML ميپردازند. تعريف و استفاده از استايل ها در صفحات HTML به سه روش مختلف ممکن ميباشد:

1)استايل شيتهاي خارجي (external style sheet) :

در اين روش تمامي استيلها و تعاريف نمايشي درون فايلي جداگانه قرار گرفته و بسيار مناسب حالتهائي است که قرار است که استايلي به بيش از يک صفحه HTMLاعمال شود. مزيت اين روش سهولت در تغيير ظاهر صفحات يک وب سايت ميباشد و براي يک تغيير کلي در سايت کافي است که فايل استايل شيت کل سايت که معمولا يک فايل واحد است تغيير داده شود. (بايد توجه داشت که در اين حالت تمامي صفحات سايت بايد به يک فايل استايل شيت واحد لينک شده باشند.) استايل شيتهاي خارجي توسط تگ <link> که درون بخش head صفحات HTML قرار ميگيرد، معرفي ميشوند.
در مثال زير با کمک شناسه href از تگ link نام و در حالت کلي url فايل در برگيرنده استايلهاي تعريف شده تعيين ميگردد:

2)استايل شيتهاي داخلي (Internal Style Sheet) :

کاربرد اين روش در حالتهائي است که صفحه HTML نيازمند تعريف استايلي منحصر به فرد و مجزا بوده و استايل طراحي شده فقط بدرد آن صفحه خواهد خورد. در اين حالت بايد کدهاي حاوي تعريف استايل درون تگ هاي <style> و <style/> قرار گرفته و معمولا نتيجه درون بخش head صفحه HTML گذاشته ميشود.مثال:

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

3)استايل شيتهاي درجا (Inline Styles) :

کاربرد اين روش در مواردي است که بايد براي يک المان (يا گروهي) خاص استايلي اعمال شود. در اين حالت بايد از شناسه اي به نام style که تقريبا در تمامي تگها قابل اعمال است استفاده شود. مثال:

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

تگ هاي استايل

Start Tag Purpose کاربرد

<style> Defines a style in a document تعريف استيلها درون يک سند

<link> Defines the relationship between two linked documents تعيين و تعريف فايل استايل شيت خارجي

<font> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.

<basefont> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.

<center> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.

تغييرات در نسخه جديد اچ تی ام ال (4/0) :

هدف اوليه از طراحي زبان HTML ايجاد زباني براي تعريف اطلاعات محض بدون در برداشتن جزئيات مربوط به فرمت و نمايش بود ولي با ايجاد نسخه 3/2 زبان HTML و اضافه شدن تگهاي فرمت دهي مانند <font> و يا شناسه هائي مانند color و Align محتوا و نمايش در صفحات HTML ادغام گرديده و همين امر سبب بروز مشکلات عديده اي براي طراحان و برنامه نويسان وب گرديد. براي رفع اين مشکل در نسخه 4/0 HTML توصيه بر جداسازي کامل اين دو گروه از اطلاعات بوده و در نسخه هاي آينده HTML اين جداسازي اجباري خواهد گرديد و توصيه مدرسه وب نيز استفاده از استايل شيتها براي هر نوع تعريف فرمت و ترازبندي ميباشد. براي مثال در کد HTML زير که بر اساس نسخه 3/2 HTML ميباشد، ساختار و محتوا (تگي از نوع پاراگراف با محتواي "This is a paragraph") با اطلاعات نمايش يعني رنگ و ترازبندي (رنک قرمز متن و ترازبندي در وسط صفحه) همزمان و در کنار هم آورده شده اند و اين ادغام امکان تغيير و توسعه کد را بسيار محدود خواهد کرد:

<p align="center"><font color="red">This is a paragraph</font></p>

ارسال شده در مورخه : يكشنبه، 11 بهمن ماه ، 1388

نصب و پیکربندی Microsoft SharePoint Server 2010

مرتبط با موضوع :

HTML ، مشکل ، راهکار ! [سه شنبه، 9 اسفند ماه ، 1390]

معرفی المان های ساختاری در HTML5 - قسمت دوم [دوشنبه، 14 شهريور ماه ، 1390]

ترفندهایی قابل دسترس و ساده در HTML5 با جی کانواس (JCanvas) [پنجشنبه، 13 مرداد ماه ، 1390]

معرفی المان های ساختاری در HTML5 - قسمت اول [دوشنبه، 3 مرداد ماه ، 1390]

۵ بازی رایگان و چشمگیر که با HTML5 می توانید در مرورگرهای خود بازی کنید [يكشنبه، 22 خرداد ماه ، 1390]

آموزش HTML بخش پانزدهم :: تعیین نام،نوع قلم،رنگ و... [يكشنبه، 11 بهمن ماه ، 1388]

آموزش HTML بخش چهاردهم :: چگونگی تعیین تصاویر و رنگ پس زمینه [يكشنبه، 11 بهمن ماه ، 1388]

آموزش HTML بخش سیزدهم :: چگونگی نمایش تصاویر در سندهای HTML [يكشنبه، 11 بهمن ماه ، 1388]

آموزش HTML بخش دوازدهم :: تبادل اطلاعات بین صفحات مختلف [يكشنبه، 11 بهمن ماه ، 1388]

آموزش HTML بخش یازدهم :: آشنایی با نحوه نمایش انواع فهرستها [يكشنبه، 11 بهمن ماه ، 1388]

تبلیغات چپ

پکیج Windows Server 2008 MCITP Enterprise Administ

آخرین مقالات

· ۱۴ تغییراتی احتمالی که در iPhone 5 خواهید دید!

· روشهایی برای افزایش عمر باتری موبایل

· p1000 پرفروش ترین تبلت سامسونگ

· خالی کردن فضای هارد دیسک

· ۷ دلیل برای خرید مطمئن سامسونگ Galaxy Note

· معرفی لایف بوک ها ویژگی های مربوط به آنها

· معرفی ۱۰ فناوری برتر ماه گذشته در عرصه آی تی

· معرفی دلایلی برای خرید گوشی با قابلیت ویندوز فون

· SCX-4729FD چاپگر چندکاره سامسونگ

· تعریف سیستم عامل اندروید و مهمترین ویژگی های آن

· لپ تاپ های Samsung Series 7 Game 3D

· پرطرفدارترین موبایل های هوشمند تا بهار ۲۰۱۲

· Sony Unveila Xperia Sola و صفحه نمایش شناور

· کنترل دستگاه اندرویدی توسط دسکتاپ

· 10 تبلت برتر بهار سال 2012

· Optimus 3D Max دومین گوشی سه بعدی ال جی به عنوان محصولی بی همتا

· G6-1160EE لپ تاپ باقابلیت و پرمخاطب HP

· راه های افزایش امنیت در اینترنت

· آموزش مراحل پاک کردن آرشیو یاهو مسنجر

· مانیتورهایی مخصوص بازی های ویدئویی و گیمرها

· نکات مهم در مورد سرچ گوگل

· معرفی بهترین تبلت های بازار از نظر کیفیت نمایشگر

· معرفی رایانه ها و تبلت های سازگار با ویندوز ۸

· ویژگی های Galaxy note 10.1 شرکت سامسونگ

· مهمترین دلایل خرابی سریع لپ تاپ ها

[ موارد بیشتر در بخش اخبار و تازه ها ]

پربیننده ترین مقالات

· استاندارد های ISO/IEC 17799 و BS7799-2

· توصیه های مهم امنیتی در مورد لینوکس و یونیکس

· گرما در cpuها

· معماری client/Server در اینترنت

· آشنایی با سیستم فایل GNU/Linux

· یک MAC BOOK PRO جدید در بازار ایران

· معرفی دو مدل لپ تاپ با قابلیت سونی سری F

· F137HG/B، لپ تاپ سایز بزرگ سونی در بازار داخلی

· اندر احوالات کرک و کپی رایت

· EE31FX/BJ، لپ تاپ ارزان قیمت سونی در بازار داخلی

· معرفی z216 FX/L از لپ تاپ های سونی

· مدل MD313LL/A ، Macbook ارزان قیمت در بازار داخل

· تاریخچه کامپیوتر

· مشاهده آنلاین سوابق بیمه شدگان

· چگونگی اختصاص دادن یک آدرس IP استاتیک به یک رایانه در شبکه در ویندوز Xp ، Vista یا Seven

· آشنایی با روتر و سوئیچ(router and switch)

· الگوریتم های مرتب سازی آرایه ها

· تاریخچه ی پیدایش زبان های برنامه نویسی شی گرا

· GPS چیست؟

· به روز رسانی ویندوز 7 با نرم افزار Windows Update

· پایگاه داده های سیار Mobile database

· بازیابی رمز عبور در ویندوز 7

· معماری سرویس گرا Service Oriented Architecture چیست؟

· انتقال اطلاعات با Replication در SQL Server

· آموزش نرم افزار Virtual Box

[ موارد بیشتر در بخش اخبار و تازه ها ]

مقالات تصادفی

· آموزش ساخت موتور جستجوی شخصی با ابزاری جالب

· بررسی اختصاصی: R.A.T.7 ؛ بهترین ماوس ویژه بازی تاکنون

· ایمن سازی و امنیت دوگام مهم در امنیت فناوری اطلاعات

· چاپگر چندکاره SCX-4729FD سامسونگ

· طراحی وب سایت (3) میزان امنیت سرور

· این گروه هوشمند

· عینکی برای دو بعدی دیدن فیلم های سه بعدی

· چند نکته در مورد XMMS

· درباره DNS بیشتر بدانیم

· آموزش SQL Server - بخش پنجم

· Ajax (آژاکس)

· ۵ عامل افت PageRank

· Twitter باز هم هک شد

· نرم افزار جامع System Center Virtual Machine Manager

· تفاوت پردازنده های ۳۲ و ۶۴ بیتی

· پرفروش های نوکیا در ماه گذشته

· CPU من کدام است؟ - بخش دوم

· انتخاب یک مانیتور انتخاب استانداردها

· دکتر "رندی پاش" از پل گذشت

· آشنایی با Outlook

· در گوگل احساس خوشبختی کنید

· آشنایی با سیستم کنترل ورژن Mercurial

· انتخاب کیف لپ تاپ

· ولخرجی گوگلی در آستانه کریسمس!

· شرح جامع BIOS

[ موارد بیشتر در بخش اخبار و تازه ها ]

امتیاز دهی به مطلب

امتیاز متوسط : 1
تعداد آراء: 1

انتخاب ها

گرفتن پرينت از اين مطلب

موضوعات مرتبط

	وب
	مقالات HTML
	مقالات PHP
	مقالات ASP.NET
	مقالات CSS
	مقالات XML
	مقالات JavaScript
	مقالات CMS
	مقالات Dreamweaver
	مقالات ColdFusion
	مقالات IIS
	مقالات Apache
	مقالات AJAX
	مقالات Flex
	مقالات AIR
	مقالات Expression Web
	مقالات SEO
	مقالات عمومی وب
	برنامه نویسی
	مقالات C / C++
	مقالات C#
	مقالات VB.NET
	مقالات VB6
	مقالات دلفی
	مقالات VbScript
	مقالات اکشن اسکریپت
	مقالات Python
	مقالات سیلور لایت
	مقالات عمومی برنامه نویسی
	سخت افزار
	مقالات CPU
	مقالات RAM
	مقالات دیسک سخت
	مقالات MainBoard
	مقالات کیبورد
	مقالات کارت گرافیک
	مقالات چاپگر
	مقالات عمومی سخت افزار
	سیستم عامل
	مقالات ویندوز سون
	مقالات ویندوز ویستا
	مقالات ویندوز XP
	مقالات لینوکس
	مقالات سیستم عامل مک
	مقالات عمومی سیستم عامل
	گرافیک دو بعدی
	مقالات فتوشاپ
	مقالات Illustrator
	مقالات Corel
	مقالات Painter
	مقالات QuarkXpress
	مقالات InDesign
	مقالات Fireworks
	مقالات Lightroom
	مقالات Bridge
	مقالات آکروبات
	مقالات فلش
	مقالات Expression Medial
	مقالات Expression Blend
	مقالات عمومی گرافیک دو بعدی
	گرافیک سه بعدی و انیمیشن سازی
	مقالات تردی مکس
	مقالات مایا
	مقالات اتوکد
	مقالات عمومی گرافیک سه بعدی
	میکس و مونتاژ
	مقالات After Effects
	مقالات پرمیر
	مقالات ادیوس
	مقالات SoundBooth
	مقالات Apple Reason
	مقالات Corel Video Studio
	مقالات Audition
	مقالات Pro Tools
	مقالات FLStudio
	مقالات SoundFordge
	مقالات عمومی ویرایش صوت و فیلم
	پایگاه داده
	مقالات SQL Server
	مقالات اکسس
	مقالات MySQL
	مقالات اراکل
	مقالات عمومی پایگاه داده
	شبکه
	مقالات اکسچنج سرور
	مقالات SharePoint Server
	مقالات ویندوز سرور 2003
	مقالات ویندوز سرور 2008
	مقالات ISA Server
	مقالات VMware
	مقالات MS Virtualization
	مقالات MCSE
	مقالات MCITP
	مقالات CCNA
	مقالات CCNP
	مقالات CCIE
	مقالات مایکروسافت System Center
	مقالات Wireless
	مقالات Wi-Fi
	مقالات WiMax
	مقالات Citrix
	مقالات DSL
	مقالات BizTalk
	مقالات Commerce Server
	مقالات Forefront
	مقالات Groove
	مقالات Communication Server
	مقالات Project Server
	مقالات Storage Server
	مقالات امنیت شبکه
	مقالات VoIP
	مقالات عمومی شبکه
	آفیس و برنامه های تجاری
	مقالات Word
	مقالات Excel
	مقالات Access
	مقالات PowerPoint
	مقالات Visio
	مقالات OneNote
	مقالات Publisher
	مقالات Outlook
	مقالات Amalga
	مقالات Dynamics AX
	مقالات Dynamics CRM
	مقالات Dynamics GP
	مقالات Dynamics NAV
	مقالات Dynamics POS
	مقالات Dynamics RMS
	مقالات Dynamics SL
	مقالات عمومی آفیس و برنامه های تجاری