دوره مقدماتی طراحی سایت

  • 5.0/5.0
  • 467 دانشجو
  • 100 درس
  • 25 ساعت
  • مقدماتی
  • فارسی
  • امیرحسین پورسمیع
50% تخفیف

325000 تومان

650000 تومان

توضیحات دوره

دوره مقدماتی طراحی سایت

در این دوره چه آموزش داده می شود؟

در دوره آموزش مقدماتی و پروژه محور طراحی سایت با مفاهیمی مقدماتی طراحی سایت و مفاهیم پیشرفته طراحی قالب سایت و فرانت اند آشنا خواهیم شد. در این دوره به صورت کامل و حرفه ایی با مفاهیم HTML ، CSS ، Bootstrapو PHP آشنا خواهیم شد و به صورت عملی و پروژه محور به یادگیری کامل بوت استرپ، سی اس اس و HTML می پردازیم.


  • یادگیری کامل 5 HTML
  • یادگیری کامل ساختار وب
  • یادگیری کامل فرم ها
  • یادگیری و آموزش ساختار صفحات
  • پیاده سازی قالب وب سایت
  • مباحث لینک ها و تصاویر
  • یادگیری کامل3 CSS
  • یادگیری کامل Bootstrap 5
  • یادگیری استایل دهی به سایت
  • یادگیر طراحی رسپانسیو سایت
  • یادگیری ایجاد قالب حرفه ایی 
  • پروژه طراحی سایت شامل دو پروژه

آیا این دوره احتیاج به پیش نیاز دارد؟ خیر😎

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

در این دوره ما به زبان های زیر مسبط می شویم:

تفاوت این دوره در چیست؟

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

HTML چیست‌؟

اولین قدم در آموزش HTML این است که بدانیم تعریف این زبان چیست؟ HTML یک زبان برنامه‌نویسی نیست؛ بلکه یک زبان نشانه‌گذاری است که ساختار محتوای شما را تعریف می‌کند. HTML شامل مجموعه‌ای از عناصر ( elements ) می‌شود که با استفاده از آن شما می‌توانید ساختار یک صفحه وب را مشخص می‌کنید تا در قدم بعدی بتوانید به آن ظاهر مناسبی به آن دهید.
HTML زبانی است که اکثر وب سایت ها با آن نوشته می شوند. HTML برای ایجاد صفحات و کاربردی کردن آنها استفاده می شود.کدی که برای جذاب کردن آنها از نظر بصری استفاده می شود به عنوان CSS شناخته می شود و ما در آموزش بعدی روی آن تمرکز خواهیم کرد. در حال حاضر، به جای طراحی، بر آموزش ساختن به شما تمرکز خواهیم کرد.


برای مثال شما میخواهید مشخص کنید در مکان x از صفحه وب یک لیست قرار بگیرد یا یک فرم یا یک لینک و یا هر چیز دیگر که اینکار با استفاده از HTML به سادگی قابل انجام است.

تاریخHTML


در اواخر سال ۱۹۸۰، یک فیزیکدان به نام تیم برنرزلی، سیستمی را برای محققان CERN پیشنهاد کرد. در سال ۱۹۸۹ او یک یادداشت نوشت که یک سیستم هیپنوتیزم مبتنی بر اینترنت را ارائه می دهد.به طور رسمی به پدر HTML معروف است. آخرین نسخه HTML HTML5 است که بعداً در این دوره آموزشی یاد خواهیم گرفت.

آیا HTML سخت است ؟

همانطور که گفته شد HTML و CSS هر دو ساده ترین زبان های کامپیوتری هستند. لذا یادگیری آن ها خیلی سریع بوده و کسب در آمد از آن نیز آسان می باشد. تقریبا هر فرد یا سازمانی که دارای سایت است بی نیاز از کسی که HTML و CSS را بلد باشد نیست.آن قدر بگویم که ساخت و طراحی یک صفحه با HTML و CSS مانند ساخت یک فایل ورد و نوشتن در آن می باشد. (یعنی اینقدر آسون) اما فراموش نکنید که قطعا حرفه ای شدن در هر کاری حتی ساده ترین کار ها زمان زیادی را می طلب.

آیا برای کدنویسی HTML نیاز به ابزار خاصی داریم ؟

در جواب این سوال باید بگویم که شما تنها به یک ویرایشگر کد احتیاج دارید و یک مرورگرو با همین دو ابزار می توانید اقدام به طراحی سایت با HTML و CSS نمایید. همچنین شایان ذکر است که کد های نوشته شده به زبان اچ تی ام ال در هر مرورگری خوانده و اجرا می شوند

 تگ HTML چیست؟
تگ های HTML مانند کلمات کلیدی هستند که تعریف می کنند که مرورگر وب چگونه محتوا را شکل می دهد. با کمک tags، یک مرورگر وب می تواند بین یک محتوای HTML و یک محتوای ساده تمایز یابد. تگ های HTML شامل سه قسمت اصلی است: تگ باز، محتوا و برچسب بسته. اما بعضی از تگهای HTML برچسب های بدون استفاده هستند. وقتی یک مرورگر وب یک سند HTML را می خواند، مرورگر آن را از بالا به پایین و چپ به سمت راست می خواند. تگ های HTML برای ایجاد اسناد HTML و ارائه ویژگی هایشان استفاده می شوند. هر تگ HTML ویژگی های متفاوتی دارد.یک فایل HTML باید چند تگ ضروری داشته باشد تا مرورگر وب بتواند بین یک متن ساده و متن HTML تفاوت ایجاد کند. می توانید از این تگ ها که می خواهید، استفاده کنید.
همهٔ تگهای HTML باید در < > این براکت ها قرار بگیرند.
هر تگ در HTML وظایف متفاوتی را انجام می دهد.
اگر از یک تگ باز <برچسب <tag> استفاده کرده اید، باید از یک تگ نزدیک </tag> (به استثنای برخی از تگها)

برای آموزش HTML باید چه چیزهایی را بدانیم؟

