ما در شبکه های اجتماعی :

اضافه کردن css به عناصر html

اطلاعات css می توانند به صورت یک سند جداگانه ضمیمه و فراخوانی شود یا در خود سند html وارد شوند. این سه روش اجرای اطلاعات یک ظاهر طراحی شده برای یک سند HTML است.
css درون خطی – استفاده از ویژگی css در برچسب شروع html.
css جاسازی شده – استفاده از عنصر style در بخش اصلی سند.
برگه سبک خارجی – با استفاده از عنصر link ، با اشاره به پرونده های CSS خارجی.
در این آموزش همه ی انواع مختلف شیوه استفاده از css را یک به یک خواهیم گفت.

با قرار دادن کدهای CSS به طور مستقیم در برچسب شروع ، از css درون خطی برای اعمال قطعه کد منحصر به فرد در یک عنصر استفاده می شود. و می توان آن را با استفاده از ویژگی استایل style به یک عنصر وصل کرد.پس با استفاده از تگ style و علامت = و داخل دو کوتیشن ( “” )  نحوه تنظیم رنگ و اندازه فونت متن را کد نویسی کرده و اتمام قطعه کد رو با سمی کالن ( ; ) از هم جدا میکنیم مثال زیر را توجه کنید


مثال های کاربردی

کد را امتحان کنید

<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:18px;">This is a paragraph.</p>
<div style="color:green; font-size:18px;">This is some text.</div>

استفاده از css درون خطی معمولاً به عنوان یک عمل بد و کد نویسی منسوخ در نظر گرفته می شود. چون کدهای css مستقیماً درون برچسب html تعبیه شده است باعث می شود که با محتوای سند مخلوط شود و این در بروزرسانی  ها یا حفظ یک وب سایت بسیار مشکل است.

نوع دیگری استفاده کد های css در سند html بگونه ایی است که کدهای css  نوشته شده داخلی میباشد و فقط در همان سند و صفحه تأثیر  گذار هست .کد های جاسازی شده در بین  تگ های <head><head/> در صفحه HTML و با استفاده از تگ <style><style/> نوشته می شوند. می توانید هر تعداد کدی که بخواهید تعریف کنید. خب بریم با هم بررسی کنیم


مثال های کاربردی

کد را امتحان کنید

<head>
    <style>
        body { background-color: YellowGreen; }
 h1 { color: blue; }
        p { color: red; }
    </style>
</head>

دوستان داریم به جاهای شیرین و صحیح ترین سبک بکارگیری کدهای css و فراخوانی از خارج  سند و صفحه html ایده ال ترین انعطاف پذیری کامل برای بروز رسانی و تغییرات راحت و عالی در کمترین زمان ممکن و هر چند بار در هرچند سند و صفحه استفاده میشود.ما میتوانیم به دو روش اینکار رو انجام بدیم .در روش اول که عموما از این روش بیشتر استفاده میشود بوسیله برچسب <link> درون قسمت تگ <head> مثال :


مثال های کاربردی

کد را امتحان کنید

<head>
    <link rel="stylesheet" href="css/style.css">
</head>

یه توضیح در رابطه با معنی و کاربرد  کد بالا  بوسیله برچسب <link>  با ویژگی  rel= stylesheet یعنی فایل خارج ما از نوع css  هست و با این قسمت هم href=css/style.css آدرسی که فایل در اونجا قرار داره رو معرفی کردیم که هر آدرسی در هر جایی و در هر منبعی میتونه باشه و هیچ محدودیتی نداره. همونطور که دیدید یاد گرفتیم با فراخوانی فایل خارج از سند,  بدون نوشتن کدهای css درون صفحه رو استایل دهی کنیم.

روش دوم روش import@ هست که در بعضی جاهای خاص میتونیم ازش استفاده کنیم بریم مثال رو ببینیم:


مثال های کاربردی

کد را امتحان کنید

<style>
    @import url("css/style.css");
    p {
        color: blue;
        font-size: 16px;
    }
</style>

توضیح کدهای بالا هم به این صورت است که قانون import@  با ویژگی url دستور میده برو به آدرس  داخل گیومه ( )  که اون آدرس جایی هست که فایل css ما قرار داره .توجه داشته باشید می توانید از هر دو روش استفاده کنید. ساده ترین روش استفاده از آن در عنصر <style> در بخش <head> شما است. در ضمن همانطور که در ادامه کدها میبینید سایر قوانین CSS هنوز هم می توانند در عنصر <style> گنجانده شوند.

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


قبلی

بعدی

بروز رسانی ۱۴ آبان ۱۳۹۸ | by رضا جهاندیده | بدون ديدگاه | برچسب‌ها, , , |
درباره نويسنده : رضا جهاندیده
رشته تحصيلی : کامپيوتر و گرافيک ,آشنا به زبان های php و css سرگروه تيم توسعه و طراحی نوين وب هاست در حدود 5 سال به ياری خداوند در زمينه هاي فوق مشغوليم به اميدحق توانسته ايم با مشاوره و راهنمايي کاملا رايگان در خدمت همه شما باشيم سربلند باشيد
ثبت دیدگاه




ثبت نام
  • logo-samandehi
  • novinwebhostnovinwebhost
  • novinwebhostnovinwebhost
  • novinwebhostlogo-samandehi
  • novinwebhost