Htmlطراحی سایت

استفاده از استایل خارجی برای طراحی صفحات HTML

استفاده از استایل خارجی برای طراحی صفحات HTML

با سلام خدمت تمامی کاربران سایت زرین هور

در این جلسه میخواهیم اموزش اضافه کردن یک برگ شیوه ی ابشاری یا همان

css رو به صفحه html سایت خود بررسی کنیم .

در واقع هدف از این کار این است که بتوانیم برای تمامی عناصر درون سایت خود style بدهیم

که ما با چند روش میتوانیم این کار را انجام دهیم .

از اونجایی که این روش ها کمی با یک دیگر فرق دارند,

بخاطر همین ما در چند جلسه این چند روش رو بررسی خواهیم کرد

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

من در این اموزش یک برگه شیوه ابشاری (css) رو به صفحه html

خود اضافه میکنم و از دو سند index.html و style.css استفاده میکنم

استفاده از استایل خارجی برای طراحی صفحات HTML

اول به بررسی کد هایی که در صفحه Html نوشتیم میپردازیم :

ht2

حالا کد هارو بررسی میکینیم

استفاده از استایل خارجی برای طراحی صفحات HTML

توضیح کدهای بالا:

  1. <DOCTYPE html!> به معنای شروع کد نویسی html 5 هستش
  2. تگ دو طرفه <html> برای شروع کدنویسیی به زبان html هستش
  3. تگ دو طرفه  <head> برای اضافه کردن یک عنوان به سایت “اموزش طراحی وب” و اضافه کردن یک صفحه css به سند html است
  4. اما مهمترین قسمت که در عکس در یک کادر سبز رنگ قرار گرفته این است که صفحه css رو به سند html  ما اضافه میکند
  5. تگ یک طرفه link که شامل سه خاصیت است :
  • خاصیت rel که برابر با stylesheet است به معنای ارجاع به یک برگه ابشاری (css) است
  • خاصیت type که برابر با text/css است در واقع نوع برگه ابشاری ما text/css است
  • و خاصیت href که برابر با style.css است به مکانی در پروژه ما اشاره میکند که نامش style.css است

حال

که بررسی کردیم چگونه یک برگه شیوه ابشاری رو به سند html خود اضافه کنیم ;

برای اینکه اطمینان بیابیم که واقعا ارتباط بین این دو صفحه ایجاد شده است ,

در سند html چند عنصر ایجاد میکنیم و صفحه css به آنها style میدهیم

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

عناصری که من ایجاد کردم یک div (بخش) است

که در داخل آن  یک جدول قرار گرفته است  که در آن دو تا فیلد متنی قرار دارد

که در یکی باید نام را وارد کنیم و در دیگری یک رمز را باید وارد کنیم .

ht4

حالا میخوایم برای div رنگ و اندازه تعیین کنیم.

ht5

در اینجا چند تا کد هست که بررسشون میکنیم :

  1. تگ دو طرفه <body> که بدنه سایت ما هست و تمامی کد ها درون ان قرار میگیرند
  2. یک تگ دو طرفه <center> که باعث میشه عنصر من در وسط قرار بگیرد
  3. یک تگ دو طرفه <div> که برای ان یک کلاس به نام form گذاشتیم تا به توانیم با استفاده از ان در برگه شیوه ابشاری style هارو وارد کنیم
  4. تگ دو طرفه <table> که حط دور ان صفر هستش
  5. تگ دو طرفه <tr> که یک سطر در جدول ایجاد میکند
  6. تگ دو طرفه <td> که یک ستون در جدول ایجاد میکند
  7. و در نهایت یک تگ یک طرفه <input> که فیلد متنی رو برای nam ایجاد میکند که برای ان یک کلاس به نام form گذاشته ایم و همین کار رو یک بار دیگر انجام میدهیم تا یک فیلد متنی دیگر برای pass ایجاد کنیم

حالا که به بررسی عناصر که در سند html وجود دارد پرداختیم الان به بررسی صفحه css میپردازیم

ht6

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

  1. form.  : د ر واقع form نام کلاسی است که برای div قرار دادیم و   .  نیز نماد کلاس است
  2. یک پس زمینه که رنگ ان ۵۵۵۵۵۵# است رو برای div انتخاب کردم
  3. حد اکثر پهنا برای div برابر است با ۳۰۰px و همین طور ارتفاع برابر با ۸۰px است
  4. یک فاصله در بین جدول و خط دور div به اندازه ۲۰px ایجاد کردم
  5. و همین طوزر یک خط دور که به صورت نقطه نقطه است نیز ایجاد کرده ام

یه نگاه به سایت میندازیم تا ببینیم که چه اتفاقی افتاده

ht7

حالا به بررسی کد های مربوط به فیلد های متنی میپردازیم

ht8

  1. fild. یک کلاس است که برای input در صفحه html ایجاد کردیم
  2. یک پس زمینه با رنگ ۹۹۹۹۹۹# برای بدنه فیلد متنی گذاشتم
  3. fild:hover. یعنی زمانی که ماووس روی فیلد متنی قرار گرفت کد های مربوط به fild:hover. رو جایگزین کد های مربوط به fild. بکن
  4. یک پس زمینه با رنگ ffffff# یا همان رنگ سفید گذاشتم

خب دوباره یک نگاه به سایت میندازیم

ht9

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

الان من ماووس رو روی فیلد بالای قرار میدم تا رنگ ان به سفید تبدیل شود

ht10

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

امیدوارم که از این اموزش لذت برده باشید.

آرزو حسینی

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

نوشته های مشابه

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

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

دکمه بازگشت به بالا