تقریبا برای آموزش کامل HTML در این دروه هیچ پیش نیازی لازم ندارید و بدون هیچ دانش اولیه ایی در مورد آن می توانید در این دوره HTML شرکت نمایید.

آیا یادگیری HTML آسان است؟

بله، احتمالاً آسان ترین زبان برنامه نویسی پیش رو است که می توانید یاد بگیرید. با داشتن منابع و ابزارهای رایگان آنلاین، این زبان بسیار سریع برای یادگیری نیز است.
برای چه استفاده می شود؟
زبان هایپرت مارکاپ (به انگلیسی: Hypertext Markup) یک زبان برنامه نویسی است که برای توصیف ساختار صفحات وب استفاده می شود. HTML باعث می شود که صفحات ایستا با متن، سربرگ ها،  لیست ها، تصاویر، لینک ها و غیره ایجاد کند.

آیا یادگیری HTML و CSS برای ساخت سایت کافی است ؟

خیر. یادگیری HTML و CSS تنها بخش بسیار کوچکی از طراحی سایت می باشند.

هر سایت دارای دو بخش اصلی است. فرانت اند (چیزی که کاربر می بیند) و بک اند (چیزی که کاربر نمی بیند در واقع همان برنامه نویسی سایت).

در این میان باز هم HTML و CSS بخش کوچکی از بخش FRONT-END یک سایت رو به عهده گرفته است. ابزار ها و تکنولوژی هایی که سایت ها با آن ساخته می شوند به صورت کلی به شرح زیر است. البته باید بدانید که یادگیری همه آن ها اجباری نیست اما پیش نیاز هرکدام از آن ها همین اچ تی ام ال و سی اس اس می باشند.

 

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


تفاوت HTML و HTML 5 


هر دو HTML و HTML5 زبان های مارکوپ هستند که در درجه اول برای توسعه صفحات وب یا برنامه های کاربردی استفاده می شوند. HTML5 آخرین نسخه HTML است و از قابلیت های جدید زبان مارکاپ مانند چند رسانه ای، برچسب های جدید و عناصر و همچنین APIهای جدید پشتیبانی می کند.

 

 

آموزش HTML ویژه چه کسانی هست؟

یک مهارت پایه است برای هر کس که دارای علاقه قابل قبول به حرفه ی توسعه وب دارد که علاقه به برنامه نویسی دارید یادگیری این زبان را هر چه زودتر شروع کنید 

 

اموزش html چقدر زمان میبرد‌؟

زمان یادگیری HTML بستگی به زمانی که برای یادیگیری میگذراید و تمرینتان دارد برای هر کس متفاوت از یک هفته الی سه ماه است.


آیا یادگیری html برای طراحی وب ضروری است؟

بله، برای یادگیری کامل طراحی سایت و یا برنامه نویسی یک وب سایت باید در ابتدا دوره HTML را گذراند و یک پیش نیاز محسوب می گردد.

آیا html یک زبان برنامه‌نویسی است؟

خیر، HTML یک زبان نشانه گذاری محسوب می شود که به مانند یک اسکلت برای سایت می باشد.

زبان نشانه‌گذاری چه تفاوتی با زبان برنامه نویسی دارد؟

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

ویژگی ها HTML 

زبان خیلی ساده ایی است و برای همین سادگی بسیار قابل درک است.درست کردن یک کار بسیار آسان است ارائه مؤثر با HTML، چون این برچسب های شکل دهنده زیادی دارد. یک راه انعطاف پذیر برای طراحی صفحات وب همراه با متن  را فراهم می کند.برنامه نویسان را برای اضافه کردن یک آسان می کند لینک در صفحات وب (با برچسب لنگر html) بنابراین علاقه به مرور کاربر را افزایش می دهد . ویژگی مستقلی دارد که می توان در هر پلتفرمی مانند ویندوز، لینوکس و مکینتاش و غیره نمایش داد.برنامه نویس را آسان می کند گرافیک، ویدئو و صدا به صفحات وب که آن را جذاب تر و تعاملی تر می کند. 

 HTML یک زبان بی مورد است، به این معنی که می توانیم از تگ ها در حالت پایین یا بالا استفاده کنیم.

ارتباط html با css

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

HTML چطور کار می‌کند؟

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

البته در دنیای وب معمولا وظیفه کدنویسی HTML و CSS به عهده یک نفر خواهد بود. فایل‌‌های HTML با پسوند .htm یا .html در سیستم ذخیره می‌شوند. این فایل‌ها تقریبا توسط همه مرورگرهای وب پشتیبانی می‌شوند و به راحتی می‌توانند محتویات آن را رندر کنند. منظور از رندر کردن این است که عناصر داخل سایت که ترکیبی از کد، تصویر، انیمیشن، ویدئو یا غیره هستند، تبدیل به اطلاعات قابل نمایش برای کاربران می‌شوند.

html مخفف چیست

شاید برای شما هم سوال باشد که معنی HTML چیست یا به عبارتی html مخفف چیست ؟ عبارت HTML مخفف (Hyper Text Markup Language) می باشد که معادل  فارسی آن «زبان نشانه‌ گذاری ابر متنی» خواهد بود. البته با توجه به وسعت کاربرد آن این ترجمه فارسی نمی تواند کاربرد HTML را به خوبی توضیح دهد.

در ادامه مقاله، برای روشن شدن معنی دقیق اچ تی ام ال و یا به عبارتی زبان نشانه‌ گذاری ابر متنی، با کاربرد HTML بیشتر آشنا خواهیم شد. نکته: اچ تی ام ال یک زبان برنامه نویسی نیست. اچ تی ام ال یک زبان نشانه گذاری است.

کاربرد HTML چیست

 اگر بخواهیم کاربرد HTML را بطور ساده توضیح دهیم باید بگوییم:HTML ابزاری است که به کمک تگ ها (Tag) قالب کلی صفحات را می سازد، در واقع شما توسط تگ های HTML، اسکلت صفحات وب خود را می سازید. اگر کمی با طراحی وب آشنایی داشته باشید،‌ حتما میدانید که طراحی وب ۲ مرحله اصلی دارد:

  1. ساختاربندی اصلی صفحات وب که با HTML انجام میشود.
  2. اضافه کردن جذابیت های ظاهری مثل رنگ و… که با CSS انجام میشود.

