| 01 |
نمایش رایگان
مقدمه آموزش CSS
- CSS چیست؟
- CSS سرنام چه واژه هایی است؟
- چرا باید از CSS در HTML استفاده کنیم.
- با استفاده از یک مثال ساده نشان می دهیم که بکار بردن CSS کار بسیار آسانی است.
- فایل های CSS خارجی چگونه کارها را تسهیل می کنند.
|
14:56 |
|
| 02 |
نمایش رایگان
ساختار دستورات CSS
- نحوه نوشتن دستورات CSS
- یک قانون در CSS شامل چه قسمت هایی است.
- گزینشگر یا Selector چیست؟
- Declaration یا اعلان چیست و شامل چه قسمت هایی می شود؟
- مثال های خودتان امتحان کنید.
|
08:04 |
|
| 03 |
نمایش رایگان
selectorها در CSS
- توضیح در مورد روش های مختلف گزینش یا انتخاب عناصر HTML
- گزینش بر اساس ID عنصر
- گزینش بر اساس Class عنصر
- گزینش بر اساس نام عنصر
- استفاده از مثال های بسیار جذاب برای تفهیم بهتر مسئله
|
17:32 |
|
| 04 |
نمایش رایگان
CSSهای داخلی و خارجی
- روش های مختلف اعمال CSS روی عناصر صفحه
- برگه های استایل خارجی یا External style sheet
- برگه های استایل داخلی یا Internal style sheet
- استایل درون تگی یا Inline style
- مثال های خودتان امتحان کنید.
|
26:20 |
|
| 05 |
نمایش رایگان
فرمت دهی پس زمینه در CSS
- خصوصیت background-color در CSS
- خصوصیت background-image در CSS
- خصوصیت background-repeat در CSS
- خصوصیت background-attachment در CSS
- خصوصیت background-position در CSS
- خصوصیت مختصر شده background در CSS
- استفاده از مثال های فراوان برای ارائه خصوصیت های بالا
|
46:09 |
|
| 06 |
فرمت دهی متن در CSS
- خصوصیت color در CSS
- خصوصیت text-align در CSS
- خصوصیت text-decoration در CSS
- خصوصیت text-transform در CSS
- خصوصیت text-indent در CSS
- مشخص کردن فاصله بین حروف
- مشخص کردن فاصله بین خطوط
- مشخص کردن جهت متن
- افزایش فاصله خالی بین کلمات
- غیر فعال کردن wrapping یک متن
- تراز بندی یک عکس در جهت محور Y
- ارائه مثال های بسیار جذاب
|
31:16 |
|
| 07 |
فرمت دهی فونت در CSS
- خصوصیت font-family در CSS
- خصوصیت font-style در CSS
- خصوصیت font-size در CSS
- توضیح در مورد واحد درصد
- توضیح در مورد واحد px
- توضیح در مورد واحد em
- مثال های بسیار جذاب
|
48:25 |
|
| 08 |
فرمت دهی لینک ها در CSS
- وضعیت a:link - لینک در حالت معمولی است یعنی مشاهده نشده است.
- وضعیت a:visited - لینک توسط کاربر مشاهده شده است.
- وضعیت a:hover - زمانی که موس کاربر روی لینک قرار دارد.
- وضعیت a:active - لحظه ای که کاربر روی لینک مورد نظر کلیک می کند.
- حذف خط زیر از لینک ها
|
28:06 |
|
| 09 |
فرمت دهی لیست ها در CSS
- خصوصیت list-style در CSS
- خصوصیت list-style-image در CSS
- خصوصیت list-style-position در CSS
- خصوصیت list-style-type در CSS
- استفاده از مثال های فراوان برای آموزش خصوصیت های بالا
|
26:16 |
|
| 10 |
فرمت دهی جداول در CSS
- در CSS جدول بصورت پیشفرض دارای لبه نیست، چطور می تونم لبه های جدولم را مدیریت کنم؟
- در CSS لبه های جدول بصورت دو خطی است، در حالی که بیشتر مواقع به لبه های یک خطی احتیاج است، چطور می تونم لبه های دو خطی را به یک خطی تبدیل کنم؟
- چگونه فاصله محتوای سلول ها را تا لبه تنظیم کنم؟
- تنظیم رنگ برای جدول با استفاده از background-color
- آموزش ساخت یک جدول فانتزی در CSS
|
35:05 |
|
| 11 |
مفهوم box model در CSS
- توضیح در مورد مفهوم Box در CSS با استفاده از تصاویر
- Content یا محتوا چیست؟
- Padding
- Border
- Outline
- Margin
- چگونه با توجه به مفوم Box، ابعاد عناصر را محاسبه کنم؟
|
13:57 |
|
| 12 |
خاصیت border در CSS
- حاشیه یا لبه ای که در اطراف عنصر وجود دارد Border نامیده می شود.
- آیا Border قابل رنگ دهی است؟
- آیا چهار لبه عنصر بصورت جداگانه قابل استایل دهی است؟
- خصوصیت border-style
- خصوصیت border-color
- خصوصیت border-width
- خصوصیت مختصر شده border و نحوه ی مقدار دهی آن
|
24:27 |
|
| 13 |
خاصیت outline در CSS
- با توجه به مفهوم Box فضای outline در کدام قسمت از Box قرار می گیرد.
- با توجه به اینکه outline لبه ای است که روی border قرار می گیرد. آیا قابلیت رنگ دهی برای آن وجود دارد؟
- خاصیت outline چه کاربردی دارد؟
- آیا چهار لبه outline بصورت جداگانه قابل مدیریت هست؟
- مثال های بسیار جذاب برای تفهیم مسئله
|
14:56 |
|
| 14 |
خاصیت margin در CSS
- با توجه به اینکه خاصیت margin فاصله عنصر جاری تا عناصر کناری را مشخص می کند، آیا قابل رنگ دهی و یا استایل دهی است؟
- آیا فاصله بالا، پایین، راست و چپ بصورت جداگانه قابل مدیریت هست؟
- حالت های مختلف مقدار دهی خصوصیت margin
- خصوصیت margin-top
- خصوصیت margin-right
- خصوصیت margin-bottom
- خصوصیت margin-left
- خصوصیت margin را به چهار صورت مختلف می توان مقدار دهی نمود، چگونه این همه حالت را به ذهن بسپارم؟
- مثال های بسیار جذاب
|
19:48 |
|
| 15 |
خاصیت padding در CSS
- خصوصیت Padding در واقع به ما کمک می کند تا فاصله محتوای عنصر جاری را تا لبه هایش مدیریت کنیم.
- آیا Padding قابل رنگ دهی و یا استایل دهی است.
- شما با استفاده از padding-top و padding-right و padding-bottom و padding-left می توانید فاصله حاشیه داخلی را بصورت جداگانه مدیریت کنید.
- خصوصیت مختصر شده padding و روش های مقداردهی آن
- خصوصیت padding بسیار پرکاربرد هست و غیر ممکن است که صفحه ای را طراحی کنید و از خصوصیت مذکور استفاده نکنید، بنابراین با مثال های فراوان سعی کرده ایم تا آنرا بصورت کامل به شما دوست عزیز آموزش دهیم.
|
18:28 |
|
| 16 |
گروه بندی selectorها در CSS
- هنگام استایل دهی عناصر خیلی مواقع پیش می آید که می خواهیم یک استایل یکسان را برای چندین گزینشگر بکار ببریم، آیا استایل های مورد نظر را باید هر بار برای گزینشگر ها ذکر کنیم و یا راهی هست که آنها را گروه بندی کنیم و فقط یکبار استایل ها را ذکر کنیم.
- گروه بندی گزینشگرها باعث می شود که حجم فایل CSS ما کاهش پیدا کند و به این ترتیب، سرعت لود صفحات پایین می آید.
- استفاده از مثال های جذاب برای تفهیم گروه بندی گزینشگرها
|
06:24 |
|
| 17 |
تنظیم طول و عرض عناصر در CSS
- خصوصیت width در CSS
- خصوصیت Height در CSS
- هنگام طراحی فرم ها، خیلی مواقع نیاز داریم تا محل قرار گیری لیبل های مربوط به هر تکس باکس در یک نظم قابل قبولی قرار بگیرند...! بعنوان مثال اگر لیبل "نام" و "نام خانوادگی" و یا "ایمیل" دقیقا عرض یکسانی داشته باشند فرم اطلاعاتی مان شکل جذاب تری خواهد داشت. چگونه می توان با استفاده از خصوصیت min-width ظاهر فرم را جذاب تر نمود؟
- مثال های خودتان امتحان کنید فراوان برای آموزش خصوصیت های min-height و max-height و ...
|
20:34 |
|
| 18 |
خاصیت display در CSS
- روش های مختلف مخفی کردن عناصر در CSS
- تفاوت عناصر Block و inline
- چگونه با استفاده از خصوصیت Display عناصر Block را به Inline و یا برعکس تبدیل کنیم.
- مقداردهی های مختلف خصوصیت display
|
15:19 |
|
| 19 |
خاصیت position در CSS
- خصوصیت Position در CSS
- خصوصیت Position را می توان با مقادیر static و fixed و relative و absolute تنظیم کنیم، تفاوت هر کدام از مقادیر مذکور چیست؟
- زمانی که با استفاده از خصوصیت Position مکان عنصر را از حالت استاندارد و عادی خودش تغییر می دهیم، ممکن است روی هم افتادگی عناصر پیش بیاید، چگونه با استفاده از خصویت z-index ترتیب قرار گیری عناصر را مدیریت کنیم.
- خصوصیت top و right و bottom و left
- مثال های کاربری و بسیار جذاب برای تفهیم بهتر خصوصیت های مربوط به موقعیت دهی
|
36:59 |
|
| 20 |
خاصیت float در CSS
- خصوصیت Float در CSS
- مقادیر مختلف خصوصیت Float
- آیا اعمال خصوصیت float روی عناصر، باعث تغییر ماهیت آنها از Block به Inline می شود.
- خصوصیت Clear همیشه در کنار خصوصیت float استفاده می شود، کاربرد خصوصیت مذکور چیست؟
- مثال های خودتان امتحان کنید.
|
51:55 |
|
| 21 |
ترازبندی عناصر در CSS
- منظور از ترازبندی چیست؟ با استفاده از روش های مختلفی شما می توانید عناصر را در جهت محور X چپ چین و یا راست چین نمایید.
- استفاده از خصوصیت Margin و مقداردهی آن با auto برای ترازبندی
- استفاده از خصوصیت Position برای ترازبندی عناصر
- استفاده از خصوصیت float برای ترازبندی
- تمام روش های بالا با استفاده از مثال ارائه شده است.
|
18:08 |
|
| 22 |
شبه کلاس ها در CSS
- شبه کلاس چیست؟ شبه کلاس ها به ما کمک می کنند تا تغییر حالت یک عنصر را تشخیص دهیم و نسبت به آن اقدام به استایل دهی عناصر نماییم. یک مثال بسیار خوب برای تفهیم این موضوع، زمانی است که موس روی عناصر قرار می گیرد، یعنی بلافاصله بعد از اینکه مکان نما روی عنصر قرار گرفت ما می توانیم بوسیله شبه کلاس hover: این تغییر وضعیت را تشخیص دهیم و اقدام به تغییر ظاهر عنصر جاری نماییم.
- شبه کلاس a:link - لینک در حالت معمولی است یعنی مشاهده نشده است.
- شبه کلاس a:visited - لینک توسط کاربر مشاهده شده است.
- شبه کلاس a:hover - زمانی که موس کاربر روی لینک قرار دارد.
- شبه کلاس a:active - لحظه ای که کاربر روی لینک مورد نظر کلیک می کند.
- با استفاده مثال های فراوان کلیه شبه کلاس های CSS را توضیح می دهیم.
|
32:54 |
|
| 23 |
شبه عناصر در CSS
- شبه عنصر چیست؟ با استفاده از شبه عنصر می توانیم بخشی از یک محتوا را شناسایی نماییم...! بعنوان مثال اگر هدف ما استایل دهی خط اول یک پارگراف باشد براحتی با استفاده از شبه کلاس first-line می توانیم خط اول را تشخیص داده و اقدام به تغییر ظاهر آن نماییم.
- شبه عنصر first-letter
- شبه عنصر first-line
- شبه عنصر after
- شبه کلاس before
- اگر نیاز ما این باشد که بعد از تمام تگ های H1 یک محتوای دلخواهی را درج کنیم، چگونه میتوان این کار را با استفاده از خصوصیت Content انجام داد.
- مثال بسیار جذاب برای تفهیم بهتر مسئله ...
|
20:38 |
|
| 24 |
ساخت یک نوار هدایتی در CSS
- هدف ما در این قسمت نحوه ی استفاده از خصوصیت flaot و display و همچنین positoin برای ساخت منو است. در واقع علاوه بر اینکه خصوصیت های مذکور را مرور می کنیم با کاربرد آنها نیز بیشتر آشنا می شویم.
- لیست هدایتی افقی و عمودی
- نحوه ساخت لیست هدایتی یک سطحی با استفاده از عنصر ul
- چگونه با استفاده از خصوصیت list-style-type علامتگذاری لیست ها را حذف نماییم.
- حذف Under Line از گزینه های منو
- نحوه ساخت یک منوی دو سطی با استفاده از عنصر ul و div (نحوه ساخت یک منوی دو سطحی)
- مثال های بسیار جذاب
|
40:50 |
|
| 25 |
ساخت گالری تصاویر در CSS
- در این قسمت هدف ما آشنایی شما با یکی دیگر از کاربردهای خصوصیت پرکاربرد float است.
- هر کدام از تصاویر بندانگشتی را بهمراه توضیحات آن داخل یک Div قرار می دهیم. اما سوالی که در اینجا مطرح است این است که معمولا در گالری تصاویر عکس های بند انگشتی در کنار هم قرار می گیرند ...! در حالی که عنصر div یک عنصر Block است و تمام طول یک سطر را اشغال می کند، اما شما در این درس خواهید دید که چگونه با استفاده از خصوصیت Float اقدام به استایل دهی Div های مذکور می کنیم.
|
11:43 |
|
| 26 |
شفاف کردن تصاویر در CSS
- با استفاده از خصوصیت opacity شما می توانید تصاویر و یا عناصر داخل صفحه را شفاف تر نشان دهید.
- خصوصیت opacity با مقداری بین 0 و 1 تنظیم می شود که هر چه این عدد به 0 نزدیک تر باشد عنصر انتخاب شده، شفاف تر نمایش داده می شود.
- از این حالت می توان برای ساخت گالری تصاویر استفاده کرد، در واقع تصاویر بند انگشتی را می توان در حالت نیمه شفاف نمایش داد، اما بلافاصله بعد از قرار گیری مکان نمای روی تصاویر کوچک (hover:)، آنها بصورت عادی و با شدت رنگ بیشتری نمایش داده می شوند. این حالت، گالری تصاویر را جذاب تر و زیبا تر خواهد کرد.
|
09:56 |
|
| 27 |
تکه تکه کردن تصاویر در CSS
- همان طور که می دانید، برای طراحی یک صفحه وب، از تصاویر زیادی باید استفاده نمود. اما نمایش هر کدام از تصاویر منجر به ایجاد یک درخواست می شود، حالا تصور فرمایید که تعداد تصاویر مذکور خیلی زیاد باشد، مثلا اگر از 20 عکس برای نمایش یک صفحه استفاده کرده باشیم، 20 درخواست برای نمایش صحیح عکس ها ایجاد خوهد شد. که جواب دهی سرور به این 20 درخواست زمان بر خواهد بود...! حالا تصور فرمایید که تمام تصاویر مورد نیاز را تحت یک تصویر آماده کرده باشیم و از بخش های مختلف عکس مذکور در جاهایی که نیاز است استفاده کنیم، به این ترتیب 20 درخواست تبدیل به 1 درخواست شده است و سرعت لود شدن صفحه وب کاهش پیدا خواهد کرد و این مسئله در سئو سایت بسیار تأثیر گذار خواهد بود.
- چگونه با استفاده از خصوصیت مختصر شده Background بخشی از یک تصویر را نمایش دهیم.
- ساخت یک Navgation List با استفاده از تنها یک عکس
- ذکر چندین مثال برای تفهیم بهتر مسئله
|
43:46 |
|
| 28 |
رسانه های مختلف در CSS
- در CSS این امکان وجود دارد که به ازای رسانه های مختلف، استایل های دلخواه مان را اعمال کنیم. بعنوان مثال اگر از طریق مونیتور صفحه وب دیده می شود انداره فونت (font-size) با مقدار 14 پیکس تنظیم شود و در حالت بعدی اگر از صفحه وب قبلی پرینت گرفته شده و خروجی بر روی کاغذ مشاهده شده، اندازه فونت با 10 پیکسل تنظیم شود.
- قانون media@ چیست؟
|
03:21 |
|
| 29 |
گزینش عناصر بر اساس ویژگی
- همان طور که می دانید عناصر HTML دارای ویژگی های فراوانی هستند، بعنوان مثال، در تگ a با استفاده از ویژگی href مقصد لینک را مشخص می کنیم و یا تگ input یک ویژگی بسیار مهم با عنوان type دارد که با مقادیری مثل "text" و "submit" و ... تنظیم می شود و تعیین می کند که فیلد ورودی از چه نوعی است (تکس باکس، رادیوباتن، چک باکس یا دکمه submit). اما در CSS این امکان وجود دارد که عناصر داخل صفحه را بر اساس ویژگی آنها انتخاب کنیم.
- چگونه تمام input هایی که از نوع "text" هست را انتخاب کنم و استایل مورد نظرم را روی همگی آنها اعمال کنم؟
- مثال های فراوان برای تفهیم بهتر مسئله
|
13:57 |
|
| 30 |
خلاصه آموزش های CSS
- در این قسمت بصورت کاملا مختصر به مواردی که تا اینجا فراگرفتیم می پردازیم.
- در ادامه برای دوستانی که علاقمند هستند که تا انتهای مسیر طراحی سایت را طی کنند، قدم بعدی را معرفی می کنیم...!
|
23:49 |
|
دیدگاه‌ها
عالی بودن آموزش ها متشکرم
سلام استاد خوب هستین من از کاربران سایت بی نظیر بیاموز هستم فیلم آموزشی برنامه نویسی CSS رو از سایت بیاموز خریداری کردم باید بگم محشر بود و کمک زیادی به من کرد
سلام
فیلم آموزش CSS رو خریدم و مبلغ از حسابم برداشته شد ولی نوشته در حال بررسی.لینک دانلود رو برام بفرستین ممنون
[email protected]
سلام، ضمن تشکر از خریدتون، لینک دانلود فیلم آموزش CSS به ایمیل شما ارسال گردید.
فیلم آموزش CSS عالی بود.
من فیلم اموزش css رو خریدم واقعا عالی بود دست شما درد نکنه
با سلام خسته نباشید به تمام دست اندر کاران سایت بیاموز و مخصوصا آقای پهلوان صادق که آموزگار بینظیری برای من بوده اند.
من دو فایل فیلم های آموزشی HTML و CSS رو خریداری کردم و از شما به خاطر گویایی و بی نقص بودن آنها کمال تشکر را دارم، الان بعد از اتمام فیلم های آموزشی HTML شما این فیلم آموزشی CSS رو خریداری نمودم و لذت می برم.
یه خواهشی هم ازتون داشتم اونم اینه که لطفا برای JavaScript، PHP و ... هم فیلم آموزشی بسازید!
باتشکر فراوان