آموزش طراحی سایت با html و css – بخش چهارم


تاریخ انتشار: 6 مرداد 1398 | 10 بازدید

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

لازم به ذکر است که ما در بخش های قبل ابزار  Notepad ++را برای نوشتن کد معرفی کردیم که میتوانید از این سایت دانلود کنید.

استایل نویسی در css

در بخش قبل گفتیم سه روش برای استایل دهی به تگ های html وجود دارد.

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

مثال:

 

آموزش طراحی سایت با html css

 

نکته:

در html اگر یک تگ زیر مجموعه تگ های دیگر باشد،این تگ را بعنوان فرزند تگ اصلی گفته میشود.

به تگ اصلی ، والد یا پدر میگویند.

تگ های فرزند کلیه خصوصیات تگ والد یا اصلی را به ارث میبرند،مگراینکه دارای خصوصیات تعریف شده ای باشند.

مثلا در مثال بالا رنگ زمینه تگ p هم قرمز است.

این روش با دو روش دیگر یعنی استایل دهی درونی و خارجی فرق دارد.

در این دو روش باید ایتدا نام هر تگ مربوطه و سپس شروع به استایل نویسی کنیم.

دومین روش استایل نویسی درونی بود.

به مثال زیر توجه کنید که دارای دو تگ p هست و میخواهیم ببینیم چجوی به این دوتگ رنگ پس زمینه بدهیم.

 

آموزش طراحی قالب سایت با html css

 

با اجرای کد متوجه میشویم رنگ هردو تگ سبز است.

class در css

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

در اینضورت باید کلاس را تعریف و استایل موردنظر را به کلاس نسبت دهیم  و سپس نام کلاسی که میخواهید تگ مورد نظر از آن استایل استفاده کند را در تگ بنویسید.

در آموزش طراحی سایت با css توجه داشته باشید که ابتدای هر کلاس با نقطه (.) نشان داده می شود.

بعنوان مثال کلاس زیر را ایجاد کردیم تا از 4 تگ داده شده بدلخواه به تگ اول و چهارم ، رنگ سبز بدهیم.

بدین منظور ابتدا کلاس دلخواه bgcolor-green تعریف می کنیم سپس استایل background-color:green را به آن می دهیم.

آموزش طراحی وب سایت با html css

مثال:

فرض کنید کلاسی به نام bgcolor-green داریم که قصد داریم این کلاس فقط برای تگ  <p>  قابل اجرا باشد.

مثال دوم برای کلاس

id یا شناسه در class

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

مثال برای id در CSS

گاهی عنصر منحصر به فردی داریم که این عنصر باید دارای شناسه منحصر به فرد باشد.

در اینصورت برای این عنصر  یک id درنظر میگیریم.

ابتدای نام idرا با شارپ(#)مشخص میکنیم.

به مثال زیر توجه کنید:

مثال id برای class

در بالا ملاحظه میشود که مثلا تگ divدارای شماره سریال منحصر به فردی است پی برای آن idدر نظر گرفتیم.

توجه:  مجاز هستیم فقط برای یک عنصر شناسه درنظر بگیریم و تگ های دیگر را نمیتوان با این شناسه مقدار دهیم.

دوره آموزشی پیشنهادی

آموزش فتوشاپ پیشرفته

Photoshop Design Workshop

آموزش کار با فتوشاپ، ابزار دست جادوگران


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

  • زمان: تابستان 99
  • مدت زمان دوره : 5 جلسه 3 ساعته
توضیحات بیشتر و ثبت نام
رویداد Reverse Pitch با همکاری شتابدهنده تریگ آپ

Reverse Pitch Event with TrigUp Accelerator



  • زمان: هفته آخر اردیبهشت ماه 99
  • مدت زمان دوره : یک جلسه سه ساعته
توضیحات بیشتر و ثبت نام
آمادگی برای زندگی دیجیتال در فضای مجازی

Start digital work

از کجا شروع کنم!


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

  • مدت زمان دوره : 5 جلسه 3 ساعته
توضیحات بیشتر و ثبت نام
پانزدهمین هم آفرینی مشهد

Public Art

فرآیند خلاقانه هنردرمانی برای مبارزه با ویروس کرونا


  • کارگاه آموزشی بوم مدل کسب و کار پروژه های شهری
  • کارگاه آموزشی ساخت MVP (کمینه محصول پذیرفتی)
  • کارگاه آموزشی نحوه ارائه پروژه های خلاق شهری و استارتاپی
  • کارگاه اعتبار سنجی استارتاپ ها
  • تیم سازی و ایجاد تیم های کاری
  • بوم طراحی (design canvas)
  • یافتن مسائل در حوزه شهری و کسب و کار ها
  • نحوه ارائه موثر در حوزه دیزاین و مسائل شهری
  • منتورینگ در خصوص حل مسئله
  • منتورینگ در خصوص تعارضات تیمی
  • منتورینگ در خصوص راه اندازی کسب و کار دیجیتال
  • منتورینگ در خصوص هوشمند سازی کسب و کار
  • منتورینگ در خصوص اینترنت اشیا
  • منتورینگ در خصوص رویکرد طراحی تعاملی

  • زمان: شروع از چهارشنبه 25 فروردین ماه 99
  • مدت زمان دوره : 24 روز
توضیحات بیشتر و ثبت نام
چهاردهمین هم آفرینی مشهد

Public Art

توسعه ظرفیت های هوشمند خدمات شهری، فاصله گذاری اجتماعی


  • کارگاه آموزشی بوم مدل کسب و کار پروژه های شهری
  • کارگاه آموزشی ساخت MVP (کمینه محصول پذیرفتی)
  • کارگاه آموزشی نحوه ارائه پروژه های خلاق شهری و استارتاپی
  • کارگاه اعتبار سنجی استارتاپ ها
  • تیم سازی و ایجاد تیم های کاری
  • بوم طراحی (design canvas)
  • یافتن مسائل در حوزه شهری و کسب و کار ها
  • نحوه ارائه موثر در حوزه دیزاین و مسائل شهری
  • منتورینگ در خصوص حل مسئله
  • منتورینگ در خصوص تعارضات تیمی
  • منتورینگ در خصوص راه اندازی کسب و کار دیجیتال
  • منتورینگ در خصوص هوشمند سازی کسب و کار
  • منتورینگ در خصوص اینترنت اشیا
  • منتورینگ در خصوص رویکرد طراحی تعاملی

  • زمان: شروع دوشنبه 25 فروردین ماه 99
  • مدت زمان دوره : 26 روز
توضیحات بیشتر و ثبت نام

ورود به دنیای حرفه‌ای کارآموزی

درخواست کارآموزی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *




مشاوره سریع با ما



دوره های پیشنهادی:
سایر دوره ها