جلسه اول آموزش:
برنامه نویسی تحت وب یکی از تخصص هایی است که هر فرد با زکاوتی با کمی تلاش می تواند به آن دست یابد تنها چیزی که برای دستیابی این تخصص نیاز است تلاش و دنبال کردن این کار است. گستره ی کدنویسی تحت وب خیلی زیاده به عنوان مثال (CSS , Ajax , HTML , PHP , JavaScript , JQuery , SQL , ASP و …) که هر کدوم برای خودشون چند زیر مجموعه و روش  نوشتاری دارن.
خیلی به مسائل کلی نمی پردازم و شروع می کنم، میخواهم که بحث CSS  رو توی چندین جلسه یاد بدم .

در ابتدا باید عرض کنم برای کد نویسی های تحت وب نرم افزار های مکمل زیادی وجود دارد که بهترین آنها Adobe Dreamweaver می باشد. طرز کا این نرم افزار اینطور است که شما اول نوع کدنویسی خود را انتخاب میکنید به عنوان مثال css بعد در زمانی که دارید شما حرف اول خاصیتی را مینویسید لیستی از آنهارا برای شما نمایان میکند تا در بین این همه کد سردرگم نشوید. من خودم هم شخصا با این نرم افزار کار میکنم. حالا میریم سراغ آموزش:

css چیست ؟

الگوهای آبشاری یا روی‌ انداز آبشاری سَبْک یا سی‌ اس‌ اس (به انگلیسی: CSS: Cascading Style Sheets ) در کنار اچ‌تی‌ام‌ال هستهٔ فناوری ساخت صفحه‌های وب هستند. سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است. الگوهای آبشاری از جنس زبان‌های نشانه‌گذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده می‌شود. به گفته‌ای ساده تر، این دستورها روش نشان داده شدن قلم‌ها و اندازه شان، رنگ‌ها و پس زمینه‌ها، روش چیدمان موزاییک‌های دربرگیرنده داده‌ها (دیواره ها)، و بسیاری دیگر از عنصرهای ساختار هر صفحه وب را، درون خود جای می‌دهند.

 

مزایای Css

با اینکه در سال‌های نخست پیدایش طراحی وب، طراح‌ها از جدول‌ها و ترفند پنهان سازی آنها برای چیدمان کمک می‌گرفتند، روش مدرن طراحی وب، این روند را منسوخ کرده است. چیدمان اکنون، تنها با دیواره (یا DIV)، که برتری‌های فراوانی نسبت به جدول‌ها (یا TABLE) دارند، انجام می‌شود. هر دیواره، یک موزاییک مجازی بخش کننده صفحه‌است که کار چیدمان را آسان‌تر انجام می‌دهد. جدول‌ها به جایگاه نمایش داده‌های ستونی خود بازگشتند و دیگر از آنها برای چیدن داده‌های صفحه‌های وب استفاده نمی‌شود. الگوهای آبشاری، افزون بر سبک تر کردن هر صفحه وب و پاک‌تر کردن آن، از داده‌های تصویری و نمایشی استاندارد، روش طراحی وب را به میزان فراوانی آسان تر و دسترسایی و کارایی وب را بهتر کرده‌اند.

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

برای مثال می تونیم یك بار نوع فونت مورد استفاده در یك صفحه را تعیین كنیم و دیگر مجبور نباشیم كد مربوط به فونت را در صفحه به كارببریم.

در واقع بطور کلی میشه گفت CSS این امکان رو ایجاد میکنه تا طراح بتونه چندین مشخصه توی طراحی صفحه رو به یکباره تعیین کنه و همچنین میشه گفت برای کنترل دقیق مشخصات صفحه و استاندارد کردن تگ های غیراستاندارد HTML و طراحی Layout صفحه میتونیم CSS رو بکار ببریم.

مزایای CSS بصورت خلاصه : (در مورد هرکدوم از این مزایا میشه مفصل صحبت کرد و مفهوم اونا رو در عمل باید دید)

CSS در وقت صرفه جویی میکنه (همونطور که گفتم با تعیین یکباره مشخصات)

تغیییرات مجدد تگ های HTML بسیار راحت میشه.

طراحی صفحه بدون نیاز به تگ های قالب بندی HTML

طراحی صفحات دینامیک به کمک javascript

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

اول از همه باید بدونید که ساختار عمومی کدنویسی css چطور هست خوب به تصویر زیر دقت کنید.

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

همونطور که میبینید. ساختار یک کد سی اس اس اینطور است. خوب بجای tag شما میتوانید کلا ، آی دی و یا همان تگ مثل : div , nav , article و … رو اضافه کنید.

کلاس و آی دی چیستند و فرق آنها در چیست؟

کلاس را میتوان نامی برای یک تگ در نظر گرفت مانند کد زیر:

1

class="inclass">

همونطور که توی کد بالا میبینید طریقه اضافه کردن کلاس به یک تگ اینگونه است. اما در بین “” باید کلمه ی انگلیسی نوشته شود.

خوب حالا چطور یک کلاس رو توی سی اس اس فراخوانی کنیم؟ برای این کار باید کلاسی که برای تگتون در نظر گرفتید رو توی فایل سی اس اس قرار بدید و یک ” . ” (نقطه) پشت سر آن اضافه کنید مانند کد زیر:

1
2
3
.inclass{
attr
}

خوب حالا برای آی چی؟

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

1

"inid">

و برای فراخوانی آن توی سی اس اس باید قبل از آی دی یک ” # ” علامت نردبان (ما میگیم :D) قرار بدیم. مثل کد زیر :

1
2
3
#inid{
attr
}

خوب حالا فرقشون چیه؟

فرقشون اینه که کلاس رو میشه بینهایت استفاده کرد به عنوان مثال میتوان برای 50 تگ هم خاصیت رو اضافه کرد اما آی دی فقط میشه برای یک تگ خاصیت اضافه کرد.

نگفتی تگ رو چطوری فراخوانی کنیم؟

برای فراخوانی تگ نام تگ را مینویسیم مثلا برای فراخوانی تگ div  مانند کد زیر عمل میکنیم:

1
2
3
div{
attr
}

شاید الان با خودتون میگیده که {} این دو علامت چیه؟

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

خوب این مقدمه ای بود برای آموزش کد نویسی css از قسمت بعد دیگه شروع میکنیم به آموزش خاصیت ها مثل background , opacity و …

نمونه ای از آخرین کارهای ما

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اگر ربات نیستی جواب بده *

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت