با سلام و احترام خدمت شما کاربر عزیز سایت بیست آموز ، با دوره مقدماتی آموزش css در خدمت شما سروران گرامی هستیم. css زبان کدنویسی بسیار محبوب و بسیار پرکاربرد جهت طراحی ظاهر سایت هاست. هر کسی که میخواد وارد دنیای طراحی سایت بشه باید cssرو یاد بگیره چون این زبان در کنار زبان html توی طراحی هر نوع سایتی الزاما باید استفاده بشه. css برخلاف کاربرد بسیار زیادی که داره ، متاسفانه منابع آموزشی خیلی خوبی در ایران نداره و اکثر سایت هایی که توی این زمینه کار میکنن خیلی خوب و اصولی آموزش ها رو ارائه نمیدن. البته اینم بگم که انصافا سایت های خیلی خوبی هم توی آموزش css کار میکنن که جا داره ازشون یه تشکر ویژه هم داشته باشیم. ما توی سایت بیست آموز دوره css رو از روی سایت منبع و مرجع کامل W3School آموزش میدیم. اگه این سایت رو نمیشناسید باید بگم که سایت W3School  بهترین و کاملترین سایت در زمینه آموزش طزاحی وب در جهانه که در اصل زیر نظر بنیاد جهانی W3C کار میکنه. زیادی وقتتون رو نگیرم و بریم سراغ سرفصل های آموزشی دوره آموزش css از مقدماتی تا پیشرفته و تضمین کامل

جلسه اول دوره مقدماتی آموزش css – مفاهیم اولیه زبان کدنویسی css

مهمترین مباحث آموزش داده شده در این جلسه عبارتند از :

  • css چیست؟
  • css مخفف چه عبارتیست؟
  • کاربرد css در طراحی سایت چیست؟
  • css چه تفاوتی با html دارد؟
  • تعریف زبان های سمت کاربر و زبان های سمت سرور
  • css زیان سمت کاربر است یا سمت سرور ؟
  • آشنایی با ساختار دستورات در زبان کدنویسی css
  • تعریف selector یا انتخابگر در css
  • نحوه کدنویسی در css
  • روش های کدنویسی css در زمان طراحی سایت
  • تعریف روش کدنویسی درون برنامه ای css
  • تعریف روش کدنویسی برون برنامه ای css
  • تعریف روش کدنویسی درون خطی css

فیلم آموزش رایگان بخش اول از جلسه اول دوره آموزش css

[jwp-video n=”1″] امیدوارم که از بخش اول جلسه تعاریف اولیه css لذت برده باشین.

بریم سراغ بخش دوم تعاریف اولیه سی اس اس .

موضوع این بخش در مورد واحدهای اندازه گیری توی css هستش. واحدهای اندازگیری توی css از اهمیت بسیار ویژه ای برخوردارن. هر چقدر شما با واحدهای اندازه گیری بیشتر آشنا باشید و بتونید ازشون بهتر توی طراحی سایت استفاده کنید خوب مسلما همونقدر هم موفقتر خواهید بود.

مهمترین مباحث فیلم آموزش واحدهای اندازه گیری در css

  • دلیل یادگیری واحدهای اندازه گیری در css
  • آشنایی با واحدهای اندازه گیری مطلق و نسبی
  • تشریح تک به تک واحدهای اندازه گیری در css
  • نحوه استفاده از واحدهای اندازه گیری در css

فیلم آموزش رایگان بخش دوم از جلسه اول دوره آموزش css

[jwp-video n=”2″]

جلسه دوم دوره مقدماتی آموزش css – انتخابگرها در css

مهمترین مباحث آموزش داده شده در جلسه دوم آموزش مقدماتی css

  • انتخابگر یا selector جیست؟
  • تشریح تک تک و کامل انواع سلکتور در css
  • تعریف سلکتور class در css
  • تعریف سلکتور id در css
  • تعریف سلکتور جهانی در css
  • تعریف سلکتور عنصر در css
  • نحوه انتخاب گروهی عناصر در css
  • نحوه انتخاب عناصر فرزند در css
  • نحوه عناصر کناری در css
  • آشنایی با شبه عنصر در css
  • آشنایی با شبه کلاس در css
  • نحوه انتخاب عناصر بر اساس صفت های آنها
  • نحوه انتخاب بخشی از محتوای یک عنصر در css
  • نحوه انتخاب عناصر موجود در فرم ها در css

فیلم آموزش رایگان جلسه دوم دوره آموزش مقدماتی css

[jwp-video n=”19″]

جلسه سوم دوره آموزش مقدماتی css – نحوه استفاده از رنگ ها در css

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

مهمترین مباحث جلسه آموزش نحوه استفاده از رنگ ها در css

  • معرفی سایت های الگوی رنگ مثل سایت awwards
  • معرفی روش استفاده از رنگ ها به وسیله نام رنگ ها
  • معرفی روش استفاده از رنگ ها به وسیله نام کد هگزا
  • معرفی روش استفاده از رنگ ها به وسیله کد rgb
  • معرفی روش استفاده از رنگ ها به وسیله کد rgba
  • آشنایی با روانشناسی رنگ ها
  • تشریح مدل رنگ cmyk
  • تشریح مدل رنگ rgb
  • تعریف رنگ های سرد و رنگ های گرم
  • تعریف درجه حرارات رنگ
  • تعریف سیری رنگ
  • تعریف سایه رنگ
  • تعریف اشباع رنگ
  • تعریف رنگ مایه
  • تعریف روشنایی رنگ
  • معرفی دایره رنگ
  • تعریف الگوی تک رنگ
  • تعریف الگوی رنگ های مکمل
  • تعریف الگوی رنگ های مشابه
  • تعریف الگوی رنگ های سه گانه
  • تعریف الگوی رنگ های مستطیلی
  • تعریف الگوی رنگ های مربعی
  • تشریح روانشناسی یک به بک رنگ های پرکاربرد

فیلم آموزش رایگان جلسه سوم دوره آموزش css

[jwp-video n=”3″] جهت مشاهده و دانلود رایگان تمام جلسات دوره آموزش css از مقدماتی باید در این دوره ثبت نام نمایید.

جلسه چهارم دوره پایه و تضمینی آموزش css – دستورات مرتبط با فونت و متن در css

خوب توی بخش اول این جلسه میخوایم در مورد دستورات مرتبط با فونت در css  باهاتون صحبت کنیم.

مهمترین مباحث بخش آموزش دستورات مربوط به فونت ها

  • آشنایی با دستور font-family در css و نحوه کار با این دستور
  • آشنایی با مفهوم فونت های web safe در طراحی صفحات وب
  • نحوه بارگذاری فونت های فارسی در سایت
  • نحوه تبدیل فونت ها جهت استفاده در وب
  • آشنایی با دستور font-face@ در css و نحوه کار با این دستور
  • آشنایی با دستور font-style در css و نحوه کار با این دستور
  • آشنایی با دستور font-size در css و نحوه کار با این دستور
  • تشریح واحدهای استاندارد فونت جهت استفاده در صفحات وب
  • آشنایی با دستور font-weight در css و نحوه کار با این دستور
  • آشنایی با دستور font-variant در css و نحوه کار با این دستور
  • آشنایی با دستور font در css و نحوه کار با این دستور

دستورات مربوط به متن (text) در css

بعد از تشریح دستورات مربوط به فونت در css ، میرسیم به تشریح دستورات مرتبط با متن ها در css که دارای اهمیت زیادی توی زمان طراحی سایت برای ما داره.

مهمترین مباحث فیلم آموزش دستورات مربوط به متن ها در css

  • تشریح دستور color در css و کاربرد این دستور
  • انواع روش ها ی تعیین رنگ برای متن ها در css
  • تشریح دستور text-align در css
  • تشریح دستور text-decoration در css
  • روش برداشتن خط زیر لینک ها در css
  • تشریح دستور text-transform در css
  • تشریح دستور text-indent در css
  • تشریح دستور letter-spacing در css
  • تشریح دستور line-height در css
  • تشریح دستور word-spacing در css
  • تشریح دستور text-shadow در css
  • تشریح دستور unicode-bidi در css
  • تشریح دستور direction در css
  • تشریح دستور vertical-align در css
  • تشریح دستور white-space در css
  • تشریح دستور text-overflow  در css
 

جلسه پنجم دوره آموزش غیرحضوری و آنلاین css – ایجاد و تغییر پس زمینه در css

ما خیلی از وقتها در زمان طراحی سایت میخوایم که به اشکال مختلف یا حتی پس زمینه سایتمون یه رنگ یا تصویر یا حتی ترکیبی از رنگ ها یا تصاویر اختصاص بدیم. یا بعضی از وقت ها میخوایم که این رنگ بندی یا تصویرگذاری رو یه جوری به دلخواه خودمون تنظیم کنیم. اینجاست که دستورات مرتبط با ایجاد ، تغییر و تنظیم پس زمینه یا همون Background به کارمون میاد. وقتی از تنظیم Background توی css صحبت میکنیم ، منظورمون هم در مورد تصاویر و هم در مورد رنگ ها هستش . در زمینه ایجاد و تغییر Background در css دستورات متنوعی وجود داره که در ادامه به تشریح تک تک اونها به صورت کامل خواهیم پرداخت.

مهمترین مباحث جلسه آموزش ایجاد و تغییر پس زمینه در css

  • تشریح دستور background-color و نحوه کارکرد این دستور در css
  • روش های مختلف رنگ دهی به پس زمینه در css
  • تشریح دستور background-image و نحوه کارکرد این دستور در css
  • روش ایجاد پس زمینه شیب رنگ دار در css
  • تشریح دستور background-size و نحوه کارکرد این دستور در css
  • تشریح دستور background-repeat و نحوه کارکرد این دستور در css
  • تشریح دستور background-attachment و نحوه کارکرد این دستور در css
  • تشریح دستور background-clip و نحوه کارکرد این دستور در css
  • تشریح دستور background-origin و نحوه کارکرد این دستور در css
  • تشریح دستور background-position و نحوه کارکرد این دستور در css
  • تشریح دستور background و نحوه کارکرد این دستور در css
 

جلسه ششم دوره مقدماتی آموزش css – دستورات مرتبط با کادر دور عناصر در css

توی این جلسه از دوره آموزش css سایت بیست آموز میخوایم در مورد بحث بسیار پرکاربرد آموزش کامل دستورات مرتبط با کادر دور عناصر (Border) در css باهاتون صحبت کنیم. البته توی جلسات قبلی اشاره ای به Border و برخی از تنظیمات مربوط به اون شده ولی توی این جلسه به طور کامل میخوایم در مورد Border ها باهاتون صحبت کنیم.

مهمترین مباحث جلسه آموزش کامل دستورات مرتبط با border در css

  • آموزش کار با دستور border-bottom در css
  • آموزش کار با دستور border-left در css
  • آموزش کار با دستور border-top در css
  • آموزش کار با دستور border-right در css
  • آموزش کار با دستور border-style در css
  • آموزش کار با دستور border-width در css
  • آموزش کار با دستور border-color در css
  • نحوه تعیین چند dorder مختلف برای کادر دور یک عنصر
  • نحوه تعیین چند رنگ مختلف برای کادر دور یک عنصر
  • آموزش کار با دستور border-radius در css
  • نحوه ایجاد گوشه های گرد برای دور عناصر در css
  • آموزش کار با دستور border-collapse در css
  • آموزش کار با دستور border-spacing در css
  • اموزش تنظیم کادر جداول در css
  • آموزش کار با دستور border-image در css
  • آموزش کار با دستور border-image-source در css
  • آموزش کار با دستور border-image-width در css
  • آموزش کار با دستور border-image-source در css
  • آموزش کار با دستور border-image-repeat در css
  • آموزش کار با دستور border-image-slice در css
  • آموزش کار با دستور border-image-outset در css
 

جلسه هفتم دوره آموزش css – آموزش ویژگی های margin و padding

