دسته بندی ها

20:20 1399/06/22

آموزش نحوه استفاده از دستورات css در html

مشخصات سوال کننده :

کاربر : mobile_app امتیاز کاربر : 18 رتبه کاربر : 40

دسته بندی : Html Css

نظر ویرایش گزارش نشان

به این سوال امتیاز بدهید 0

تعداد بازدید این سوال : 3161

هوش مصنوعی

پاسخ هوش مصنوعی

در HTML می توان از CSS برای استایل دهی به عناصر استفاده کرد و این کار به چندین روش انجام می شود:

استفاده از CSS داخلی (Inline CSS): این روش به شما اجازه می دهد تا استایل ها را مستقیماً در تگ HTML تعریف کنید. این کار با استفاده از صفت style انجام می شود.

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

استفاده از CSS داخلی (Internal CSS): در این روش CSS در بخش <head> صفحه و داخل تگ <style> قرار می گیرد.

<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>این یک پاراگراف با متن آبی است.</p>
</body>

استفاده از CSS خارجی (External CSS): در این روش, استایل ها در یک فایل CSS جداگانه قرار می گیرند و با استفاده از تگ <link> به HTML پیوند داده می شوند.

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

فایل styles.css شامل:

p {
    color: green;
}

تفاوت ها بین این روش ها:

CSS داخلی (Inline) فقط به یک عنصر خاص اعمال می شود و کد CSS مستقیماً در تگ HTML قرار می گیرد، که ممکن است به سختی مدیریت شود.
CSS داخلی (Internal) به استایل دهی محتوای کل صفحه کمک می کند، اما وابستگی به آن صفحه دارد.
CSS خارجی (External) بهترین روش برای استایل دهی به صفحات مختلف است، زیرا می توان آن را در چندین صفحه به اشتراک گذاشت، همچنین مدیریت آن آسان تر است.

در مورد تاثیر بر سرعت بارگذاری:

استفاده از CSS خارجی معمولاً برای سرعت بارگذاری صفحات بهتر است، زیرا مرورگرها می توانند این فایل را کش کنند و در صفحات مختلف استفاده کنند. برعکس، CSS داخلی و inline باعث افزایش حجم صفحات می شود و می تواند زمان بارگذاری را افزایش دهد.

به این پاسخ امتیاز بدهید 0

امتیاز: - رتبه: -

نظر ویرایش گزارش

پاسخ دهنده : fateme 17:13 1399/06/23

آموزش نحوه استفاده از دستورات css در html

برای استفاده از css در صفحات وب سه روش وجود داره

Inline : در این روش از خاصیت style در بین تگ های html استفاده میشه.
Internal : در این روش از تگ <style> در صفحات html استفاده میشه.
External : در این روش از یک فایل با پسوند css استفاده میشه و این فایل توسط تگ <link> به صفحات html وصل میشه.

استایل دهی به روش Inline در css

اولین روشی که شما میتونید به تگهای html خودتون رنگ و قالب زیبایی رو بدید روش Inline هست. تگهای html دارای یک ویژگی یا Attribute به نام style هستن که شما میتونید با استفاده از این ویژگی به اون تگ استایل بدید.

نکته : استایل هایی که در این روش برای تگ ها تعریف میشه فقط برای همان تگ اعمال میشه.

دستورات زیر نحوه اعمال استایل به روش Inline رو نمایش میده :

<h1 style="color:blue; font-size:15px; font-weight:bold;">my car is white</h1>

<p style="color:red; font-size:15px; font-weight:bold;">A red car.</p>

در دستورات بالا برای هر تگ یک style تعریف شده و استایل های تعریف شده فقط برای همان تگ می باشد.

css in html use

استایل دهی به روش Internal

در روش استایل دهی به روش Internal برای تعریف استایل ها از تگ <style> در صفحات html استفاده می شود. معمولا تگ <style> در بخش <head> سند html تعریف می شود. دقت کنید که در این روش برای استایل دهی به المان های سند باید از selector ها استفاده شود.

به عنوان مثال فرض کنید می خواهیم به همه تگ های div موجود در صفحه یک استایل واحد را بدهیم :

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {background-color: red;}
      </style>
   </head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

همانطور که می بینید در بخش <style> مشخص کردیم که div های موجود در این سند رنگ red داشته باشند. چند مثال دیگر در ادامه مشاهده می کنید:

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

استایل دهی به روش External در css

در این روش یک فایل با پسوند css ایجاد می کنیم و همه استایل هایی را که می خواهیم بنویسیم به روشی که برای روش Internal نوشتیم در آن تعریف می کنیم. سپس این فایل را توسط تگ <link> به سند html الصاق می کنیم.

فرض کنید سند html زیر را داریم که در بالای آن یک فایل css لینک شده است

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

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

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

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

اما اگر از روش Inline یا Internal استفاده شود هر بار که سند html شما بارگزاری می شود کلیه دستورات و استایل ها هم مجدد باید بارگزاری شود. برای دریافت مثالهای بیشتر این لینک رو مطالعه کنید.

ویرایش شده در جمعه 3 بهمن 1399 ساعت 22:02:55

به این پاسخ امتیاز بدهید 3

امتیاز: 1635 رتبه: 2

نظر ویرایش گزارش

1 نظر

saedbfd : تشکر بابت توضیحات کامل

امتیاز کاربر : 1664 رتبه کاربر : 1 تاریخ ثبت : 06:27 1399/06/23

حذف

آخرین سوالات ثبت ‌شده

سوالات مرتبط

آموزش های پرطرفدار

برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید. ورود

آموزش نحوه استفاده از دستورات css در html

پاسخ هوش مصنوعی

آموزش نحوه استفاده از دستورات css در html

استایل دهی به روش Inline در css

استایل دهی به روش Internal

استایل دهی به روش External در css

آموزش ساخت اتوماسیون اداری تحت وب

آموزش ساخت سیستم فروش و انبارداری وب

آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن

آموزش ساخت سیستم آزمونگیر آنلاین