حال شاید بپرسید تگ (Tag) چیست؟! 

قبل از توضیح این سوال و البته تکمیل توضیح سوال html چیست و زبان نشانه گذاری ابر متنی دقیقا یعنی چه، این نکته را فراموش نکنید که:ساخت یک وب سایت حرفه ای و کامل شامل استفاده از زبان های و کد های مختلف برنامه نویسی مثل php، ASP، HTML، CSS و… است، که هیچکدام از این کدها و زبان های بجز اچ تی ام ال برای مرورگرهای مختلف قابل فهم نیست. یعنی مرورگر ها فقط کد ها و عناصری را نمایش می دهند که در دل کدها HTML نوشته شده باشند.به عبارتی وقتی در جواب سوال html چیست می گوییم : «زبان نشانه گذاری ابر متنی»، درواقع درحال توضیح این امر هستیم که HTML  یک زبان نشانه گذاری است که شامل بخش های مختلف به نام تگ است. که هر کدام  از این تگ ها دارای کاربرد و خواص مربوط خود هستند و به مرورگرها کمک می کنند تا بفهمند هر بخش از صفحه چه نوع عنصری است و باید به چه صورت نمایش داده شود.

 

 

HTML چه رابطه‌ای با زبان‌‌های css و javascript دارد؟

کمتر پیش می‌آید که از HTML صحبت کنیم و ذهنمان به سمت زبان‌های css و JavaScript کشیده نشود. تا اینجای کار فهمیدیم HTML چیست و  چرا در طراحی سایت به آن نیاز خواهیم داشت. اما به این نکته توجه داشته باشید که امروزه HTML به تنهایی کاربرد زیادی ندارد.

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

با توجه به نکاتی که گفته شد می‌توان HTML به تنهایی را مانند یک انسان برهنه در نظر گرفت که CSS مانند لباس‌های شیک، ظاهر آن را آراسته می‌کند. در نهایت جاواسکریپت باعث می‌شود او حرکت کرده و با بقیه شروع به صحبت کند. پس در طراحی ظاهر سایت به طور خلاصه باید گفت :

  1. HTML به کمک تگ‌های از قبل تعریف شده ساختار و اسکلت صفحه وب را مشخص می‌کند.
  2. CSS به ما کمک می‌کند عناصر مختلف را در صفحه جابه‌جا کنیم، رنگ‌بندی را تغییر دهیم، فونت‌ها را عوض کنیم و به جایی برسیم که یک صفحه وب با ظاهر قابل قبول و قابل ارائه برای داشته باشیم.
  3. JavaScript به ما اجازه می‌دهد صفحات وب را به طور داینامیک یا پویا طراحی کنیم. با JS می‌توانیم عناصر تعاملی مختلف مثل اسلایدر، صفحه pop up، گالری عکس و چیزهای مشابه تولید کنیم.
 

مخترع HTML  (تیم برنرز – لی)

در سال ۱۹۸۹ میلادی جایی که فیزیکدانان سراسر دنیا در آزمایشگاه قاره اروپا در ژنو (سرن  CERN ) برای آزمایش فیزیک ذره ای دور هم جمع شده بوده و به بیان دیدگاه ها، تفکرات، و یافته های خود می پرداختند تیم برنرز- لی ایده ای به فکرش خطور کرد.ایده ای که قرار بود کاری کند تا سایر دانشمندان بدون حضور در آزمایشگاه بتوانند یافته و نظرات خود را با سایر دانشمندان به انتشار بگذارند. این ایده باعث شد تا تیم برنرز- لی در سال ۱۹۸۹ میلادی شبکه جهانی وب را اختراع کند. البته این شبکه در ابتدا یک شبکه خصوصی بود و قطعا این تیم هیچ وقت فکر نمی کرد این اختراع روزی وارد تمام خانه در سرتاسر دنیا شود.در ادامه تیم به این موضوع فکر کردند که صفحات علمی منتشر شده در شبکه، باید چیزی فراتر از یک متن خالص باشند. پس آنها دوباره شروع به کار کردند و با توسعه شبکه خود نام این مستندات و متون پیشرفته منتشر شده را ابر متن (HyperText) گذاشتد. بطوریکه صفحات می توانستند به یکدیگر لینک بخورند. و این شروع بود بر ایجاد زبان Html و ساخت صفحات وب که تا به امروز با انتشار آخرین ورژن html یعنی HTML5 در حال توسعه یافتن بوده است.

فرانت اند (Front End) به چه معناست؟

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

تفاوت HTML5 نسبت به نسخه های قبلی اش چیست؟


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

 

خصوصیات تگ های html( اتریبیوت های html )

همانطور که گفته شد زبان HTML از قرار گرفتن تگ ها مختلف در کنار هم ساخته شده است. حالا باید بدانید که تگ ها نیز شامل خصوصیات و صفت هایی هستند که به آنها اتریبیوت (attribute) گفته می شود. همچنین اتریبیوت های html نیز دارای مقداری هستند که با آنها attribute value گفته می شود. در مورد صفت ها در html بعدا مفصلا توضیح خواهیم داد. بنابراین می توان گفت که صفت ها در html بر گیرنده مقادیر خاصی هست که تأثیر مشخصی بر محتوا می‌گذارد، برای مثال برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ تی ام ال تعریف شده‌اند.

فایل اچ تی ام ال چیست


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

CSS چیست؟