ویژگی های Margin و Padding توی طراحی سایت و زمانی که ما میخوایم موقعیت و Position به عنصر رو مشخص کنیم و فاصله اون عنصر رو با عناصر دیگه و حتی فاصله محتوای اون عنصر رو تا کادر Border اون عنصر مشخص کنیم خیلی به کار میان. البته تا الان و توی جلسات گذشته وقتی داشتیم مفهوم Box Model رو براتون تشریح میکردیم ، شما رو با صفت های Margin و Padding آشنا کردیم ، ولی توی این جلسه میخوایم به صورت کامل به تشریح این دو ویژگی خیلی مهم بپردازیم. توی بخش اول این جلسه میخوایم در مورد صفت یا ویژگی Margin براتون صحبت کنیم.

مهمترین مباحثی که توی فیلم آموزش صفت یا ویژگی margin بهشون میپردازیم عبارتند از :

  • تشریح مفهوم Box Model به صورت کامل و آشنایی با ویژگی های margin ، padding و border
  • آشنایی کامل با کارکرد margin در زمان طراحی سایت
  • تشریح دستور margin-top در css
  • تشریح دستور margin-left در css
  • تشریح دستور margin-right در css
  • تشریح دستور margin-bottom در css
  • تشریح دستور margin در css
  • تشریح مفهوم  margin-collapse در css
  • نحوه تعیین عناصر بلاکی به صورت وسط چین با دستور margin
 

مهمترین مباحث فیلم آموزش صفت یا ویژگی padding

  • تشریح صفت padding در قالب Box Model
  • تشریح دستور padding-left در css
  • تشریح دستور padding-right در css
  • تشریح دستور padding-top در css
  • تشریح دستور padding-bottom در css
  • تشریح دستور padding در css
  • تشریح دستور box-sizing در زمان استفاده از padding و رفع مشکل به هم خوردن پهنای عنصر در زمان استفاده از padding
 

جلسه هشتم دوره پایه تا پیشرفته آموزش مقدماتی css – نحوه کار با ویژگی outline در css

مهمترین مباحث جلسه آموزش نحوه کار با ویژگی outline در css

  • تعریف outline در یک عنصر
  • نمایش outline در Box Model
  • آیا otline یک عنصر تاثیری روی عناصر دیگر دارد؟
  • تفاوت outline و border در css
  • تشریح کارکرد دستور outline-style در css
  • تشریح کارکرد دستور outline-width در css
  • تشریح کارکرد دستور outline-color در css
  • نحوه استفاده از انواع رنگ ها در outline عناصر
  • تشریح کارکرد دستور outline-offset
  • تشریح دستور خلاصه نویس outline
 

جلسه نهم دوره کامل آموزش پایه css – چگونگی تنظیم پهنا و ارتفاع عناصر در css

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

مهمترین مباحث جلسه آموزش چگونگی تنظیم پهنا و ارتفاع عناصر در css

  • تشریح کارکرد دستور height در css
  • تشریح کارکرد width در css
  • آشنایی با مقادیر نسبی (relative) و مقادیر مطلق (absolute)
  • نحوه وارد کردن مقادیر مختلف در مقایل دستورات width و height
  • تاثیر ویژگی های margin و padding و border روی پهنا و ارتفاع عناصر در css
  • آشنایی با مفهوم actual size در css
  • آشنایی با دستور box-sizing در css
  • آشنایی با مقدار content-box در css
  • آشنایی با مقدار border-box در css
  • آشنایی با مفهوم سرریز یا overflow در زمان تعیین پهنا و ارتفاع عناصر
  • آشنایی با دستور overflow و مقادیر آن در css
  • تشریح کارکرد دستور max-width در css
  • تشریح کارکرد دستور min-width در css
  • تشریح کارکرد دستور max-height در css
  • تشریح کارکرد دستور min-height در css
 

جلسه دهم دوره آموزش css – تنظیمات مربوط به لینک ها در css

Link یا پیوند که بهش Hyper Link هم گفته میشه در اصل متن یا تصویر یا هر چیز دیگه ای که با کلیک روی اون به بخش یا صفحه دیگه ای از سایت خودمون یا سایت دیگه منتقل میشیم.لینک ها یکی از تاثیرگذارترین عناصر توی بالا یا حتی پایین اومدن رتبه سایت ما دارن.تقریبا محاله که شما سایتی رو ببینید که توش از لینک استفاده نشده باشه.بحث زیبا سازی و کلا تغییرات مربوط به لینک ها برای طراح های سایت از اهمیت ویزه ای برخورداره.

مهمترین مباحث جلسه آموزش تنظیمات مربوط به لینک ها در css

  • آشنایی با کاربرد تغییر ظاهر لینک ها در css
  • آشنایی با حالت های مختلف link
  • آشنایی با کاربرد شبه کلاس link: در css
  • آشنایی با کاربرد شبه کلاس visited: در css
  • آشنایی با کاربرد شبه کلاس hover: در css
  • آشنایی با کاربرد شبه کلاس active: در css
  • نحوه رعایت ترتیب حالت های لینک در css
  • آشنایی با ویژگی text-decoration  در css و مقادیر این صفت
  • آشنایی با تغییر رنگ متن لینک ها در css
  • آشنایی با تغییر پس زمینه یا Background لینک ها در css
  • آموزش ایجاد دکمه های زیبا به وسیله ی لینک ها در css
  • ایجاد دکمه گرد با لینک ها در css
  • نحوه تغییر شکل اشاره گر ماوس روی لینک ها در css
 

جلسه یازدهم دوره آموزش تضمینی css – تنظیمات مربوط به لیست ها در css

همونطوری که میدونید لیست ها عناصری هستند که برای نشان دادن نظم و ترتیب محتوای دلخواه ما به کار میرن. اگه یادتون باشه ما دو نوع لیست داشتیم ، لیست های ترتیبی یا Orderd List که توی Html با تگ Ol ساخته میشن و لیست های غیر ترتیبی یا Unorderd List که توی Html با تگ Ul ساخته میشن. حالا خیلی از اوقات لازم میشه که ما میخوایم ظاهر و استایل این لیست ها رو تغییر بدیم. یعنی مثلا به جای اینکه از بالا به پایین ردیف بشن میخوایم افقی ردیف بشن و یا حتی شکل ظاهری اونهارو تغییر بدیم.

مهمترین مباحث جلسه آموزش تنظیمات مربوط به لیست ها در css

  • آشنایی با انواع لیست ها و کارکرد آنها
  • آشنایی با ویژگی یا صفت list-style-type در css و مقادیر قابل نوشتن در روبروی آن
  • نحوه برداشتن علامت پشت تگ های لیست در css
  • آشنایی با دستور list-style-position در css و مقادیر قابل نوشتن روبروی آن
  • آشنایی با دستور list-style-image در css و نحوه قرار دادن عکس به جای علامتهای پشت لیست ها
  • آشنایی با دستور list-style در css
  • مثال های کاربردی در مورد دستورات مربوط به لیست ها در css
 

جلسه دوازدهم دوره تضمینی آمـوزش css – دستورات مربوط به جدول ها در css

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

مهمترین مباحث جلسه آموزش دستورات مربوط به جدول ها در css

  • مرور کلی بر روش ایجاد جدول در html
  • روش تعیین کادر حاشیه یا border برای جدول در css
  • آشنایی با ویزگی border-collapse و مقادیر روبروی آن
  • نحوه ایجاد border یکدست برای جدول ها در css
  • نحوه تنظیم پهنا و ارتفاع جداول در css
  • نحوه تغییر چیدمان افقی متن سلول های جدول ها در css
  • نحوه تغییر چیدمان عمودی متن سلول های جدول ها در css
  • نحوه تغییر فاصله درون سلول جدول ها در css
  • نحوه ایجاد سطرهای یکدست برای جدول ها در css
  • نحوه تغییر رنگ پشت زمینه سطرها و ستون های جدول ها با رفتن ماوس روی آنها
  •  نحوه تغییر رنگ پشت زمینه سطرها و ستون های جدول ها به صورت یکی در میان
  • نحوه ایجاد جدول های واکنشگرا یا responsive در css
  • نحوه ایجاد فاصله بین سلول های جدول به وسیله ی دستور border-spacing
  • نحوه تغییر محل قرارگیری عنوان یا caption جدول ها به وسیله ی دستور یا ویژگی caption-side
  • نحوه مدیریت بر سلو های خالی جداول در css به وسیله ی دستور یا ویژگی empty-cell
  • اشنایی با دستور یا ویژگی table-layout و مقادیر روبروی آن
 

جلسه سیزدهم دوره آموزش مقدماتی css – نحوه تغییر موقعیت (position) عناصر در css

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

مهمترین مباحث جلسه سیزدهم دوره  مقدماتی آموزش css

  • تعریف بحث flow در صفحات وب
  • تعریف viewport در صفحات وب
  • کارکرد تغییر موقعیت مکانی یا position عناصر
  • تشریح کامل مقادیر موجود برای ویژگی یا صفت position
  • تشریح کامل  مقدار static در تعیین موقعیت مکانی عناصر
  • تشریح کامل مقدار relative در تعیین موقعیت مکانی عناصر
  • تشریح کامل مقدار fixed در تعیین موقعیت مکانی عناصر
  • تشریح کامل مقدار absolute در تعیین موقعیت مکانی عناصر
  • تشریح کامل مقدار sticky در تعیین موقعیت مکانی عناصر
  • تعریف overlap عناصر در css
  • نحوه مدیریت overlap عناصر به وسیله ویژگی z-index
  • تشریح کامل ویژگی یا صفت clip برای برش اشکال
  • مثال های کاربردی در مورد تعیین موقعیت مکانی یا position عناصر
 

جلسه چهاردهم دوره آموزش پایه css – مدیریت بر سرریز (overflow) عناصر

سرریز یا Overflow بحثی هستش که توی خیلی از مواقع توی سایت هایی که ما طراحی میکنیم اتفاق میافته و محتوای توی یک عنصر از حدی که عنصر داره میزنه بیرون و جلوه خیلی بدی به سایت ما میده. به همبن دلیل برای مدیریت به سرریز یا Overflow ویژگی هایی به نامهای Text-Overflow و Overflow وجود دارن که ما توی این جلسه میخوایم به تشریح این دو ویزگی یا صفت خیلی پرکابرد باهاتون صحبت کنیم.

مهمترین مباحث جلسه چهاردهم دوره آموزش css

  • تعریف سرریز یا overflow در محتوای صفحات وب
  • دلیل به وقوع پیوستن سرریز یا overflow
  • تشریح ویژگی یا صفت overflow در css
  • تشریح کارکرد مقدار visible در مقابل ویژگی overflow
  • تشریح کارکرد مقدار hidden در مقابل ویژگی overflow
  • تشریح عملکرد صفت یا ویژگی text-overflow و مقادیر روبروی این ویژگی و ارتباط این ویژگی با ویژگی overflow
  • تشریح کارکرد مقدار scroll در مقابل ویژگی overflow
  • تشریح کارکرد مقدار auto در مقابل ویژگی overflow
  • آشنایی با ویژگی overflow-x در css
  • آشنایی با ویژگی overflow-y در css
 

جلسه پانزدهم دوره آموزش تضمینی css – مدیریت بر نحوه نمایش عناصر در css

اگه یادتون باشه ما دو نوع عنصر توی Html داشتیم ، عناصر بلاکی یا Blocke Level و عناصر اینلاین یا Inline Level
عناصر بلاکی یا Blocke Level عناصری هستن که بصورت پیشفرض  عرضشون به اندازه عرض کل عرض صفحه میشن و عناصر دیگه بهشون نمیچسبن.و عناصر اینلان یا Inline Level هم بصورت پیشفرض عرضشون فقط به اندازه محتوای خودشون میشن و به عناصر دیگه هم میچسبن.
خب حالا خیلی وقتها پیش میاد که ما میخوایم این نوع نمایش عناصر رو تغییر بدیم. یعنی مثلا یه کاری کنیم که یه عنصر بلاکی مثل تگ Div ، عملکردش مثل عناصر اینلاین بشه و یا حتی برعکسش یه عنصر اینلاین مثل تگ A از نظر عملکرد مثل عناصر بلاکی بشه. یا حتی ما بخوایم یه عنصر رو کاری کنیم که دیگه دیده نشه.
اینجور وقتها از دستورات مربوط به نمایش عناصر که مهمترینشون ویژگی یا صفت Display هست ، استفاده میکنیم.توی این جلسه میخوایم کلا بحث مدیریت بر نحوه نمایش یا Display عناصر تشریح کنیم.

