دوره آموزشی رایگان و آنلاین طراحی سایت بخش نهم

5
Professional-Web-Design-
Professional-Web-Design-

در این جلسه سعی خواهیم کرد مطالب بیشتری رو درباره Css صحبت کنیم و همچنین سعی خواهیم کرد در باره درج استایل در Css مطالبی رو مطرح کنیم. ما به دو روش می توانیم به Css استایل درج کنیم این دو روش embedded و external نام دارد که در ادامه مطالب بیشتری رو در مورد این دو خواهیم گفت. مباحث این جلسه بسیار مهم می باشد پس سعی کنید مطالب ارائه شده را با دقت تمرین کنید.

Professional-Web-Design-

 

Professional-Web-Design-

Embedded Style

جلسه هشتم مطالبی درباره استایل inline مطرح شد و شما با این مورد آشنا شدید . شایان ذکر است ،که استفاده از استایل inline روش مناسبی برای دادن ظاهر به صفحه اینترنتی نیست و باید از روش دیگری استفاده کنیم. مثلا باید استایل را در جایی درج کرد و به همه تگ ها گفت از آن استایل خاص برای ظاهر خودشان استفاده کنند. برای این مورد باید داخل تگ head در بالای صفحه عنصر style را اضافه کرد. برای درک بهتر موضوع به مثال زیر توجه کنید:

embadded style zoomtech.ir

 

embadded style  برای دریافت کد کلیک کنید

در مثال بالا برای تمام تگ های p سایزفونت ۱۲px در نظر گرفته شده است. توجه کنید که p یک selector است و اعلان ها باید داخل {} قرار بگیرد. در مثال مذکور selector  روی یک تگ p تغییرات را اعمال می کند و می تواند تگ های دیگر و یا کلاس ها و یا آی دی های دیگری را هم تغییر دهد. برای درک بهتر موضوع به تصویر زیر توجه کنید ؛ selector می توان تگ های دیگری را هم تغییر دهد که در تصویر زیر نشان داده شده است :

طراحی سایت

 

چرا embedded style از inline style بهتر است؟

فرض کنید در صفحه ۱۰ تگ p دارید که در نظر داریم رنگش را به قرمز تغییر دهیم .اگر از inline style استفاده کنیم باید ۱۰ مرتبه این کار را انجام دهید و اما در ضورتی که از embedded استفاده کنیم می توانیم فقط یک بار آن را بالای صفحه بیافزاییم تا همه ی تگ های p ازآن تبعیت نمایند.
اهمیت استفاده از embadded style بیشتر هنگام تغییرات استایل مشخص می شود ؛ زیرا در صورت استفاده از inline مجبور می شویم تمامی ۱۰ مورد را تغییر دهیم که در embedded تنها تغییرات در یک مکان انجام می شود .

تا حالا استفاده از استایل embadded برای شما مفید بود ؛ حالا به این فکر کنید که شما صفحات بسیار زیادی دارید و می خواهید در همه صفحات رنگ همه ی p ها را تغییر دهید .به نظرتون حالا هم باید  از embedded استفاده کنیم؟

Extended Style

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

نحوه استفاده از یک External CSS:

ادیتورتان را باز کنید و متن css خود را در آن بنویسید.

برای دریافت کد ها کلیک کنید

 

برای دریافت کد ها کلیک کنید

 

حالا فایلی را با نام style1.css ذخیره کنید همانگونه که فایل html را ذخیره می کردید . حالا وقت اتصال فایل ساخته شده به صفحات است. نکته : راستی یادتان نرود در Css هم همچون HTML از کامنت برای معرفی قسمت های معرفی کد هاتون استفاده کنید برای این کار از کامنت  /* comment hear */ استفاده کنید.

اضافه کردن external css به صفحات html:

برای این کار از عنصر link داخل تگhead استفاده خواهیم کرد به مثال زیر توجه کنید :

برای دریافت کد ها کلیک کنید

 

برای دریافت کد ها کلیک کنید

Href به فایل css شما اشاره می کند . عناصر rel و type به مرورگر بیان می کند نوع لینک شما چیست تا مرورگر محتوای صفحه را طبق آن تنظیم کند . نکته : عنصر لینک یک تگ empty است و نمی توان آن را در Xhtml به صورت container نوشت . پس نتیجه می گیریم که external css در طراحی سایت ها از همه مناسب تر است و تنها در مواردی مجبوریم که از inline و یا embedded استفاده کنیم .آموزش طراحی سایت

جلسه نهم هم تموم شد ، دوستان عزیز نظرات شما باعث دلگرمی ما برای برگزاری دوره های آموزشی متنوع در سایت خواهد شد ، پس ما رو از نظراتتان بی نصیب نگذارید.

شما می توانید جذاب ترین اخبار و مقالات دنیای تکنولوژی را در کانال تلگرام زوم تک دنبال کنید. برای عضویت در این کانال، اینجا کلیک کنید.

5 نظرات

ارسال نظر

Time limit is exhausted. Please reload CAPTCHA.