مزایای CSS

CSS

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

 

بیایید از یک مثال ساده HTML استفاده کنیم:

 

<!–Insert all your head info, including a CSS link like below–><link rel=”stylesheet” type=”text/css” href=”file.css”>

<div id=”content”> <!–I will explain this div later–>

<h1>Heading With Your Important Keywords</h1>

<h2>Subheading With Important Keywords</h2>

<p>Your important content will be here, with keywords. Notice

how this is right at the top of your code. No matter where this

is on the page, you want it here at the top of your code.</p>

</div> <!–This would be the end content div–>

<div id=”nav”> <!–This div represents a navigation example–>

<p>This could have image buttons, text, or both. If using images,

make sure to include alt text which should contain keywords. With

tables for layout, this would most likely be above the content,

now it is below where it should be. The div id above will help you

control this.</p>

</div>

<div id=”banner”>

<p>As the name can imply, this can be at the top of the page, but

notice how it is way down in your code because it has no strong SEO

elements. It might be your logo or additional navigation. Even though

it shows at the top of the page to the user, it is not the first thing

you want the search engine to read or display in search results.</p>

</div>

<div id=”summary”>

<!–This div can be anything, used here as example–>

<p>This example of another div is used to illustrate another SEO principle.

Use keywords in it so it is like your closing point. By appearing at the

bottom of the code, it makes stronger SEO.</p>

</div>

بعد، من یک مثال ساده از نحوه ایجاد file.css برای کنترل طرح نشان می دهم. برای دیدن اثرات می توانید از این کد در یک ویرایشگر متن استفاده کنید. برای سادگی، من فقط روی کد طرح تمرکز خواهم کرد، ما فونت ها، اندازه ها، لینک ها و غیره را اعلام نخواهیم کرد.

در مثال HTML، ما 4 بخش (divs) داریم. شما می توانید با پیکسل یا درصد (یا حتی هر دو) تقسیم کنید. ما برای استفاده ساده از این اصل از پیکسل استفاده خواهیم کرد.

/*Begin CSS*/

/*Just for the record, this is a comment in CSS*/

#nav {position: absolute;

top: 0px;

left: 0px;

width: 200px;

height: 500px;

padding: 20px 10px 10px 20px; }

/*

برای توضیح کد بالا، من divs را در دستورالعمل متفاوت از HTML قرار دادم. این سفارش جریان جریان شیوه انجام طرح صفحه را دنبال می کند. همچنین اگر بخواهید یک ساختار جدول در HTML ایجاد کنید، جریان را دنبال می کنید. بخش نوشیدنی در برابر گوشه سمت چپ بالای صفحه (در بالا و سمت چپ هر دو 0px) قرار دارد. علامت # مشخص “id” div را به دنبال نام می دهد. من عرض را به 200px تنظیم کردم که مانند ساخت یک سلول جدول که عرض است. من از ارتفاع 500px فقط به عنوان مثال استفاده کردم، خلاصه در زیر شروع خواهد شد که نهایی به پایان می رسد. شما می خواهید مطمئن شوید که همه چیز با اندازه های مشخص شده شما مناسب خواهد بود. شما همچنین می توانید از پد استفاده کنید، اما بر خلاف یک سلول جدول در HTML، می توانید هر یک از طرفین را به طور جداگانه تنظیم کنید. در مثال بالا، 20px اولین بار بالا است، سپس هر طرف را در جهت عقربه های ساعت اعلام می کند، بنابراین سمت چپ نیز 20px است. * /

#summary {position: absolute;

top: 00px;

left: 0px;

width: 200px;

padding: 20px 10px 10px 20px; }

/ * خلاصه بالا بالا می آید که در آن نهایی به پایان می رسد، در 500 پیکسل از بالا. تنظیمات دیگر برای هم ترازی مطابقت دارند. من ارتفاع را تنظیم نکردم، زیرا هنگامی که محتوای شما را وارد می کنید، درست مثل یک سلول جدول کشش می شود. * /

 

#banner {position: absolute;

top: 0px;

left: 200px;

width: 550px;

height: 150px;

padding: 20px 0px 10px 20px; }

/*

بنر در بالای صفحه قرار خواهد گرفت، اما از 200 مگا پیکسل از سمت چپ، جایی که نهایی به پایان می رسد، شروع خواهد شد. اعلام ارتفاع یک اختیاری است، اما برای حس کردن در مواردی که محتوای زیر شروع می شود، کمک می کند. من فقط به عنوان مثال 150px استفاده کردم. دلیل لود کردن 0px در سمت راست این است که باقی مانده از صفحه نمایش در این طرح خالی است، بدون نیاز به پد کردن آن طرف. عرض را محدود میکنم تا صفحه نمایش به اندازه 800×600 رزولیشن نمایش داده شود (عرض کل اینجا 750 پیکسل است).

*/

#content {position: absolute;

top: 150px;

left: 200px;

width: 550px;

padding: 10px 0px 10px 20px

/ * در حال حاضر محتوای شروع می شود و جایی که بنر از بین می رود، 200px به سمت چپ و 150px از بالا. توجه کن آخرین اگر از جداول برای ایجاد یک طرح استفاده کردید، این امر در کد شما نیز آخرین خواهد بود. موتورهای جستجو قبل از رسیدن به گوشت صفحه خود همه چیز را بخوانند. در HTML مورد استفاده در اینجا، آن را در بالای کد خود قرار می دهد تا موتورهای جستجو برای اولین بار آن را ببینند. * /

/*End CSS*/

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

حتما مطالعه کنید:فواید css و آنچه باید درباره آن بدانید

آموزش css

csshtmlآشنایی با cssفواید cssمزایای css

امکان ارسال دیدگاه وجود ندارد!

تماس با ما