مثال های CSS

CSS Backgrounds

تنظیم رنگ پس زمینه یک صفحه
تنظیم رنگ پس زمینه عناصر مختلف
تنظیم یک عکس به عنوان پس زمینه یک صفحه
یک پس زمینه نامناسب
چگونه عکس پس زمینه را در جهت محور X تکرار کنیم
چگونه عکس پس زمینه را مکان دهی کنیم
یک عکس پس زمینه ثابت (اگر صفحه Scroll داشت، حتی اگر به سمت بالا یا پایین حرکت کردیم عکس پس زمینه در جای خود ثابت باشد)
تنظیم تمام خصوصیات مربوط به پس زمینه در یک مرحله
یک مثال پیشرفته

توضیح مثال ها

CSS Text

تنظیم رنگ متن عناصر مختلف
تراز بندی متن
حذف خط زیر لینک ها
آزین بندی متن
کنترل حروف یک متن از لحاظ بزرگی و کوچکی
تو رفتگی خط ابتدایی یک پاراگراف
تنظیم فاصله بین حروف
تنظیم فاصله بین خطوط
تنظیم جهت یک متن
افزایش فاصله خالی بین کلمات
غیر فعال کردن wrapping یک متن (یک پاراگراف چند خطی، فقط در یک خط نمایش داده شود)
تراز بندی یک عکس در جهت محور Y

توضیح مثال ها

CSS Fonts

تنظیم font یک متن
تنظیم اندازه یک متن
تنظیم اندازه یک متن به پیکسل
تنظیم اندازه یک متن به واحد em
تنظیم اندازه یک متن به درصد و em
تنظیم سبک یا style یک متن (اغلب برای مشخص کردن متن مورب یا italic استفاده می شود)
تنظیم خاصیت font-variant (چگونه حروف کوچک را به حروف بزرگ تبدیل کنیم البته در اندازه کوچک)
تنظیم ضخامت یک متن با استفاده از خاصیت font-weight
تنظیم تمام خصوصیات مربوط به متن در یک مرحله

توضیح مثال ها

CSS Links

اضافه کردن رنگ های مختلف به لینک های دیده شده یا دیده نشده
حذف خط زیر یک لینک
تنظیم یک رنگ برای پس زمینه یک لینک
چگونه Styleهای مختلف را به لینک ها اضافه کنیم
پیشرفته - عمل کردن لینک مانند یک دکمه

توضیح مثال ها

CSS Lists

علامتگذاری های مختلف لیست ها(Bullet)
علامتگذاری آیتم ها با یک عکس
مثال بالا، در تمام مرورگرها بطور یکسان نمایش داده نخواهد شد، راه حل؟
تمام خصوصیات مربوط به لیست را می توان در یک مرحله تنظیم نمود

توضیح مثال ها

CSS Tables

در این مثال برای عناصر table و th و td خصوصیت border تنظیم شده است
برای تبدیل لبه های دوخطی به لبه های یک خطی و مجزا از خاصیت border-collapse استفاده می گردد
عرض و ارتفاع یک جدول با خصوصیات Width و height تعریف می شود
خصوصیت text-align متن را در جهت محور X تنظیم می کند
خصوصیت vertical-align متن را در جهت محور Y تنظیم می کند
برای کنترل فاصله بین لبه ها و متن در جدول می توان از خصوصیت padding استفاده کرد
تنظیم یک رنگ دلخواه برای لبه های جدول
تنظیم مکان عنوان یا Caption یک جدول
ساخت یک جدول فانتزی

توضیح مثال ها

CSS Box Model

فرض کنید 250 پیکسل فضا در عرض وجود دارد و می خواهیم یک عنصر با عرض کلی 250 پیکسل را در آن جای دهید
مثال بالا در IE8 و نسخه های قبل از آن بطور صحیح نمایش داده نمی شود(راه حل: اضافه کردن یک DOCTYPE)

توضیح مثال ها

CSS Border

خاصیت border-width برای تنظیم عرض یا ضخامت لبه ها استفاده می شود
خاصیت border-style مشخص می کند که چه نوع لبه ای نمایش داده شود
خاصیت border-color برای تنظیم رنگ لبه ها استفاده می شود
خاصیت border برای تنظیم رنگ لبه ها استفاده می شود

توضیح مثال ها

CSS Outline

این مثال نشان می دهد که چگونه می توان یک خط اطراف عنصر p کشید، به عبارتی چگونه فضای بیرون از لبه های یک عنصر را تنظیم کنیم
این مثال نشان می دهد که چگونه style یک outline را تنظیم کرد
این مثال نشان می دهد که چگونه رنگ یک outline را تنظیم کرد
این مثال نشان می دهد که چگونه عرض یک outline را تنظیم کرد

توضیح مثال ها

CSS Margin

در این مثال، حاشیه بالا و پایین 100 پیکسل و حاشیه راست و چپ 50 پیکسل تعریف شده است
برای مختصر نویسی و کوتاه شدن کد، می توانید همه چهار حاشیه یک عنصر را در یک خصوصیت تعریف کنید
تنظیم حاشیه بالای یک پاراگراف با مقدار cm
تنظیم حاشیه پایین یک پاراگراف با درصد

توضیح مثال ها

CSS Padding

