یادگیری جامع CSS - Learn CSS

Cascading Style Sheets (CSS) یک زبان صفحه است که به شما امکان می دهد ظاهر صفحات وب خود را کنترل کنید. در این دوره عملی، کریستینا تروونگ مفاهیمی را که پایه و اساس CSS را تشکیل می دهد، نشان می دهد و آنچه را که باید برای تغییر CSS موجود و نوشتن خود بدانید باید بدانید، توضیح می دهد. کریستینا توضیح می دهد که چگونه می توان رنگ ها و سایر عناصر طراحی را اضافه کرد تا صفحات وب شما فراتر از متن سیاه در زمینه سفید باشد. او نحوه استفاده از انتخاب کننده ها، نحوه تعریف فاصله بین اندازه و اندازه عناصر صفحه و نحوه سبک بندی متن و مدیریت طرح بندی های اساسی با Flexbox و Grid را نشان می دهد. او همچنین کار با انتخاب کننده های پیشرفته، ایجاد طرح بندی سیال و تعیین زمان استفاده از ویژگی های شناور و موقعیت را پوشش می دهد. به علاوه، در پایان دوره، با یک پروژه واقعی - یک صفحه رزومه آنلاین - کنار می روید. اهداف یادگیری نوشتن انتخاب کننده های اصلی تنظیم خواص آبشار و وراثت تنظیم خانواده فونت، اندازه فونت، رنگ متن و موارد دیگر کار با مدل جعبه استفاده از شبکه و Flexbox با استفاده از خواص float و position کار با انتخاب کننده های پیشرفته ایجاد چیدمان های روان

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

شما هرگز خانه ای بدون نقشه نمی سازید، پس چرا بدون برنامه CSS بنویسید؟ یک پایه قوی CSS را مقیاس پذیرتر، قابل استفاده مجدد و قابل نگهداری تر می کند. در این دوره آموزشی با کریستینا ترونگ بیاموزید که چگونه یک سیستم طراحی منسجم و معماری قوی برای پروژه های CSS خود تعریف کنید. کریستینا استراتژی هایی را به اشتراک می گذارد تا به توسعه دهندگان کمک کند تا جریان کار خود را از پایین به بالا تصور کنند. تکنیک‌هایی را برای سازماندهی و فهرست‌بندی استایل‌ها، استفاده از چارچوب‌های منبع باز مانند Bootstrap و ذخیره الگوها و اجزای رابط کاربری بیاموزید. کریستینا همچنین نحوه معماری CSS را برای قابلیت استفاده مجدد، با استفاده از قالب‌بندی استاندارد، کلاس‌ها، قراردادهای نام‌گذاری و قالب‌ها نشان می‌دهد. این تکنیک ها به کاهش پراکندگی که در توسعه وب به نظر می رسد کمک می کند و به شما کمک می کند تا به یک طراح کارآمدتر و سازنده تبدیل شوید. اهداف یادگیری مزایا و معایب سیستم های طراحی چارچوب های منبع باز برنامه ریزی یک سیستم طراحی الگوهای UI و کتابخانه های مؤلفه راهنمای سبک ساخت معماری CSS قوانین قالب بندی استفاده از کلاس های استاندارد شده، قراردادهای نامگذاری و قالب ها

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

ماژول CSS Flexible Box Layout (معروف به Flexbox) یک راه حل ساده برای بسیاری از مشکلات طراحی و چیدمان که طراحان و توسعه دهندگان وب از زمان ظهور CSS با آن روبرو بوده اند ارائه می دهد. اکنون که ماژول در حال آماده شدن برای مرحله اصلی است، وقت آن است که ببینیم چه کاری می توانیم با آن انجام دهیم. این دوره نحوه استفاده از جعبه‌های انعطاف‌پذیر برای ایجاد طرح‌بندی‌های واکنش‌گرای پیشرفته را نشان می‌دهد. Morten Rand-Hendriksen بیننده را به گشت و گذار در Flexbox می برد و قطعه کدهای عملی را ارائه می دهد که می توانند با خیال راحت در تقریباً هر وب سایتی پیاده سازی شوند. او همه اینها را در یک سایت جام مقدس با چیدمان مبتنی بر کارت، منوهای محتوای ترکیبی و اجزای تعاملی که به بازدیدکنندگان امکان انتخاب در مورد آنچه را که می بینند ارائه می دهد، قرار می دهد. اهداف یادگیری ایجاد منوهای مجهز به Flexbox ساخت یک طرح کارت پاسخگو علامت گذاری و طراحی طرح جام مقدس تغییر نمایشگرها نمایش و پنهان کردن نوار کناری محتوای متحرک

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

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

