بایگانی برچسب: s

HTML و CSS

آموزش برنامه نویسی CSS – نحوه ارتباط CSS خارجی با HTML

سلام
خوش آمدید به یکی دیگر از آموزش های زبان بسیار زیبا و کاربردی CSS تا کنون با بحث های متعددی از زبان CSS آشنا شدیم حالا وقتشه که که با من به سراغ یکی دیگه از بحث های CSS بریم.
در جلسات قبل مشخص کردیم که CSS اصلا چی هست؟ اصلا چه استفاده ای داره ؟ یا حتی قوانینش چی هست؟ چرا اصلا باید از CSS استفاده کرد ؟ چرا HTML نه؟
اگر هر یک از بحث های بالا برای شما مبهم هستش بهتون پیشنهاد میکنم یه سری به پست های قبلی ما بزنید که با مباحث CSS آشنا بشید. اگرم که آشنا هستید چه بهتر! همین بحث رو با شما ادامه میدیم.
و حالا زمانش رسیده که از گذشته بیایم بیرون و بریم سمت بحث های جدید!
در این جلسه میخوایم به این بحث بپردازیم که چگونه میتوان یک استایل خارجی (CSS) را با HTML مرتبط کنیم. وقتی میگم استایل خارجی یعنی فایلی که بیرون از نرم افزار قرار داده و نوشته شده و قراره که ما اون رو با HTML مرتبط کنیم. وقتی میگم استایل خارجی یعنی حتما یک استایل درونی نیز وجود دارد که ما بخواهیم با اون کار کنیم. و شک نکنید که من شما رو با اون هم اشنا خواهم کرد ولی عجله نکنید در جلسات بعد به اون هم خواهیم رسید.
حالا اصل مطلب, فرض کنید می خواهیم برای چند صفحه از یک سری استایل استفاده کنیم که در همه صفحات شبیه به هم هستند. در این مورد می تونیم از یک فایل استایل خارجی استفاده کنیم تا نیازی به چندین بار نوشتن استایلها نباشد.
برای شروع با استفاده از یک ویرایشگر متن مانند Notepad در ویندوز یک فایل متنی ایجاد کنید. سپس اطلاعات زیر را در این فایل وارد کنید:

حالا این متن را با نام example.css ذخیره کنید و فقط این رو هم بدونید که نام فایل هر چیزی که دلتون میخواد میتونه باشه ولی روی پسوند فایل باید دقت داشته باشید که حتما و حتما باید CSS. باشد.
برای پیوند دادن یک فایل استایل خارجی به صفحه HTML باید از تگ <link> استفاده کنیم که در بخش head در متن HTML قرار می گیرد. یک نمونه از این تگ را می تونید در زیر همین متن که براتون اماده کردم ببینین ببینید:

شناسه “rel=”stylesheet مشخص میکنه که فایلی که شما انتخاب کردید استایل هستش و باعث میشه که فایل های دیگه اشتباه نگیریدش.
شناسه “type=”text/css مشخص کننده نوع متن فایل برای مرورگر است.
شناسه ” “=href مشخص می کند که فایل شما در چه موقعییتی قرار دارد منظور از موقعییت مکان فایل در رایانه شماست که شما می تونید از آدرس کامل فایل استفاده کنید و یا اگر فایل شما در همون پوشه ای است که متن HTML شما قرار دارد می تونید تنها از نام فایل استفاده کنید.
حالا متن HTML مورد نظر که می خواهید استایل به آن افزوده شود را باز کنید. خط زیر را بین تگ <head> و <head/> وارد کنید. مطمئن شوید که آدرس فایل CSS را درست وارد کرده اید:

شما باید این کد را در همه صفحاتی که می خواهید از استایل تعریف شده در فایل قبل استفاده کنید وارد کنید وگرنه صفحات آنگونه که طراحی شده اند نمایش داده نمی شوند و در غیر اینصورت اصلا CSS به چه دردی می خورد.
حالا هر تگ div که در صفحات مورد نظر شما وجود داشته باشد محتویاتی با فونت Arial خواهد داشت. برای مثال فایل example.css به همین صفحه پیوند شده است و در صورتی که در این صفحه از div استفاده شود محتویات آن با فونت Arial نمایش داده می شوند:

این هم نتیجه:

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

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

نتیجه به این صورت خواهد بود:

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

و باز هم یکبار دیگر از شما عزیزان خواننده متشکرم که وقت گران بهاتون رو در اختیار ما گذاشتید و مایه ی خرسندی ما هستش که از وبسایت ما برای یادگیری مبانی برنامه نویسی استفاده میکنید.

از طرف خودم و گروه برنامه نویسی پنگوئن از شما متشکرم

بازم برگردید.