CSS  زبانی است که به سادگی طراحی شده است تا فرآیند ارائه صفحات وب را ساده کند. CSS به شما این امکان را می دهد که سبک ها را در صفحات وب اعمال کنید. مهمتر از آن، CSS به شما این امکان را می دهد که مستقل از HTML که هر صفحه وب را تشکیل دهید. یادگیری و درک CSS آسان است، اما کنترل قدرتمندی بر روی ارائه یک سند HTML فراهم می کند.یک ویژگی اضافی برای HTML فراهم می کند.

 این روش به طور کلی با HTML برای تغییر سبک صفحات وب و رابط کاربری استفاده می شود. همچنین می توان با هر نوع از اسناد XML، XML، SVG و XUL استفاده کرد. CSS همراه با HTML و جاوا اسکریپت در بیشتر وب سایت ها برای ایجاد رابط کاربری برای کاربرهای وب و رابط کاربری برای بسیاری از کاربرها استفاده می شود. می توانید نگاهی جدید به اسناد قدیمی HTML اضافه کنید. شما می توانید با چند تغییر در کد CSS، نگاه وب سایت خود را کاملاً تغییر دهید.

اگر از ما بپرسید اولین قدم برای یادگیری طراحی سایت چیست، قطعا جواب ما آموزش HTML و سپس CSS است. این دو زبان در کنار یکدیگر معنی پیدا می‌کنند. زیرا CSS را می‌توان مکملی بر زبان HTML دانست که با هدف پر کردن نقاط ضعف و خلاء‌های آن توسعه یافته است. CSS مخفف عبارت Cascading Style Sheets و به معنی “برگه‌های آبشاری” است.

این زبان با هدف فرم دهی صفحات وب HTML و اجزای مختلف صفحات آن توسط کنسرسیوم بین المللی شبکه جهانی وب یا W3C توسعه داده شده است. در واقع CSS یک زبان نشانه‌ گذاری است که اجازه می‌دهد ساختار صفحات وب را از چیدمان عناصر گرفته تا تغییر رنگ‌بندی و فونت‌ها شکل دهید. این زبان در کنار HTML و JavaScript از هسته‌های اصلی طراحی صفحات وب به حساب می‌آیند.

 

 همانطور که از تصویر بالا برداشت می‌شود، CSS حکم پوست و گوشت و در نهایت کت و شلوار صفحات وب را دارد. CSS طراحان سایت را قادر می‌سازد که بدون محدودیت خلاقیت‌های خود را در طراحی صفحات سایت پیاده سازی کنند. برای اینکه به ضرورت ایجاد CSS پی ببرید و بدانید علت نیاز به CSS چیست ، قصد داریم سایت سون لرن را یک بار با CSS و یک بار بدون استفاده از CSS مشاهده کنیم.

 CSS مخفف چیست ؟

واژه CSS مخفف cascading style sheets به معنی برگه های سبک آبشار یا برگه های آبشاری می باشد. به زبان CSS زبان برنامه نویسی ظاهری (Style Sheet Language) نیز می گویند.

شاید با خودتان فکر کنید چرا برگه های آبشاری؟
علت نامگذاری CSS و استفاده از صفت Cascading (آبشاری) در این اسم، نحوه اعمال دستورات به عناصر موجود در صفحه است. قوانین این زبان به صورت آبشاری یا از بالا به پایین اعمال می شوند. شما برای اعمال دستورات CSS به عناصر HTML می بایست از بیرونی ترین عنصر به ترتیب به عناصر داخلی آن دسترسی پیدا کنید که تداعی کننده حالت آبشاری است که در ادامه  با مطالعه شیوه استفاده از کد های CSS این موضوع را بهتر متوجه خواهید شد.

فرانت اند (Front End) به چه معناست؟

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

CSS یک زبان فرانت اند (Front End)

فرانت اند (Front End) به مجموعه ای از کارهایی گفته می شود که بر روی گرافیک و شکل ظاهری سایت تاثیر دارد و با عملکرد سایت کاری ندارد. از جمله زبان هایی که فرانت اند هستند می توان به CSS، HTML، JAVASCRIPT اشاره کرد.

کاربرد زبان CSS

برگه‌های CSS در واقع مسئولیت ایجاد ظاهر سایت را به عهده دارند و رنگ، اندازه و محل قرارگیری متون و دیگر تگ‌ های تعریف شده در HTML را تعیین می نمایند.
شما به کمک زبان CSS می توانید برای صفحه خود در مدیا های مختلف ویژگی های مختلفی در نظر بگیرید (ریسپانسیو سازی). بنابراین به کمک سی اس اس شما این قدرت را خواهید داشت که ظاهر وب سایت خودتان را به هر شکل دلخواهی درآورید.

کاربردهای رایج سی اس اس

  • تعین فونت
  • تعین رنگ پیش زمینه و پس زمینه
  • تعیین فاصله و حاشیه عناصر صفحه
  • تعیین عرض و ارتفاع
  • تعیین تصویر پس زمینه
  • تغییر موقعیت قرار گیری عناصر صفحه
  • چپ چین و راست چین کردن عناصر

چرا باید از CSS استفاده کنیم؟

اساسی‌ترین کاربرد CSS، زیبا سازی و بهبود طراحی صفحات وب است. CSS بسیار منعطف‌تر از HTML است و به شما اجازه می‌دهد برای تغییر صفحات وب، کمتر سراغ ساختار HTML رفته و با سرعت بیشتری طراحی خود را خوش استیل کنید. در ادامه این مطلب می‌خواهیم ببینیم که چرا باید از کدهای CSS در صفحات وب استفاده کنیم.

stylesheet چیست؟

یک stylesheet مجموعه ای از قوانین و کدهای css است که به مرورگر می گوید که چگونه  tag HTML نمایش داده شود.

فایل css چیست؟

css با ایجاد فایل css. همچنین شما را قادر می سازد تا نمایش صفحه مورد نظر خود را در چندین حالت مختلف Rendering مانند حالت نمایش بر روی مانیتور، حالت نمایش در زمان چاپ، در زمان حالت شناسایی صدا ( برای مرورگرهای مبتنی بر قابلیت شناسایی صدا) و همچنین برای نمایش در صفحات مرورگر موبایل را به درستی تنظیم نمایید.

