این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
نحوه استفاده از دستورات CSS در صفحه وب
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه استفاده از دستورات CSS در صفحه وب با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه استفاده از دستورات CSS در صفحه وب
بطور کلی ما از ۳ روش اصلی میتونیم از دستورات زبان CSS در یک صفحه وب استفاده نماییم :
- استایل خطی یا Inline یا درون تگی
- استایل داخلی یا Internal یا درون صفحه ای
- استایل خارجی یا External یا درون فایلی
Free-Learn
استایل خطی یا Inline یا درون تگی
در این روش ما باید از صفت Style در درون هر تگی که میخوایم براش استایل تعریف کنیم، استفاده نماییم. که آموزش صفت Style رو نیز بصورت جداگانه بطور کامل میتونید مشاهده نمایید.
مثال شماره ۱ : استفاده از دستورات CSS بصورت درون تگی یا Inline
|
1 2 3 4 5 |
<body> <h2 style="text-align:center; background-color:#123456; color:#fff;">سایت آموزشی فری لرن</h2> </body> |
Free-Learn
استایل داخلی یا Internal یا درون صفحه ای
در این روش ما باید دستورات CSS مون رو داخل تگ Style قرار بدیم و تگ Style هم که میدونید در قسمت Head یک صفحه وب قرار میگیرد.
مثال : استفاده از دستورات CSS بصورت داخلی یا درون صفحه ای
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<head> <style> body{ background-color:#f2f2f2; text-align:center; } h2{ color:blue; background-color:#fff; padding:10px; } p{ color:red; background-color:#fff; padding:10px; } </style> </head> |
Free-Learn
استایل خارجی یا External یا درون فایلی
خب در ادامه آموزش نحوه استفاده از دستورات CSS در صفحه وب میخوام شمارو با روش خارجی یا External آشنا کنم.
روش خارجی که دیگه اسمش روشه، یعنی اینکه ما دستورات CSS مون رو در درون یک فایل بصورت مجزا ایجاد کنیم سپس با استفاده از یک خط کد آن را به فایل HTML مون متصل نماییم.
پیشنهاد میکنم حتما آموزش نحوه ایجاد فایل CSS را مشاهده نمایید.
یادگیری نحوه آدرس دهی فایل ها در یک صفحه وب برای یک طراح وب از واجبات می باشد.
خب پس ما میخوایم فایل CSS خارجی مون رو به فایل HTML وصل کنیم، خیلی راحت باید از تگ <link> در تگ هِد <head> یک صفحه HTML استفاده نماییم.
|
1 2 3 |
<head> <link rel="stylesheet" href="style.css"> </head> |
توجه داشته باشید که در قسمت href باید آدرس محل فایل CSS را بصورت کامل و دقیق وارد نمایید، لطفا به مثال زیر توجه نمایید.
آدرس فایل CSS هم باید با توجه به روش های آدرس دهی مشخص شود، مثلا من در مثال زیر از روش مطلق ( یعنی آدرس بصورت کامل از https تا آخرش ) استفاده کردم ولی اگه شما فایل CSS و HTML تون کنار هم هستش کافیه از روش نسبی استفاده کنید.
مثال شماره ۱ : استفاده از روش آدرس دهی مطلق
|
1 2 3 |
<head> <link rel="stylesheet" href="https://files.free-learn.ir/Tryitself/html/learn/files/mystyle.css"> </head> |
مثال شماره ۲ : استفاده از روش آدرس دهی نسبی
|
1 2 3 |
<head> <link rel="stylesheet" href="files/mystyle.css"> </head> |
Free-Learn
اولویت اجرای دستورات CSS
- اولویت اول همیشه با روش خطی ( درون تگی ) که با صفت Style ایجاد می شود می باشد، یعنی اگه مثلا من با استفاده از روش خطی رنگ متن یک تگ رو آبی کردم و دوباره اومدم در قسمت Internal رنگ متن همون تگ رو قرمز کردم، اولویت با آبی هست و رنگ آبی اعمال میشه. ( مثال )
- اولویت دوم با روش Internal و بعدش با خارجی External می باشد.
- اولویت آخر هم باید خوده مرورگر می باشد، یعنی اگه هیچ استایلی از روش های بالا تعریف نشده بود ، مرورگر خودش با پیش فرض هایی که برای تگ ها از قبل تعریف شده، استایل میده.
- حتما و حتما آموزش اولویت هارو از اینجا مشاهده نمایید.
Free-Learn
نکاتی که باید درباره روش های استایل دهی بالا مورد توجه تان باشد :
- روش خطی : روش بهینه ای نمی باشد ، حتی در کش مرورگر قرار نمیگیرد و باعث میشه سرعت بارگذاری صفحه کم بشه.
- روش داخلی : نسبت به روش خطی خیلی بهینه تر می باشد ولی یه عیبی که داره اینه با استفاده از این روش فقط میتوان برای یک صفحه استایل نوشت، یعنی اگه من بخوام از استایل صفحه شماره ۱ تو صفحه شماره ۲ استفاده کنم باید کل دستورات استایل صفحه شماره ۱ رو کپی کنم و داخل صفحه شماره ۲ پیست کنم.
- روش خارجی : بهینه ترین روش ممکن می باشد، برای افزایش سرعت بارگذاری صفحه حتما از این روش استفاده نمایید.
- تو روش خارجی اگه من مثلا ۱۰۰ صفحه داشته باشم و بخوام رنگ زمینه رو عوض کنم فقط کافیه تکه کد رنگ زمینه رو از توی فایل CSS خارجی تغییر بدم تا در تمام ۱۰۰ صفحه اعمال بشه. ولی همینکارو بخوایم با روش داخلی انجام بدیم باید کد تغییر رنگ رو در درون ۱۰۰ صفحه بصورت دستی قرار بدم یا پیست کنم.
