آموزش CSS بصورت کاملا تصویری از مقدماتی تا پیشرفته – جلسه ۱۳

آموزش CSS

آموزش CSS

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

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

بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحهٔ وب اچ‌تی‌ام‌ال و اکس‌اچ‌تی‌ام‌ال است ولی آن را می‌توان بر هر نوع مستند اکس‌ام‌ال از جمله اس‌وی‌جی و اکس‌یوال اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهدهٔ کنسرسیوم وب جهانگستر است.

⬛️ شروع آموزش جلسه ۱۳ یادگیری زبان CSS :

🔴 خاصیت float در CSS :

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

شناور کردن (float) اغلب برای تصاویر استفاده می شود، اما برای کار کردن با layoutها نیز مفید است.(طرح بندی)

⬅️ شناور کردن یک عنصر چگونه است :

عناصر فقط در جهت محور X می توانند Float شوند(چپ یا راست).

عناصری که بعد از عنصر float شده آمده است، اطراف آنرا خواهند گرفت.

عناصری که قبل از عنصر float شده آمده است، تأثیری ندارند.

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

⬅️ float کردن عناصر، یکی بعد از دیگری :

اگر چندین عنصر float شده را بعد از یکدیگر قرار دهید، در صورت وجود فضای کافی، در نهایت یکی بعد از دیگری قرار خواهد گرفت.

در مثال زیر با استفاده از خصوصیت float یک گالری تصاویر ساخته ایم:

⬅️ استفاده از خصوصیت clear :

عناصری که بعد از یک عنصر float شده قرار دارند، اطراف آنرا خواهند گرفت. برای اجتناب از این موضوع از خصوصیت clear استفاده کنید.

در مثال زیر یک متن به گالری تصاویر اضافه شده است و خصوصیت clear را برای آن تنظیم کرده ایم:

 

⬅️ کلیه خصوصیات مربوط به float در CSS :

شماره ای که در ستون css ذکر شده، نشان می دهد که خصوصیت مورد نظر در کدام نسخه CSS تعریف شده است.

خصوصیت توضیحات مقادیر CSS
clear مشخص می کند که اطراف یک عنصر، آیا عناصر دیگری که float شده اند قرار بگیرد یا نه left

right

both

none

inherit

۱
float شناور بودن یا نبودن یک Box را مشخص می کند left

right

none

inherit

۱

مشاهده جلسات قبل و بعد یادگیری CSS :

جلسه ۱۲

جلسه ۱۴

بهزاد صحرانورد
۸ دی ۱۳۹۶
254 بازدید

 برچسب ها: