آموزش طراحی سایت

مرجع ارائه ی آموزش های روزانه و رایگان مربوط به حوزه ی طراحی سایت، سئو و بهینه سازی و جدیدترین اخبار تکنولوژی


روشهای اضافه کردن فایل های css

به طور کلی سه راه برای اضافه کردن فایل های استایل شیت به صفحه html وجود دارد :

در این روش استایل های هر المنت داخل تگ html نوشته میشوند .

1-روش inline : 

در این روش استایل های هر المنت داخل تگ html نوشته میشوند.


<h1 style="color:blue;">This is a sample text</h1>


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

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

2- روش internal :

در این روش تمامی کدهای css مربوط به صفحه در تگ <head> ودر داخل تگ <style> نوشته میشوند. در این روش تمامی استایل ها فقط یه صفحه جااری اعمال ممیشوند.


 مثال:

<!DOCTYPE html>

  <html>

  <head>

  <style>

  {;body {background-color: red

{;h1   {color: blue

{;p    {color: red

<style/>

<head/>

<body>

<h1>This is a heading</h1>

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

<body/>

<html/>

3- روش اکسترنال :

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


<head>

<link rel="stylesheet" href="styles.css">

<head/>


منبع : http://pzof.ir

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی
مرجع ارائه ی آموزش های روزانه و رایگان مربوط به حوزه ی طراحی سایت، سئو و بهینه سازی و جدیدترین اخبار تکنولوژی. با دنبال کردن وبلاگ زودتر از بقیه از مطالب با خبر شوید!
Designed By Erfan Powered by Bayan