هر طرح CSS به ویژگی نمایش متکی است تا قوانین اساسی را برای نحوه ارائه محتوا به آن بگوید. در این دوره، مربی Jen Kramer توضیح می‌دهد که چرا ویژگی صفحه نمایش آنقدر مهم است و شما را با مقادیر اصلی نمایشگر و مقادیر نمایشگر جدیدتر آشنا می‌کند که باید برای استفاده موثر از این ویژگی درک کنید. او در مورد عناصر سطح درون خطی و مقدار نمایش درون خطی بحث می‌کند. وی عناصر سطح بلوک، مقدار نمایش بلوک و نحوه قرار دادن عناصر درون خطی و مسدود کردن در HTML را پوشش می‌دهد. او نحوه استفاده از `display: none` و `visibility: hidden` را برای پنهان کردن محتوا توصیف می‌کند. سپس او به مقادیر نمایش جدیدتر می‌پردازد، مانند مقادیر انعطاف پذیر و شبکه، ویژگی جریان ریشه، بلوک درون خطی، جداول و موارد لیست. او با توصیه‌هایی در مورد یادگیری بیشتر HTM و CSS دوره را به پایان می‌رساند.

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

تایپوگرافی دیجیتال مدت‌هاست که نوید انعطاف‌پذیری چشمگیر را داده است، اما فقط تا حدی آن را ارائه کرده است. بله، فونت‌هایی که تغییر اندازه می‌دهند عادی شده‌اند، و ما یاد گرفته‌ایم که در یک خانواده انتظار تغییرات متعدد را داشته باشیم، اما تعیین دقیق ترکیب‌ها دشوار است. فونت‌های جدید و مشخصات CSS جدید این را تغییر می‌دهند، اما به توسعه‌دهندگان اجازه می‌دهند تا محورهای زیادی را فراتر از اندازه قلم مشخص کنند. اکنون ایجاد صفحات جذاب و متنوع با استفاده از تنها یک فونت به عنوان پایه بسیار ساده تر است. در این دوره، Morten Rand-Hendriksen نحوه استفاده از فونت‌های متغیر را برای ایجاد طرح‌ها با حفظ استفاده کارآمد از پهنای باند نشان می‌دهد. اصول اولیه فونت های متغیر - که به شما امکان می دهد یک فایل فونت را دانلود کنید و آن را در صورت نیاز تغییر دهید - و همچنین نحوه استفاده از آنها در عمل و پشتیبانی از سازگاری با عقب را بررسی کنید. اهداف یادگیری فونت های متغیر چیست؟ محورهای تغییرات وزن، عرض، مایل و مورب ایجاد محورهای تغییر سفارشی برای فونت های متغیر اضافه کردن یک فونت متغیر با استفاده از ویژگی font-variation-settings استفاده از ویژگی های سفارشی برای یک ظاهر طراحی راحت تر طراحی تایپوگرافی در مرورگر ارائه فونت های بازگشتی برای مرورگرهای قدیمی

Scrolling قبلاً بسیار ابتدایی بود - بالا و پایین و گاهی اوقات در کنار هم. اکنون Scrolling جایگاه بیشتری در پیمایش دارد و CSS به شما امکان می‌دهد انیمیشن‌ها را به Scrolling متصل کنید و در نتیجه فرصت‌های جدیدی برای تعامل ایجاد کنید. این دوره نشان می‌دهد که چگونه توسعه دهندگان وب و توسعه دهندگان برنامه می‌توانند از اسکرول و اختلاف منظر برای برنامه ریزی سبک‌های جدید رابط استفاده کنند. مربی Ray Villalobos نحوه سفارشی‌سازی CSS برای رفتارهای پیمایشی، ایجاد انیمیشن‌های CSS، ایجاد انیمیشن‌های مبتنی بر پیمایش، استفاده از ScrollMagic، tween و استفاده از (GreenSock Animation Platform (GSAP را نشان می‌دهد. وی کلاسهای pseudo، عناصر، استفاده از خصوصیات تبدیل، توالی، اختلاف منظر با JavaScript و موارد دیگر را پوشش می‌دهد.

وب سایت های بصری جالب و پویا ایجاد کنید. یاد بگیرید چگونه برای ایجاد افکتهای متحرک و اشیاء 3D از تبدیل و انتقال در CSS استفاده کنید. با مدرس پاتریک کری، همراه شوید، تا به شما نشان دهد که چگونه تبدیل و انتقال بین خواص مانند رنگ، پس زمینه، opacity، و موقعیت قرار می گیرد و چگونه زمان و طول مدت انتقال را تنظیم کنید. پاتریک توضیح می دهد چگونه تحولات 2D، مانند مقیاس، شکاف، و چرخش، و همچنین تحولات در 3D انجام میشود. او نشان می دهد که چگونه اشیا را در محور X، Y و Z تغییر دهید. چشم انداز استفاده و ایجاد اشیاء 3D مانند مکعب های متحرک. صفحات نمایشی تعاملی با فایل های تمرینی همراه هستند، بنابراین می توانید آنچه را که پس از هر ویدیو آموخته اید تمرین کنید. اهداف یادگیری اعمال انتقال CSS مدیریت زمان گذار ایجاد تحولات دو بعدی چرخش و مقیاس بندی به صورت سه بعدی کار در فضای سه بعدی

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

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