آموزش پیاده سازی CSS درون HTML

آموزش پیاده سازی CSS درون HTML

  • آموزش پیاده سازی CSS درون HTML

    • آموزش استایل نویسی درون خطی(Inline) در HTML

    • آموزش استایل نویسی داخلی (Internal) در HTML

    • آموزش استایل نویسی خارجی (External) در HTML

    • آموزش استایل نویسی چندگانه در CSS

    • آموزش استایل نویسی آبشاری در CSS

 

 

نکته ای در مورد تعیین کلاس ها تعیین style تگ هایی می باشد که عناصر متفاوتی را تولید می کند برای مثال تگ input را در نظر بگیرید .این تگ با داشتن type های مختلف عناصر متفاوتی را تولید می کند .برای شناسایی شناسه های این عناصر می توانیم برای هر کدام از شناسه class جداگانه ای استفاده کنیم که این موضوع باعث افزایش کد دستورات شده و حجم صفحه را زیاد می کند .
روش بهتر این است که دستور css مربوط را به صورت زیر بنویسیم .

Input [ type = “ text “] {
Width : 200 px
}

این که فقط بر روی کادرهای متنی که در آن ها از شناسه type با مقدار text استفاده شده است اثر می گذارد .
روش دیگر برای تعریف style استفاده از شناسه id است .برای استفاده از آن باید دقت شود که درهر صفحه نباید بیش از یک بار از هر id استفاده نمود .سکنور id با علامت # مشخص می شود .

: مثال
# border {
Border = green solid

با این styleتمامی عناصری که شناسه id برابر با border داشته باشند با کادری سبز رنگ نمایش داده می شوند .
وارد کردن css با استفاده از دستور style :

ساده ترین راه برای افزودن style به یک صفحه استفاده از شناسه style به تگ های html است .برای افزودن style به یک تگ باید ویژگی های مورد نظر را به عنوان مقدار به شناسه style آن تگ تخصیص دهیم .فرض کنید می خواهیم به یک تگ div استایل اضافه کنیم .برای این کار در قسمت body یک سند html یک تگ div قرار می دهیم .در این تگ متنی را به عنوان نمونه می نویسیم و برای تغییر رنگ این متن از شناسه style در این تگ استفاده می کنیم .

<div style = “ color : green “> test </div>

امکان دیگری که با استفاده از شناسه style وجود دارد این است که به یک تگ بیش از یک ویژگی افزوده شود .برای این کار تنها کافی است بین ویژگی های مختلف از علامت ; استفاده کنیم .

 

: مثال
<body>
<div style = “ color : green ; font – style : italic “ >
This is a last </div> </body>

 

استفاده از css در تگ head :

 

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

مثال :

<head>
<style>
<! – – div { color : green } – – > </style> </head>
<body> <div> this is a test </div> </body>

 

استفاده از css به عنوان یک فایل خارجی :

فرض کنید در چند صفحه می خواهیم از یک سری style استفاده کنیم که در تمام صفحات مشابه هستند .در این صورت از یک فایل style خارجی استفاده می کنیم .برای این کار ابتدا یک فایل برای تنظیم style های مورد نظر ایجاد کرده و style را در آن بنویسیم و با پسوند css ذخیره کنیم .
پس در هر فایل html که نیاز به آن style ها داشتیم با نوشتن یک تگ link در head صفحه این موضوع را مشخص می کنیم.
: مثال

Div {
Font – style : italic ;
Color : green
}
پس برای استفاده از فایل css در یک صفحه html می بایست پیوندی بین آنها برقرار سازیم.
<link rel = “ stylesheet “ type = “ text / css “ href = “ “ >

 

به شناسه rel عبارت style sheet را می دهیم .این شناسه مشخص می کند که فایل مورد نظر ما یک style است .
شناسه type عبارت text / css را به عنوان ورودی دریافت می کند و مشخص کننده نوع متن فایل برای مرورگر است .
شناسه href نیز محل قرار گیری فایل css را دریافت می کند .
پس در قسمت body این سند با استفاده از تگ div متنی را می نویسیم .

<body>
<div> this is a test </div>
</body>

[download id=”4553″]

0 پاسخ ها

سوال خود را مطرح نمایید

در صورت تمایل در بحث شرکت کنید
در صورت تمایل از راهنمایی رایگان ما استفاده کنید!!

پاسخ دهید

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