آموزش طراحی وب با CSS

۲۸ بهمن ۱۳۹۴ توسط محمد حسینی کیا مجموعه: آموزش های عمومی, سته بندی مستقل

زبان برنامه نویسی HTML به خوبی می تواند اجزای صفحه را ایجاد کند، اما ضعف اصلی زبان HTML عدم توانایی ایجاد رابط کاربری می باشد. برای ایجاد رابط کاربری برای صفحات HTML زبان برنامه نویسی CSS یا Cascade Style Sheets ایجاد گردید. CSS مکملی برای زبان HTML می باشد و سعی در پر کردن خلاء ها و برطرف کردن نقاط ضعف زبان HTML دارد. CSS شما را قادر می سازد تا قالب و استایل صفحات وب سایتتان را یک بار طراحی کرده و در دفعات استفاده کنید.

CSS زبان استایل دهی صفحات وب

برای واضح تر شدن ماجرا، یک مثال را بیان کنیم: در نظر بگیرید که وب سایتی با ۱۰۰ صفحه ای را به زبان HTML طراحی کرده اید. حال بعد از گذشت مدتی، تصمیم دارید تا برخی خصوصیات را کمی تغییر دهید مثلا رنگ پس زمینه را کمی تیره تر کنید. گفتن این حرف بسیار راحت است اما در عمل کمی بحث فرق می کند. تغییر یک خط کد در ۱۰۰ صفحه بسیار زمان بر خواهد بود.

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

برای مشاهده جزئیات و تهیه آموزش طراحی وب با CSS به این لینک (+) مراجعه نمایید.

فهرست سرفصل ها و رئوس مطالب مطرح شده در این مجموعه آموزشی، در ادامه آمده است:

سی اس اس
- معرفی سی اس اس
- ساختار دستورات CSS
- گزینشگرهای CSS
- فایل CSS خارجی
استایل دهی به عناصر
- استایل دهی پس زمینه
- استایل دهی متن
- استایل دهی فونت
- استایل دهی لینک ها
- استایل دهی لیست ها
- استایل دهی جداول
مفهوم باکس در سی اس اس
- مفهوم Box
- خاصیت border
- خاصیت outline
- خاصیت margin
- خاصیت padding
پیشرفته سی اس اس
- گروه بندی گزینش گرها
- تنظیم طول و عرض
- طریقه نمایش عناصر
- تنظیم موقعیت عناصر
- شناور کردن عنصر
- ترازبندی عناصر
- شبه کلاس ها
- شبه عناصر
- ساخت منو در CSS
- ساخت گالری تصاویر
- شفاف کردن تصویر
- نمایش بخشی از عکس
- رسانه های مختلف
- گزینش براساس صفت
- خلاصه مطالب CSS
پیشرفته سی اس اس ۳
- معرفی
- گرد کردن گوشه ها
- پس زمینه
- شیب رنگ
- افکت های متن
- فونت
- تبدیل دو بعدی
- تبدیل سه بعدی
- انتقال یا Transition
- متحرک سازی
- چند ستونه کردن متن
- رابط کاربری
- خلاصه مطالب
- آموزش های متفرقه کاربران
آموزش سی اس اس واکنش گرا
- معرفی rwd
- نظریه rwd
- شبکه نمایش rwd
- مدیا در rwd
- تصاویر در rwd
- فیلم ها در rwd
- فریم ورک در rwd
استفاده از فریم ورک بوت استراپ
مثال های تحت این درس

برای مشاهده جزئیات و تهیه آموزش طراحی وب با CSS به این لینک (+) مراجعه نمایید.

پاسخی بگذارید لغو پاسخ