آموزش HTML به زبان ساده-قسمت ششم:تگ style

آموزش-html-قسمت-ششم

آموزش html قسمت ششم

معرفی style

کلمه style به معنی”سَبک” است. و در واقع این کلمه به سبکِ طراحی هر عنصر اشاره دارد. در بخش های ابتدایی جلسه اول آموزش گفتیم که طراحی ظاهر عناصر HTML به وسیله CSS که برگرفته از واژگان Cascading Style Sheet است، انجام می‌شود. ترجمه فارسی این عبارات به صورت “ورقه‌ی سبک آبشار” است. برای اینکه دلیل این نام گذاری را متوجه شوید بهتر است تا انتهای این آموزش را مطالعه نمایید.

استایل دهی به یک یا چند عنصر

برای اینکه به یک یا چند عنصر تعدادی ویژگی یا style را نسبت دهیم دو راه داریم. راه اول این است که درون تگ باز آن عنصر، عبارت ( “”=style ) را بنویسیم و درون دابل کوتیشن ها استایل های خود را تنظیم کنیم. راه دوم این است که از تگ <style> استفاده کنیم که هر دو روش را به طور کامل توضیح خواهیم داد.

راه اول: نوشتن عبارت style درون عنصر

در این روش ما باید درون تگ باز هر عنصر، عبارت style را بنویسیم و بعد از آن یک مساوی و یک جفت دابل کوتیشن قرار دهیم. و استایل های خود را درون دابل کوتیشن تنظیم کنیم. اگر از برنامه DreamWeaver استفاده می‌کنید. می‌توانید تنها دو حرف اول کلمه style را بنویسید و بعد از آن کلید Enter را فشار دهید تا لیست برخی style های رایج را تماشا کنید.

آموزش HTML به زبان ساده-قسمت ششم:تگ style

گستره style ها بسیار زیاد است و باید آنها را در دوره آموزش CSS به زبان ساده آموزش ببینید. اما در حال حاضر به شرح چند استایل می‌پردازیم. برای اینکه با نحوه استایل دهی از طریق روش اول آشنا شوید به جعبه کد زیر توجه فرمایید.

See the Pen YzKjaqa by amir (@amir5250) on CodePen.0

در کد های بالا با استفاده از style های font-size و font-family به ترتیب سایز و نوع فونت قلم را تعیین کردیم. و همچنین با استفاده از ویژگی direction جهت پاراگراف را با مقدار rtl که به معنی راست به چپ(right to left) است، تعیین نمودیم. ویژگی background نیز به تعریف یک پس زمینه برای عنصر پرداخته است.

اما نوشتن style یک سری قواعد دارد که باید آنها را رعایت کنید:
* تمامی style ها باید درون دابل کوتیشن قرار بگیرند.
* هر style دارای یک ویژگی و یک مقدار است. که این دو با استفاده از دو نقط ( : ) از هم جدا می‌شوند.
* برای جدا کردن استایل ها از هم دیگر باید از سمی کالن ( ; ) استفاده کنید.
* برخی از مقادیر دارای واحد هستند که بین مقدار و واحد نباید فاصله وجود داشته باشد.(نکته1 را مطالعه کنید)

نکته1: اگر در کد بالا ویژگی font-size را در نظر بگیریم، این ویژگی دارای یک مقدار است. این مقدار برابر32 قرار داده شده است. و همچنین این مقدار، دارای واحد px که برگرفته از کلمه pixel است، می‌باشد. حال باید توجه کنید که میان واحد و مقدار نباید فاصله وجود داشته باشد زیرا در این صورت این استایل توسط سیستم شناخته نمی‌شود. به مثال زیر توجه کنید:

See the Pen QWLBmvL by amir (@amir5250) on CodePen.0

در زبان HTML برخی از رنگ ها تعریف شده اند. برای مثال برای اینکه رنگ یک متن یا پس زمینه یک عنصر را رنگی کنید می‌توانید از عباراتی نظیر red یا blue یا skyblue و… استفاده کنید اما برای اینکه رنگ های خاصی را به عناصر بدهید باید از تعریف رنگ هگزا دسیمال استفاده کنید.

راه دوم: استفاده از تگ‌های <style>

