میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

اعمال CSS بر روی تگهای HTML

استایل ها تعیین کننده ویژگی های عناصر مختلف در طراحی وب هستند. استایل css در واقع بر روی کد های html  قرار می گیرد و ویژگی های قسمت های مختلف صفحه وب را تعیین می کنند. تعداد زیادی استایل وجود دارد که هر کدام نقش های مختلفی دارند، اما به طور کلی انواع استایل css را در سه دسته تقسیم می کنند. در این مقاله سعی می کنیم سه نوع اصلی استایل css یعنی استایل های درونی (Inline styles)، استایل جاسازی شده (Embedded styles) و استایل های خارجی (External styles) را به طور خلاصه بررسی کنیم و نکات مثبت و منفی آن ها را نیز شناسایی کنیم.(
  1. برگه های استایل خارجی یا External style sheet
  2. برگه های استایل داخلی یا Internal style sheet
  3. استایل درون تگی یا Inline style

در ادامه به توضیح هر کدام از موارد بالا خواهیم پرداخت.

 


استایل های درونی (Inline styles)

قرار دادن Styleها درون تگ HTML بسیاری از مزیت های CSS را با مخلوط کردن محتوا و چگونگی نمایش از بین می برد، از این روش به ندرت استفاده کنید.

این نوع از استایل css به صورت مستقیم درون تگ های html نوشته می شوند. به همین دلیل نیز به نام استایل های درونی مشهور شده اند. این نوع استایل ها فقط بر روی تگ خاصی که بر روی آن اعمال شده اند اثر می گذارند. برای آشنایی با استایل درونی به کد های زیر دقت کنید:

 

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

همانطور که مشاهده می کنید در این جا استایل color به تگ P داده شده اعمال شده است. بدین ترتیب این استایل فقط بر روی این تگ اعمال می شود و شامل سایر تگ های P موجود در صفحه نخواهد شد. یکی از محدودیت های استایل های درونی همین است که فقط می تواند به یک عنصر خاص اعمال شود و شما برای کل صفحه html خود مجبور خواهید بود هر استایل را درون هر تگ قرار دهید تا طراحی صفحه شما کامل شود.  به همین دلیل امروزه حداقل برای تگ های فونت و ساختاری دیگر از استایل های درونی استفاده نمی شود.

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

 

 


 استایل داخلی – Internal Style Sheet

استایل های جاسازی شده یا استایل داخلی نوع دیگری از استایل css هستند که در سر یا head سند تعبیه می شوند. این استایل ها فقط بر روی تگ ها ای که روی آن ها قرار دارند تاثیر می گذارند. باز هم یکی از نقاط قوت css  در اینجا مورد استفاده قرار نمی گیرد. این استایل css مانند استایل های درونی این مشکل را دارند که باید به هر عنصر و تگ خاص جدا گانه اعمال شوند. از آنجایی که هر صفحه دارای استایل های مختلفی است، اگر بخواهید تغییر کوچکی مانند تغییر رنگ لینک ها از قرمز به سبز را در صفحه انجام دهید، باید این تغییر را در هر صفحه از سایت اعمال کنید. دلیل این امر این است که هر صفحه دارای استایل جاسازی شده است که باید تغییر کند. حالا اگر سایت شما ۱۰۰ صفحه داشته باشد این مساله به یک کابوس تبدیل خواهد شد. با این که در کل این استایل css از استایل های درونی بهتر است اما همچنان مشکلات عمده و حل نشده ای دارد.

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

و مزیت دوم اینکه زمانی که یک فایل HTML با یک Style خاص و یکتا نسبت به بقیه صفحات قالب بندی شود، باید از Style داخلی استفاده کرد.

Styleهای داخلی در قسمت Head صفحه HTML و توسط تگ <style> مانند زیر معرفی می شوند.

 

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

 


 استایل خارجی – External Style Sheet

نوع سوم استایل css همان چیزی است که این روز ها ما از آن استفاده می کنیم. در واقع css را این روز ها با استایل های خارجی می شناسند. در استایل های خارجی، استایل ها به صورت یک صفحه سند به صورت جداگانه نوشته شده اند و به اسناد مختلف وب پیوست می شوند. این صفحات استایل های خارجی بر روی هر صفحه از وب که به آن پیوست شده باشند استایل های خود را اعمال می کنند. یعنی اگر شما ۲۰۰ صفحه وب سایت خود را به یک صفحه استایل خارجی متصل کنید می توانید تغییرات مورد نظر خود را با تغییر همان یک صفحه به تمام ۲۰۰ صفحه پیوست شده اعمال کنید. به این ترتیب اداره سایت بسیار راحت تر خواهد شد و این دقیقا نشان دهنده قدرت css است. همان چیزی که سبب می شود امروزه css نقش ویژه ای در صفحات وب داشته باشد.

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

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

زمانی که Styleها در صفحات مختلف به کار برده می شوند، استفاده از Style خارجی ایده آل خواهد بود. اینکار شما را قادر می سازد تا فقط با تغییر یک فایل، ظاهر و یا طرح بندی تمام صفحات پروژه تان را تغییر دهید.

هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.

 

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

یک فایل CSS خارجی می تواند در هر ویرایشگری نوشته شود و نباید شامل تگهای HTML باشد و همچنین باید فرمت آن css. باشد.

توجه: بین کاراکترهای مقدار یک Property نباید فاصله باشد، اگر رعایت نشود در Firefox و Opera به مشکل برخواهید خورد، به عبارتی margin-left:20 px اشتباه است.

 


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

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
cssInline stylesstyle داخلیw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاستایل خارجیاستایل خارجی در cssاستایل داخلیاستایل داخلی در cssاستایل های درونیاعمال CSS بر روی تگهای HTMLاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