طراحی وب سایت در کرج
026-34204893
09101013858

چگونگی ایجاد مقالات با کیفیت با Inline CSS

چگونگی ایجاد مقالات با کیفیت با Inline CSS

چگونگی ایجاد مقالات با کیفیت با Inline CSS

وقتی یک مقاله بنویسید – یا هر صفحه وب برای آن موضوع – من دوست دارم از یک اسناد اولیه XHTML که می دانم حاوی کد معتبر است. من اسناد اولیه را به یک ویرایشگر متن کپی / جای گذاری می کنم، محتویات را بنویس، و سپس محتویات را برای CSS نمایش دهید.

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

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

من می توانم خواص و مقادیر CSS را که از جداول سبک موجود استفاده می کنم، کپی کنم و آنها را به CSS HTML درون مقاله جدید اضافه کنم.چرا از INLINE CSS استفاده کنیم؟شما می توانید به طور چشمگیری اثربخشی مقالات خود را با پوشیدن ارائه بصری خود را بهبود بخشد.

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

  • خواندن آسان تر
  • درک ساده تر
  • بصری خشنود

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

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

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

یکی از مزایای استفاده از CSS درون خطی وجود دارد: CSS درون خطی یک ورق سبک خارجی یا داخلی را برداشته است – بنابراین می توانید مطمئن باشید که ظاهر موردنظر شما به محتوای شما اعمال خواهد شد.

استفاده از یک تکه مقاله

من از یک اسناد XHTML مبتنی بر استانداردها و یک ویرایشگر متن ساده برای نوشتن و تست مقاله های من استفاده می کنم.

این سند شامل کد و یک ظاهر طراحی شده برای عناصر اصلی یک وب سایت XHTML غنی با محتوای محتوا است و زمانی که از طریق آن قالب می شود برای مقالات آینده است. قالب شامل کد های مبتنی بر استاندارد و معتبر برای

 

  •   عنوان
  • کلید واژه ها
  • شرح
  • یک ظاهر طراحی شده جهانی
  • عنوان فرعی
  • سربرگ بخش
  • تصاویر
  •  زیرنویس های تصویر

هنگامی که یک مقاله را به یک دایرکتوری مقاله یا ezine ارسال می کنم، به سادگی، عنوان، کلید واژه ها و توضیحات را در جعبه های ارسال مناسب کپی / چسباندن. همه چیز بین تگ های بدن قالب XHTML بخشی از محتوای مقاله است و می تواند در جعبه متن ارسال مقاله مقاله با کمی یا بدون پاک کردن.

در داخل کد مقاله، بارهای خط (br) را برای ایجاد شکستن خط لازم در مرورگر در هنگام کار بر روی مقاله بر روی مقاله اضافه می کنم. قبل از انتشار این مقاله، حذف خطوط اضافی خط و بازگشت خط که مورد نیاز نیست؛ اگر این کار انجام نشود، ممکن است طرح بندی مقاله به همان اندازه انتظار نداشته باشد که چاپ شود.

من همیشه قبل از کلیک روی دکمه ارسال، پیشینه ای از مقاله را بررسی و اصلاح می کنم.

ایجاد یک محیط مقدماتی (سبک جهانی)

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

یک ظاهر جهانی با کد کردن ویژگی سبک HTML در داخل تگ start شروع می شود. هر خصوصیت و مقدار CSS می تواند بین نقل قول از ویژگی سبک استفاده شود.ظاهر جهانی من معمولا استفاده می کند شامل خواص و مقادیر زیر است: 

  • background-color: #fffef2;
  • text-align: left;
  • padding: 1.5em;