به شما پیشنهاد می شود برای کسب اطلاعات در حوزه تکنیک کد نویسی و کد نویسی یعنی چه مقاله ما را مطالعه نمایید.

اضافه کردن CSS به HTML

نحوه اتصال فایل css به فایلhtml به سه روش زیر انجام می‌شود:

  • External CSS
  • Internal CSS
  • Inline CSS

External CSS

با استفاده از روش External CSS که پرکاربردترین روش استفاده از سی اس اس است می‌توانید با تغییر یک فایل که از قبل ایجاد شده، ظاهر یک سایت را تغییر دهید. محل قرارگیری کدهای css در روش خارجی به این شکل است که باید کدهای css را در یک فایل notepad بصورت مجزا نوشته و با پسوند .css ذخیره کنید. حال باید این فایل را با دستورات html به فایل اصلی متصل کنید. برای این کار می‌توانید داخل تگ <link> در بخش <head> فایلی که از قبل ایجاد کرده اید را معرفی کنید.

Internal CSS

Internal CSS زمانی استفاده می‌شود که یک صفحه از سایت باید استایل مشخصی داشته باشد. به این شکل در بخش <head> در تگ <style> تغییراتی که نیاز است را اعمال می‌کنید.

Inline CSS

نحوه استایل‌دهی کدهای html توسط کدهای css در روش Inline CSS زمانی مورد استفاده قرار می‌گیرد که بخواهید بر روی یک تگ خاص استایلی را اعمال کنید. در این روش تغییرات مستقیم بر روی همان تگ اعمال می‌شود و تاثیری بر روی تگ‌های خارجی ندارد.

ورژن های مختلف سی اس اس

ما یک معرفی کوتاه از تاریخ CSS’را درک کرده ایم و متوجه شده ایم که آن عمدتاً سه نسخه دارد. بنابراین، حالا اجازه می دهیم که این سه نسخه از CSS را با جزئیات بیشتری بحث کنیم.

CSS 1

CSS 1 اولین نسخه از سی اس اس و توصیه W3C است. این مجموعه در سال ۱۹۹۶ با قابلیت های  ویژگی های  فونت راه اندازی شد. همچنین برای اضافه کردن رنگ به پشت و قسمت متن استفاده می شود. در CSS 1، قابلیت های همخوانی متن وجود داشت. همچنین قابلیت های  موقعیت بندی و طبقه بندی عمومی دارد. اما اکنون این نسخه توسط W3C قابل استفاده نیست.

CSS2

W3C نسخه بعدی CSS را توسعه داد و آن را CSS2 نامید و در سال ۱۹۹۸ راه اندازی کرد. این روش دارای ویژگی ها و قابلیت های بیشتری نسبت به نسخه قبلی است. در حال حاضر کاربران می توانند از ویژگی های جدید مانند نسبی، مطلق و موقعیت ثابت استفاده کنند. انواع رسانه ها وجود داشت و ویژگی های متن پیشنهادی نیز وجود داشت. این نسخه همچنین در همان حال، تغییرات زیادی را مشاهده کرد و به روز رسانی CSS2.1 به روز رسانی شد.

CSS3

سی ۳ آخرین نسخه CSS به طور رسمی توسط W3C است و در سال ۱۹۹۹ راه اندازی شد. این مجموعه مجموعه ای از انواع فونت دارد و شما می توانید از هر نوع فونت از گوگل و تایست استفاده کنید. همچنین این نسخه به بسیاری از ماژول ها تقسیم می شود که به راحتی قابل رسیدگی است و همچنین باعث صرفه جویی در زمان فرم کردن صفحات وب می شود. در حال حاضر بیشتر شرکت ها و سازمان ها از CSS3 و HTML5 برای توسعه وب و طراحی وظایف خود استفاده می کنند. از این رو، اگر می خواهید چنین مهارت هایی را یاد بگیرید، پس مطمئن شوید که آخرین راه اندازی این فناوری را یاد خواهید گرفت.

ریسپانسیو کردن با css

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

 webkit در css چیست؟

WebKit یک موتور طراحی است که به مرورگرهای وب اجازه ارائه صفحات وب را می دهد. Webkit موتور ارائه دهنده html / css است که در مرورگر Safari اپل و در Chrome Chrome استفاده می شود.

Scss چیست ؟

Scss پسوند نحوی CSS است. این بدان معنی است که هر شیوه نامه معتبر CSS یک پرونده SCSS معتبر با همان معنی است. علاوه بر این ، SCSS بیشتر هک های CSS و نحو اختصاصی فروشنده ، مانند فیلتر قدیمی IE را می فهمد.

فرمت فایل css چیست ؟

در پاسخ به این پرسش بایستی گفت فرمت فایل سی اس اس، css. می باشد.

برای یادگیری CSS باید چه چیز هایی را بدانیم؟

در این دوره شما بدون هیچ پیش نیاز و مقدمه ایی می توانید به یادگیری CSS بپردازید چرا که ما در دوره CSS تمامی مباحث را از صفر تا صد و از مقدماتی تا پیشرفته توضیح خواهیم داد.

در دوره آموزش CSS چه مباحثی را یاد می‌گیرید؟

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

این دوره ویژه چه کسانی هست؟

این دوره برا کسانی مه قصد یادگیری برنامه نویسی وب یا همان طراحی سایت را دارند مناسب می باشد.

سی اس اس برای چه کاری استفاده می شود ؟

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

ما از CSS به دلایل زیر استفاده می کنیم:

CSS باعث صرفه جویی در زمان می شود: می توانید یک بار CSS بنویسید و از همان برگه در چندین صفحه HTML استفاده مجدد کنید.

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

موتورهای جستجو: CSS در نظر گرفته می شود یک تکنیک کدنویسی تمیز، به این معنی که موتورهای جستجو برای «خواندن» محتوای آن دچار مشکل نخواهند شد.

سبک‌های برتر در HTML: CSS دارای مجموعه‌ای از ویژگی‌های بسیار گسترده‌تر از HTML است، بنابراین می‌توانید ظاهر بسیار بهتری به صفحه HTML خود بدهید. در مقایسه با ویژگی‌های HTML.

