У даному уроці ми розглянемо, що таке CSS і чим вони можуть бути для Вас корисні в плані створення сайту.

Однак перед тим як почати розповідь про призначення, функції і можливості CSS я б хотів зробити невеликий відступ і сказати, що на сучасному етапі розвитку інтернету створити професійно оформлений сайт без застосування CSS практично не можливо.


Ні створити сайт за допомогою HTML не вдаючись до CSS ви звичайно зможете але якщо ви хочете по-справжньому красивий і професійно оформлений сайт то без використання CSS це зробити не можливо.

Ну а тепер про те що таке CSS. CSS (Cascading Style Sheets) - каскадні таблиці стилів призначені для відділення зовнішнього вигляду сторінки тобто дизайну від її структури та вмісту.

У CSS є певний стан посилання, яке я не використовую дуже часто. Принаймні, я не використовував його часто до цього, але зараз я розумію, що воно може стати в нагоді. Я говорю про стан посилання "active".

Це стан починає працювати, коли Ви натискаєте на посилання. Тобто, після натискання воно активується. Ми всі користуємося станами "hover" або "visited", а стан "active" може бути корисним, коли ми маємо справу зі стилізованих кнопками.

У Вашій операційній системі кнопки відповідають Вам коли Ви на них натискаєте. Вони візуально стають натиснутими, інформуючи Вас про те, що Ви успішно впоралися з цим завданням. Це робить будь-який додаток більш чуйною і привабливішим з точки юзабіліті.

Дуже часто краса в простоті. Матові чорні вкладки - меню повністю на CSS, без картинок, майже не залишає сліду в коді. Просто скопіюйте CSS код в таблицю каскадних стилів і вставте HTML код на сторінки Вашого сайту.

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/
}

.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

</style>

Вашій увазі представлені 5 швидких порад, які допомагають мені при розробці сайтів.

1. Організуйте Ваш CSS код

Деякі радять мати зміст у таблиці каскадних стилів. Я проти такого підходу. У мене все набагато простіше - я намагаюся писати CSS однаковим чином кожен раз:

1) спочатку йдуть всі важливі контейнери або блоки (шари з ID "header", "footer", "maincontent" та інше);
2) далі йдуть заголовки від H1 до H6;
3) далі йдуть стилі посилань і абзаців;
4) далі всі мої списки (навігація та інше).

Якщо ж Ваш мозок не працює як мій, я рекомендую організувати Ваш CSS файл таким чином, щоб Ви його розуміли і могли легко розібратися. Не копіюйте те, що я запропонував Вам вище, якщо Ви цього не розумієте. Знайдіть найдоступніший для Вас спосіб і працюйте з ним.

Це CSS горизонтальне меню містить вкладки з текстом, які трохи з'їжджають вниз при наведенні мишки. Також для демонстрації даний код показує як робити закруглені нижні кути використовуючи CSS3 і Mozilla правила для закруглених кутів. Зауважте, що ефект заокруглення видно тільки в FireFox (інших майбутніх CSS3 браузерах). За закруглення кутів відповідають наступні рядки коду:

-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;

У цьому уроці ми розглянемо кілька CSS технік для оригінального оформлення картинок на сайті.

HTML

<div class="frame-block">

<span>&nbsp;</span>

<img src="/sample.jpg" alt="" />

</div>

CSS

.frame-block {

position: relative;

display: block;

height:335px;

width: 575px;

}

.frame-block span {

background: url(frame.png) no-repeat center top;

height:335px;

width: 575px;

display: block;

position: absolute;

}

Підказки можна зробити не тільки за допомогою JavaScript, але і за допомогою CSS. Таким чином Ви будете точно впевнені, що вони будуть працювати в будь-якому браузері.

Отже, почнемо!

1. CSS

Необхідно додати наступний код в початок html файлу або ж винести в таблицю каскадних стилів:

У цьому уроці ми будемо робити гарне, блискуче горизонтальне меню.
Для створення зовнішнього вигляду використовується 3 картинки: нижня і градієнтна картинка, а також права і ліва частина порізаної картинки для відображення виділеної вкладки. Вашій увазі представлено 2 різних колірних схем, більше можна завантажити з нашого сайту

Колірні схеми та картинки для меню: