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

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

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

Free-Learn

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

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

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

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

  1. روش خطی یا درون خطی یا اینلاین یا Inline
  2. روش داخلی یا درون صفحه ای یا Internal
  3. روش خارجی یا مجزا یا External

که در ادامه بطور کامل این روش هارو آموزش خواهم داد.

Free-Learn

آموزش روش استایل نویسی خطی یا Inline

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

مثال شماره ۱ :

امتحان کنید

مثال شماره ۲ :

امتحان کنید

Free-Learn

آموزش روش استایل نویسی داخلی یا Internal

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

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

مثال :

امتحان کنید

Free-Learn

آموزش روش استایل نویسی خارجی یا مجزا یا External

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

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

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

خب پس ما الان دستورات CSS مون رو بصورت مجزا در درون یک فایل CSS داریم که این فایل CSS برای مثال اسمش my-style هست. حالا میخوایم این فایل رو به فایل HTML مون متصل نماییم.

تکه کد زیر رو در بین تگ Head صفحه وبمون قرار میدیم :

که در صفت href باید آدرس کامل و دقیق فایل CSS مون رو قرار بدیم.

مثال : قرار دادن فایل CSS از طریق آدرس دهی نسبی

امتحان کنید

مثال شماره ۲ : قرار دادن فایل CSS از طریق آدرس دهی مطلق

امتحان کنید

Free-Learn

اولویت بندی روش های بالا بصورت زیر می باشد : (یعنی اینکه اولویت اجرای دستورات با کدام روش هست)

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

امتحان کنید

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

Free-Learn

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

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

Free-Learn

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