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

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

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

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

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

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

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

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

 

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

در بحث آموزش پیاده سازی CSS درون HTML نکته ای در مورد تعیین کلاس ها تعیین HTML 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>

ما در آموزشگاه کامپیوتر پرتو کنار شما هستیم.

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

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید ؟
در گفتگو ها شرکت کنید!

دیدگاهتان را بنویسید

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