رفتن به مطلب
انجمن آی ترفند

پست های پیشنهاد شده

vip-itarfand.PNG

در این پست از انجمن آی ترفند طراحی صفحه های سایت به زبان css آموزش داده می شود.

پیش نیاز این آموزش تسلط به زبان html می باشد:

line.png

از پرسیدن سوال در این تاپیک خودداری کنید.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

قسمت 1) شروع به کار

line.png

برای قرار دادن فایل استایل برای قالب خود کافی است مانند لینک زیر پیش بروید و فقط به جای HTML Page گزینه Style Sheet را انتخاب کنید.

و سپس کد زیر را در قسمت head فایل html قرار دهید.

لطفا وارد و یا عضو شوید تا بتوانید code را ببینید

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

قسمت 2) روش های استفاده از css

line.png

برای استفاده از فایل css برای یک فایل html سه روش وجود دارد:

  • خارجی / اکسترنال
  • داخلی / اینترنال
  • درون خطی / این لاین

روش خارجی

لطفا وارد و یا عضو شوید تا بتوانید code را ببینید

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

داخلی

لطفا وارد و یا عضو شوید تا بتوانید code را ببینید

این روش برای استفاده از css برای هر صفحه به صورت جدا می باشد.

این روش باعث کم شدن سرعت لود قالب می باشد و استفاده از آن کم می باشد.

درون خطی

لطفا وارد و یا عضو شوید تا بتوانید code را ببینید

تگ های html دارای خصوصیتی به نام style می باشند که می توانید از آن استفاده کنید.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

قسمت 3) Selector ها

line.png

برای دسترسی به تگ های html در css به صورت زیر عمل می کنیم.

لطفا وارد و یا عضو شوید تا بتوانید code را ببینید

تگ های پیش فرض html را فقط یک بار باید در فایل css استفاده کرد.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

قسمت 4) background

line.png

ویژگی background در css برای تنظیم رنگ و عکس پس زمینه تگ ها و ویژگی های مربوط به آن می باشد.

لطفا وارد و یا عضو شوید تا بتوانید code را ببینید

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

لطفا وارد و یا عضو شوید تا بتوانید link را ببینید

لطفا وارد و یا عضو شوید تا بتوانید code را ببینید

background-image : برای قرار دادن یک عکس در پس زمینه

background-color : برای تغییر رنگ پس زمینه

background-repeat : تعیین تکرار شدن عکس در پس زمینه در صورت اندازه نبودن آن و چگونگی آن

background-attachment : تعیین ثابت بودن یا نبودم پس زمینه

background-position : محل پس زمینه

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری

×
×
  • اضافه کردن...