امیر موسوی

طراح و گسترش‌دهنده وب

HTML Style – CSS

به نام خدا

از روز اول که شروع کردم به نوشتن آموزش‌ها، همیشه در گوشه و کنار اشاره‌ای کردم به کلمه CSS و گفتم که در آینده باهاش آشنا میشیم. و امروز بالاخره وقتش رسیده که این کلمه رو معنی کنیم و وارد دنیای قشنگی بشیم که CSS میتونه خلق کنه!

 CSS = Cascading Style Sheets

شیوه‌نامه‌ی آبشاری(!)

همونطور که خودتون هم دیدید تا اینجا هر کدی که نوشتیم حاصلش یه متن خشک و مشکی توی زمینه سفید بود و یا در مورد عکس‌ها، یه چهارگوش با لبه‌های تیز. و جالبه که همه این عنصرها چسبیده بودن به گوشه صفحه! :|

دلیل این اتفاقات اینه که HTML به خودی خود هیچ شکل و شمایل خاصی نداره. یه سری چیزهای از پیش تعریف شده است. اما CSS به ما این امکان رو میده تا به هر عنصری، شکل و شمایل دلخواهمون رو بدیم و این یعنی همون HTML Style!

زیبا سازی HTML با CSS

قبل از این که با CSS و کاربردهاش آشنا بشیم لازمه که روش اضافه کردنش به عناصر HTML رو یاد بگیریم. به طور کلی سه روش وجود داره:

  • درون خطی (Inline) : در این روش از یک صفت به نام style در داخل تگ آغازین استفاده میکنیم.نمونه:
  •  درونی (Internal) : در این روش یک عنصر و یک تگ به نام <style> رو به قسمت <head> سند اضافه می کنیم. نمونه:
  • بیرونی (External) : کدهای CSS رو در داخل فایل‌های جداگانه‌ای ذخیره می‌کنیم و بعدا به HTML میگیم برو به این آدرس و این فایل رو به خودت اضافه کن! نمونه‌اش رو ببینید:
روش External رایج‌ترین شیوه افزودن CSS به صفحات HTML محسوب میشه. استفاده از فایل بیرونی به شما کمک میکنه توی کارهاتون نظم داشته باشید.

مقایسه بود و نبود CSS

مقایسه بود و نبود CSS

استایل درون خطی (Inline Style)

این روش وقتی به کار میاد که شما بخواید یه افکت منحصر بفرد به یک عنصر بدین. دقت کنید که استایل درون خطی از صفت یا attribute به نام style استفاده میکنه.

به نمونه‌های زیر نگاه بندازید و آزمایششون کنید:

نمونه زیر رنگ پاراگراف و حاشیه سمت راستش رو به اندازه ۲۰px تغییر میده.

آزمایش کنید

CSS Background Color

برای تغییر رنگ پس زمینه یک عنصر از background-color استفاده می‌کنیم. در نمونه زیر پس‌زمینه عنصر body به رنگ خاکستری روشن درمیاد.

آزمایش کنید

CSS Font Family

برای اینکه فونت یه عنصر رو عوض کنیم از font-family استفاده می‌کنیم.توجه: نمونه زیر از فونت‌های پیش‌فرض سیستم استفاده میکنه. برای استفاده از فونت‌های دیگر مثل فونت‌های سری B باید از روشی به نام font-face کمک بگیریم که ایشالا در آینده توضیح میدم.

آزمایش کنید

نکته: ویژگی‌هایی مثل bgcolor یا تگ <font> در HTML5 معتبر نیستن!

CSS Font Size

اندازه فونت رو با استفاده از font-size بزرگ یا کوچیک می‌کنیم. اندازه فونت‌ها رو میشه با درصد، پیکسل (px) و … مشخص کرد. در نمونه زیر از درصد استفاده شده.

آزمایش کنید

CSS Font Color

رنگ یه نوشته توی صفحه خیلی مهمه. چون در جلب توجه و تأثیرگذاری خیلی مؤثره. از color برای تغییر رنگ متن استفاده می‌کنیم. دقت کنید که ما چیزی به اسم font-color نداریم!

آزمایش کنید

CSS Text Alignment

