فهرست همه آموزش های این موضوع
-
نکاتی برای قبل از شروع یادگیری CSS - شروع یادگیری CSS
- شیوه های به کار بردن کدهای CSS
- تعیین رنگ فونت ها، با مشخصه color ، در CSS
- مشخصه class برای کلاس بندی بخش های مورد نظرمان برای اجرای کد CSS
- مشخصه id برای تعیین بخش مورد نظرمان برای اجرای کدهای CSS
- margin ، padding و border ، در CSS
- انتخاب عنصرهای از نوع های مختلف (تعیین ویژگی های مشترکی برای چند عنصر از نوع های مختلف، به صورت همزمان)، با عبارت مشابه body, div, p, a ، در CSS
- حالت های مختلف برای تعیین ویژگی های عنصرهای یک صفحه، به صورت ترکیب سه مورد ((تمامی عنصرهای از آن نوع در صفحه))، ((عنصری از آن نوع با یک id خاص)) و ((عنصرهای از آن نوع و متعلق به یک کلاس (class)))، در CSS
- انتخاب نوع فونت (قلم - Font) برای نمایش متن ها، با مشخصه font-family ، در CSS
- تعیین یک فونت (قلم - Font) خاص (که فایل های آن را داشته باشیم) برای نمایش متن ها، با قاعده @font-face و مشخصه font-family ، در CSS
- تعیین اندازه متن ها، با مشخصه font-size ، در CSS
- انتخاب نوع نمایش متن ها، با مشخصه font-style ، در CSS
- تعیین فرم های خاص برای نمایش متن، با مشخصه text-decoration ، در CSS
- تعیین نحوه قرارگیری متن در جهت افقی، با مشخصه text-align ، در CSS
- در وسط قرار دادن (به صورت افقی) یک متن (Text)، با مشخصه text-align:center ، در CSS
- تغییر ویژگی های متن، هنگام انتخاب متن (رنگ متن و رنگ پس زمینه آن)، با شبه عنصرهای ::selection و ::-moz-selection ، در CSS
- تعیین فاصله بین کاراکترها (Character) در متن (Text)، با مشخصه letter-spacing ، در CSS
- تعیین فاصله بین کلمه ها (Word) در متن (Text)، با مشخصه word-spacing ، در CSS
- ایجاد تورفتگی خط اول پاراگراف (Text Indent)، با مشخصه text-indent ، در CSS
- نمایش تمام حروف یک متن (Text)، با حروف کوچک (Lowercase) یا حروف بزرگ (Uppercase)، با مشخصه text-transform:lowercase یا text-transform:uppercase ، در CSS
- تبدیل اولین حرف (Letter) از متن درون یک عنصر (Element) به حرف کوچک (Lowercase)، با مشخصه text-transform: lowercase و شبه عنصر first-letter:: ، در CSS
- تبدیل اولین حرف (Letter) از متن درون یک عنصر (Element) به حرف بزرگ (Uppercase)، با مشخصه text-transform: uppercase و شبه عنصر first-letter:: ، در CSS
- نمایش حرف اول کلمه های (Word) متن (Text)، با حرف بزرگ (Capitalize)، با مشخصه text-transform:capitalize ، در CSS
- نمایش ادامه یک متن طولانی به هم چسبیده (مثل کلیییییییییییییییییییییییییییییییییییدستان)، در خط جدید، با مشخصه word-wrap:break-word ، در CSS
کلیدهای مرتبط از دسته بندی های دیگر
- تعیین اندازه ارتفاع (Height) و عرض (Width) یک عکس (Image)، با مشخصه های height و width ، در CSS
- نمایش خطوط حاشیه (Border) برای یک عکس (Image)، با مشخصه border ، در CSS
- در وسط قرار دادن (به صورت افقی) یک عکس (Image)، با مشخصه های display:block و margin:auto ، در CSS
- نمایش یک عکس در پس زمینه یک عنصر، با مشخصه background-image ، در CSS
- نمایش عکس ها (Image) به صورت نیمه شفاف (Transparent)، با مشخصه های opacity و filter:alpha ، در CSS
- پوشاندن یک عکس پس زمینه (Background Image)، با یک رنگ (Color) خاص، با تعریف یک تگ div جدید و مشخصه های background-color و opacity ، در CSS
- تیره تر شدن یک عکس پس زمینه (Background Image)، در هنگام بردن موس بر روی آن عکس پس زمینه (Background Image)، با تعریف یک تگ div جدید و مشخصه های background-color و opacity ، در CSS
- انتخاب تکرار چندم (تکرار اول یا دوم یا سوم یا ...) یک عنصر خاص در صفحه، با انتخابگر nth-child ، به شکل مشابه (nth-child(2 ، در CSS
- انتخاب شماره هایی (مثلا اول و چهارم و هفتم و ...) از تکرارهای یک عنصر خاص (به ترتیب قرارگیری در صفحه)، بر اساس یک فرمول دنباله ریاضی (بر حسب …,n=0,1,2,3)، با انتخابگر nth-child ، به شکل مشابه (nth-child(3n+1 ، در CSS
- انتخاب چند تکرار اول یک عنصر خاص در صفحه (مثلا 4 تکرار اول)، با منفی قرار دادن n در دنباله ریاضی تعیین کننده شماره متناظر با تکرارهای عنصر (مثل n+4-)، با انتخابگر nth-child ، به شکل مشابه (nth-child(-n+4 ، در CSS
- انتخاب همه تکرارهای یک عنصر خاص در صفحه، به جز چند تکرار اول آن (مثلا همه تکرارها به جز 4 تکرار اول)، با انتخابگر nth-child ، به شکل مشابه (nth-child(n+5 ، در CSS
- انتخاب شماره های زوج یا فرد از تکرارهای یک عنصر خاص در صفحه، با انتخابگر nth-child ، به شکل های (nth-child(even و (nth-child(odd یا شکل های (nth-child(2n و (nth-child(2n+1 ، در CSS
- انتخاب بچه های مستقیم (Direct Children) از یک نوع خاص (مثلا همه بچه های مستقیمی (Direct Children) که تگ span می باشند)، با علامت < ، در CSS
- انتخاب عنصرهای بدون محتوا (Content)، با انتخابگر empty: ، در CSS
- انتخاب عنصرهایی که حتما دارای محتوا (Content) می باشند (عدم انتخاب عنصرهای بدون محتوا (Content))، با انتخابگرهای empty: و not: ، با عبارت :not(:empty) ، در CSS
- انتخاب اولین حرف (Letter) از متن درون یک عنصر (Element)، با شبه عنصر first-letter:: ، در CSS
کلیدهای مرتبط از دسته بندی های دیگر، با اولویت بالا
کلیدهای مرتبط از دسته بندی های دیگر
- نیمه شفاف نمایش دادن یک عنصر، با مشخصه های filter:alpha و opacity ، در CSS
- چرخش (Rotation) یک عنصر، به یک اندازه مشخص (بر حسب درجه (Degree))، با مشخصه های transform:rotate و ms-transform:rotate- و webkit-transform:rotate- ، در CSS
- چرخش (Rotation) یک عنصر به صورت کج شدن (Skew) نسبت به محور X ، به یک اندازه مشخص (بر حسب درجه (Degree))، با مشخصه های transform:skewX و ms-transform:skewX- و webkit-transform:skewX- ، در CSS
- چرخش (Rotation) یک عنصر به صورت کج شدن (Skew) نسبت به محور Y ، به یک اندازه مشخص (بر حسب درجه (Degree))، با مشخصه های transform:skewY و ms-transform:skewY- و webkit-transform:skewY- ، در CSS
کلیدهای مرتبط از دسته بندی های دیگر
- تغییر رنگ پس زمینه یک عنصر div ، با اشاره موس و به صورت سریع، با شبه کلاس :hover و مشخصه background-color ، در CSS
- تغییر رنگ پس زمینه یک عنصر div ، با اشاره موس و به صورت تدریجی، با استفاده از انتقال (transition)، با شبه کلاس :hover و مشخصه های transition-property و transition-duration و background-color ، در CSS
- تغییر رنگ پس زمینه و اندازه عرض یک عنصر div، با اشاره موس و به صورت تدریجی (به شکل انیمیشن)، با استفاده از انتقال (transition)، با شبه کلاس :hover و مشخصه های transition-property و transition-duration و background-color و width ، در CSS
- بزرگ شدن تدریجی (به شکل انیمیشن) یک عنصر div ، هنگام بردن موس بر روی آن، با شبه کلاس :hover و مشخصه های -webkit-transition-property و -webkit-transition-duration و height و width ، در CSS
- ایجاد یک تاخیر (delay)، هنگام استفاده از انتقال (transition)، با مشخصه transition-delay ، در CSS
- طراحی بخش های ثابت در کنار صفحه که با اشاره موس، به داخل صفحه می آیند، در CSS
- تغییر ویژگی های لینک ها (links)، با شبه کلاس :link ، در CSS
- تغییر ویژگی های یک لینک (link)، در صورتی که کاربر قبلا به آدرس مربوط به آن مراجعه کرده باشد، با شبه کلاس :visited ، در CSS
- تغییر ویژگی های یک لینک (link)، در لحظه کلیک کاربر بر روی آن، با شبه کلاس :active ، در CSS
- تغییر ویژگی های یک لینک (link) هنگامی که کاربر موس خود را بر روی آن می برد، با شبه کلاس :hover ، در CSS
- حذف خط زیر لینک ها (links)، با مشخصه text-decoration ، در CSS
- ساخت یک لینک (Link) برای تمام مساحت یک عنصر div ، با تگ a و مشخصه display:block ، در CSS
- تعیین رنگ پس زمینه یک عنصر، با مشخصه background-color ، در CSS
- مثال هایی از تغییر تدریجی رنگ پس زمینه یک عنصر div (با استفاده از gradient)، با مشخصه های -webkit-linear-gradient و -webkit-radial-gradient و -webkit-repeating-linear-gradient و -webkit-repeating-radial-gradient ، در CSS
- تعیین رنگ فونت ها، با مشخصه color ، در CSS
- پوشاندن یک عکس پس زمینه (Background Image)، با یک رنگ (Color) خاص، با تعریف یک تگ div جدید و مشخصه های background-color و opacity ، در CSS
- تیره تر شدن یک عکس پس زمینه (Background Image)، در هنگام بردن موس بر روی آن عکس پس زمینه (Background Image)، با تعریف یک تگ div جدید و مشخصه های background-color و opacity ، در CSS
- رنگی کردن ردیف های (rows) یک جدول (table)، به صورت یک در میان، با tr:nth-of-type(odd) ، در CSS
- رنگی کردن (Highlight کردن) ردیف های (Row) یک جدول (Table)، هنگام بردن موس بر روی آنها، با مشخصه background-color ، در CSS
کلیدهای مرتبط از دسته بندی های دیگر
کلیدهای مرتبط از دسته بندی های دیگر
- جعبه انعطاف پذیر (Flexbox)، در CSS
- ساخت جعبه انعطاف پذیر (Flexbox)، با چیدمان آیتم ها به صورت افقی و از چپ به راست (در حالت LTR) یا راست به چپ (در حالت RTL)، با مشخصه های
display: flexوflex-direction: row، در CSS - ساخت جعبه انعطاف پذیر (Flexbox)، با چیدمان آیتم ها به صورت افقی اما در جهت معکوس، با مشخصه های
display: flexوflex-direction: row-reverse، در CSS - ساخت جعبه انعطاف پذیر (Flexbox)، با چیدمان آیتم ها به صورت عمودی و از بالا به پایین، با مشخصه های
display: flexوflex-direction: column، در CSS - ساخت جعبه انعطاف پذیر (Flexbox)، با چیدمان آیتم ها به صورت عمودی اما از پایین به بالا، با مشخصه های
display: flexوflex-direction: column-reverse، در CSS - معکوس کردن ترتیب قرارگیری عنصرهای (Element) بچه (Child) درون یک عنصر (Element) والد (Parent) (عنصر سطح بالاتر)، با مشخصه های display: flex و flex-direction: column-reverse ، در CSS
- تعیین چگونگی تقسیم فضای اضافی (Extra Space) (در هنگام وجود فضای اضافی) برای آیتم های (Item) جعبه انعطاف پذیر (Flexbox)، با مشخصه
flex-grow، در CSS - تعیین چگونگی کوچک شدن (در هنگام عدم وجود فضای کافی) برای آیتم های (Item) جعبه انعطاف پذیر (Flexbox)، با مشخصه
flex-shrink، در CSS - تعیین اندازه اولیه (Initial Size) یک آیتم (Item) در راستای محور اصلی (Main Axis)، هنگام ساخت جعبه انعطاف پذیر (Flexbox)، با مشخصه
flex-basis، در CSS - مقداردهی همزمان سه مشخصه flex-grow و flex-shrink و flex-basis (به عنوان Shorthand)، هنگام ساخت جعبه انعطاف پذیر (Flexbox)، با مشخصه
flex، در CSS
چیدمان آیتم ها (Item)
اندازه آیتم ها (Item)
- عدم نمایش اسکرول بار (Scrollbar)، با مشخصه های overflow:hidden یا overflow-y:hidden یا overflow-x:hidden ، در CSS
- ساخت منوی شناور (Floating Menu)، در CSS
- تعیین دو نوع نمایش برای صفحه، یکی هنگام نمایش صفحه در کامپیوتر و دیگری برای پرینت (print) صفحه، با قاعده @media ، در CSS
- تغییر شکل موس، با مشخصه cursor ، در CSS