خانه / آموزش HTML / بخش سیزدهم-استایل های css در html
راه اندازی سایت فروشگاهی دیجی کالا و بامیلو
"

تاریخ بروزرسانی: ۹ آبان ۱۳۹۷ تعداد بازدید : 28 بازدید بدون دیدگاه

بخش سیزدهم-استایل های css در html

قدم قبلی >< قدم بعدی

یکپارچه سازی HTML با CSS

در این آموزش html  استایل های css در html می پردازیم.

CSS برای Cascading Style Sheets است.

CSS توصیف می کند که چگونه عناصر HTML روی صفحه نمایش، کاغذ یا سایر رسانه ها نمایش داده می شود.

CSS کارهای زیادی را ذخیره می کند. این می تواند طرح صفحات وب چندگانه را در یک زمان کنترل کند.

CSS را می توان به ۳ عناصر به عناصر HTML اضافه کرد:

  • Inline – با استفاده از ویژگی سبک در عناصر HTML
  • داخلی – با استفاده از عنصر <style> در بخش <head>
  • خارجی – با استفاده از یک فایل خارجی CSS

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

CSS درون خطی

CSS درون خطی برای اعمال یک استایل منحصر به فرد به یک عنصر HTML استفاده می شود.

یک CSS درون خطی از ویژگی سبک یک عنصر HTML استفاده می کند.

این مثال رنگ متنی عنصر <h1> را به آبی می دهد:

CSS داخلی

یک CSS داخلی برای تعریف یک سبک برای یک صفحه HTML استفاده می شود.

CSS داخلی در قسمت <head> یک صفحه HTML در عنصر <style> تعریف شده است:

CSS خارجی

یک ورق استایل خارجی برای تعریف استایل برای بسیاری از صفحات HTML استفاده می شود.

با یک ورق استایل خارجی، می توانید با تغییر یک فایل، یک کل وب سایت را تغییر دهید!

برای استفاده از یک ورق استایل خارجی، یک پیوند به آن را در قسمت <head> صفحه HTML اضافه کنید:

یک ورق استایل خارجی را می توان در هر ویرایشگر متن نوشت. این فایل نباید هیچ کد HTML داشته باشد و باید با یک پسوند css ذخیره شود.

در اینجا چگونگی “styles.css” به نظر می رسد:

فونت های CSS

خصوصیت color رنگ متن را که استفاده می شود تعریف می کند.

خصوصیت font-family فونت مورد استفاده را تعریف می کند.

مقدار  font-size تعریف می کند که اندازه متن مورد استفاده قرار می گیرد.

قاب یا Border درCSS

خصوصیت border  در CSS یک حاشیه را در اطراف یک عنصر HTML تعریف می کند:

چسباندن یا Padding در CSS

خصوصیت padding در css تعریف یک پلاگین (فضای) بین متن و مرز:

حاشیه یا Margin در CSS

خصوصیات Margin  حاشیه (فضای) را در خارج از مرز تعریف می کند:

مشخصه شناسه یا id در CSS

برای تعریف یک سبک خاص برای یک عنصر خاص، یک ویژگی id را به عنصر اضافه کنید:

سپس یک سبک را برای عنصر با شناسه خاص تعریف کنید:

نکته: شناسه یک عنصر باید در یک صفحه منحصر به فرد باشد، بنابراین انتخابگر id برای انتخاب یک عنصر منحصر به فرد استفاده می شود!

مشخصه class در CSS

برای تعریف یک سبک برای انواع خاصی از عناصر، یک ویژگی class به عنصر اضافه کنید:

سپس یک سبک برای عناصر با کلاس خاص تعریف کنید:

منابع خارجی

صفحات سبک های خارجی را می توان با یک URL کامل یا با مسیری نسبت به صفحه وب فعلی ارجاع داد.

این مثال از یک URL کامل برای پیوند به یک صفحه سبک استفاده می کند:

این مثال به یک صفحه سبک در دایرکتوری HTML در وب سایت فعلی پیوند دارد:

این مثال به یک صفحه سبک مرتبط با همان پوشه به عنوان pag pag

خلاصه ی فصل

  • از ویژگی سبک HTML برای سبک درونی استفاده کنید
  • برای تعیین CSS داخلی از عنصر HTML <style> استفاده کنید
  • از عنصر HTML <link> برای اشاره به یک فایل CSS خارجی استفاده کنید
  • از عنصر HTML <head> برای ذخیره عناصر <style> و <link> استفاده کنید
  • از ویژگی رنگی CSS برای رنگ متن استفاده کنید
  • از فونت CSS فونت برای فونت متن استفاده کنید
  • از ویژگی CSS font-size برای اندازه متن استفاده کنید
  • از مرجعیت CSS استفاده کنید
  • از ویژگی CSS padding برای فضای داخل مرز استفاده کنید
  • از اموال حاشیه CSS برای فضای خارج از مرز استفاده کنید

 

 

 

گام قبلی >< گام بعدی
بخش سیزدهم-استایل های css در html
5 (100%) 2 votes

لینک کوتاه این مطلب: https://tiktheme.com/?p=11714


کانال تلگرام تیک تم

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

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