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

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

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

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

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

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

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

مثال شماره ۱ : ( کلیک کنید )

مثال شماره ۲ : ( کلیک کنید )

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

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

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

مثال از روش داخلی ( کلیک کنید )

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

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

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

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

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

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

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

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

مثال شماره 1 : قرار دادن فایل CSS از طریق آدرس دهی نسبی ( کلیک کنید )

مثال شماره 2 : قرار دادن فایل CSS از طریق آدرس دهی مطلق ( کلیک کنید )

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

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

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

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

منبع: سایت آموزشی فری لرن
برای مشاهده آموزش های بیشتر لطفا به سایت مراجعه نمایید.