Підводні камені css і як з ними боротися

Відео: Верстка веб-сторінок, HTML шаблонів, макетів і сайтів: від основ CSS для початківців до "нових" можливостей CSS3

Коли ви пишете CSS код, є кілька неприємних ситуацій з якими ви можете зіткнутися. І іноді доводиться вдаватися в CSS трюків, щоб все відображалося так як треба. У цій статті я постараюся показати вам деякі поради і прийоми, які допоможуть вам при написанні CSS коду.

стилі кнопок

Почнемо з оформлення кнопок. При спробі додати стиль кнопці, наприклад «Відправити», якщо хочете щоб вона відображалася однаково в усіх браузерах, не забувайте про наступні властивості:

12345678910

/ * Видалити зовнішні відступи в IE * /.button{overflow: visible-}/ * Видалити внутрішні відступи в Firefox * /.button:: -moz-focus-inner{border: 0-padding: 0-}

Використання псевдо-елементів

Ви напевно знаєте про такі псевдо-елементах як : before і : after, які дозволяють додавати контент до або після блоків, яким поставлено цей елемент. Крім того, елементи, такі як або не містять в собі інші елементи, таким чином псевдо-елементи до них не застосовуються. Винятком є елементом

Градієнт на всю висоту сторінки

Якщо в CSS3 додати градієнт на фон, то він буде знаходиться тільки зліва зверху. Для того щоб розтягнути на всю сторінку, необхідно прописати наступні рядки:

123456789

html {height: 100%-}body {height: 100%-margin: 0-background-repeat: no-repeat-background-attachment: fixed-}

Висота 100%

При встановленні значення height: 100% завжди пам`ятайте про висоту батька цього елемента. Якщо у елемента батька не визначена висота, то у цього елемента визначена висота в 100% від нічого! Це груба помилка. Ось приклад цієї помилки:

123

lt;div id="Parent"gt;lt;div id="Child"gt; текстlt;/divgt;lt;/divgt;

Відео: З HTML в WordPress для новачків (Частина 2). Підключаємо CSS і javascript

і

12345678910

#parent{height: 400px-padding:10px-background:red-}#child{height: 100%-background:green-}

розміри input

Наприклад при створенні форми пошуку, коли ми вказуємо розміри і, то насправді розміри на сторінці не будуть однаково відображатися. Для цього в CSS3 є властивість, яке відповідає за розміри input-ів:

1

box-sizing: content-box | padding-box | border-box-

Це кілька частоіспользуемих рад і методів. Ці поради будуть дуже корисні починаючим.

Якщо є якісь питання, задавайте їх у коментарях нижче.

Успіхів!

джерело: css.dzone.com