استفاده از css در HTML سی اس اس CSS یا ( Cascading Style Sheets ) چگونگی نمایش عناصر HTML را مشخص می کند. سی اس اس CSS همراه با HTML معرفی شد تا یک روش بهتری برای Style دهی عناصر HTML ایجاد کند. برای اعمال CSS بر روی تگهای HTML سه روش وجود دارد: برگه های استایل خارجی یا External style sheet برگه های استایل داخلی یا Internal style sheet استایل درون تگی یا Inline style روش پیشنهادی، گزینه اول یعنی برگه های استایل خارجی است. (در آینده ی نزدیک مقالات آموزشی مربوط به css هم در صفحه ی بنده نوشته می شود) قرار دادن Style ها درون تگ HTML بسیاری از مزیت های CSS را با مخلوط کردن محتوا و چگونگی نمایش از بین می برد، از این روش به ندرت استفاده کنید. طریقه استفاده به این صورت است که باید Style مورد نظرمان را در تگ مربوطه بیاوریم، مثال زیر نشان می دهد که چگونه رنگ و margin - left تگ را تغییر داده ایم: تنظیم رنگ پس زمینه عناصر HTML خصوصیت background - color رنگ پس زمینه یک عنصر را تنظیم می کند: خصوصیت background - color از خصوصیت قدیمی و منسوخ شده bgcolor ساخته شده است. تنظیم رنگ و اندازه و فونت عناصر خصوصیات font - family , color , font - size به ترتیب اندازه، رنگ و فونت متن را تنظیم می کنند: خصوصیات font - family , color , font - size از تگ قدیمی و منسوخ شده ساخته شده اند. ترازبندی متن خصوصیت text - align در جهت محور X یک متن را ترازبندی می کند: خصوصیت text - align از تگ قدیمی و منسوخ شده ساخته شده است. زمانی که یک فایل با یک Style خاص و یکتا نسبت به بقیه صفحات قالب بندی شده باشد، باید از Style oh داخلی استفاده کرد. در Style های داخلی در قسمت Head صفحه و توسط تگ مانند زیر معرفی می شوند. زمانی که Style ها در چندین صفحه مختلف به کار برده می شوند، استفاده از Style خارجی ایده آل خواهد بود. اینکار شما را قادر می سازد تا فقط با تغییر یک فایل، ظاهر و یا طرح بندی تمام صفحات پروژه تان را تغییر دهید. هر صفحه HTML باید با استفاده از تگ به فایل CSS خارجی متصل شود. تگ باید در قسمت head صفحه قرار داده شود. تگ : برای تعریف اطلاعات طرح بندی یک سند html استفاده می شود. تگ باید در قسمت head صفحه قرار داده شود. تگ : هر صفحه HTML باید با استفاده از تگ به فایل CSS خارجی متصل شود. تگ باید در قسمت head صفحه قرار داده شود. در HTML چندین تگ و خصوصیت برای Style دهی استفاده می شود که این تگ ها در نسخه جدید پشتیبانی نمی شود. به همین منظور از استفاده عناصر و خصوصیات زیر اجتناب نمایید: color bgcolor جداول در HTML جداول به وسیله تگ تعریف می شوند. یک جدول حاوی سطرهایی می باشد (که با تگ مشخص می شوند) و هر سطر شامل تعدادی سلول است (که با تگ مشخص می شوند) عبارت td مخفف" table data " است و حاوی داده های سلول ها می باشد. تگ می تواند حاوی متن، لینک، تصویر، لیست ها، فرم ها، جداول دیگر و غیره باشد. کد بالا چگونه در یک مرورگر دیده می شود: row , cell row , cell row , cell row , cell اگر شما خصوصیت Border را برای جدولی مشخص نکنید، جدول بدون لبه نمایش داده می شود. گاهی اوقات این مورد می تواند کاربردی باشد، اما بیشتر مواقع ما نیاز به نمایش لبه ها داریم. برای نمایش لبه ها باید خصوصیت Border را تنظیم کنیم. توجه داشته باشید که اگر بخواهید طبق استاندارهای HTML پیش بروید نباید از ویژگی border استفاده کنید. برای تنظیم لبه ها بهتر است از CSS ها استفاده کنید. با استفاده از خصوصیت border در می توانید لبه ها را تنظیم نمایید: بیاد داشته باشید که لبه ها برای دور جدول و تمام سلول های جدول، تنظیم خواهد شد. با استفاده از خصوصیت border - collapse در می توانید، لبه های دوخطی جدول را به لبه های یک خطی تبدیل کنید: با استفاده از خصوصیت padding در می توانید فاصله محتویات یک سلول را از لبه هایش تنظیم کنید. اگر این خصوصیت را تنظیم نکنید، فاصله محتوی تا لبه، صفر در نظر گرفته می شود. با استفاده از خصوصیت border - spacing در می توانید فاصله سلول ها از یکدیگر را تنظیم کنید. اطلاعات سرتیتر در یک جدول به وسیله تگ تعریف می شود. بیشتر مرورگرها متن را در عنصر به صورت برجسته ( bold ) و وسط چین نمایش می دهند. با استفاده از خصوصیت text - align در CSS ، می توانیم سرتیترهای جدول بالا را در سمت چپ تنظیم کنیم: تگ های جدول در HTML تگ : تعریف جدول تگ : تعریف عنوان جدول ( table header ) تگ : تعریف سطر جدول ( table row ) تگ : تعریف سلول جدول ( table data ) تگ : تعریف تیتر جدول ( table caption ) تگ : برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد تگ : برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد تگ : عناوین ستون های یک جدول ( header ) را گروه بندی می کند تگ : محتویات بدنه یک جدول را گروه بندی می کند تگ : محتویات انتهای ستون های یک جدول ( footer ) را گروه بندی می کند مثال بیشتر - خودتان امتحان کنید چگونه جدولی بدون خطوط حاشیه ( Border ) ایجاد کنیم. نحوه ایجاد سرتیترهای جدول. نحوه اضافه کردن عنوان به یک جدول. چگونگی تعریف سلول های جدول که بیش از یک سطر یا بیش از یک ستون را شامل می شوند. نحوه نمایش عناصر درون عناصر دیگر. چگونه از cellpadding برای ایجاد فاصله بیشتر بین محتوای سلول با حاشیه سلول استفاده کنیم. چگونه از cellspacing برای افزایش فاصله بین سلول ها استفاده کنیم. چگونه از خصوصیت" frame " برای کنترل حاشیه های دور جدول استفاده کنیم. لیست ها در HTML لیست های رایج در HTML لیست های ترتیبی و غیر ترتیبی هستند. List item List item List item The first list item The second list item The third list item یک لیست غیر ترتیبی یا نامرتب با تگ شروع می شود. آیتم های هر لیست با تگ شروع می شوند. ( List Item ) آیتم های یک لیست به وسیله گلوله نشانه گذاری می شوند. (دایره های کوچک سیاه رنگ) نحوه نمایش کد بالا در مرورگر: Coffee Milk یک لیست مرتب یا ترتیبی با تگ شروع می شود. آیتم های هر لیست با تگ شروع می شوند. آیتم های یک لیست به وسیله اعداد نشانه گذاری می شوند. نحوه نمایش کد بالا در مرورگر: Coffee Milk یک لیست تعریفی لیستی از آیتم هاست که هر آیتم توضیحی دارد. لیست های تعریفی با تگ نوشته می شوند. تگ به همراه تگ (که آیتم های موجود در لیست را مشخص می کند) و تگ (که آیتم های موجود در لیست را توضیح می دهد) استفاده می شود. نحوه نمایش کد بالا در مرورگر: - black hot drink - white cold drink : درون آیتم های یک لیست، می توانید تصویر، لینک، تگ ، لیستی دیگر و غیره را قرار دهید. مثال بیشتر - خودتان امتحان کنید نمایش انواع دیگر لیست های ترتیبی. نمایش انواع دیگر لیست های غیر ترتیبی. نمایش لیست های تو در تو. نمایش لیست های تو در توی پیچیده تر. نمایش لیست تعریفی. تگ : یک لیست ترتیبی تعریف می کند. تگ : یک لیست غیر ترتیبی تعریف می کند. تگ : آیتم های یک لیست را تعریف می کند. تگ : برای ساخت یک لیست تعریفی استفاده می شود. تگ : برای ساخت یک آیتم در لیست تعریفی استفاده می شود. تگ : برای تعریف توضیحات یک آیتم در لیست تعریفی استفاده می شود.