این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.

نحوه استفاده از دستورات CSS در صفحه وب

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

نحوه استفاده از دستورات CSS در صفحه وب

Free-Learn

نحوه استفاده از دستورات CSS در صفحه وب

بطور کلی ما از ۳ روش اصلی میتونیم از دستورات زبان CSS در یک صفحه وب استفاده نماییم :

  1. استایل خطی یا Inline یا درون تگی
  2. استایل داخلی یا Internal یا درون صفحه ای
  3. استایل خارجی یا External یا درون فایلی

Free-Learn

استایل خطی یا Inline یا درون تگی

در این روش ما باید از صفت Style در درون هر تگی که میخوایم براش استایل تعریف کنیم، استفاده نماییم. که آموزش صفت Style رو نیز بصورت جداگانه بطور کامل میتونید مشاهده نمایید.

مثال شماره ۱ : استفاده از دستورات CSS بصورت درون تگی یا Inline

امتحان کنید

Free-Learn

استایل داخلی یا Internal یا درون صفحه ای

در این روش ما باید دستورات CSS مون رو داخل تگ Style قرار بدیم و تگ Style هم که میدونید در قسمت Head یک صفحه وب قرار میگیرد.

یک صفت داریم به اسم صفت Style که در درون یک تگ مورد استفاده قرار میگیرد و یک تگ داریم به اسم تگ Style که در بین تگ های Head و Body قرار میگیرد.

مثال : استفاده از دستورات CSS بصورت داخلی یا درون صفحه ای

امتحان کنید

Free-Learn

استایل خارجی یا External یا درون فایلی

خب در ادامه آموزش نحوه استفاده از دستورات CSS در صفحه وب میخوام شمارو با روش خارجی یا External آشنا کنم.

روش خارجی که دیگه اسمش روشه، یعنی اینکه ما دستورات CSS مون رو در درون یک فایل بصورت مجزا ایجاد کنیم سپس با استفاده از یک خط کد آن را به فایل HTML مون متصل نماییم.

پیشنهاد میکنم حتما آموزش نحوه ایجاد فایل CSS را مشاهده نمایید.

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

خب پس ما میخوایم فایل CSS خارجی مون رو به فایل HTML وصل کنیم، خیلی راحت باید از تگ <link> در تگ هِد <head> یک صفحه HTML استفاده نماییم.

توجه داشته باشید که در قسمت href باید آدرس محل فایل CSS را بصورت کامل و دقیق وارد نمایید، لطفا به مثال زیر توجه نمایید.

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

مثال شماره ۱ : استفاده از روش آدرس دهی مطلق

امتحان کنید

مثال شماره ۲ : استفاده از روش آدرس دهی نسبی

امتحان کنید

Free-Learn

اولویت اجرای دستورات CSS

  • اولویت اول همیشه با روش خطی ( درون تگی ) که با صفت Style ایجاد می شود می باشد، یعنی اگه مثلا من با استفاده از روش خطی رنگ متن یک تگ رو آبی کردم و دوباره اومدم در قسمت Internal رنگ متن همون تگ رو قرمز کردم، اولویت با آبی هست و رنگ آبی اعمال میشه. ( مثال )
  • اولویت دوم با روش Internal و بعدش با خارجی External می باشد.
  • اولویت آخر هم باید خوده مرورگر می باشد، یعنی اگه هیچ استایلی از روش های بالا تعریف نشده بود ، مرورگر خودش با پیش فرض هایی که برای تگ ها از قبل تعریف شده، استایل میده.
  • حتما و حتما آموزش اولویت هارو از اینجا مشاهده نمایید.

Free-Learn

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

  • روش خطی : روش بهینه ای نمی باشد ، حتی در کش مرورگر قرار نمیگیرد و باعث میشه سرعت بارگذاری صفحه کم بشه.
  • روش داخلی : نسبت به روش خطی خیلی بهینه تر می باشد ولی یه عیبی که داره اینه با استفاده از این روش فقط میتوان برای یک صفحه استایل نوشت، یعنی اگه من بخوام از استایل صفحه شماره ۱ تو صفحه شماره ۲ استفاده کنم باید کل دستورات استایل صفحه شماره ۱ رو کپی کنم و داخل صفحه شماره ۲ پیست کنم.
  • روش خارجی : بهینه ترین روش ممکن می باشد، برای افزایش سرعت بارگذاری صفحه حتما از این روش استفاده نمایید.
  • تو روش خارجی اگه من مثلا ۱۰۰ صفحه داشته باشم و بخوام رنگ زمینه رو عوض کنم فقط کافیه تکه کد رنگ زمینه رو از توی فایل CSS خارجی تغییر بدم تا در تمام ۱۰۰ صفحه اعمال بشه. ولی همینکارو بخوایم با روش داخلی انجام بدیم باید کد تغییر رنگ رو در درون ۱۰۰ صفحه بصورت دستی قرار بدم یا پیست کنم.

Free-Learn

دریافت PDF یا پرینت این مطلب