برای استفاده از این روش باید با دو واژه جدید class و id آشنا شوید. دو حرفی id برگرفته از کلمه identity به معنی “هویت” است. واژه class نیز به معنی “رده یا سَبک” است. این دو واژه را با ذکر یک مثال ساده توضیح می‌دهیم. تصور کنید از ما خواسته‌اند نمای داخلی یک ساختمان را طراحی کنیم. در این حالت ما می‌توانیم روی دیوارها از کاغذ دیواری یا سنگ یا گچ استفاده کنیم. این قسمت از طراحی ما، هویت طراحی ما را مشخص می‌کنند. یعنی در صورتی که از کاغذ دیواری استفاده کنیم هویت یا id طراحی ما از نوع کاغذی است و در صورتی که از سنگ گرانیت استفاده کنیم، هویت یا id طراحی ما از نوع سنگی است.

تصور کنید که ما می‌خواهیم به عنوان نمای داخلی ساختمان، از کاغذ دیواری استفاده کنیم. حال باید به ویژگی های ظاهری کاغذ دیواری مانند رنگ، جنس، برجسته بودن، ضد حریق بودن و…توجه کنیم و آنها را انتخاب کنیم. با این کار در واقع ما دست به انتخاب یک کاغذ دیواری که سبک خاصی از طراحی را دارد، زده‌ایم. در زبان HTML نیز هر کلاس در واقع یک سبک طراحی برای یک id است.

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

نکته دیگری که در اینجا مطرح است این است که ویژگی‌های id نسبت به ویژگی‌های class الویت دارند. یعنی اگر پس زمینه یک عنصر را با استفاده از id برابر سیاه قرار دادید و با استفاده از class پس زمینه آن را برابر قهوه‌ای قرار دادید، پس زمینه‌ی سیاه که با استفاده از id تنظیم کردید، اجرا خواهد شد.