مهمترین مباحث جلسه پانزدهم دوره مقدماتی آموزش css

  • تعریف عناصر Blocke Level و عناصر Inline Level و تفاوت آنها با هم
  • لیست کامل عناصر Blocke Level و عناصر Inline Level
  • تشریح کامل صفت یا ویژگی display در css
  • آشنایی با مقدار none در مقابل ویژگی یا صفت display
  • آشنایی با نحوه تبدیل عناصر Blocke به Inline
  • آشنایی با نحوه تبدیل عناصر Inline به Blocke
  • نحوه مخفی کردن یک عنصر در css به وسیله ویژگی visibility و تفاوت آن با display:none
  • آشنایی با مقدار inline در مقابل ویژگی display
  • آشنایی با مقدار blocke در مقابل ویژگی display
  • آشنایی با مقدار content در مقابل ویژگی display
  • آشنایی با مقدار flex در مقابل ویژگی display
  • آشنایی با مقدار grid در مقابل ویژگی display
  • آشنایی با مقدار inline-blocke  در مقابل ویژگی display
  • آشنایی با مقدار inline-flex در مقابل ویژگی display
  • آشنایی با مقدار inline-grid در مقابل ویژگی display
  • آشنایی با مقدار inline-table در مقابل ویژگی display
  • آشنایی با مقدار list-item در مقابل ویژگی display
  • آشنایی با مقدار run-in در مقابل ویژگی display
  • آشنایی با مقدار table در مقابل ویژگی display
  • آشنایی با مقدار table-caption در مقابل ویژگی display
  • آشنایی با مقدار table-column-group در مقابل ویژگی display
  • آشنایی با مقدار table-header-group در مقابل ویژگی display
  • آشنایی با مقدار table-footer-group در مقابل ویژگی display
  • آشنایی با مقدار table-row-group در مقابل ویژگی display
  • آشنایی با مقدار table-cell در مقابل ویژگی display
  • آشنایی با مقدار table-column در مقابل ویژگی display
  • آشنایی با مقدار table-row در مقابل ویژگی display
  • آشنایی با ویژگی visibility و مقادیر مرتیط به این ویژگی
 

جلسه شانزدهم دوره پایه تا پیشرفته آموزش تضمینی css -نحوه تنظیم شفافیت عناصر در css

خیلی از مواقع توی طراحی سایت ، ما میخوایم که شفافیت یا Opacity عنصر دلخواهمون رو تغییر بدیم. اینجاست که میتونیم با ویزگی یا صفت Opacity شفافیت عنصرمون رو تغییر بدیم.

مهمترین مباحث جلسه شانزدهم دوره مقدماتی آموزش css

  • تشریح عملکرد ویژگی یا صفت opacity در css
  • چگونی مخفی سازی عناصر با ویژگی oapcity و تفاوت آن با مخفی سازی عناصر به وسیله ی ویژگی display
  • تشریح ویژگی filter در css جهت تنظیم نمایانی یا شفافیت عناصر
  • نحوه ایجاد Transparent Box یا کادر شفاف در css
  • کم یا زیاد کردن شفافیت رنگ بندی در css به وسیله ی ویزگی opacity
  • کم یا زیاد کردن شفافیت رنگ عناصر به وسیله ی مقدار rgba
  • نحوه ایجاد متن در کادرهای شفاف در css
 
مشاهده اطلاعات بیشتر در مورد دوره

نظرات

نقد و بررسی‌ها

هنوز بررسی‌ای ثبت نشده است.

اولین کسی باشید که دیدگاهی می نویسد “دوره رایگان آموزش css”

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

لطفا برای ارسال یا مشاهده تیکت به حساب خود وارد شوید