نحوه اعمال کدهای css درون HTML

مطالعه این مقاله : 4 دقیقه

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

نحوه اعمال قوانین css در سند و صفخه html که در واقع هنگام ارائه یک صفحه وب کاملاً محدود است.

html در ابتدا به عنوان روشی ساده برای ارائه اطلاعات طراحی شده بود.

CSS در دسامبر ۱۹۹۶ توسط کنسرسیوم جهانی وب (W3C) معرفی شد تا راهی بهتری برای سبک دادن به عناصر HTML ارائه دهد.

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

اطلاعات css می توانند به صورت یک سند جداگانه ضمیمه و فراخوانی شود , یا در خود سند html وارد شوند.

۱-css درون خطی – استفاده از ویژگی css در برچسب شروع html.
۲-css جاسازی شده – استفاده از عنصر style در بخش اصلی سند.
۳-برگه سبک خارجی – با استفاده از عنصر link ، با اشاره به پرونده های CSS خارجی.

با قرار دادن کدهای CSS به طور مستقیم در برچسب شروع ، از css درون خطی برای اعمال قطعه کد منحصر به فرد در یک عنصر استفاده می شود. و می توان آن را با استفاده از ویژگی استایل style به یک عنصر وصل کرد.پس با استفاده از تگ 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/> نوشته می شوند. می توانید هر تعداد کدی که بخواهید تعریف کنید. خب بریم با هم بررسی کنیم

کدهای css درون صفحه هدف

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

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

<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 رو با زبانی ساده و روان توضیح دهیم , حال چقدر در این امر موفق شدیم قضاوت باشماست.

هر گونه ابهامی براتون وجود داشت , ما با دل و جان پاسخگو خواهیم بود.سربلند باشید.

ابر تگ ها :