منتظر آموزش بعدی ما باشید
خانه / طراحی سایت / css / آموزش جامع CSS بخش اول
آموزش جامع CSS بخش اول

آموزش جامع CSS بخش اول

به نام خدا

با سلام به کاربران elc1

امروز تصمیم گرفتیم به آموزش css بپردازیم .CSS مخفف کلمه Cascading Style Sheets و به معنی “برگه های پشت سر هم و مشبک ” است . ویژگی مربوط به HTML ( زبان نشانه گذاری متن ویژه وب ) که توسط کنسرسیوم وب (w3C) توسعه یافته و به نویسندگان اسناد HTML و کاربران آن امکان می دهد تا برگه های مشبک را به اسناد HTML خود متصل نمایند. برگه های مشبک ، شامل اطلاعات مربوط به آماده سازی چاپ و چگونگی ظهور صفحه مانند فونت متن داخل صفحه است . این ویژگی همچنین شیوه ترکیب برگه های مشبک سند HTML و برگه های مورد نظر کاربر را هدایت می کنند. به زبان خیلی ساده اگه بخواهیم بیان کنیم ، این امکان رو به ما می دهد که هر وقت بخواهیم رنگ زمینه و فونتهای رو در صفحات طراحی شده تغییر دهیم به راحتی بتوانیم با تغییرات در CSS این تغییرات رو بروی دیگر صفحات طراحی شده اعمال نمائیم و دیگر نیازی نباشد که تک تک صفحات رو تغییر بدهیم.

 

که بالا یک نمونه از کد های css است

شروع آموزش :

selectorبه تصویر بالا دقت کنید

h1 رو فراخانی کرده ایم و به آن استایل داده ایم مانند این که بگوییم : احمد بیا و برو این کار را انجام بده! احمد نقش h1 را ایفا میکند و دستور هایی که در  {} هستند نقش کار انجام شده را انجام میدهند!

*فراخوانی ها در HTML انجام میشوند و در css فقط به آن ها استایل میدهیم

برای مثال ما میتوانیم بنویسیم

 

 به این معنی است که هر تگ p موجود در کد html به وسط منتقل شده و رنگش قرمز شود

 

 

در این کد id part1 را فراخوانی کرده ایم و به ان استایل داده ایم

 

 

در این کد به تگ هایی که کلاس آنها center است استایل داده ایم

 

در این کد به تمامی تگ های p که در زیر مجموعه ی آنها کلاس center است استایل داده ایم

در css شما می توانید خلاصه نویسی کنید ! به طور مثال به سه تگ زیر یک استایل مشترک داده ایم

 

 

ما میتوانیم این را به صورت

 

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

حتما تا الان برای شما این سوال پیش آمده که چطور باید این فایل بر روی html مورد نظر شما عمل کند؟ شما برای این کار باید این دو رو به همدیگر وصل کنید با استفاده از دستور زیر

این دستور را باید در تگ <head> قرار دهید
که البته در سیستم های مختلف متفاوت است
برای مثال :
کد فوق برای وصل کردن css  در مدیریت محتوای وردپرس است

 

شروع کار با css :

Background: با استفاده از این دستور می توانید پس ضمینه تگ مورد نظرتان را تغییر دهید

Background Color: با استفاده از این دستورمی توانید به جای پس ضمینه رنگ قرار دهید

برای مثال :

*می توانید مقدار رنگ را به سه صورت زیر وارد کنید

#ff0000 : به صورت هگز که کد رنگ مورد نظر را وارد می کنید

(rgb(255,0,0: به صورت ار جی بی

*ار جی بی چیست ؟ قرمز ، سبز ، آبی ، سه رنگی هستند که توسط صفحه کامپیوترها استفاده می شوند و مابقی رنگ ها را می توان با ترکیب این سه رنگ ساخت . پرینترهای کمی نیز از این سیستم استفاده می کنند و بیشتر پرینترها از سیستم CYMK استفاده می کنند .

red : یا مقدار آن را به صورت نام رنگ وارد کنید

شما میتوانید به هر تگی که بخواهید رنگ پس زمینه بدهید برای مثال :

 

Background Image : با استفاده از این دستور می توانید به پس زمینه تصویر بدهید

برای مثال :

background-repeat : با این دستورمی توانید نوع تکرار تصویر در ضمینه را مشخص کنید

برای مثال :

تصویری که به عنوان پس ضمینه انتخاب کرده ایم در راستای افقی تکثیر می شود

یا

تصویری که به عنوان پس ضمینه انتخاب کرده ایم اصلا تکثیر نمی شود

background-position : با این دستور می توانید مکان تصویر را تعیین کنید

برای مثال :

 

 background-attachment : برای تعیین وضعیت تصویر بک گراند به اسکرول

برای مثال :

این مقدار با حرکت اسکرول تصویر جابه جا نمی شود

برای خلاصه نویسی نیز شما میتوانید به صورت زیر عمل کنید

 

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

برای استفاده از آموزش های دیگر طراحی سایت از لینک مقابل استفاده کنید: طراحی سایت

منبع : ELC1.IR

موفق باشید

 

درباره‌ Admin

تیم مدیریتی ای ال سی وان تصمیم دارد که تمام تجربیات و دانسته های خود را بخصوص در زمینه الکترونیک در اختیار شما دوستان عزیز قرار دهد . بانظرات خود ، خودتان را در پیشرفت سایت سهیم بدانید

جوابی بنویسید

ایمیل شما نشر نخواهد شدخانه های ضروری نشانه گذاری شده است. *

*