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

امروز با جلسه اول آموزش اختصاصی css از سایت پگاسوس گراف در خدمت شما عزیزان می باشم.

بعد از تقریبا 4 جلسه آموزش مقدماتی html 5 وقتش شده بود که آموزش مقدماتی css با زبانی ساده و روان در خدمت شما عزیزان قرار بگیرد امید است که در پایان این جلسات نتیجه حاصله مورد رضایت شما عزیزان قرار بگیرد.

اولین چیزی که در طراحی یک قالب سایت یا حتی سیستم وبلاگدهی بهش نیاز داریم دو زبان html و css هستن که تا اینجای کار از با مقدمات html آشنا شدیم ولی این css که میگن چیه؟

به کمک css چه کارهایی می توانیم در html انجام بدیم؟

معنی css :

واژه css مخفف کلمه انگلیسی cascading style sheets به معنی صفحات استایل آبشاری هست !

می پرسین چرا آبشاری؟ چون دستوراتی که به وسیله css به هر عنضری که اعمال می شود بر فرزندان اون عنصر هم اعمال می شود.

زیاد ذهنتونو درگیر نکنین به زودی متوجهش میشین (:

پیشنیاز ها برای یادگیری css :

- تسلط بر مبحث پدر - فرزند (parent - child)

تسلط بر مفهوم عنصر و صفت (element, attribute)

-Content (محتوا) این بخش وب به وسیله کد های HTML ایجاد می‌شه.

-Presentation (نمایش) این بخش وب به وسیله کد های CSS ایجاد می‌شه.

Behavior (رفتار) این بخش وب به وسیله JavaScript ایجاد می‌شه. آموزش JavaScript (به زودی :))

css چیست ؟

کد های css محموعه از دستوراتی هستن که به وسیله آنها می توانی شکل ظاهری و نمایشی محتوای صفحات وب را که به وسیله html ایجاد کردیم را تعیین کنیم.

بنابراین html استخوان بندی قالب (سایت) و css رنگ بندی و گوشت بندی و پوست بندی و این که قدش چقدر باشه پوستش چه رنگی باشه از چه نژادی باشه هستش.

طوطی سمت چپی html و استخوان بندی سایت طوطی سمت راستی کاری که css سر سایت میاره.

در ضمن یکی از بزرگترین مزیت های استفاده از css صرفه جویی در زمان طراحی سایت می باشد!

ساختار کد های css :

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

Selector : این بخش نام عنصر HTML است که می‌خوایم استایل مورد نظر رو به اون اختصاص بدیم.

Declaration : بخشی که در میان علامت {} نوشته می شود، بخش اعلان نام دارد و در این قسمت شما باید نام خاصیت مورد نظر که می خواهید اعمال شود و مقدار آن را تعیین کنید. در این مثال خاصیت رنگ برابر با مقدار آبی است و خاصیت سایز فونت برابر با مقدار 12 پیکسل است.

id و class در css :

همونطور که در بخش ساختار نحوی دستورات مشاهده کردین، تو بخش Selector عنصری رو که می‌خوایم استایل روی اون اعمال بشه رو ذکر می‌کنیم.

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

 

اعمال دستورات فقط بر روی یک عنصر واحد توسط id :

برای این منظور اول باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id رو تعریف کنیم.

سپس به بخش دستورات CSS رفته و در بخش Selector، صفت id که برای عنصر مورد نظر تعریف کردیم رو نوشته و یک نماد “#” قبل از اون اضافه کنیم.

مثلا اگه بخوایم دستورات فقط بر روی یک پاراگراف خاص اعمال بشن، ابتدا برای اون پاراگراف یک صفت id در کدهای HTML تعریف می‌کنیم:

 

<p id="para1">This is a Paragraph.<p>

 

سپس در دستورات CSS در بخش Selector مقدار صفت Id تعریف شده را همراه با یک علامت “#” یا همان می‌نویسیم:

 

#para1 { text-align:center; color:red; }

 

اعمال دستورات بر روی یک گروه از عناصر توسط Class :

برای این منظور اول باید به کدهای HTML رفته و برای همه عناصری که می‌خوایم خاصیت‌های ظاهری یکسان داشته باشن صفت Class رو تعریف می کنیم.

سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Class که برای عناصر مورد نظر تعریف کرد‌یم رو نوشته و یک نماد “.” قبل از اون اضافه کنیم.

مثلا اگه بخوایم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال بشن، ابتدا برای اون دسته از پاراگراف‌ها یک صفت Class مشترک در کدهای HTML تعریف می‌کنیم:

 

<p class="center">This is a Paragraph.</p>

 

سپس در دستورات CSS در بخش Selector مقدار صفت Class تعریف شده را همراه با یک علامت “.” یا همان نقطه می‌نویسیم:

 

.center { text-align:center; }

 

 بدین ترتیب این دستورات فقط بر روی پاراگراف هایی اعمال می‌شن که دارای Class برابر با Center هستن و سایر پاراگراف‌های موجود در صفحه از این دستورات تاثیرپذیر نیستن.

پایان جلسه اول آموزش css