طراحی جدول ها در بوت استرپ
جدول ها در Bootstrap جداول ساده‌ی بوت استرپ، دارای padding کم و خطوط افقی برای جدا کردن ردیف ها هستند. برای ایجاد این استایل ساده می توانید کلاس table. را به جدول خود اضافه کنید. مثال:
سیستم Grid در بوت استرپ 4
سیستم Grid در بوت استرپ 4 سیستم grid در بوت استرپ بر اساس flexbox ساخته شده است و به شما اجازه می دهد تا 12 ستون هم در یک صفحه ایجاد کنید.
آشنایی با Bootstrap 4
تایپوگرافی در بوت استرپ 4
تایپوگرافی در بوت استرپ 4 در این قسمت از مجموعه آموزشی Bootstrap 4 می خواهیم به بررسی تایپوگرافی bootstrap ، متون و حالت های مختلف نمایش آن ها بپردازیم.
آموزش قدم به قدم Bootstrap
Bootstrap (بوت استرپ) مشهورترین فریمورک CSS ، HTML و JavaScript برای توسعه ی وب سایت های واکنش گرا و قابل اجرا در دستگاه های موبایل است. این فریمورک یک محصول کد باز و کاملا رایگان است.
استایل Border در CSS
در ادامه آموزش CSS با دستورات مربوط به ساختارلایه ها و باکس ها آشنا خواهید شد. توسط دستورات ساختار و لایه بندی باکس ها در css می‌توانید ظاهر کلیه عناصری را که در صفحه HTML مورد استفاده قرار داده‌اید، تغییر دهید. شما می‌توانید حاشیه ها، ساختار خطوط بیرونی، فاصله از لبه داخلی باکس را به هر آنچه که مد نظر شماست ، توسط این دستورات تغییر دهید. در بخش اول از این دسته آموزش ، به بررسی حاشیه(Border) میپردازیم و دستورات را مورد برسی قرار میدهیم.
تعیین رنگ با استفاده از ()rgb و ()hsl
منظور از تعیین رنگ با تابع rgb چیست؟ منظور از تعیین رنگ با تابع hsl چیست؟ چگونه می‌تونیم بهترین رنگ ها رو با rgb و hsl ایجاد کنیم؟ در این مقاله به صورت کامل با این دو تابع یعنی rgb و hsl آشنا میشیم.
تعیین رنگ با استفاده از مقادیر پیش فرض و HEX
چگونه با استفاده از CSS رنگ صفحه رو تغییر بدیم؟ چگونه رنگ متن رو عوض کنیم؟ مقادیر پیش فرض در رنگ بندی صفحات CSS چه مقادیری هستند؟ منظور از رنگ های HEX چیست؟ در این مقاله به صورت کامل با سوالات مربوط به رنگ بندی صفحات پاسخ میدهیم و با همدیگر با آن ها آشنا می‌شویم.
استایل List در CSS
ستایل لیست ها در css خاصیت های لیست در CSS به شما قابلیت های زیر را ارائه می دهد.
استایل text در CSS
استایل text در CSS در این آموزش ما رنگ متن و انواع ترازبندی‌ها و چگونگی کار آن در CSS را به شما می‌آموزیم.
استایل background در CSS
توسط CSS می‌توانید برای عناصر در صفحات وب پس زمینه قرار دهید. این پس زمینه‌ها می توانند یک تصویر و یا یک رنگ مورد نظر شما باشند. دستوراتی که در CSS برای کار با پس زمینه‌ها وجود دارد عبارتند از:
استایل Tables در CSS
در ادامه آموزش css به ظاهر جداول میپردازیم، ظاهر یک جدول HTML را میتوان به کمک CSS به شکل قابل توجهی بهبود بخشید. برای مثال جدول زیر رادر نظر بگیرید.
استایل Font در CSS
خانواده‌ی فونت (font family) مجموعه فونت هایی که نمایانگر اشکال مختلف یک نوع typeface یا طرح حروف هستند (پررنگی) boldness، اندازه و همچنین سبک یک نوشته یا متن را تعریف می کنند.
اتصال داخلی (internal stylesheet)
منظور از اتصال داخلی چیست؟ چگونه کدهای CSS را درون کد های HTML بارگذاری کنیم؟ در این مقاله می‌خواهیم به نحوه معرفی کدهای CSS به صورت داخلی در HTML بپردازیم.
تعیین رنگ با استفاده از مقادیر ()rgba و ()hsla
منظور از تابع Rgba در رنگ ها چیست؟ منظور از تابع hsla در رنگ ها چیست؟ تفاوت rgba و hsla با Rgb و hsl چیست؟ منظور از alpha چیست؟ در این مقاله با توابع rgba و hsla آشنا می‌شویم.
اتصال خارجی (external)
چگونه یک فایل CSS را در صفحات وب معرفی کنیم؟ نحوه معرفی فایل‌های CSS به صورت خارجی چگونه است؟ در این جلسه به بررسی اتصال خارجی کدهای CSS میپردازیم.
انتخابگر های گروهی
انتخابگر‌ها چه انواعی دارند؟ انتخابگر های گروهی چه نوع انتخابگری هستند؟ چگونه میتوانیم از انتخابگر های گروهی استفاده کنیم؟ در قسمت‌های قبلی با انتخابگر‌های مختلف آشنا شدیم، در این جلسه، اشکال پیشرفته تری از انتخابگر ها رو یاد می‌گیریم و مثال های بیشتری رو باهم تحلیل می‌کنیم.
استایل Link در CSS
سبک دهی به لینک ها می توان لینک ها را به شیوه های مختلف سبک دهی کرد. لینک ها را می توان با هر خاصیت CSS سبک دهی کرد از جمله ی آن میتوان رنگ, نوع فونت و پس زمینه را نام برد.
اتصال درون خطی (inline) و اولویت تاثیرگذاری
اتصال درون خطی یا Inline در جلسه قبلی از بین روش های موجود اتصال کد های CSS با روش اتصال داخلی آشنا شدیم، روش پایانی برای مرتبط ساختن کدهای HTML و CSS، روش اتصال درون خطی هست.
کلاس ها و آیدی ها در CSS
ویژگی ها در css چگونه فراخوانی می‌شوند؟ تفاوت نوع معرفی کلاس‌ها و آیدی ها در css چیست؟ تفاوت کلاس ها آی دی ها در چیست؟ در این جلسه به صورت کامل با این دو خاصیت که در آموزش HTML نیز به آن اشاره کردیم آشنا می‌شویم، در جلسه ی قبلی یعنی آشنایی با Selector ها، مفاهیم اولیه و اصلی این دو رو یاد گرفتیم.
selector در CSS
در جلسه‌ی گذشته، ساختاربندی و اجزای تشکیل‌دهنده‌ی کد CSS رو خلاصه وار معرفی کردیم.در این جلسه، اون‌ها رو به صورت مفصل بررسی می‌کنیم و یاد می‌گیریم!
ساختمان کد در css و اجزای آن
پس از آشنایی با CSS در فصل ۱ حالا در این بخش ساختار کدهای CSS در فصل ۲ رو یاد می‌گیرید و با انتخاب‌کننده آشنا می‌شوید. در حال حاضر نیازی به درک کامل نوع استایل اعمال‌شده نیست چرا که در بخش‌های بعدی به‌طور گسترده انواع استایل‌های عناصر رو آموزش خواهیم داد.
فرق HTML و CSS
قبل از وارد شدن به بحث یادگیری تخصصی، لازمه که یک سری چیزها رو در مورد CSS و HTML بیشتر بدونیم و تفاوتشون رو بررسی کنیم. آیا CSS زبان برنامه‌نویسی است؟
تاریخچه‌ی CSS
بعد از معرفی کامل CSS حالا زمان تعریف تاریخچه و داستان CSS را برایتان توضیح میدهیم.CSS برای اولین بار در ۱۰ اکتبر ۱۹۹۴، توسط Hakon Wium Lie، غرضه شد. در اون سال ها، اینترنت شروع به فراگیر شدن در اکثر جنبه های پیشرفت بشری کرده بود.
آموزش قدم به قدم CSS
وقتی اسم طراحی وب سایت میاد، اولین صحبتی که میاد تو ذهن فرد عادی اینه HTML – CSS باید بلد باشی… خب این CSS که میگیم یعنی چی؟ چه کاری می‌تونیم باهاش انجام بدیم؟ به کمک CSS، چه کار‌هایی می‌تونیم در HTML انجام بدیم؟
form در HTML
تگ form از عناصر مهم و بسیار کاربری HTML است. با تگ form و سایر تگ های موجود برای ایجاد HTML به کار می بریم. برای ایجاد یک فرم HTML با استفاده از تگ form می باشد.
class ها در HTML
با خاصیت class در html قادر خواهید بود به عناصر خود چند استایل اختصاص دهید. در واقع شما کد های style را یکبار برای همیشه می نویسید و هر کجا از کد قصد استفاده از آن استایل را داشتید فقط نام کلاس را صدا می زنید.
Block ها در HTML
تگ
List در HTML
لیست‌ها برای جمع‌کردن و نمایش گروهی اطلاعات هستند تا خواندن آن‌ها آسان شود. در توسعه وب مدرن، لیست ها جزو اجزای اصلی وبسایت‌ها هستند که برای ناوبری و نمایش محتوای اصلی به دفعات مورد استفاده قرار می‌گیرند.
Table در HTML
جداول در برنامه نویسی تحت وب پرکاربرد و مهم هستند. در زبان وب نویسی HTML برای تعریف جدول از تگ
کامنت در HTML
تگ های کامنت به صورت <-- و --!> نوشته می شنود که برای افزودن یک توضیح یا یادآوری و یا اشاره به یک نکته در متن کد صفحات HTML استفاده می شوند. مثال زیر یک کامنت گذاری یک خطی است: