- 1. Використання reset.css
- 2. Використовуйте скорочення в CSS
- 3. Розуміння Class і ID
- 4.Власть <li>
- 5. Забудьте <table> - спробуйте <div>
- 6. Засоби налагодження CSS
- 7. Уникайте зайвих селектор
- 8. Пам'ятайте про! Important
- 9. Заміна тексту зображенням
- 10. Розуміння CSS позиціювання
- 11. CSS @import проти <link>
- 12. Стилізація форм з CSS
- 13. Отримуйте натхнення
- 14.Скругленние кути в CSS
- 15. Стежте за чистотою CSS коду
- 16. Величини типографіки: px VS em
- 17. Таблиця CSS сумісності браузерів
- 18. Багатоколоночних дизайн в CSS
- 19. Безкоштовні CSS Редактори
- 20. Розуміння типів носіїв (Media Types)
Один мій хороший друг всерйоз почав вивчати верстку і CSS. По ходу його навчання, у нього постійно виникали питання, які для мене здавалися очевидними. Але коли я поставив себе на його місце, згадав свій початок пізнання CSS, то зрозумів, що мої питання били такими ж очевидними і їх було, напевно, ще більше.
Тому, сьогодні, завдяки друзям з далекого «забугра» ( джерело ), Я хочу опублікувати 20 корисних порад, які дуже допоможуть починаючому CSS-кодеру.
«Справжня радість в осягненні основ» - сказав великий танцюрист Михайло Баришніков. В CSS міцні основи - це міцний фундамент вашого сайту. Давайте розглянемо деякі CSS поради, які стануть міцною основою для верстальника.
1. Використання reset.css
За замовчуванням браузери, наприклад Firefox і Internet Explorer, по різному інтерпретують стилі через власні базових CSS. reset.css допомагає скинути дефолтні стилі браузерів, що дає вам можливість почати з «чистого аркуша» - побачити базові CSS-властивості однаково в більшості браузерів.
Ось деякі з найбільш часто використовуваних reset.css фреймворків - Yahoo Reset CSS , Eric Meyer's CSS Reset , Tripoli
2. Використовуйте скорочення в CSS
Шорткати в CSS дають більш короткий шлях для опису властивостей, при цьому код стає чистішим і легше.
Замість CSS коду такого типу:
1 2 3 4 5 6 .header {background-color: #fff; background-image: url (image.gif); background-repeat: no-repeat; background-position: top left; }
.header {background-color: #fff; background-image: url (image.gif); background-repeat: no-repeat; background-position: top left; }
Можна написати більш зрозумілий і короткий код:
1 2 3 .header {background: #fff url (image.gif) no-repeat top left}
.header {background: #fff url (image.gif) no-repeat top left}
Цікаве по темі - Introduction to CSS Shorthand , Useful CSS shorthand properties
3. Розуміння Class і ID
Ці два селектора часто плутають новачків. В CSS, class представлений точкою «.» В той час як id відповідає символ «#». Якщо коротко, то id використовується в стилі, який є унікальним і не повториться, а class можна використовувати повторно.
Матеріали по темі - Class vs. ID | When to use Class, ID | Applying Class and ID together
4.Власть <li>
<Li> для списку посилань, дуже корисний, коли він правильно використовується як елемент <ol> або <ul> особливо в разі створення меню.
Корисні Посиланням - Taming Lists , Amazing LI .
5. Забудьте <table> - спробуйте <div>
Одним з найбільших переваг CSS є використання <div> для досягнення більшої гнучкості в плані оформлення розмітки. <Div> Мають на відміну від <table> в тому, що зміст не заблоковано в <td> клітин. Більшість табличних розміток цілком можуть бути реалізовані з використанням <div> і відповідного CSS, за винятком випадків, коли ми дійсно виводимо табличні дані.
ресурси - Taming Lists , Amazing LI
6. Засоби налагодження CSS
Дуже зручно використовувати спеціальні інструменти для налагодження CSS на стадії розробки, щоб побачити і виправити помилки. Ось кілька безкоштовних інструментів налагодження CSS, які ви можете використовувати в браузері: FireFox Web Developer , DOM Inspector , Internet Explorer Developer Toolbar , і Firebug .
7. Уникайте зайвих селектор
Іноді ваші CSS правила можуть бути значно коротше, ось наприклад подивіться на два варіанти коду:
Їх можна скоротити до наступного:
Пояснення: <li> буде існувати тільки в рамках <ul> або <ol> і <td> буде тільки всередині <tr> і <table> тому не потрібно повторно включити їх в оголошення властивостей.
8. Пам'ятайте про! Important
Будь-яке властивість позначене! Important Буде превалювати над звичайними правилами каскадирования. Будьте обережні з ним!
Розглянемо код:
.page {background-color: blue! important; background-color: red; }
.page {background-color: blue! important; background-color: red;}
У наведеному вище прикладі, властивості background-color: blue; буде придушувати background-color: red; через присутність! important. Однак це правило не стосується Internet Explorer 6, оскільки він не правильно працює з цим правилом. Детальніше про це читайте в статті Десять прийомів для приручення IE 6 .
9. Заміна тексту зображенням
Це практика часто застосовується в заголовку сайту або в заголовку статті, зазвичай замінюється текст між <h1> title & lt / h1>. Ось як це робиться:
h1 {text-indent: -9999px; background: url ( "title.jpg") no-repeat; width: 100px; height: 50px; }
h1 {text-indent: -9999px; background: url ( "title.jpg") no-repeat; width: 100px; height: 50px; }
Пояснення: text-indent: -9999px; виводить текст за межі екрану, а зображення для заміни виводиться через background: {...}, при цьому блоку задається width і height. Про всяк випадок, якщо це можливо, додайте властивість overflow: hidden ;, що може запобігти появі горизонтального скрол в браузері, але це стосується тільки верстки в проекції rtl. І ще, якщо в блоці є посилання, або блок на засланні, то не забудьте додати text-decoration: none ;.
10. Розуміння CSS позиціювання
Часто новачки не можу звикнути до правил позиціонування. Є хороша стаття, правда англійською, яка детально описує правила позиціонування. Difference Between @import and link . Якщо потрібен переклад, то напишіть в коментарях. Постараюся опублікувати.
11. CSS @import проти <link>
Є 2 способи виклику зовнішніх CSS файлів: за допомогою @import і <link> Якщо ви не впевнені, який метод використовувати, то можете подивитися статтю Difference Between @import and link , Знову ж таки, якщо потрібен переклад і розтлумачити, то пишіть в коментарях.
12. Стилізація форм з CSS
Веб-форми можна легко і красиво оформити за допомогою CSS. У наступних стаття показано, як:
читаємо - Table-less form , Form Garden , Styling even more form controls .
13. Отримуйте натхнення
Якщо ви шукаєте красиві сайти на основі CSS для натхнення, або просто хочете подивитися на красиві інтерфейси, то ось деякі сайти, на яких виставляються гідні речі:
Якщо цього мало, то ось більше 74 CSS Galleries .
14.Скругленние кути в CSS
Власне ось пара зграєю по створенню блоків із закругленими куточками на CSS:
Насправді таких статей дуже багато, так само як і методів. Раджу до прочитання ще цю статтю Створення блоків із закругленими куточками .
15. Стежте за чистотою CSS коду
Якщо ваш CSS код не досить чистий, то ви ризикуєте до кінця верстки просто загубитися у власному коді. Для того, щоб ви ніколи не загубилися у власному верстці, потрібно дотримуватися простих, але важливих речей:
- Розбивайте великі CSS на частини
- Використовуйте коментарі в CSS
- Використовуйте шорткати в CSS
- Робіть код структурованим
Є хороша стаття, але англійською: 12 Principles For Keeping Your Code Clean , Format CSS Codes Online .
16. Величини типографіки: px VS em
На знаєте що краще використовувати - px або em? Наступні статті дозволять вам краще зрозуміти одиниці типографіки.
17. Таблиця CSS сумісності браузерів
Ми всі знаємо, що браузери по-своєму інтерпретують CSS. Добре мати під рукою посилання, на таблицю або список, який показує всю CSS сумісність для кожного браузера.
Деякі таблиці підтримки CSS різними браузерами: # 1 , # 2 , # 3 , # 4 .
18. Багатоколоночних дизайн в CSS
Є проблеми з нормальною версткою і розміщенням колонок? Ось кілька статей, які можуть допомогти:
19. Безкоштовні CSS Редактори
Редактори, які підсвічують код, завжди краще, ніж «Блокнот». Ось деякі досить непогані і популярні:
20. Розуміння типів носіїв (Media Types)
Існують кілька типів носіїв, які ви додаєте, коли вставляєте CSS через <link> print, projection і screen - найбільш часто використовувані. Розуміння і використання їх належним чином поліпшить юзабіліті вашого проекту. Дані статті можуть допомогти розібратися в цьому питанні:
CSS and Media Types , W3 Media Types , CSS Media Types , CSS2 Media Types .
постовий:
Екатеренбург гаразд на ноу-хау, наприклад: Керамічна цегла Єкатеринбург.