مرور آفلاین: CSS می‌تواند برنامه‌های وب را به صورت محلی با کمک حافظه پنهان آفلاین ذخیره کند. با استفاده از این ما می توانیم وب سایت های آفلاین را مشاهده کنیم

مزایای CSS چیست؟

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

 معایب CSS چیست؟

CSS، CSS 1 تا CSS3 منجر به ایجاد سردرگمی در بین مرورگرهای وب می شود. در CSS، آنچه با یک مرورگر کار می کند ممکن است همیشه با مرورگر دیگر کار نکند. توسعه دهندگان وب باید سازگاری را آزمایش کنند و برنامه را در چندین مرورگر اجرا کنند. امنیت کمیاب وجود دارد. پس از ایجاد تغییرات، در صورت ظاهر شدن باید سازگاری را تأیید کنیم. یک تغییر مشابه بر همه مرورگرها تأثیر می گذارد. دنیای زبان برنامه نویسی برای غیر توسعه دهندگان و مبتدیان پیچیده است. سطوح مختلف CSS یعنی CSS، CSS 2، CSS 3 اغلب کاملاً گیج کننده هستند. سازگاری با مرورگر (برخی از شیوه نامه ها پشتیبانی می شوند و برخی دیگر پشتیبانی نمی شوند). CSS در مرورگرهای مختلف متفاوت عمل می کند. اینترنت اکسپلورر و اپرا از CSS به‌عنوان منطقی متفاوت پشتیبانی می‌کنند. ممکن است هنگام استفاده از CSS، مشکلات مرورگر متقابل وجود داشته باشد. سطوح متعددی وجود دارد که برای غیر توسعه‌دهندگان و مبتدی‌ها سردرگمی ایجاد می‌کند.

چرا از CSS استفاده می کنند

این سه مزایای اصلی CSS هستند:

مسئله بزرگی را حل می کند; قبل از CSS، برچسب هایی مانند فونت، رنگ، سبک پس زمینه، هم تراز های عناصر، مرز و اندازه باید در هر صفحه وب تکرار شود. این یک فرایند بسیار طولانی بود. برای مثال: اگر در حال توسعه یک وب سایت بزرگ هستید که در آن فونت ها و اطلاعات رنگ در هر صفحه اضافه می شود، به یک فرایند طولانی و گران تبدیل می شود. CSS برای حل این مشکل ایجاد شد. این یک توصیه W3C بود.وقت زیادی را نجات می دهد تعریف های سبک CSS در پرونده های خارجی CSS ذخیره شده است بنابراین می توان کل وب سایت را با تغییر تنها یک فایل تغییر داد. ویژگی های بیشتری ارائه میکند. ویژگی هایی که ارائه میشود توسط  CSS مفصل تری نسبت به HTMLساده برای تعریف نگاه و احساس وب سایت فراهم می کند.

چرا CSS یک زبان برنامه نویسی نیست!

خیلی از اشخاصی که به خوبی مفهوم CSS را درک نکرده اند و نتوانسته اند که پاسخ خوبی برای سوالCSS چیست پیدا کنند، CSS را یک زبان برنامه نویسی میدانند که کاملا اشتباه است.

CSS هرگز نمیتواند یک زبان برنامه نویسی باشد. زیرا اصلا ویژگی های یک زبان برنامه نویسی، مثل متغیر ها، توابع، شرط ها، حلقه ها و… را ندارد. پس کاملا اشتباه است اگر CSS را یک زبان برنامه نویسی بدانیم. میتوانیم درباره‌یCSS بگوییم که ابزاری است که استفاده از آن میتوانیم تگ های HTML خود را زیبا کنیم و صفحات وب چشم نوازی را طراحی کنیم.


جلسات دوره

0

1-

معرفی ساختار وب
در این جلسه در رابطه با معرفی ساختار وب بحث خواهیم کرد

11 دقیقه


1

2-

نصب نرم افزار کد ادیتور و معرفی تگ ها

در این قسمت به نصب و معرفی نرم افزار های مورد نیاز میپردازیم.


25 دقیقه


2

3-

فایل های جلسه اول و دوم
فایل های پروژه را می تونوانید از اینجا دانلود نمایید


3

4-

مقدمه

در این جلسه اموزش مقدماتی CSS  را خواهیم داشت.


10 دقیقه


4

5-

تگ های لینک، عکس، فاصله و خط

در ایم قست کار با تگ های کاربردی لینک، تصویر و فاصله و خط افقی را فرا میگیریم.


18 دقیقه


5

6-

فورمت دهی در HTML

در این قسمت با آموزش Text Formatting در HTML سر و کار داریم و تمرین جلسه قبل رو باهم برسی خواهیم کرد.


30 دقیقه


6

7-

فایل های این فصل

فایل های پروژه را می تونوانید از اینجا دانلود نمایید



7

8-

تگ های کامنت، رنگ، استایل و تصاویر در HTML

در این قسمت در رابطه با تگ های کامنت و رنگ و استایل بحث خواهیم کرد.


14 دقیقه


8

9-

قسمت اول تگ های جدول
در این قسمت با آموزش تگ های جدول در HTML صحبت خواهیم کرد.

18 دقیقه


9

10-

قسمت دوم تگ های جدول

در این قسمت با ادامه آموزش تگ های جدول در HTML صحبت خواهیم کرد.


16 دقیقه


10

11-

لیست ها در HTML

در این قسمت با آموزش تگ های لیست در HTML صحبت خواهیم کرد.


18 دقیقه


11

12-

کار با تگ div در HTML

در این قسمت با آموزش کار با تگ DIV در HTML صحبت خواهیم کرد.


14 دقیقه


12

13-

آموزش کار با Class ها در HTMl

این قسمت آموزش کار با  Class ها و نحوه استفاده در HTML را خواهیم داشت.


11 دقیقه


13

14-

آموزش کار با IDها در HTMl

این قسمت آموزش کار با  ID ها و نحوه استفاده در HTML را خواهیم داشت.


14 دقیقه


14

15-

Iframes ها در HTML

این قسمت آموزش کار با  Iframes ها و نحوه استفاده در HTML را خواهیم داشت.


8 دقیقه


15

16-

نحوه استفاده درست از Layout ها در HTML

این قسمت آموزش کار با  Layout ها و نحوه استفاده آن در HTML را خواهیم داشت.


14 دقیقه


16

17-

form ها در HTMl قسمت اول

این قسمت آموزش کار با  form ها و نحوه استفاده آن در HTML را خواهیم داشت.


9 دقیقه


17

18-

قسمت دوم form ها در HTMl

این قسمت ادامه آموزش کار با فرم ها و نحوه استفاده آن در HTML را خواهیم داشت.


21 دقیقه


18

19-

قسمت سومform ها در HTMl

این قسمت ادامه آموزش کار با فرم ها و نحوه استفاده آن در HTML را خواهیم داشت.


17 دقیقه


19

20-

قسمت چهارم form ها در HTMl

این قسمت ادامه آموزش کار با فرم ها و نحوه استفاده آن در HTML را خواهیم داشت.


16 دقیقه


20

21-

فایل های پروژه برای دانلود


21

22-

قسمت اول Media در HTML

این قسمت آموزش کار با مدیا ها و نحوه استفاده آن در HTML را خواهیم داشت.


7 دقیقه


22

23-

قسمت دوم Media در HTML

این قسمت ادامه آموزش کار با مدیا ها و نحوه استفاده آن در HTML را خواهیم داشت.


7 دقیقه


23

24-

فایل های پروژه


24

25-

مقدمه ایی بر CSS و استایل ها

این قسمت آموزش کار با استایل ها و نحوه استفاده آن در CSS را خواهیم داشت.


9 دقیقه


25

26-

سلکتور ها در CSS

این قسمت آموزش کار با سلکتور ها و نحوه استفاده آن در CSS را خواهیم داشت.


14 دقیقه


26

27-

کلاس و آیدی ها در CSS

این قسمت آموزش کار با کلاس ها و آیدی ها و نحوه استفاده آن در CSS را خواهیم داشت.


12 دقیقه


27

28-

بوردر ها در CSS

این قسمت آموزش کار با borders ها و نحوه استفاده آن در CSS را خواهیم داشت.


11 دقیقه


28

29-

فاصله های خارجی در CSS

این قسمت آموزش کار با مارجین ها و نحوه استفاده آن در CSS را خواهیم داشت.


5 دقیقه


29

30-

فاصله های داخلی در CSS

این قسمت آموزش کار با پدینگ ها و نحوه استفاده آن در CSS را خواهیم داشت.


5 دقیقه


30

31-

فایل های پروژه


31

32-

CSS Outline

این قسمت آموزش کار با Outline ها و نحوه استفاده آن در CSS را خواهیم داشت.


8 دقیقه


32

33-

آموزش استایل دهی به متن در CSS

این قسمت آموزش کار با متن ها و نحوه استفاده آن در CSS را خواهیم داشت.


19 دقیقه


33

34-

فونت ها در CSS

این قسمت آموزش کار با فونت ها و نحوه استفاده آن در CSS را خواهیم داشت.


7 دقیقه


34

35-

آموزش آیکون های در CSS

این قسمت آموزش کار با آیکون ها و نحوه استفاده آن در CSS را خواهیم داشت.


14 دقیقه


35

36-

لینک ها در CSS

این قسمت آموزش کار با لینک ها و نحوه استفاده آن در CSS را خواهیم داشت.


9 دقیقه


36

37-

آموزش لیست ها در CSS

این قسمت آموزش کار با لیست  ها و نحوه استفاده آن در CSS را خواهیم داشت.


4 دقیقه


37

38-

آموزش جدول ها در CSS

این قسمت آموزش کار با جدول ها و نحوه استفاده آن در CSS را خواهیم داشت.


13 دقیقه


38

39-

انواع display در CSS

این قسمت آموزش کار با display ها و نحوه استفاده آن در CSS را خواهیم داشت.


11 دقیقه


39

40-

عرض و طول المنت ها در CSS

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


6 دقیقه


40

41-

پوزیشن ها در CSS

این قسمت آموزش کار با پوزیشن ها و نحوه استفاده آن در CSS را خواهیم داشت.


12 دقیقه


41

42-

فایل های پروژه


42

43-

آموزش Z-index در CSS

این قسمت آموزش کار با z-index ها و نحوه استفاده آن در CSS را خواهیم داشت.


5 دقیقه


43

44-

آموزش CSS Overflow

این قسمت آموزش کار با Overflow ها و نحوه استفاده آن در CSS را خواهیم داشت.


6 دقیقه


44

45-

فلوت ها در CSS

این قسمت آموزش کار با float ها و نحوه استفاده آن در CSS را خواهیم داشت.


8 دقیقه


45

46-

آموزش CSS display: inline-block

این قسمت آموزش کار با  inline-block و نمایش ها و نحوه استفاده آن در CSS را خواهیم داشت.


5 دقیقه


46

47-

آموزش استایل دهی به صورت افقی و عمودی

این قسمت آموزش کار با استایل دهی به صورت افقی و عمودی ها و نحوه استفاده آن در CSS را خواهیم داشت.


8 دقیقه


47

48-

CSS Combinators

این قسمت آموزش کار با ترکیب کننده ها و نحوه استفاده آن در CSS را خواهیم داشت.


5 دقیقه


48

49-

آموزش CSS Pseudo-classes

این قسمت آموزش کار با Pseudo-classes ها و نحوه استفاده آن در CSS را خواهیم داشت.


6 دقیقه


49

50-

آموزش در CSS Pseudo-elements

این قسمت آموزش کار با CSS Pseudo-elements ها و نحوه استفاده آن در CSS را خواهیم داشت.


6 دقیقه


50

51-

