Дэвид Макфарланд | Новая большая книга CSS (2016) [PDF]

Дэвид Макфарланд | Новая большая книга CSS (2016) [PDF]

---

Автор: Дэвид Макфарланд
Серия: "Бестселлер O’Reilly"
Издательство: Питер
ISBN: 978-5-496-02080-0
Жанр: Компьютерная литература
Формат: PDF
Качество: Изначально электронное (ebook)
Иллюстрации: Черно-белые
Количество страниц: 720

Описание:
Технология CSS3 позволяет создавать профессионально оформленные сайты, но тонкости этого языка могут оказаться довольно сложными даже для опытных веб-разработчиков. Полностью переработанное четвертое издание этой книги поможет вам поднять навыки работы с HTML и CSS на новый уровень; она содержит множество ценных советов, описаний приемов, а также инструкции, написанные в стиле справочного руководства.
Веб-дизайнеры, как начинающие, так и опытные, при помощи этой книги быстро научатся создавать красивые веб-страницы, которые при этом молниеносно загружаются как на ПК, так и на мобильных устройствах

Скриншоты:

Время раздачи: Пн-Пт с 18:00 до 7:00 Мск, Сб-Вс 24/2 (до появления первых 3-5 скачавших)

goblin2016, не понял суть вопроса. Коллега, а вы эту книгу читали?

Медиа я использую так, пишу стиль для широкого монитора, далее начинаю сужать браузер, как только что-то "встает" криво, я пишу медиа и корректирую, то что нужно. Далее опять сужаю и опять смотрю.

К примеру нужно сделать 3 стиля, для широкого, от 1000 до 600px, и все что меньше.

основной стиль

@media (min-width: 601px) and (max-width: 1000px) {
правка под этот диапазон разрешений
}

@media (max-width: 600px) {
правка под маленький "экран"
}

BigTolly писал(а):

goblin2016, не понял суть вопроса. Коллега, а вы эту книгу читали? Медиа я использую так, пишу стиль для широкого монитора, далее начинаю сужать браузер, как только что-то "встает" криво, я пишу медиа и корректирую, то что нужно. Далее опять сужаю и опять смотрю. К примеру нужно сделать 3 стиля, для широкого, от 1000 до 600px, и все что меньше. основной стиль @media (min-width: 601px) and (max-width: 1000px) { правка под этот диапазон разрешений } @media (max-width: 600px) { правка под маленький "экран" }

Спасибо большое.

Последний вопрос к вам по поводу адаптивной вёрстки: прописываете ли вы в HEAD-е страницы такой метатег

Код: выделить все <meta name="viewport" content="...">

Если можно, скажите пару слов именно об этом метатеге, для чего он нужен (и нужен ли вообще?), и какой синтаксис у этого метатега именно у вас на рабочих сайтах? Заранее прошу прощения за такие развёрнутые вопросы, просто адаптивная вёрстка - это актуальный вопрос для меня сейчас...

Кстати говоря, насколько мне известно, Dreamweaver последних версий тоже проставляет этот метатег при автоматической генерации адаптивных шаблонов (встроенных). Потому, пару слов скажите об этом метатеге, пожалуйста.

goblin2016, мне интересно, какой добрый человек учил вас работать с информацией? Есть гугл, например и в нём русским по браузеру можно почитать и сделать даже выводы.

goblin2016, я если честно сам дилетант ))

Но в 2-х словах, если у вас сайт адаптивный, к примеру через flexbox, media,.. то прописываем:
<meta name="viewport" content="width=device-width, initial-scale=1">
если ваш сайт не адаптивный, а к примеру имеет ширину 800px, то пишем:
<meta name="viewport" content="width=800">

я делаю адаптивные сайты, поэтому пишу верхний вариант.

Кстати, все это можно увидеть в работе, достаточно открыть страницу в хроме, нажать F12, затем Ctrl+Shift+M, сверху выбираем нужный гаджит и экспериментируем с viewport.

BigTolly писал(а):

goblin2016, я если честно сам дилетант )) Но в 2-х словах, если у вас сайт адаптивный, к примеру через flexbox, media,.. то прописываем: <meta name="viewport" content="width=device-width, initial-scale=1"> если ваш сайт не адаптивный, а к примеру имеет ширину 800px, то пишем: <meta name="viewport" content="width=800"> я делаю адаптивные сайты, поэтому пишу верхний вариант. Кстати, все это можно увидеть в работе, достаточно открыть страницу в хроме, нажать F12, затем Ctrl+Shift+M, сверху выбираем нужный гаджит и экспериментируем с viewport.

Вот именно это меня и интересовало, спасибо вам большое.

За хром - спасибо за подсказку, о клавише F12 я и до этого знал, а вот об адаптивном режиме разработчика узнал только что, действительно классная штука!

BigTolly
Ещё такой вопрос... А как вы манипулируете элементами при создании дизайна для уменьшенных размеров мониторов (смартфонов)? Используете свойство display:block / none? То есть, что-то убираете, что-то корректируете, я правильно понимаю? При этом исходный HTML код документа вы вообще не трогаете, а работаете только со стилями? Всё верно?

Добавлено спустя 55 секунд:

Или же вы в том числе корректируете (изменяете) и исходный HTML код документа?

Добавлено спустя 4 часа 42 минуты 39 секунд:

Перефразируя мой вопрос выше, расскажите как вы технически делаете адаптивный дизайн, и какими стилями CSS при этом в основном пользуетесь, меняете ли сам HTML документ при этом? Буду ждать ответ, поскольку мне как раз нужно сделать адаптивный дизайн, не знаю как и куда бежать ((( Заранее спасибо.

Верно, html я не трогаю.

Верно, на больших разрешениях м.б. div{display:block;}
а на маленьких, если мне div не нужен я могу его не показывать div{display:none;}

Я еще раз задаю вопрос, вы читали книгу из данного топика, там все разжевано на примерах.

BigTolly писал(а):

Верно, html я не трогаю. Верно, на больших разрешениях м.б. div{display:block;} а на маленьких, если мне div не нужен я могу его не показывать div{display:none;} Я еще раз задаю вопрос, вы читали книгу из данного топика, там все разжевано на примерах.

Нет, не читал, но собираюсь. Спасибо за ответ!

Прочитал половину книги. Действительно, книга хорошая.

Спасибо.

Да, умеет автор писать по CSS, чего не скажешь про JS+jQuery.

Цитата:

Да, умеет автор писать по CSS, чего не скажешь про JS+jQuery.

А что не так с JS+jQuery ?

Мне не понравилось, сложно все и не полностью. Что-то не важное разжевывает по 10 раз, а важное проскакивает, и вообще мне jQuery что-то не понравился. Сейчас изучаю JS Илья Кантор вроде нормально все разжевано, но практики маловато, ладно хоть задач навалом, можно посмотреть ответы ))

Вопрос не по теме: как подписку поменять "Уведомлять об ответах", мне приходит:
http://nnmclub.to/forum/viewtopic.php?p=9219386#9219386

а я хочу через https, т.е. так:
Дэвид Макфарланд | Новая большая книга CSS (2016) [PDF]

В книге очень много опечаток, в целом книга не плохо позволяет закрепить и структурировать знания по css в голове, к тому же очень много ссылок на полезные методики и практики. Однозначно стоит читать всем кто хочет довести знание css до совершенства, правда если владеете английским на уровне понимания литературы, то однозначно читайте в оригинале.

xqwertyytrewqx9 писал(а):

В книге очень много опечаток, в целом книга не плохо позволяет закрепить и структурировать знания по css в голове, к тому же очень много ссылок на полезные методики и практики. Однозначно стоит читать всем кто хочет довести знание css до совершенства, правда если владеете английским на уровне понимания литературы, то однозначно читайте в оригинале.

Книга, если читать оригинал, там все хорошо, нет никаких опечаток. Английский я знаю так себе, со словарем. Но вот даже я вижу что это не перевод книги - а так себе пересказ, чуть ли ни на каждой странице смысл может поменяться с точностью до наоборот. К примеру, выдержка из оригинала:

Цитата:

Conversely, increasing the space can give headlines a calmer, more majestic quality. To reduce the space between letters, you use a negative value like this: Код: выделить все letter-spacing: -1px; A positive value adds space between letters: Код: выделить все letter-spacing: .7em;

А вот вам пересказ этой части:

Цитата:

И наоборот, увеличение интервала может придать заголовкам более спокойный, величественный вид. Чтобы это сделать, используйте отрицательные значения свойства: Код: выделить все letter-spacing: -1px; Положительные значения свойства делают промежуток между буквами больше: Код: выделить все letter-spacing: .7em;

Слово "to reduce" похоже переводчики не заметили, из за чего смысл поменялся на противоположный. И так везде. В общем совет - не читайте эту книгу в этом переводе. Я лично со словарем читаю оригинал, хоть и раз в 5 медленнее. (заодно подтягиваю английский). И оформление гораздо привлекательнее.