آموزش مقدمه ای بر CSS: سبک های اساسی را به وب سایت نمونه کارها اضافه کنید
Introduction to CSS: Add Fundamental Styles to a Portfolio Website
بنابراین شما مقداری HTML می‌دانید و به آنچه و اسنوپ داگ اعلام می‌کرد علاقه‌مند هستید. گام بعدی در فرآیند وب‌سایت اضافه کردن طراحی به آن ساختار با استفاده از برگه‌های سبک آبشاری (CSS) است.
CSS به ما این امکان را می‌دهد که ارائه‌ای را به صفحه‌ای که فقط HTML است، اضافه کنیم. رنگ می خواهید؟ فهمیدی! اندازه فونت بزرگ و اندازه فونت کوچک می خواهید؟ ما نیز می توانیم آن را انجام دهیم! آیا می خواهید صفحه خود را با Comic Sans تقویت کنید؟ شما آن قدرت را دارید... اگرچه برخی ممکن است استدلال کنند که آیا این ایده خوبی است یا خیر، اما در اینجا قضاوتی وجود ندارد!
برای اینکه هر چیزی که دوست دارید در HTML خود داشته باشید، ابتدا باید نحوه ساختار CSS، نحوه اعمال آن را در صفحه خود و نحوه ایجاد اعلانات برای اعمال قوانین طراحی را بیاموزیم.
آنچه خواهید آموخت
- CSS چیست؟ تفاوت بین HTML و CSS و نحوه ارتباط آنها با یکدیگر را خواهید آموخت.
- ویژگی های CSS. ما به عناصر اصلی CSS و نحوه کدنویسی سبک صفحات خواهیم پرداخت.
- CSS در عمل. نحوه اعمال سبک های اساسی مانند: اندازه فونت، چهره فونت، رنگ ها، پس زمینه و سایر ویژگی های متن در صفحه خود.
آنچه خواهید ساخت:
یک سایت نمونه کارها فقط چهار صفحه ای HTML را می گیریم و آن را به یک سند CSS جدید پیوند می دهیم. ما سبک‌های اولیه را به عناصر خود اعمال می‌کنیم و می‌بینیم که چگونه آنها بر سند HTML ما تأثیر می‌گذارند. ما یاد خواهیم گرفت که آبشار چگونه کار می کند، انواع مختلف انتخابگر، و نحو برای ایجاد قوانین.
در حال حاضر به سراغ طرح‌بندی‌های CSS نخواهیم رفت، زیرا ابتدا باید اصول لازم برای وارد کردن لایه ارائه به پروژه خود را پوشش دهیم. ما خواهیم دید که چگونه افزودن این سبک‌های مختلف به شما امکان سفارشی‌سازی آسان سایت نمونه کارها را می‌دهد و شروع می‌کنیم به دیدن اینکه چگونه با این دانش، امکانات طراحی فراوان است. همچنین قطعاً تصاویری از گربه‌ها نیز وجود خواهد داشت. شاید پانداها هم
ارائه طرح اولیه را از طریق Cascading Style Sheets به سایت نمونه کارها HTML اضافه کنید.
تکلیف
وظیفه شما این است که ارائه طرح اولیه را از طریق برگه‌های سبک آبشاری (CSS) به سایت نمونه کارها HTML اضافه کنید. می توانید فایل فشرده حاوی فایل های HTML را برای سایت نمونه کار Jon Arbuckle دانلود کنید یا می توانید از فایل ها و محتوای خود استفاده کنید. شما سبک های اساسی را برای هر عنصر اعمال خواهید کرد تا ببینید چگونه آنها بر روی یک سند HTML تأثیر می گذارند. این پروژه به شما کمک می کند تا نحوه کار آبشار، انواع مختلف انتخابگر و نحو ایجاد قوانین را بیاموزید. با تمام این دانش، می‌توانید به راحتی هر صفحه HTML را سفارشی کنید تا آن را واقعاً زنده کنید.
قابل تحویل
عکس(های) صفحه نمایش سایت طراحی شده خود را به اشتراک بگذارید. یک پروژه تکمیل شده دستکاری می کند:
- فونت ها
- رنگ
- استایل/ویژگی های متن
- نشانگرهای فهرست
- تصاویر پس زمینه
منابع
- پیوست‌های کلاس را برای نمونه فایل‌های HTML، مراحل گام به گام پروژه، و منابع و پیوندهای اضافی مرور کنید.
به دنبال اطلاعات بیشتر در مورد HTML هستید؟ اولین کلاس Skillshare من را بررسی کنید: !
درس ها Lessons
-
مراحل بعدی Next Steps
-
رنگ متن و رنگ پس زمینه Text Color and Background Color
-
خوش آمدی! Welcome!
-
لیست ویژگی ها List Properties
-
کنترل متن پیشرفته Advanced Text Control
-
CSS چیست؟ What is CSS?
-
مروری بر فایل های کلاس HTML ما Overview of our HTML Class Files
-
نحو و اصطلاحات CSS CSS Syntax and Terminology
-
چگونه CSS را به صفحات خود اضافه کنیم How to Add CSS to our Pages
-
ابزارهای ما را جمع آوری کنید Gather our Tools
-
انتخابگرهای گروه بندی Grouping Selectors
-
تریلر Trailer
-
عیب یابی و بازرس وب Troubleshooting and the Web Inspector
-
ویژگی های فونت Font Properties
-
تصویر پس زمینه Background Image
-
کلاس های پیوند و شبه Link and Pseudo Classes
-
افزودن فایل های CSS در سرتاسر سایت ما Adding CSS Files Throughout our Site
-
مختصات مختصر Shorthand Properties
-
پشتیبانی مرورگر Browser Support
-
نظرات CSS CSS Comments
-
انتخابگرهای CSS اضافی Additional CSS Selectors
-
آبشار The Cascade
-
سبک متن اصلی Basic Text Style
https://donyad.com/d/a2d8
Jenn Lukas
توسعه دهنده و مشاور Front-end
یک مشاور و توسعه‌دهنده فریلنسر با استعداد چندگانه در فیلادلفیا و بنیانگذار Ladies in Tech. من برای می نویسم، ستون نویس .net magazine هستم و در آن مشارکت داشته ام. من در کنفرانس های مختلف از جمله SXSW، An Event Apart و CSS Dev Conference صحبت کرده ام.
تجارب گذشته من از ایجاد شبیه‌سازی‌های آموزشی نیروی دریایی گرفته تا رهبری تیم جلویی در Happy Cog به عنوان مدیر توسعه تعاملی است. من به عنوان یکی از نامگذاری شدم، و می‌توانید من را در توییتر در حال پست کردن اخبار مربوط به توسعه و گربه‌ها پیدا کنید. وقتی سایت‌هایی با بهترین استانداردهای وب ایجاد نمی‌کنم، HTML و CSS را برای پادکست Ladies in Tech آموزش می‌دهم.
نمایش نظرات