برای نوشتن یک id درون تگ‌های <style>، شما باید در ابتدا یک ( # ) بنویسید و پس از آن، نام id را بنویسید. این نام دلخواه است و هر نامی که دوست داشتید می‌توانید استفاده کنید. اما باید دقت کنید که این نام باید به زبان انگلیسی باشد و همچنین درنام id نمی‌توان از فاصله استفاده کرد. اما می‌توانید از خط فاصله و اعداد استفاده کنید. به عنوان مثال به چند نمونه صحیح نام گذاری id در زیر توجه کنید:

bezafeh#
bezafeh-ir#
box2box#
bezafeh_ir#

برای تنظیم نام یک کلاس نیز دقیقا قواعد بالا را باید رعایت کنید با این تفاوت که به جای استفاده از ( # ) باید از نقطه ( . ) استفاده کنید. برای نمونه به مثال‌های صحیح نام گذاری class در زیر توجه کنید:

bezafeh.
bezafeh-ir.
box2box.
bezafeh_ir.

حال برای اینکه بیشتر متوجه موضوع شوید بهتر است ابتدا به کد‌های زیر نگاه کنید سپس به ادامه مطلب می‌پردازیم.

See the Pen NWKBVNX by amir (@amir5250) on CodePen.0

با توجه به کد های بالا برای نوشتن id و class درون تگ باز یک عنصر، باید ابتدا واژه id یا class را بنویسیم و پس از آنها یک مساوی و دو عدد دابل کوتیشن قرار دهیم. سپس نام آیدی یا کلاس را بدون نوشتن نقطه یا هشتگ، درون دابل کوتیشن بنویسیم. استایل های نوشته شده را می‌توانیم برای چندین عنصر مختلف استفاده کنیم. و همچنین می‌توانیم فقط از class یا فقط از id برای تعیین ویژگی‌های یک عنصراستفاده کنیم.

نکته ای که بسیار هائز اهمیت است این است که تگ style را حتما باید درون تگ‌های <head> قرار دهیم. اگر آنها را درون تگ‌های <body> قرار دهیم، توسط سیستم شناخته نخواهند شد. و در نتیجه اجرا نمی‌شوند.

استایل دهی با CSS

در پاراگراف اول گفتیم که عبارت CSS به معنی “ورقه‌ی سَبک آبشار” است. با یک نگاه کلی به این نام گذاری متوجه می‌شویم که CSS یک ورقه یا برگه است. برای ایجاد کردن یک وبسایت ما باید تعداد زیادی صفحه ایجاد کنیم که هر صفحه حاوی مقدار زیادی کد نویسی است. اگر ما بخواهیم همه‌ی استایل‌ها را درون هر برگه بازنویسی کنیم مقدار کد‌های صفحات وب ما بسیار زیاد می‌شوند، در نتیجه بارگیری سایت روندی بسیار طولانی خواهد داشت. برای اینکه از این کار جلوگیری کنیم، بهتر است همه‌ی idها و class‌ها را درون یک برگه جداگانه بنویسیم. و با استفاده از یک لینک آنها را در صفحه HTML خودمان فراخوانی کنیم.

به لطف فناوری CSS این امکان برای ما فراهم شده است. درون برگه CSS تمام idها و classها زیر هم و دقیقا شبیه به یک آبشار نوشته شده اند. پس برگه‌ای که حاوی style ها به صورت آبشاری است را اصطلاحا Cascading Style Sheet می‌نامیم که به معنی “ورقه‌ی سَبک آبشار” است.

پس از اینکه استایل های خود را درون یک برگه CSS نوشتیم و آن را ذخیره کردیم. حالا نوبت به فراخوانی آن با استفاده از یک تگ link است. این لینک را باید به شکل زیر استفاده کنید.

<link href="address/style.css" rel="stylesheet" type="text/css">

تگ link یک تگ آزاد است به این معنی که تگ بسته ندارد و فقط حاوی یک تگ باز است. درون تگ link در کلمه href را نوشتیم که برگرفته از واژگان Hypertext REFerence به معنی “منبع فرامتنی” است. درون این ویژگی ما باید آدرس فایل style.css را قرار دهیم. به عنوان مثال در صورتی که فایل style ما درون درایو C باشد باید این گونه آدرس دهی کنیم:

href="file:///C|/style.css"

حروف rel نیز برگرفته از واژه relating به معنی “مربوط” است و با قرار دادن این عبارت درون تگ link و نوشتن stylesheet درون آن گفته ایم که این فایل مربوط به ورقه استایل ها است. بعد از آن از کلمه type به معنی “نوع” را استفاده کرده‌ایم و درون آن (text/css) را نوشته‌ایم. که نوع فایل را به صورت فایل متنی و از نوع CSS تعریف کرده‌ایم.

نکته: مرورگرهای جدید به صورت خودکار می‌توانند نوع فایل را تشخیص دهند اما مرورگرهای قدیمی مانند Internet Explore توانایی تشخیص نوع فایل را ندارند به همین دلیل ما از عبارت type درون تگ link استفاده می‌کنیم تا به مرورگر های قدیمی بگوییم که نوع فایل CSS است.

لینک کردن style.css در DreamWeaver

در جلسه آموزش ایجاد سند HTML یک قسمت را توضیح ندادیم و حال نوبت به توضیح آن رسیده است. در هنگام ایجاد سند HTML در DreamWeaver شما می‌توانید بدون کد نویسی و تنها با چند کلیک، فایل استایل خود را فراخوانی کنید. بدین منظور به عکس زیر توجه کنید.

آموزشhtml به زبان ساده-قسمت ششم:تگ style

کنار کادر قسمت چهارم یعنی (Attach CSS) آیکون یک زنجیر را می‌بینید. با کلیک کردن روی آن یک کادر شبیه به کادر زیر برای شما باز خواهد شد. با زدن دکمه browse می‌توانید به آدرس فایل استایل خود بروید و آن را انتخاب کنید. تا به طور خودکار به صورت یک تگ link درون HTML جدید شما قرار بگیرد.

بارگذاری استایل ها- bezafeh.ir

دقت کنید که نوع اضافه کردن را روی Link قرار دهید. البته می‌توان با استفاده از گزینه Import نیز این کار را انجام داد اما توصیه ما استفاده از Link است.

0 دیدگاه

برای نوشتن دیدگاه ، باید وارد حساب کاربری خود شوید.

قوانین و مقررات ارسال دیدگاه در "به اضافه" را مطالعه کرده و آنها را می‌پذیرم.


نمایش دیدگاه ها
هیچ دیدگاهی وجود ندارد!