آموزش شفافیت و کدری در CSS
این قسمت آموزش کار با آموزش شفافیت و کدری ها و نحوه استفاده آن در CSS را خواهیم داشت.

4 دقیقه


51

52-

آموزش CSS Navigation Bar

این قسمت آموزش کار با آموزش Navigation Bar و نحوه استفاده آن در CSS را خواهیم داشت.


15 دقیقه


52

53-

آموزش CSS Dropdowns

این قسمت آموزش کار با آموزش Dropdowns و نحوه استفاده آن در CSS را خواهیم داشت.


7 دقیقه


53

54-

آموزش CSS Image Gallery

این قسمت آموزش کار با آموزش Image Gallery ها و نحوه استفاده آن در CSS را خواهیم داشت.


3 دقیقه


54

55-

آموزش انتخاب گر سلکتور ها در CSS

این قسمت آموزش کار با آموزش انتخاب گر سلکتور ها  و نحوه استفاده آن در CSS را خواهیم داشت.


7 دقیقه


55

56-

آموزش فرم ها در CSS

این قسمت آموزش کار با آموزش فرم ها  و نحوه استفاده آن در CSS را خواهیم داشت.


10 دقیقه


56

57-

اموزش شمارنده ها در CSS

این قسمت آموزش کار با آموزش شمارنده ها و نحوه استفاده آن در CSS را خواهیم داشت.


10 دقیقه


57

58-

آموزش CSS Website Layout

این قسمت آموزش کار با آموزش CSS Website Layout ها  و نحوه استفاده آن در CSS را خواهیم داشت.


10


58

59-

آموزش CSS Units

این قسمت آموزش کار با آموزش آموزش CSS Units ها  و نحوه استفاده آن در CSS را خواهیم داشت.


10 دقیقه


59

60-

آموزش CSS Specificity

این قسمت آموزش کار با آموزش CSS Specificity ها  و نحوه استفاده آن در CSS را خواهیم داشت.


11 دقیقه


60

61-

آموزش !important Rule

این قسمت آموزش کار با آموزش  !important Rule ها  و نحوه استفاده آن در CSS را خواهیم داشت.


11 دقیقه


61

62-

تابع های ریاضی در css

این قسمت آموزش کار با آموزش تابع های ریاضی در CSS  و نحوه استفاده آن در CSS را خواهیم داشت.


11 دقیقه


62

63-

گوشه های گرد در CSS یا CSS Rounded Corners

این قسمت آموزش کار با آموزش گوشه های گرد در CSS  یا CSS Rounded Corners و نحوه استفاده آن در CSS را خواهیم داشت.


10 دقیقه


63

64-

تصاویر حاشیه در CSS یا CSS Border Images
این قسمت آموزش کار با آموزش تصاویر حاشیه در CSS یا CSS Border Images و نحوه استفاده آن در CSS را خواهیم داشت.

10 دقیقه


64

65-

پس زمینه ها در CSS یا CSS Multiple Backgrounds

این قسمت آموزش کار با آموزش پس زمینه ها در CSS یا CSS Multiple Backgrounds و نحوه استفاده آن در CSS را خواهیم داشت.


10 دقیقه


65

66-

رنگ ها در CSS یا CSS COLORS
این قسمت آموزش کار با آموزش رنگ ها در  CSS یا CSS COLORS  و نحوه استفاده آن در CSS را خواهیم داشت.

10 دقیقه


66

67-

کلمات کلیدی رنگی در CNN یا CSS Color Keywords
این قسمت آموزش کار با آموزش کلمات کلیدی رنگی در CNN یا CSS Color Keywords و نحوه استفاده آن در CSS را خواهیم داشت.

10 دقیقه


67

68-

گردینت های CSS  یا CSS Gradients

این قسمت آموزش کار با آموزش گردینت های CSS  یا CSS Gradients و نحوه استفاده آن در CSS را خواهیم داشت.


10 دقیقه


68

69-

سایه ها در CSS یا CSS Shadows

این قسمت آموزش کار با سایه ها در CSS یا CSS Shadows و نحوه استفاده آن در CSS را خواهیم داشت.


10 دقیقه


69

70-

فونت های وب در CSS یا CSS Web Fonts
این قسمت آموزش کار با فونت های وب در CSS یا CSS Web Fonts و نحوه استفاده آن در CSS را خواهیم داشت.

10 دقیقه


70

71-

تبدیل های دو بعدی در CSS یا CSS 2D Transforms

این قسمت آموزش کار با تبدیل های دو بعدی در CSS یا CSS 2D Transforms و نحوه استفاده آن در CSS را خواهیم داشت.


10 دقیقه


71

72-

تبدیل های سه بعدی در CSS یا CSS 3D Transforms

این قسمت آموزش کار باتبدیل های سه بعدی در CSS یا CSS 3D Transforms و نحوه استفاده آن در CSS را خواهیم داشت.


10 دقیقه


72

73-

انتقال ها در CSS یا CSS Transitions

این قسمت آموزش کار با انتقال ها در CSS یا CSS Transitions و نحوه استفاده آن در CSS را خواهیم داشت.


10 دقیقه


73

74-

تصاویر متحرک در CSS یا CSS Animations

این قسمت آموزش کار با  تصاویر متحرک در CSS یا CSS Animations و نحوه استفاده آن در CSS را خواهیم داشت.



10 دقیقه


74

75-

نکات ابزار در CSS یا CSS Tooltip

این قسمت آموزش کار با نکات ابزار در CSS یا CSS Tooltip و نحوه استفاده آن در CSS را خواهیم داشت.


10 دقیقه


75

76-

سبک تصاویر در CSS یا CSS Styling Images

این قسمت آموزش کار با سبک تصاویر در CSS یا CSS Styling Images و نحوه استفاده آن در CSS را خواهیم داشت.


10 دقیقه


76

77-

انعکاس تصویر در CSS یا CSS Image Reflection

این قسمت آموزش کار با انعکاس تصویر در  CSS یا CSS Image Reflection و نحوه استفاده آن در CSS را خواهیم داشت.


10 دقیقه


77

78-