آموزش قراردادن css در صفحه html به صورت خارجی و داخلی و درون خطی

یکی از آموزش های مقدماتی برای طراحی سایت اموزش css است. قبل از این که نحوه نوشتن کد های (سی اس اس ) یا css را بدانید باید نحوه استفاده از این کد ها در داخل صفحات را بیاموزید. در این مقاله روش قراردادن css در صفحه html را خواهید آموخت.

css درون خطی

اولین چیزی که باید شما بیاموزید، css درون خطی است. برای استفاده از css درون خطی مثال زیر را مشاهده کنید:

<h1 style="color:blue;">این عنوان مقاله است!</h1>

<p style="color:red;">این یک پاراگراف است.</p>

در مثال بالا مشاهده می کنید که از دو تگ h1 و p استفاده شده است. برای هر کدام از یک استایل استفاده شده است. بنابراین همانند مثال بالا شما می توانید فقط یک style به تگ خود اضافه کنید و داخل دابل کوتیشن (” “) اقدام به نوشتن استایل کنید. همانطور که در بالا مشاهده م یکنید به متن عنوان h1 رنگ آبی نسبت داده شده است و برای پاراگراف رنگ قرمز در نظر گرفته شده است.

css داخلی

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

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>این عنوان مقاله است!</h1>
<p>این یک پاراگراف است.</p>

</body>
</html>

همانطور که در مثال بالا مشاهده می کنید، داخل تگ h1 و p هیچ استایلی نوشته نشده است. برای استایل دادن و نوشتن css برای این دو مورد از تگ استایل در head استفاده شده است. بنابراین برای ایجاد css داخلی، درون head تگ style را باز و بسته کرده و داخل ان استایل را می نویسیم.

برای نوشتن استایل می توان از class یا id استفاده کرد یا به صورت کلی تگ مورد نظر را استایل دهی کرد.

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

در استایل بالا برای body ، تگ h1 و p استایل نوشته شده است. حال شما می توانید از class و id نیز استفاده کنید. به این منظور مثال زیر را مشاهده کنید:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
.heading1{color: blue;}
#paragraph{color: red;}
</style>
</head>
<body>

<h1 class="heading1">این عنوان مقاله است!</h1>
<p id="paragraph">این یک پاراگراف است.</p>

</body>
</html>

مثال بالا دقیقا، نتیجه ای برابر با مثال قبل برای شما خواهد داشت. فقط از class و id برای این منظور استفاده شده است. برای استایل دهی برای class شما باید از نقطه ابتدای کلاس استفاده کنید و برای استایل دهی id باید از # قبل از نام ای دی استفاده کنید. توجه داشته باشید id فقط باید یک مرتبه در فایل وجود داشته باشد و class می تواند چند مرتبه در فایل تکرار شود.

بیشتر بخوانید
چگونه بیلبورد مؤثر بسازیم؟ | بیلبورد تبلیغاتی تاثیر‌گذار

css خارجی

در css خارجی، کد های css را داخل فایل جداگانه قرار میدهیم. از دلایل ان می توان به تمیز تر شدن کد نویسی و همچنین کنترل بیشتر بر حجم فایل ها css نام برد.

مثال زیر یک مثال برای css خارجی است:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>این عنوان مقاله است!</h1>
<p>این یک پاراگراف است.</p>

</body>
</html>

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

امیدواریم این اموزش مفید واقع شده باشد. می توانید همینک سوالات خود را بپرسید تا در اسرع وقت به شما پاسخ داده شود.

موضوعات مرتبط: ,
به این مقاله امتیاز دهید!
نظر شما

اشتراک در شبکه های اجتماعی
آخرین مقالات و ویدئو ها
چرا لوگو شیائومی تغییر کرد؟ | حقایق لوگو 300 هزار دلاری شیائومی

شرکتها و برندها بر اساس ایده های بازاریابیِ تیم مارکتینگ خود تصمیم به ریدیزاین لوگو میگیرند. این تغییر یا تغییرات ممکن گاهی چشمگیر و اساسی باشد، گاهی هم ریز و به دور از چشم. در هر صورت هدف و انگیزه ای در پس آن نهفته است و هیچ برندی از سر بیکاری دست به این حرکت کمابیش ریسکی نمیزند. در سال 2021 خبری جنجالی از تغییر لوگو شیائومی منتشر شد. همه به سراغ موتورهای جستجو رفتند تا ببینند این تغییری که حرفش را میزنند چگونه و به چه دلیل بوده است! این همان چیزی است که ما در این مقاله به آن میپردازیم. برند شیائومی شیائومی در آوریل 2010 به عنوان یک شرکت سفت‌افزار سفارشی برای دستگاه‌های اندرویدی توسط لی […]

نگهداری وب سایت چیست و چه هزینه هایی دارد؟

ایجاد وب سایتی که ظاهری عالی داشته باشد و عملکرد خوبی داشته باشد برای هر صنعتی مهم است، اما این تنها نیمی از نبرد است – نگهداری به همان اندازه حیاتی است. نگهداری وب سایت شما تضمین می کند که کسب و کار، وبلاگ یا حضور آنلاین شما در طول زمان به تکامل و موفقیت ادامه می دهد. این همچنین نشان می دهد که هر کسی که با سایت شما تعامل داشته باشد همیشه بهترین تجربه کاربری را خواهد داشت. در حالی که چندین کار وجود دارد که باید در هنگام نگهداری وب سایت خود در نظر بگیرید، سازماندهی هر کدام بر اساس هفته، ماه، سه ماهه و سال می تواند به شما در ایجاد یک برنامه اشتباه کمک کند […]

یک وبسایت خوب چگونه است وساختار آن چه ویژگی هایی دارد؟

نحوه ظاهر آنلاین برند یا کسب و کار شما مهمتر از همیشه است. و در حالی که وب سایت شما باید ظاهر خود را با محتوای بصری با کیفیت حفظ کند، 31 درصد از مصرف کنندگان نیز معتقدند که یک تجربه کاربری جذاب باید در اولویت باشد. هنگامی که به تنهایی یک وب سایت ایجاد می کنید، ایجاد یک تجربه کاربری تأثیرگذار اغلب به توجه به جزئیات ناشناخته مانند ساختار وب سایت شما بستگی دارد. در این مقاله، ساختار وب‌سایت را تعریف می‌کنیم، نحوه ساخت آن را از طریق دید UX یا تجربه کاربری توضیح می‌دهیم و در مورد محبوب‌ترین مدل‌هایی که امروزه در طراحی وب‌سایت و قالب‌های وب‌سایت استفاده می‌شوند، صحبت می‌کنیم. ساختار وب سایت چیست؟ ساختار وب سایت […]

لوگو اچ پی | آیا لوگو hp خلاقانه است؟

HP نام جدید هیولت پاکارد (Hewlett-Packard)، شرکت فناوری اطلاعات آمریکا است که در سال 1939 تأسیس شد. این شرکت بیشتر به دلیل تولید رایانه و لوازم جانبی شناخته شده است، اما در همان ابتدای تاریخ خود، روی نرم افزار و خدمات محاسباتی برای تجارت و خدمات متمرکز بود. شما حتما یا لپتاپ اچ پی را داشته اید یا پرینتر این برند را در خانه یا محل کارتان! داستان لوگو این برند و تغییراتش را در این مقاله بخوانید. تاریخچه لوگو hp مونوگرام نمادین “HP” روی یک دایره، از زمان معرفی اولین لوگو در سال 1939، همیشه بخشی از هویت بصری شرکت بوده است. اگرچه در طول سال ها رنگ، خطوط و همه چیز این نماد کمال یافت. اولین نماد شرکت […]

نرخ پرش چیست (Bounce Rate) و چرا اهمیت دارد؟

نرخ پرش یکی از مهم ترین معیارها در طراحی وب است – بنابراین مطمئن شوید که می دانید چگونه آن را اندازه گیری کرده و بر آن تأثیر بگذارید. هنگامی که یک وب سایت ایجاد می کنید، یک فروشگاه آنلاین راه اندازی می کنید یا در یک تیم بازاریابی حضور دارید، جذب بازدیدکننده به سایت شما اغلب اولین قدم است. مدت زمانی که یک بازدیدکننده به آن نزدیک می شود می تواند به شما بگوید که محتوای شما چقدر جذاب است – یا نیست. نرخ پرش معیاری است که این مورد را مشخص می کند. در ادامه به بررسی بخش های مختلف تاثیر گذار بر روی نرخ پرش خواهیم پرداخت. معنی نرخ پرش یا بونس ریت چیست؟ نرخ پرش یا […]

با ما تماس بگیرید!
021-91018852
آدرس
تهران- بلوار ایت الله کاشانی - خیابان کیهان - کیهان دوم - پلاک 23 - واحد 4