تنظیم فضای سمت چپ
تنظیم فضای سمت راست
تنظیم فضای بالا
تنظیم فضای پایین
مختصر نویسی - Padding

توضیح مثال ها

CSS Grouping and Nesting

گروه بندی Selectorها
Selectorهای تو در تو

توضیح مثال ها

CSS Dimension

تنظیم ارتفاع عناصر
تنظیم ارتفاع یک عکس به درصد
تنظیم عرض به پیکسل
تنظیم حداکثر ارتفاع یک عنصر
تنظیم حداکثر عرض یک عنصر به درصد
تنظیم حداقل ارتفاع یک عنصر
تنظیم حداقل عرض یک عنصر به پیکسل

توضیح مثال ها

CSS Display

چگونه یک عنصر را مخفی کنیم (visibility:hidden)
چگونه یک عنصر را نمایش ندهیم (display:none)
نمایش یک عنصر به صورت inline
نمایش یک عنصر به صورت block
تنظیم خصوصیت display با مقدار collapse (ویران کردن) برای یکی از ردیفهای جدول

توضیح مثال ها

CSS Positioning

یک عنصر با موقعیت ثابت(fixed) در واقع نسبت به پنجره مرورگر، موقعیت دهی می شود
یک عنصر نسبت به مکان عادی خودش، موقعیت دهی می شود (Relative)
یک عنصر نسبت به مکان والد خود موقعیت دهی می شود و اگر والدی وجود نداشت، نسبت به بلوک <html> موقعیت دهی خواهد شد (Absolute)
روی هم قرار دادن عناصر (overlap)
تنظیم شکل یک عنصر(عنصر کوتاهتر نمایش داده می شود)
چگونه با سرریز شدن (overflow) یک عنصر برخورد کنیم
چگونه تنظیم کنیم که مرورگر به صورت اتوماتیک با overflow برخورد کند
تغییر شکل مکان نما(cursor)

توضیح مثال ها

CSS Floating

یک استفاده ساده از خصوصیت float
تنظیم خصوصیت float:right برای یک عکس و قرار دادن آن داخل یک پاراگراف. اضافه کردن border و margin به عکس مورد نظر
ساخت گالری تصاویر با خصوصیت float
استفاده از خصوصیت clear
float کردن یک عکس همراه با عنوان آن به سمت راست
style دادن به حرف اول یک پاراگراف و float کردن آن به سمت چپ
ساخت یک منوی افقی
ساخت یک homepage بدون استفاده از جدول

توضیح مثال ها

CSS Aligning Elements

تراز بندی با استفاده از خصوصیت margin
تراز بندی با استفاده از خصوصیت position
زمانی که از روش های بالا برای ترازبندی، استفاده می کنید، در مرورگرهای مختلف تفاوت ظاهر وجود خواهد داشت...! راه حل؟
ترازبندی با اسفاده از خصوصیت float
زمانی که از خصوصیت float استفاده می کنید، همیشه یک DOCTYPE! در بالای صفحه HTML اعلان و همچنین برای عنصر body خصوصیات padding و margin را با مقدار "0" تنظیم کنید

توضیح مثال ها

CSS Pseudo-classes

اضافه کردن رنگ های مختلف به یک لینک
اضافه کردن سبک ها یا styleهای مختلف به یک لینک
استفاده از شبه کلاس :focus
:first-child - تطبیق اولین عنصر p
:first-child - تطبیق اولین تگ <i>، داخل تمام تگ های p
:first-child - تطبیق تمام تگ های <i>، داخل اولین تگ p
استفاده از شبه کلاس :lang

توضیح مثال ها

CSS Pseudo-elements

اضافه کردن یک style خاص روی اولین حرف یک متن
اضافه کردن یک Style خاص روی اولین خط یک متن
اضافه کردن یک Style خاص بر روی اولین خط و اولین حرف یک متن
اضافه کردن یک محتوی دلخواه، قبل از یک عنصر
اضافه کردن یک محتوی دلخواه، بعد از یک عنصر

توضیح مثال ها

CSS Navigation Bars

style دهی کامل یک navigation bar عمودی
style دهی کامل یک navigation bar افقی

توضیح مثال ها

CSS Image Gallery

گالری تصاویر

توضیح مثال

CSS Image Opacity

ایجاد یک تصویر شفاف با افکت Hover
قرار دادن یک متن دلخواه داخل یک جعبه شفاف شده

توضیح مثال ها

CSS Image Sprites

در این مثال، مشخص می کنیم که کدام بخش از عکس "img_navsprites.gif" نمایش داده شود
می توان از تکه کردن تصاویر در ساخت، لیست های هدایتی (navigation list) استفاده کرد
حالا می خواهیم افکت Hover را به لیست هدایتیمان اضافه کنیم

توضیح مثال ها

CSS Attribute Selectors

در این مثال، رنگ متن تمام عناصر با صفت title آبی خواهد شد
در این مثال، تمام عناصری که صفت title آنها با مقدار "beyamooz" تنظیم شده است، styleدهی شده
در این مثال، رنگ متن همه عناصری که صفت title آنها شامل کلمه "hello" باشد، آبی خواهد شد
در این مثال، رنگ متن همه عناصری که صفت lang آنها شامل کلمه "en" یا "-en" باشد، آبی خواهد شد

توضیح مثال ها