css

پس از آشنایی و تسلط بر کدنویسی HTML روند فراگیری مهارتهای حرفه ای وب با مبحث دیگری تحت عنوان CSS ادامه می یابد، CSS مخففی از سرواژه های Cascading Style Sheets و در اصطلاح به معنی شیوه ای جهت شکل دهی ظاهر و فرم صفحات وب است، CSS را باید به نوعی جادوگر طراحی وب نامید چرا که کدنویسی بی روح و اسکلتی HTML با کمک CSS تبدیل به طراحی جذاب و کاربر پسند می شود، فلسفه پیدایش این زبان به آسان کردن کار طراحان صفحات وب جهت شکل دهی و فرم بندی ایده هایشان بر می گردد، پیش از...

در آموزش قبل اشاره شد که CSS به خودی خود کاربرد خاصی ندارد و در کنار تگ های HTML است که معنی و کاربرد پیدا می کند، در واقع CSS صرفا برای تعریف استایل تگ های مختلف HTML به وجود آمده است، اما CSS چگونه این تگ ها را در صفحات وب شناسایی می کند؟ به طور مثال اگر بخواهیم از بین دهها تگ div موجود در صفحه div مربوط به یک مطلب مشخص را استایل دهی کنیم، CSS چه راه حلی برای این موضوع در نظر گرفته است؟ پاسخ این نوع سوالات عبارت سلکتور (Selector) است، سلکتور راهکاری در...

بعد از آشنایی اولیه با CSS، تعریف کلاس (Class) و آی دی (ID)، نوبت به فراگیری ویژگی های مربوط به خاصیت Background در این زبان است، Background از جمله اولین خاصیت هایی است که در هنگام طراحی صفحات وب از آن استفاده می کنیم چرا که می تواند نقطه شروع طراحی ظاهر رابط کاربری ما باشد و به نوعی رنگ بندی پایه پروژه را مشخص کند، خوشبختانه قابلیت های CSS در این خصوص تقریبا کامل و بدون نقص است و هرآنچه که در طراحی وب مورد انتظار ما باشد با کدهای آن دست یافتنی است، در ادامه خواهیم گفت که...

پیش از این در بخش آموزش مقدماتی CSS از کاربرد این زبان استایل نویسی، نحوه تعریف و استفاده از سلکتور کلاس (Class) و آی دی (ID) صحبت کردیم، همچنین با نحوه کار رنگ ها و تصاویر پس زمینه (Background) و ویژگی های آنها بیشتر آشنا شدیم و مثال هایی را در این خصوص به صورت صفحاتی کمی و بیش ساده با الگوهای دلخواه مرور کردیم، اکنون در ادامه مباحث آموزش مقدماتی CSS می خواهیم با یکی دیگر از کاربردهای این زبان آشنا شویم و شیوه کار با فونت، متن و اعمال تنظیمات سفارشی بر روی آنها را بررسی کنیم، قابلیت...

در ادامه مباحث آموزش مقدماتی استایل نویسی با زبان CSS می خواهیم با خواص کاربردی این زبان در نحوه تنظیم ویژگی های ظاهری لینک (Link) آشنا شویم، در صفحات مختلف فضای وب با لینک (Hyperlink یا ابرپیوند) آشنا هستیم که با بردن نشانه گر (ماوس) روی آنها به فرض رنگ متن تغییر می کند و یا پس از بازدید از صفحه ارجاع داده شده متن لینک به رنگ دیگری نشان داده می شود، جالب است که تمام این ویژگی ها با کمک خواص CSS خلق می شوند که در ادامه آموزش پیش رو به آن خواهیم پرداخت، یادآور می شویم...

همان طور که در مطالب قبل از بخش آموزش مقدماتی CSS گفتیم، خاصیت های CSS قابلیت های بسیار خوبی برای سفارشی سازی ظاهر و شکل نمایش تگ های HTML در صفحات وب در اختیارمان قرار می دهند تا حدی که امروزه دیگر کسی به طراحی وب بدون استفاده از CSS فکر نمی کند، در ادامه آموزش ها این بار می خواهیم نحوه تنظیم شکل ظاهری تگ های ul و li که مربوط به ایجاد لیست در صفحات وب هستند را بررسی کنیم، یادآور می شویم که تگ ul و li برای ایجاد منوهای استاندارد و باب طبع موتورهای جستجو در...

در ادامه آموزش های مقدماتی CSS این بار می خواهیم به مبحث کار با ویژگی های margin و padding بپردازیم، استفاده از این دو ویژگی (property یا خاصیت) در طراحی صفحات وب از جمله در هنگام تعریف فاصله چهارگوشه قالب از لبه های صفحه نمایش، فاصله عناصر درونی صفحه از هم یا تعیین میزان فضای خالی (حاشیه داخلی) بلاک های دربرگیرنده محتوا مانند متن، تصویر، ویدئو و... جهت نمایش بهتر و ایجاد جلوه ظاهری سفارشی امری متداول و فراگیر است، ویژگی های margin و padding زیرمجموعه هایی دارند که بسته به شرایط ممکن است به تعدادی از آنها در تعریف...

در طراحی و فرم بندی ظاهر صفحات وب از خصوصیات CSS زیادی استفاده می شود که هر کدام می توانند قابلیت های ویژه ای برایمان ایجاد کنند تا در نهایت به هدف مورد انتظارمان دست یابیم، یکی از این ویژگی ها امکان ایجاد خطوط حاشیه ای به شکل ها، طرح ها و رنگ های مختلف با استفاده از خاصیت های border و outline در استایل CSS است، امروزه کمتر طراح وبی پیدا می شود که از این خاصیت های استاندارد در تعریف استایل و کدنویسی ساختار و ظاهر قالب صفحات خود استفاده نکرده باشد، border و outline شباهت های زیادی به...

خاصیت هایی که تا این قسمت از آموزش مقدماتی css به آنها پرداختیم با دو ویژگی دیگر تکمیل می شوند که height و width نام دارند، همان طور که از عناوین آنها پیدا است، از این خاصیت ها برای تعیین میزان عرض و ارتفاع عناصر در صفحات وب استفاده می شود که می توانند بسته به هدف شما مقادیری اعم از پیکسل، درصد و... داشته باشند، در کنار این دو ویژگی اصلی، ویژگی های فرعی max-height ،max-width ،min-width و min-height نیز وجود دارند که ممکن است در استایل نویسی css و در برخی مواقع کاربردهایی داشته باشند، به هر صورت...

همان طور که تا این قسمت از آموزش های مقدماتی استایل نویسی با css ملاحظه کردید، این زبان کمکی برای ایجاد جلوه های ظاهری و فرمت بندی کدها و عناصر html از خاصیت های ویژه خود استفاده می کند که هر کدام از آنها کاربرد خاصی دارند و بر روی عناصر به خصوصی تاثیرگذار هستند، یکی دیگر از این خاصیت ها display نام دارد که تعیین کننده نحوه نمایش یک عنصر (به صورت بلاک، جدول، لایه مخفی و...) در صفحات وب است،  display با مقادیر متفاوت، تنظیمات متفاوتی نیز در اختیار طراحان وب قرار می دهد، در ادامه آموزش با...

از جمله مباحث پیشرفته در زمینه استایل نویسی وب با زبان CSS، بحث استفاده از ویژگی position و float برای شناور کردن عناصر مختلف در صفحات به نحو دلخواه و مورد انتظار است، آشنایی با این خاصیت ها را می توان نقطه آغاز استایل نویسی حرفه ای برشمرد چرا که معمولا در بسیاری از جلوه های ویژه و امکانات مورد نیاز برای ساخت واسط کاربری (UI یا User Interface) مناسب در صفحات وب این خواص استاندارد استفاده خواهند شد، به طور مثال منوهای طراحی شده با CSS، باکس های شناور و واکنش پذیر (Interactive)، افزونه ها و Widget ها و...