این خواص و مقادیر یک مرورگر را برای نمایش یک مقاله با پس زمینه نور (# fffef2)، Verdana به عنوان فونت اولویت با یک فضای (حاشیه) در اطراف محتوای مقاله و متن با متن چپ به نمایش می گذارد.

بهترین روش برای یادگیری نحوه کارکرد یک ظاهر طراحی شده است که ارزش یک ملک را تغییر دهد و سپس نتایج را پیش نمایش دهد. شما ممکن است نیاز به «بازی کردن» با کد داشته باشید تا بتوانید ظاهر و احساساتی را که میخواهید به دست آورید.

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

عنوان فرعی

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

در حالت ایده آل، شما باید قادر به توضیح آنچه در مورد مقاله خود را با عنوان ۴۰ تا ۶۰ کاراکتر است. برای یک مقاله در صفحه وب یا وبلاگ من، عنوان را بزرگ و رنگارنگ می کنم. شما همیشه بر روی یک ظاهر از عنوان خود را کنترل نخواهید کرد: دایرکتوری ها و ezines های مقاله عنوان شما را سبک خواهند کرد.

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

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

  • text-align: center;
  • color: maroon;
  • font-size: 1.25em;
  • font-size: 1.25em;
  • font-size: 1.25em;

بخش سررسید

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

  • text-align: left;
  • color: maroon;
  • font-size: 1.2em;
  • font-size: 1.2em;
  • font-size: 1.2em;
  • padding-top: 1em;
  • font-size: 1.2em;

متن برای سرصفحه بخش بین دو برچسب شروع و پایان می رود. هر دو مرز بالا (تقسیم بخش) و متن (نام بخش) براساس خواص و مقادیر طراحی شده است. پدینگ نام بخش را به فاصله مورد نظر در زیر مرز بالا قرار می دهد.

گاهی اوقات شما ممکن است متن را برای سرصفحه بخش نیاز نداشته باشید. شما می توانید متن را ترک کنید (من آن را با یک فضای غیر شکستن جایگزین میکنم، nbsp) و از مقدار جامد برای اموال مرز بالا برای شبیه سازی یک خط افقی (hr) استفاده کنید.

تصاویر و کپی

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

برای یک عنوان با موقعیت مرکزی، معمولا از خواص و مقادیر زیر استفاده می کنم:

  • text-align: center;
  • color: #000000;
  • font-size:.75em;
  • margin-bottom: 1em;

برای یک تصویر محور مرکزی، از این ویژگی ها و مقادیر استفاده می کنم:

  • display: block;
  • margin-left: auto;
  • margin-right: auto;

اگر تصویر به صورت محلی ذخیره نشود، از URL کامل به تصویر استفاده می کنم.

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

عنوان چپ هماهنگ

  • color: #000000;
  • text-align: left;
  • font-size:.75em;
  • padding-bottom: 1em;

سمت چپ تصویر

 

  • float: left;
  • padding-left:.5em;
  • padding-right: 1.75em;

 

متناسب با راست

  • color: #000000;
  • text-align: right;
  • font-size:.75em;
  • padding-bottom: 1em;

تصویر راست راست

  • float: right;
  • padding-bottom: 1em;
  • padding-bottom: 1em;

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

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

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

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

  • float: left or right;
  • padding-top:.5em;
  • padding-left:.5em;
  • padding-right:.5em;

برچسب ها SPAN

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

در قالب مقاله من، من از تگ های شروع و پایان استفاده می کنم تا متن را برای ظاهر خاص مشخص کنم. سپس ویژگی های CSS و مقادیر مورد نیاز خود را با اضافه کردن آنها بین نقل قول های یک ویژگی سبک که در تگ start span کد گذاری شده است، اضافه کنم.

 

 

 

 

پست مرتبط
css | طراحی سایت در کرج | طراحی وب سایت در کرج |هلدینگ کیان تجارت فاوا
مبانی CSS

مبانی CSS در مورد CSS فکر میکنید، اما میخواهید آنچه را که باید بدانید یاد بگیرید یا قبل از پریدن بر روی CSS، باید یاد بگیرید؟ اجازه بدهید شروع کنم با گفتن اینکه CSS می تواند وقت شما را در رایانه کاهش دهد. اما دانش شما نیاز به یادگیری دارد و CSS سازگار با موتورهای […]

ادامه مطلب
css | طراحی سایت در کرج | طراحی وب سایت در کرج |هلدینگ کیان تجارت فاوا
بدون نشانه گذاری CSS منو چیست؟

بدون نشانه گذاری CSS منو چیست؟ این نگرانی ها در ترکیب با افزایش دستگاه های وب موبایل باعث شده است بسیاری از طراحان به جای فناوری های وب طراحی شده اند. ظهور اخیر زبان نشانه گذاری (CSS) “tableless” یک پاسخ است که وعده انعطاف پذیری و کنترل بیشتری را می دهد، نیازهای پهنای باند کوچکتر […]

ادامه مطلب
css | طراحی سایت در کرج | طراحی وب سایت در کرج |هلدینگ کیان تجارت فاوا
استفاده و مزایای PSD به CSS

استفاده و مزایای PSD به CSS CSS یا جدول سبک آبشار برای توصیف ویژگی های ارائه یک سند نوشته شده در زبان های نشانه مانند HTML یا XHTML استفاده می شود. استفاده اولیه از CSS این است که محتوای سند را از عناصر ارائه سند مانند رنگ، فونت و طرح جدا کند. چرا نیاز به […]

ادامه مطلب

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