وقتی مرورگر شیوه نامه را می خواند، سند را بر اساس آن قالب بندی می کند.

سه راه برای درج CSS

سه راه برای درج یک شیوه نامه وجود دارد:

• برگه سبک خارجی
• استایل شیت داخلی
• سبک داخلی

برگه سبک خارجی

یک شیوه نامه خارجی زمانی ایده آل است که سبک ها باید در صفحات زیادی اعمال شوند. با یک شیوه نامه خارجی، می توانید با ویرایش یک فایل، ظاهر کل یک وب سایت را تغییر دهید. هر صفحه باید با استفاده از تگ به شیوه نامه پیوند دهد . برچسب بزنید واقع در قسمت سر:

بین ارزش ملک و واحدهای آن فاصله نگذارید! "margin-left:20 px" (به جای "margin-left:20px") در IE (مرورگر اینترنت اکسپلورر) کار می کند، اما در مرورگرهای Firefox یا Opera نه.

استایل شیت داخلی

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

موارد زیر در اینجا اتفاق می افتد: برای همه عناصر داخل تگ

موارد زیر انجام می شود: رنگ آنها قرمز و حاشیه بالایی 100 پیکسل خواهد بود.

روش سوم تکلیف سبک CSS- این سبک های وارداتی. آنها دقیقا شبیه هستند اجرا شددر سر سند مشخص می شود اما از پرونده. در اینجا یک مثال است:

در اینجا استایل های فایل " در کل صفحه اعمال می شود my.css".

و آخرین نمای سبک های CSS- اینها سبک های فایل هستند. این روش رایج ترین است و شامل اتصال فایل سبک از طریق تگ است در رأس سند برای مثال به این صورت:

این روش بسیار شبیه به روش قبلی است، اما تگ در اینجا استفاده نمی شود (با ویژگی همنام اشتباه نشود) که در آن عناصر مورد نیاز ما توضیح داده شده است.

به مثال نگاه کنید، نظراتی در زیر وجود خواهد داشت.

همه چیز درباره فیل ها

در این سایت اطلاعاتی در مورد فیل ها خواهید یافت.

یک فیل بخر

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

یک فیل اجاره کنید

فقط اینجا میتونی هر فیل رو اجاره کنی!!

همانطور که از مثال مشخص است ، ما دقیقاً به همان نتیجه مورد اول رسیدیم ، فقط اکنون به هر عنصر به صورت جداگانه سبکی اختصاص نمی دهیم ، بلکه آن را در "سر" سند قرار می دهیم و بدین ترتیب نشان می دهد که همه سرفصل ها

,

- پاراگراف ها آبی خواهند بود

- قرمز. تصور کنید اگر صد پاراگراف از این قبیل و حدود پانزده عنوان در یک صفحه وجود داشته باشد، کار ما چقدر ساده تر می شود، و خود سند با «حذف» تمام توصیفات سبک تکراری برای هر عنصر، وزن کمتری خواهد داشت.

حالا نظرات وعده داده شده:

برچسب بزنید سبک های برخی از عناصر HTML به طور مستقیم طبق دستور زیر اعلام می شوند:

اگر چندین ویژگی یک عنصر در یک بلوک اعلان سبک مشخص شده باشد، آنها با یک نقطه ویرگول از هم جدا می شوند.

CSS در یک فایل خارجی جداگانه.

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

بنابراین، دفترچه یادداشت (یا ویرایشگر دیگری) را باز کنید و متن زیر را در آن بنویسید:

