Силата на CSS | SEO-WEB UNIVERSITY SEO Оптимизация търсачки SEO техники настройки на сайт | Facebook | Търсачка №2 | Скрийншот | ScreenShotStudio | Los Angeles | Adidas | Автоавангард | Топ Авто | Кредит Кар | Отслабване | Дънкова мода | Холивуд | RegistryBooster | Bomi Auto | Баня-Банско | Мегафон блог

Силата на CSS

В тази статия бих искал да ви дам примери за добрата идея на CSS и да предоставя повече примери за това как може да се използва за чисто, светло-кодиран и ефективен уеб дизайн. Първо, нека да обясня за CSS. CSS е съкращение от "листове с каскадни стилове" (cascading style sheets). В World Wide Web Consortium обозначавано също катоW3C, CSS се определя, както следва:

"Style Sheets описва как документите са представени на екрана, в печатен вид, или пък как те се произнасят. Чрез прикрепване на Style Sheets в структурирани документи в Интернет (HTML), автори и читатели, могат да представят документи без да жертват елемента или да добавят нови HTML тагове. "
"Cascading Style Sheets (CSS) е стил, който е специално разработен за нуждите на уеб дизайнери и потребители."
Виж (http://www.w3.org/Style/)

Как работи Style Sheets ?
Първо, за да определи стил. Така например, искате да се определи текста като Deep Blue размер на шрифта 12px Verdana в удебелен шрифт:
Color: #5500DD;
Font-size: 12px;
Font-family: Verdana;
Font-weight: bold;

На следващо място, ние даваме някакво име на този (further referred to as "class"):
Mystyle
{
Color: #5500DD;
Font-size: 12px;

Font-family: Verdana;
Font-weight: bold;
}


…Или алтернативно, ние го асоциираме с определен HTML tag:
h1
{
Color: #5500DD;
Font-size: 12px;
Font-family: Verdana;
Font-weight: bold;
}

Стилът може да бъде обявен в самия HTML документ с помощта на <style> някъде в кода на документа. Препоръчително е да го държите в отделен документ с ".css" extension ("mystyle.css"), за да може по натам да промените размера на HTML файла. За да можете да използвате този стил уточнен във айла на HTML документа трябва да приложите link до "mystyle.css" във HEAD зоната на вашия html документ:
<link rel="stylesheet" href="mystyle.css">
С описания линк в HEAD, всички HTML тагове, за които има посочени стилове в "mystyle.css" ще се показват в посочения стил във браузърите.

Как CSS помага за оптимизирането

Представете си, че някакъв HTML код е използван в началото на страницата
<strong><font color="#FF0000" size="24px">Main Начало на страницата</font></strong>
Сега вижте същия ефект може да бъде постигнат със стилове:
<span class="mystyle"> Главна секция в сайта </span>
HTML кода за CSS тага е наполовина, колкото и без него. Това както вече знаете е предимство за работа с търсачките, поради намаления обем сложност на кода на съдържанието.

И даже нещо по-добро:
<h1> Главна секция на My Site </h1>
(with a <link rel="stylesheet" href="mystyle.css"> в секция HEAD и приложения стил е посочен за заглавие на тага H1 “mystyle.css”).

CSS Rollover срещу JavaScript

Rollover ефекти в менюто са много популярни. Въпреки това, те често изискват JavaScript изпълнение. За щастие, rollover-ите могат да бъдат направени чрез CSS, които не изискват никакви скриптове и са напълно четим от паяци
CSS ви позволява да избягвате да използвате JavaScript, като все така е възможно да преобразувате обема на файловете макар и не както в JavaScript, но пък най-голямото предимство е че се предоставя повече текстово съдържание за паяците. Използването на CSS ефект вместо отделни снимки ще ви даде ефективно предимство в битката за търсещи машини, особено ако текстовите връзки са Вашите ключови фрази.

CSS "popup" ефект 

Нека създадем статичен "popup" текст чрез силата на CSS. Тя може да бъде постигната по този начин:
<a href="http://www.mysite.com/css/">Връзки<span>някакъв текст тук някакъв текст тук някакъв текст тук </span></a>
Както се вижда "popup"текста е малък елемент във вътрешността на хипервръзката. И още нещо - даваме команда на текста да не се показва, когато страницата товари:
div#links a span {display: none;}

Изображенията също могат да се ползват за хипер връзка. Ето един пример в кода на този документ:
<a href="http:// www.mysite.com /css/">Links<img src="picturename.gif">
За да предотвратим показването на изображението на страница се задава команда:
div#links a img {height: 0; width: 0; border-width: 0;}
От друга страна ние ги правим визуални благодарение на:
div#links a:hover img {position: absolute; top: 190px; left: 55px; height: 50px; width: 50px;}

CSS image popup ефект

Всяка красива картина, която искате да увеличите за посетителите на страницата, може да бъде обработена чрез CSS изскачащ прозорец така:
<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;

z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;

left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;

top: 0;

left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
Ефекта ще се появи, когато посетител посочи изображението с мишката. Може също да включите това:"image popup" код в HTML страницата.

CSS 3D бутон вместо JavaScript

3-D бутон е още един велик метод за добър дизайн без да се използва JavaScript. Ефекта също се вижда, когато мишката е в/у бутона.

За да видите пълния ефект приложете кода по долу в сайта си:

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}


a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

Кога CSS трябва да се използва с повишено внимание?
Когато кода на вашата страница използва CSS винаги трябва да имате предвид, че търсачките не обичат да индексират скрит контекст. По този начин, трябва да избягват да използват "display:none", "visibility:hidden" или други подобни определения, за да скриете раздели пълни с ключови думи. Такива действия са определено спам и не се препоръчват.

Друга техника
Трябва да избягвате да прилагате цвят на текст еднакъв с цвета на фона с помощта на CSS. Тази техника се използва от спамерите, за да скриват приложени стратегически думи за роботите, като в същото време ги прикриват от погледа на обикновения потребител и това може да навреди на страниците ви много.

Още едно нещо, от решаващо значение
Използвайте HTML таговете за тяхното предназначение. Например, вие не трябва да използвате CSS за смяна на предназначението на етикета. Има класове за тази цел.

Използването на CSS намалява до минимум размера на HTML кода и осигурява най-добрата възможност за ефективно използване на ключови думи в заглавните HTML тагове (h1, h2 и т.н.). Не забравяйте обаче - CSS не е невидим за търсачките. Търсачките днес могат да четат лесно "cascading style sheets" и по този начин те са наясно с това, което се написва в тях.
Какво трябва да помните от този урок:

1. CSS е идеално средство за увеличаване на съдържанието, за съотношението код, HTML намаляване на размера на файла, и компромиси между чисто визуален дизайн и чисти код за паяци.
2. Трябва да избягват да използват CSS за визуално скрий раздели пълнени с думи или да представи същите цвета на текста и фона.

Първия Български Бутон за споделяне

0 коментара:

Вашият коментар ще бъде премахнат, ако в него има включени активни хипер връзки. Моля проявявайте здрав разум и колегиалност! Не публикувайте обидни думи и изрази, което е признак на ниска култура. Авторът Ви благодари за разбирането!
Приятни минути на страниците на SEO-WEB UNIVERSITY