Як я вже говорив синтаксис Zen Coding схожий на синтаксис CSS. Що б зрозуміти, що ж таке Zen Coding давайте розглянемо приклад:
Застосовуємо плагін і отримуємо:
HTML селектори
І так, ми хочемо написати div з id = 'test', для цього в Zen Coding використовується наступний код:
Подивимося, що вийшло:
Або ми хочемо створити div з class = "test", тоді в Zen Coding пишемо наступний код:
Подивимося, що вийшло:
Наступний крок, задати div з class = "test test1". Немає нічого простіше:
Застосовуємо Zen Coding:
Як бачимо, синтаксис Zen Coding мало, чим відрізняється від синтаксису CSS.
Тепер ми хочемо, щоб в div був тег p з id = "test". Для того, щоб вкласти один тег в інший використовується символ>. Тепер для реалізації нашого прикладу пишемо наступний код:
Тепер ми хочемо відобразити два тега div, в Zen Coding використовується +:
Ось тепер найцікавіше, ми хочемо в тег div помістити тег p з id = "title" і тег a з class = "link". Для цього пишемо:
Відмінно, розглядаємо далі. Нам необхідно додати ul з 5 li. пишемо:
Але тут є ще один момент ми хочемо додати ul c id = "test" в нього помістити 5 li з class = "item-1", class = "item-2", ..., class = "item-5". пишемо:
Як бачите Zen Coding полегшує нам написання html коду в кілька разів.
Давайте розглянемо ще декілька корисних "фішок"
Для того, щоб отримати:
Або, щоб отримати:
Як Ви вже побачили Zen Coding полегшує написання HTML коду в рази, та й перехід на нього не складає труднощів. Так, що користуйтеся і насолоджуйтеся життям.
А на цьому все, все успішної розробки.
Як я вже говорив синтаксис Zen Coding схожий на синтаксис CSS. Що б зрозуміти, що ж таке Zen Coding давайте розглянемо приклад:
Застосовуємо плагін і отримуємо:
HTML селектори
І так, ми хочемо написати div з id = 'test', для цього в Zen Coding використовується наступний код:
Подивимося, що вийшло:
Або ми хочемо створити div з class = "test", тоді в Zen Coding пишемо наступний код:
Подивимося, що вийшло:
Наступний крок, задати div з class = "test test1". Немає нічого простіше:
Застосовуємо Zen Coding:
Як бачимо, синтаксис Zen Coding мало, чим відрізняється від синтаксису CSS.
Тепер ми хочемо, щоб в div був тег p з id = "test". Для того, щоб вкласти один тег в інший використовується символ>. Тепер для реалізації нашого прикладу пишемо наступний код:
Тепер ми хочемо відобразити два тега div, в Zen Coding використовується +:
Ось тепер найцікавіше, ми хочемо в тег div помістити тег p з id = "title" і тег a з class = "link". Для цього пишемо:
Відмінно, розглядаємо далі. Нам необхідно додати ul з 5 li. пишемо:
Але тут є ще один момент ми хочемо додати ul c id = "test" в нього помістити 5 li з class = "item-1", class = "item-2", ..., class = "item-5". пишемо:
Як бачите Zen Coding полегшує нам написання html коду в кілька разів.
Давайте розглянемо ще декілька корисних "фішок"
Для того, щоб отримати:
Або, щоб отримати:
Як Ви вже побачили Zen Coding полегшує написання HTML коду в рази, та й перехід на нього не складає труднощів. Так, що користуйтеся і насолоджуйтеся життям.
А на цьому все, все успішної розробки.