توی وب یه سری چیزا باید راست چین باشن یه سریا چپ‌چین. گاهی هم یه سریا مثل عنوان‌ها وسط چین. اینجور وقتا از text-align استفاده می‌کنیم.

آزمایش کنید

با معرفی ویژگی text-align ، تگ <center> به کلی منسوخ شد.

استایل درونی (Internal)

وقتی بخواهیم برای تمامی عنصرهای یک صفحه، یه استایل مشترک رو تعریف کنیم از شیوه استایل درونی استفاده می کنیم. برای تعریف یه استایل درونی کافیه که یه تگ توی قسمت <head> صفحه درست کنیم. به نمونه زیر نگاه کنید:

 آزمایش کنید

 

استایل بیرونی (External)

بهترین استفاده استایل بیرونی برای وقتیه که شما بخواهید به تعداد زیادی صفحه استایل بدین. با وجود استایل های بیرونی شما میتونید ظاهر یه سایت رو کلا عوض کنید؛ اونم فقط با تغییر دادن یه فایل!!! استایل بیرونی در قسمت <head> تعریف میشه اما داخل تگ <link>! . نمونه زیر رو ببینید:

 آزمایش کنید

برچسب ها و صفات منسوخ (خز شده!)

توی HTML 4 از یه سری تگ ها و عنصرها برای استایل دادن به صفحات استفاده میشد که این تگ‌ها و عنصرها توی نسخه های جدیدتر HTML خز شدند.

نمونه تگ های منسوخ

نمونه صفات (attributes) منسوخ

 

برای مشاهده یه لیست کامل از تگها و عنصرهای خز شده به سایت Tutorialspoint مراجعه کنید.

جمع بندی (Conclusion)

در پایان این بخش توجه شما را به نکات زیر جلب میکنم:

  • برای استایل درون خطی از صفت style در HTML استفاده می‌کنیم.
  • برای رنگ پس زمینه هر عنصری از background-color در CSS استفاده می‌کنیم.
  • برای شکل فونت‌ها از font-family در CSS استفاده می‌کنیم.
  • برای اندازه فونت‌ها از font-size در CSS استفاده می‌کنیم.
  • برای تراز کردن یا چینش نوشته ها از text-align در CSS استفاده می‌کنیم.
  • از عنصر <style> برای تعریف استایل درونی در HTML استفاده می‌کنیم.
  • از عنصر <link> برای تعریف استایل بیرونی در HTML استفاده می‌کنیم.
  • از قسمت <head> فایل HTML هم برای نگه داشتن <style> و <link> استفاده می‌کنیم.

این آخری رو اگه گیج شدید مشکلی نیست. بعدا بیشتر توضیح میدم. فقط یه دقت بکنید اونجا که گفتم در HTML یعنی باید بر طبق قواعد HTML (تگ آغازین، صفت و …) ازشون استفاده کنید. جایی هم که گفتم در CSS به همین ترتیب. البته قواعد CSS رو در آموزش های بعد یاد میگیرید.

در زیر لینک چندتا خودآزمایی از سایت W3Schools براتون آوردم که پیشنهاد میکنم حتما ببینید و سعی کنید بدون راهنمایی چیزی رو که در سمت راست تصویر از شما خواسته، بهش پاسخ بدین.

خودآزمایی ۱  خودآزمایی ۲  خودآزمایی ۱  خودآزمایی ۲

 

دسته‌بندی‌ها: HTML | آموزش

تفاوت سیستم ۳۲ بیت و ۶۴ بیت » « HTML Comments – توضیحات اضافی در سند HTML

5 دیدگاه

  1. mer30 .vaghean aliiiiiiiii bood . estefade kardam.

  2. بالاتر توضیح داده بودید :) من بد خونده بودم!

  3. سلام. دقیقا مبحث استایل بیرونی رو نفهمیدم. یعنی مثلا چرا h1 آبیه و p سبزه و … . این یعنی جای دیگه ای دستورها تعریف شده و لینک داده شده به همون جا؟

پاسخ دادن به sh.d لغو پاسخ

نشانی ایمیل شما منتشر نمی‌شود.

*

5 × دو =

کپی رایت © سال ۱۳۹۴ خورشیدی | امیر موسوی

پوسته از Anders Norenبالا ↑