post

آموزش CSS – بخش یک (کلیات)

بالاخره لحظه موعود فرا رسید و کم کم داریم وارد دنیای زیبای CSS میشیم، دنیایی که وقتی با HTML ترکیب بشه، زیباترین طرح ها رو براتون به ارمغان میاره، پس در ادامه با من همراه باشید.

آنچه گذشت

در ۴ بخش قبلی تا حدودی با HTML آشنا شدیم:

اگه این بخش ها رو مطالعه کردید، ادامه مطالب این پست براتون کاملا قابل فهم و آسونه؛ در غیر اینصورت اول پستهای بالا رو مطالعه کنید و بعد برای ورود به CSS به ما ملحق بشید.

 

مقدمه

HTML در حالت انفرادی یک زبان بی روحه؛ بدین معنا که یکسری متن و عکس و ستون و بلوک و.. که بصورت نامنظم و درهم در کنار هم قرار گرفتن. برای اینکه به این اجزا نظم و ترتیب بدیم و بهشون رنگ و لعاب ببخشیم از CSS استفاده می کنیم(در یک کلمه اگه بخوام منظورمو بیان کنم یعنی به همه این اجزا استایل میدیم).

انواع استایل دهی

در حالت کلی هر یک از اجزای HTML رو به ۳ صورت میشه استایل دهی کرد:

  • در خط (inline): همونجایی که محتوا رو وارد می کنید، بهش استایل بدین ( مثل ویرایشگرهای متنی که برای متن، رنگ و فونت و اندازه و … تعیین می کنید، این نوع استایل دهی از نوع در خط هست).
  • داخلی (internal): استایل رو بصورت یک قسمت جداگانه، داخل همون فایل HTML تعریف کنید.
  • خارجی (external): استایل رو در یک فایل جداگانه تعریف می کنید و بعد آدرس اون فایل رو داخل فایل HTML  قرار میدین تا HTML با مراجعه به اون آدرس استایل رو فراخوانی بکنه(این نوع از استایل دهی، پرکاربردترین روش استایل دهیه و اگه میخواین یه طراح حرفه ای باشید از همین حالا از این روش استفاده کنید).

 

استایل دهی inline

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

<h1 style="color:red;">رنگ این عنوان قرمزه</h1>

نکات آموزشی

  • در هرجای صفحه این کد رو قرار بدیم، یک عنوان با رنگ قرمز به نمایش در میاد.
  • در حالت inline استایل بصورت ویژگی یک تگ به نمایش در میاد (همون قانون داخل تگ اول، نام ویژگی=”” رو رعایت می کنیم).

استایل دهی internal

<head>
<style>
h1 {
color: red;
}
</style>
</head>

نکات آموزشی

  • در این روش استایل دهی، هر استایلی که تعریف بکنیم به کل تگ های موجود اختصاص پیدا میکنه ( هر تگ h1 که داخل صفحه باشه به رنگ قرمز نشون داده میشه).
  • در حالت internal برای استایل دهی از تگ <style> استفاده می کنیم و چون این تگ از نوع تگ های تنظیماتی محسوب میشه پس داخل تگ <head> قرار میگیره.

استایل دهی external

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

نکات آموزشی

  • در این نوع از استایل دهی، تمامی دستورات استایل دهی رو داخل یک فایل به اسم style.css (هر اسمی که دلتون میخواد میتونین وارد کنید، اما اسم رایج و پرکاربردش همینه) ذخیره می کنیم و بعد آدرس اون فایل رو داخل تگ <link>  و درون href وارد می کنیم.
  • تگ <link> هم یک تگ انفرادی مانند <img>  و </br> هست و مکررا برای آدرس دهی به بخش های مختلف قالب از اون استفاده می کنیم، پس تا همین حد به توضیح دربارش اکتفا می کنم چون در طول مسیر کاملا باهاش آشنا میشید.

 

جمع بندی

ظرف همین چند دقیقه با کلیات CSS به خوبی آشنا شدیم، شاید اگه میخواستین این اطلاعات رو از جای دیگه ای بدست بیارید بایستی ۳ یا ۴ پست طولانی رو مطالعه می کردین، اما همونطور که روز اول هم بهتون قول دادم، هدفم اینه که از بیان مطالب تئوری که هیچ کاربری براتون نداره صرف نظر کنم و هرچه سریعتر وارد دنیای طراحی وب بشیم. اگه یه دفعه دیدین چند جلسه دیگه بهتون گفتم HTML و CSS تموم شد زیاد متعجب نشید 🙂 با من و مدرسه کوچک تیتکا همراه باشید.

 

پ.ن : دوستانی که در طول این آموزشها با ما همراه هستند لطفا زیر پستها، یک راه ارتباطی مثل آیدی تلگرام یا … بذارن، چون پس از اتمام آموزش ها قصد دارم از خود شما در طراحی ها و پروژه ها کمک بگیرم.

 

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

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