В тази статия бих искал да ви дам примери за добрата идея на 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/)
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 документ:
Как CSS помага за оптимизирането
Представете си, че някакъв HTML код е използван в началото на страницатаИ даже нещо по-добро:
CSS Rollover срещу JavaScript
Rollover ефекти в менюто са много популярни. Въпреки това, те често изискват JavaScript изпълнение. За щастие, rollover-ите могат да бъдат направени чрез CSS, които не изискват никакви скриптове и са напълно четим от паяциCSS ви позволява да избягвате да използвате JavaScript, като все така е възможно да преобразувате обема на файловете макар и не както в JavaScript, но пък най-голямото предимство е че се предоставя повече текстово съдържание за паяците. Използването на CSS ефект вместо отделни снимки ще ви даде ефективно предимство в битката за търсещи машини, особено ако текстовите връзки са Вашите ключови фрази.
CSS "popup" ефект
Нека създадем статичен "popup" текст чрез силата на CSS. Тя може да бъде постигната по този начин:Изображенията също могат да се ползват за хипер връзка. Ето един пример в кода на този документ:
CSS image popup ефект
Всяка красива картина, която искате да увеличите за посетителите на страницата, може да бъде обработена чрез CSS изскачащ прозорец така:position: relative;
z-index: 0;
}
background-color: transparent;
z-index: 50;
}
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
border-width: 0;
padding: 2px;
}
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
CSS 3D бутон вместо JavaScript
3-D бутон е още един велик метод за добър дизайн без да се използва JavaScript. Ефекта също се вижда, когато мишката е в/у бутона.За да видите пълния ефект приложете кода по долу в сайта си:
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 намалява до минимум размера на HTML кода и осигурява най-добрата възможност за ефективно използване на ключови думи в заглавните HTML тагове (h1, h2 и т.н.). Не забравяйте обаче - CSS не е невидим за търсачките. Търсачките днес могат да четат лесно "cascading style sheets" и по този начин те са наясно с това, което се написва в тях.
Какво трябва да помните от този урок:
1. CSS е идеално средство за увеличаване на съдържанието, за съотношението код, HTML намаляване на размера на файла, и компромиси между чисто визуален дизайн и чисти код за паяци.
2. Трябва да избягват да използват CSS за визуално скрий раздели пълнени с думи или да представи същите цвета на текста и фона.
0 коментара:
Публикуване на коментар
Приятни минути на страниците на SEO-WEB UNIVERSITY