بدنه (رنگ پس زمینه: #c5ffa0)
a (رنگ:#000060؛ وزن قلم: پررنگ؛)
a:hover (رنگ:#ff0000؛ فونت-وزن: پررنگ؛ متن-تزیین: هیچکدام)
h1 (رنگ: #0000ff؛ اندازه قلم: 18 پیکسل)
h2 (رنگ: #ff00ff؛ اندازه قلم: 16 پیکسل)
p (رنگ: #600000؛ اندازه قلم: 14 پیکسل)

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

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

این کار با استفاده از تگ انجام می شود (ارتباط). برچسب بزنید چند منظوره و برای "پیوند" یک سند HTML با فایل های خارجی اضافی که عملکرد صحیح آن را تضمین می کند، خدمت می کند. برچسب بزنید نوعی پیوند است که فقط نه برای کاربران، بلکه برای برنامه های مرورگر (مرورگرها) در نظر گرفته شده است. زیرا منحصراً اطلاعات سرویس را حمل می کند؛ این اطلاعات در سر سند HTML بین تگ ها قرار دارد و توسط مرورگرها روی صفحه نمایش داده نمی شود.

برچسب بزنید دارای صفات:

href- مسیر فایل.
رابطه- رابطه بین سند جاری و فایل مورد ارجاع را تعریف می کند.

• نماد میانبر - مشخص می کند که فایل ارائه شده یک است.
• شیوه نامه- مشخص می کند که فایل شامل یک شیوه نامه باشد.
• application/rss+xml - فایلی با فرمت XML برای توصیف فید اخبار.

نوع- نوع داده MIME فایل پیوست شده.

از آنجایی که ما یک شیوه نامه آبشاری را به عنوان یک فایل خارجی اضافه می کنیم، پیوند سرویس ما به شکل زیر است:

تکرار می کنم، قطعا برای رفع سوء تفاهم های احتمالی. صفت رابطهیک مقدار اختصاص دهید شیوه نامهاز آنجایی که ما یک شیوه نامه آبشاری را به عنوان یک فایل خارجی متصل می کنیم، مسیر فایل css را نشان می دهیم (در این مثال فایل نامیده می شود mystyle.cssو در کنار سند HTML قرار دارد که این پیوند در آن نوشته شده است) همچنین نشان می دهیم که این فایل متنی است و حاوی توضیحات سبک است. type="text/css"

حالا این خط را در هدر صفحات سایت خود قرار می دهیم و از نتیجه لذت می بریم..

فایل mystyle.css
بدنه (رنگ پس زمینه: #c5ffa0)
a (رنگ:#000060؛ وزن قلم: پررنگ؛)
a:hover (رنگ:#ff0000؛ فونت-وزن: پررنگ؛ متن-تزیین: هیچکدام)
h1 (رنگ: #0000ff؛ اندازه قلم: 18 پیکسل)
h2 (رنگ: #ff00ff؛ اندازه قلم: 16 پیکسل)
p (رنگ: #600000؛ اندازه قلم: 14 پیکسل)
فایل index.html

منو:

همه چیز درباره فیل ها
یک فیل بخر
یک فیل اجاره کنید

---

همه چیز درباره فیل ها

در این سایت اطلاعاتی در مورد فیل ها خواهید یافت.

فایل elephant.html

منو:

همه چیز درباره فیل ها
یک فیل بخر
یک فیل اجاره کنید

---

یک فیل بخر

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

فایل elephant1.html

منو:

همه چیز درباره فیل ها
یک فیل بخر
یک فیل اجاره کنید

---

یک فیل اجاره کنید

فقط اینجا میتونی هر فیل رو اجاره کنی!!

در مثال بالا، "سایت درباره فیل ها"، در حال حاضر سه صفحه وجود دارد که هر کدام با یک فایل css خارجی - mystyle.css مرتبط است. بنابراین، ما به طور قابل توجهی آن را "تخلیه" کردیم و طراحی کل سایت را "موبایل پسند" کردیم. تصور کنید اگر این سایت صد صفحه کامل داشت چند کیلوبایت برنده می شدیم!؟ و همچنین اگر بخواهیم چیزی در طراحی آن تغییر دهیم چقدر در زمان صرفه جویی می کنیم!؟

در این فصل، ما به سه روش برای جاسازی CSS در یک سند HTML نگاه کردیم. استفاده از کدام یک بهتر است؟

• از ویژگی استفاده کنید سبکبرای هر عنصر، اگر این عنصر با سبکی متفاوت از سایر عناصر تنها در کل سایت باشد.
• از برچسب استفاده کنید

  مثال: شیوه نامه داخلی

  • خودت آن را امتحان کن "

  سرفصل

  ابتدا پیامک بزنید

  متن دو

  متن سه

  سرفصل

  ابتدا پیامک بزنید

  متن دو

  متن سه

  در این مثال، رنگ پس‌زمینه عنصر را با استفاده از CSS تنظیم می‌کنیم : رنگ پس زمینه: سبز کم رنگ، رنگ و نوع فونت برای سرفصل ها

  : رنگ آبی؛ font-family:verdanaو همچنین اندازه فونت، رنگ و تراز متن در مرکز برای پاراگراف ها

  : اندازه فونت: 20px; رنگ: قرمز؛ text-align:center.

  سبک داخلی

  هنگامی که شما نیاز به فرمت یک عنصر منفرد از یک صفحه HTML دارید، شرح سبک را می توان مستقیماً با استفاده از ویژگی سبک از قبل تخصصی در داخل تگ افتتاحیه قرار داد. مثلا:

  پاراگراف

  به چنین سبک هایی توکار (داخلی) یا تعبیه شده می گویند. قوانینی که مستقیماً در تگ آغازین یک عنصر تعریف شده اند، قوانین تعریف شده در فایل CSS خارجی و همچنین قوانین تعریف شده در عنصر را لغو می کنند.

  سرفصل

  ابتدا پیامک بزنید

  متن دو

  متن سه

  وظایف

  • تراز کردن متن در مرکز

    با استفاده از سبک پاراگراف درون خطی، متن را در مرکز قرار دهید.