سایت آموزشی

» آموزش سی اس اس (CSS) جلسه سوموبسایت آموزشی همراه آموز

امروز دوشنبه ۴ بهمن ۱۳۹۵ به همراه آموز خوش آمدید.

آموزش سی اس اس (CSS) جلسه سوم

Learning Language CSS

همراه آموز : با ما همراه باشید با جلسه سوم آموزش زبان سی اس اس CSS

آموزش سی اس اس (CSS) جلسه سوم

با نام خدا و سلام خدمت تمامی همراه آموزی ها،امیدوارم که حالتون خوب باشه، با شما خواهیم بود با جلسه ی سوم آموزش CSS یا شیوه نامه آبشاری ،پیشنهاد میکنیم تا پایان با ما باشید.

در این جلسه میخواهیم یاد بگیریم که چگونه فایل سی اس اس CSS مان را به فایل HTML مان متصل نماییم.

ما چهار روش داریم برای اینکه بتونیم فایل CSS را به HTML‌ متصل کنیم که در ادامه این چهار روش بطور کامل توضیح خواهم داد.

  • با استفاده از تگ link (اگر فایل css مجزا از فایل html است)
  • با استفاده از import@ (اگر فایل css مجزا از فایل html‌ است)
  • با استفاده از تگ های <style></style> که باید دستورات css بین این تگ نوشته شوند
  • با استفاده از تگ <style></style> برای استایل دهی خطی(میتوان هر عنصری را در html از این طریق استایل دهی کرد)

روش اول استفاده از تگ LINK :

اول از هرچیزی بدانید اگر فایل CSS ما بصورت جداگانه یا مجزا از فایل HTML باشد باید از این روش استفاده کنیم تا بتوانیم فایل CSS را به فایل HTML متصل نماییم.

این تگ (LINK) باید بین دستورات هد فایل HTML قرار بگیرید. به دستورات زیر توجه فرمایید


در دستورات زیر به style.css توجه فرمایید. آدرس فایل css مون رو باید بجای style.css قرار دهیم.


نکاتی درباره نحوه ی قرار دادن آدرس فایل CSS :

اگر فایل CSS و فایل HTML مون در یک مکان باشند یعنی در کنار هم در یک پوشه باشند فقط کافیه اسم فایل CSS رو با پسوندش که CSS. است وارد کنیم.

اگر فایل CSS در کنار فایل HTML نباشد یعنی در یک پوشه ی دیگر برای مثال در پوشه ی hamooz باشد باید بصورت زیر آدرس دهی کنیم.

<link rel=”stylesheet” href=”hamooz/style.css” type=”text/css”>

اگر فایل css در فضای وب یا اینترنت باشد باید بصورت زیر آدرس دهی کنیم.(آدرس اینترنتی شما باید بجای آدرس سایت ما قرار بگیرد)

<link rel=”stylesheet” href=”http://hamooz.ir/style.css” type=”text/css”>

روش دوم استفاده از تگ import@ :

این روش هم میشه گفت شبیه روش اول است با این تفاوت که در این روش باید از تگ import@ استفاده و آن را بین تگ های <style></style> قرار بدیم.


لطفا نکات روش اول رو نیز برای این روش هم در نظر داشته باشید.

روش سوم نوشتن مستقیم دستورات CSS در فایل HTML :

در این روش ما بصورت مستقیم دستورات CSS مون رو داخل فایل HTML مینویسیم که البته این روش رو همراه آموز از جهات زیر توصیه نمیکنه :

  • بالا رفتن حجم فایل HTML
  • موجب پیچیدگی و عدم خوانایی دستورات
  • و …

حال همراه آموز به شما پیشنهاد میکنه که در صورت استفاده اجبار از این روش، چه موقعهایی از این روش استفاده کنید:

  • بخواهید هر صفحه ی HTML تان استایل سفارشی و جداگانه داشته باشد
  • حجم دستورات CSS زیاد نباشد
  • دستورات CSS بهینه باشند

حالا که متوجه شدیم این روش چگونه کار میکند میریم تا با هم یاد بگیریم چگونه از این روش استفاده کنیم.

در این روش نیز باید از تگ <style></style> در بین تگ های <head></head> استفاده کنیم.

روش چهارم استایل خطی با استفاده از تگ <style></style> :

همانطور که از اسمش پیداست ما میتوانیم با استفاده از این روش برای هر عنصری در html دستور css بنویسیم. برای مثال به دستورات زیر توجه نمایید.

در دستورات زیر یک پاراگراف که درونش متن سایت آموزشی همراه آموز رو داره رنگ پس زمینه اش آبی و رنگ متنش مشکلی می باشد.


خروجی دستورات بالا تصویر زیر می باشد:

آموزش سی اس اس (CSS) جلسه سوم

جلسه ی دوم آموزش CSS را از اینجا مشاهده نمایید

بازدید : بار دسته : CSS ، آموزش طراحی وب تاريخ ارسال : ۲۳ دی ۱۳۹۵ به اشتراک بگذارید :
نظرات کاربران
    • شما حق دارید در مورد این آموزش نظر دهید،همراه آموز با افتخار نظر شما را دریافت میکند.
    • نظر شما بعد از ارسال باید توسط مدیریت همراه آموز تایید شود.
    • نظراتی که غیر مرتبط با این مطلب باشد منتشر نخواهد شد.