مثال های کاربردی CSS
نحوه نوشتن دستورات CSS بصورت آبشاری
نحوه نوشتن دستورات CSS بصورت خطی ( فشرده پشت سرهم )
نحوه ایجاد / استفاده از توضیحات در CSS
استفاده از دستورات CSS بصورت درون تگی ( یا Inline )
استفاده از دستورات CSS بصورت درون صفحه ای ( یا Internal )
نحوه استفاده از CSS بصورت خارجی یا فایل مجزا ( یا External )
نحوه انتخاب تگ ها از صفحه و فراخوانی در CSS
نحوه انتخاب ID از صفحه و فراخوانی در CSS
انتخاب Class از صفحه و فراخوانی در CSS
نحوه استفاده از چندین کلاس درون یک تگ
نحوه انتخاب یک تگ با ID خاص
نحوه انتخاب یک تگ با Class خاص
نحوه انتخابگر گروهی تگ ها بدون کلاس و ID خاص
نحوه انتخاب گروهی تگ ها با کلاس و ID های خاص
انتخابگر سراسری یا انتخابگر تمامی تگ های داخل صفحه
انتخاب کن صفاتی که شامل حداقل یک کلمه مورد نظر ما باشد
انتخاب کن صفاتی که از یک کلمه خاص شروع می شوند
انتخاب کن صفاتی که با کلمه خاصی به پایان می رسند
انتخاب کن صفاتی که شامل کلمه مورد نظر ما باشد
انتخاب کن تمامی تگ هایی که درون یک تگ دیگر است
انتخاب کن فرزندان یک تگ را
انتخاب کن اولین تگی که بلافاصله بعد از یک تگ دیگر اومده باشد
انتخاب کن تمامی تگ های موجود در یک صفحه را که بعد از تگ مورد نظر ما اومده باشد
تنظیم رنگ زمینه و رنگ متن برای کل صفحه ( استفاده از کد هگزادسیمال )
تنظیم رنگ زمینه و رنگ متن برای کل صفحه ( استفاده از کد RGB )
تنظیم رنگ زمینه و رنگ متن برای کل صفحه ( استفاده از کد HSL )
تنظیم رنگ زمینه و رنگ متن برای کل صفحه ( استفاده از Gradient )
تنظیم تصویر زمینه برای کل صفحه ( تگ body )
تصویر زمینه بصورت کاشی وار تکرار نشود
تصویر زمینه فقط بصورت افقی کاشی وار تکرار شود
تصویر زمینه فقط بصورت عمودی کاشی وار تکرار شود
نحوه فیکس کردن تصویر زمینه
تصویر زمینه در حالت اسکرول ( یعنی با اسکرول کردن صفحه، تصویر هم اسکرول میشه )
قرار دادن تصویر زمینه در وسط صفحه
قرار دادن تصویر زمینه در سمت پایین گوشه راست صفحه
نحوه استفاده از ویژگی Border
ایجاد Margin در ۴ طرف تگ بصورت مجزا ( یعنی بالا – راست – پایین و چپ )
وسط قرار دادن یک تگ در صفحه با استفاده از ویژگی Margin
وسط قرار دادن عکس در صفحه با استفاده از ویژگی Margin
نحوه استفاده از ویژگی Margin بصورت خلاصه نویسی
ایجاد Padding در ۴ طرف تگ بصورت مجزا ( یعنی بالا – راست – پایین و چپ )
نحوه استفاده از ویژگی Padding بصورت خلاصه نویسی
استفاده از box-sizing در یک یا چندین تگ بصورت مجزا
استفاده از box-sizing در کل صفحه بصورت سراسری ( روش پیشنهادی )
نحوه استفاده از ویژگی Outline
نحوه خلاصه نویسی ویژگی Outline
قرار دادن متن در سمت چپ ، وسط و راست
نحوه justify کردن متن ( سعی میکنه متن رو بکشه تا بتونه تمام فضای باکس رو پُر کنه )
نحوه کشیدن خط به بالا، رو و زیر متن
نحوه حذف خط کشیده شده زیر لینک ها
نحوه بزرگ ، کوچک کردن تمامی حروف یک متن
نحوه ایجاد فاصله بین حروف متن
نحوه ایجاد فاصله یا یک فضای خالی بین سطرهای متن
نحوه تنظیم جهت متن کل صفحه ( راست چین کردن )
نحوه ایجاد فاصله بین کلمات متن
نحوه ایجاد سایه برای متن
مشخص کردن نام فونت برای کل صفحه ( تگ Body )
نحوه تنظیم اندازه فونت کل صفحه ( تگ Body )
نحوه تعریف و استفاده از فونت دلخواه در صفحه وب
نحوه مشخص کردن رنگ لینک ها در حالت های مختلف
وقتی ماوس میره روی لینک، یک خط زیرش کشیده میشه
نحوه ایجاد یک دکمه لینک دار
نحوه ایجاد دکمه تمام عرض ( عرض %۱۰۰ )
نحوه کشیدن یک عکس به دور لبه های یک تگ
نحوه گذاشتن عکس بجای شکل علامت گذاری آیتم های لیست
نحوه سفارشی سازی شکل علامت گذاری آیتم های لیست
شکل ها، حالت های مختلف علامت گذاری یک لیست های مرتب و نامرتب
نحوه تمام عرض ( 100 درصد ) کردن جدول
نحوه تک خطی کردن خط دور لبه های جدول
ترازبندی متن موجود در سلول های جدول ( مثلا در وسط قرار بگیرند )
ترازبندی عمودی متن داخل سلول های جدول
وقتی ماوس میره روی خوده سلول های جدول ، رنگ زمینه شون تغییر میکنه
نحوه انتخاب / استایل دادن به سطرهای فرد و زوج جدول
تغییر حالت نمایش یک تگ ( مثلا تگ P ) از بلاکی به اینلاینی
نحوه مخفی کردن یک تگ در صفحه ( با استفاده از ویژگی display )
نحوه انتخاب نوع / Type یک اینپوت ( Input )
وقتی روی اینپوت کلیک میشه ، اندازه اینپوت بزرگتر میشه
مشخص کردن تصویر زمینه برای یک اینپوت / Input
تنظیم حالتی که وقتی ماوس میره روی یک تگ
لیست شبه کلاس های CSS
لیست شبه عناصر های CSS
قرار دادن عکس در وسط صفحه با استفاده از ویژگی text-align
قرار دادن کل محتوای داخل صفحه در وسط
قرار دادن عکس در وسط صفحه با استفاده از ویژگی margin و display
قرار دادن یک تگ ( باکس و.. ) بصورت افقی در وسط صفحه
قرار دادن یک تگ ( باکس و.. ) بصورت افقی و عمودی در وسط صفحه
قرار دادن متن در قسمت بالا ، وسط و پایین تگ ( بصورت عمودی )
نحوه استفاده از Image Sprites در CSS
نحوه استفاده از واحدهای اندازه گیری در CSS
نحوه استفاده از دستور Important در CSS
نحوه گِرد ( دایره ای ) کردن عکس
نحوه گِرد ( دایره ای ) کردن یک تگ
تنظیم سایه افقی و عمودی ، رنگ و میزان تاری و میزان پخش شدن سایه
تنظیم سایه افقی و عمودی بهمراه رنگ و میزان شفافیت ( برای متن )
نحوه ایجاد یک باکس با سایه جذاب
وقتی ماوس میره روی باکس، سایه دار میشه
تنظیم نحوه سَرریز شدن محتوا در حالت های مختلف
تنظیم نحوه شکسته شدن کلمات طولانی به سطرهای بعدی
نحوه نمایش یک متن بصورت عمودی
وقتی ماوس میره روی باکس، بصورت همزمان چندین Transition تعریف شود
اجرا شدن Animation به تعداد دفعات 3
اجرا شدن Animation بصورت نامحدود ( بی پایان )
مشخص کردن جهت Animation بصورت رفت و برگشتی
نحوه خلاصه نویسی ویژگی Animation
وقتی ماوس میره روی باکس، باکس زوم میشه
وقتی ماوس میره روی باکس، باکس بصورت 360 درجه میچرخه
وقتی ماوس میره روی باکس، باکس کج میشه
نحوه ایجاد تولتیپ در CSS
ایجاد دکمه ، پس زمینه سفید با رفتن ماوس بروی آن پس زمینه رنگی میشه
ایجاد دکمه ، وقتی ماوس میره روش، دکمه سایه دار میشه
ایجاد دکمه در اندازه های مختلف ( اندازه ها بصورت درصدی )
نحوه لینک دادن به Button با استفاده از جاوااسکریپت
نحوه ایجاد متن بصورت ستونی ( مثه روزنامه ها )
جهت قرار گیری آیتم های فلکس باکس بصورت سطری
جهت قرار گیری آیتم های فلکس باکس بصورت ستونی
جهت قرار گیری آیتم های فلکس باکس بصورت سطری ( معکوس )
جهت قرار گیری آیتم های فلکس باکس بصورت ستونی ( معکوس )
رفتن آیتم های فلکس باکس به سطربعد در صورت زیاد بودن آیتم ها ( وقتی جاشون نبود انتقال میده به سطرهای بعدی )
تنظیم تراز آیتم های فلکس باکس بصورت افقی ( در وسط )
تنظیم تراز آیتم های فلکس باکس بصورت افقی ( فاصله مساوی بین آیتم ها )
تنظیم تراز آیتم های فلکس باکس بصورت افقی ( فاصله مساوی اطراف آیتم ها )
قرار دادن آیتم فلکس باکس در وسط ظرف ( بصورت افقی عمودی دقیقا وسط ظرف )
واکنش گرایی آیتم های فلکس باکس در صفحه نمایش های کوچکتر ( مثه موبایل ) ( یعنی در گوشی موبایل آیتم ها میوفتن زیر هم )
ایجاد گالری عکس با چینش نامرتب ( یعنی اندازه عکس ها باهمدیگه متفاوته ) + واکنش گرایی ( با استفاده از فلکس باکس )
ایجاد باکس بصورت 4 ستونه ( با استفاده از Grid )
تنظیم تراز آیتم های Grid بصورت افقی ( در وسط )
تنظیم تراز آیتم های Grid بصورت افقی ( فاصله مساوی در اطراف آیتم ها )
تنظیم تراز آیتم های Grid بصورت عمودی ( در وسط )
تنظیم تراز آیتم های Grid بصورت عمودی ( فاصله مساوی در اطراف آیتم ها )
ایجاد یک طرح بندی ساده قالب با استفاده از Grid ( هدر ، ستون راست و چپ ، ستون وسط محتوا و فوتر ) + واکنش گرایی
قرار دادن آیتم Grid در وسط ظرف ( بصورت افقی عمودی دقیقا وسط ظرف )
واکنش گرایی آیتم های Grid در صفحه نمایش های کوچکتر ( مثه موبایل ) ( یعنی در گوشی موبایل آیتم ها میوفتن زیر هم )
گالری عکس با چینش نامرتب ( یعنی اندازه عکس ها باهمدیگه متفاوته ) + واکنش گرایی ( استفاده از Grid )
نحوه تعریف / استفاده از متغیرها یا Variables در CSS
ایجاد زمینه پارالاکس یا Parallax
نحوه ترکیب کردن رنگ زمینه با تصویر زمینه ( رنگ ساده )
نحوه ترکیب کردن رنگ زمینه با تصویر زمینه ( رنگ گرادینت )
تنظیم همزمان ۲ عدد تصویر زمینه ( باید بینشون کاما گذاشت )
استفاده از رنگ برای زمینه متن ( مثلا در مثال زیر رنگ زمینه برای لینک تعریف کردیم )
نحوه قرار دادن تصویر زمینه در وسط صفحه ( بصورت افقی و عمودی )
تمام صفحه کردن تصویر زمینه
نحوه تنظیم رنگ مکان نمای ماوس
نحوه بُرش زدن تصاویر در حالت های مختلف با استفاده از ویژگی clip-path
ایجاد شمارنده خودکار ( عدد ) به ردیف های یک جدول
ایجاد شمارنده آیتم بصورت خودکار قبل از آیتم های یک لیست نامرتب
اضافه کردن شمارنده خودکار قبل از تگ های H2 در صفحه
شماره گذاری خودکار فهرستی از تیترهای موجود در صفحه
نحوه تنظیم عکس دلخواه برای اشاره گر ماوس
نمایش حالت های مختلف اشاره گر ماوس
نحوه ایجاد افکت ( Effect ) بروی تصویر ( سیاه و سفید )
نحوه ایجاد افکت ( Effect ) بروی تصویر ( محو شونده )
نحوه فیکس کردن اندازه سلول های جدول
فیکس کردن عکس در پایین گوشه سمت چپ صفحه
وقتی اسکرول میکنیم بسمت پایین، منو به سقف مرورگر میچسبه
ایجاد دکمه برو به بالای صفحه با اسکرول نرم ( با استفاده از CSS )
ایجاد دکمه برو به بالای صفحه با اسکرول نرم ( با استفاده از Jquery )
ایجاد لینک داخلی ( انتقال کاربر به بخش های مختلف یک مطلب ) ( بهمراه اسکرول نرم )
نحوه / حالت های مختلف خط کشیدن به زیر و روی متن
نحوه ایجاد فاصله / فضای خالی از سمت راست یا چپ به سطر اول یک متن
با کلیک کردن روی دکمه متن کامل نمایش داده میشه و با کلیک دوباره روش متن کمتر میشه ( دکمه بیشتر / کمتر بخوان )
نحوه ایجاد سایه ( Shadow ) برای متن
وقتی ماوس میره روی عکس، عکس هم میچرخه هم بزرگنمایی میشه
ایجاد افکت ( چشم انداز 3بعدی ) جالب روی تصویر
معکوس کردن متن با استفاده از CSS
نحوه استفاده از متای viewport ( برای واکنش گرا کردن صفحه )
نحوه واکنش گرا کردن تصاویر
واکنش گرا کردن ویدئو
واکنش گرا کردن جدول
واکنش گرایی - وقتی اندازه عرض صفحه کمتر از ۵۰۰px شد
واکنش گرایی - یک گالری تصویر ساده
واکنش گرایی - مخفی کردن تگ ها در اندازه های مختلف صفحه نمایش ( مثلا تصویر در کامپیوتر یا لپ تاپ نمایش داده میشه ولی در گوشی های موبایل مخفی میشه )
واکنش گرایی - تغییر اندازه فونت متن ها در اندازه های مختلف صفحه نمایش
واکنش گرایی - مشخص کردن حالت Portrait و Landscape

استفاده از محتویات این صفحه برای عموم آزاد می باشد. [سایت آموزشی فری لرن]