Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
|
Значения: avoid Пример: page-break-inside: avoid; widows Противоположное свойству orphans , описанному выше. Оно определяет минималь- ное количество строк, которое должно появиться наверху печатной страницы. Ска- жем, принтер может поместить четыре из пяти строк абзаца внизу страницы и дол- жен будет переместить последнюю строку наверх следующей страницы. Чтобы предотвратить появление таких «висячих» строк, используйте свойство widows , заставляющее браузер переместить по крайней мере две или три строки вместе наверх печатной страницы (только Opera понимает это свойство, поэтому оно ог- раничено в использовании). Значения: числа, например 1 , 2 , 3 или 5 Пример: widows: 3; 2 Информационные ресурсы, касающиеся CSS К сожалению, одна книга не может ответить на все ваши вопросы по CSS. Однако, к счастью, есть много ресурсов по CSS, доступных как начинающим, так и опытным веб-разработчикам. В этом приложении вы найдете те ресурсы, которые помогут вам разобраться с общими понятиями в CSS и научат решать конкретные задачи CSS, такие как создание навигационной панели или разметка веб-страницы. Справочники Справочники по CSS-свойствам бывают как официальные, так и малоизвестные. Конечно, существуют сайты и учебные онлайн-пособия, но вам не обязательно за- ходить в Интернет, чтобы узнать о CSS. Некоторые из этих справочников можно найти в «старомодном» бумажном варианте. Консорциум Всемирной паутины (W3C) Текущие разработки CSS ( www.w3.org/Style/CSS/current-work ). Здесь находятся все CSS-спецификации, включая самые новые дополнения. Различные спецификации разбиты по состоянию, например Completed — завершенные, Revising — пересмат- риваемые или Abandoned — отмененные. Можно щелкнуть на любой спецификации, чтобы получить ее подробное описание, но принадлежность спецификации к разря- ду Completed (завершенная) еще не означает, что она полностью реализована во всех веб-браузерах. Но все же этот сайт предоставляет последнее слово, касающееся CSS (иногда чересчур сложное и малопонятное). Онлайн-справочники CSS-справочник в сети Mozilla Developer Network ( https//developer.mozilla.org/en- US/docs/CSS/CSS_Reference ). Сеть разработчиков Mozilla Developer Network (MDN) предоставляет один из самых полных справочников по CSS (а также по HTML5, JavaScript и другим веб-технологиям). CSS-справочник Sitepoint ( http://reference.sitepoint.com/css ) предоставляет чет- кий, ориентированный на разработчиков справочник CSS-свойств и понятий. На него вполне можно поменять документацию W3C или MDN, если от них ваши глаза уже устали. Can I use... (Могу ли я использовать...)( http://caniuse.com ). Этот часто обнов- ляемый сайт предоставляет подробную информацию по CSS и браузерной 604 Приложения совместимости. Здесь можно определить, будет ли то или иное CSS-свойство работать, например, в Internet Explorer 9. CSS3-файлы ( http://www.css3files.com/ ) предоставляет неплохие инструкции и еще более хорошие демонстрации наиболее популярных свойств CSS3, таких как анимация, тени, градиенты и многое другое. Справочная информация по CSS Даже при наличии лучших справочников (таких как эта книга) иногда приходится обращаться за помощью к знатокам. Вы можете вступить в дискуссионный клуб, где специалисты по CSS отвечают на вопросы по электронной почте, либо внима- тельно просмотреть огромное количество информации на специальном форуме. Рассылки. CSS-Discuss ( http://css-discuss.org/ ). Самая большая из существу- ющих рассылок, посвященная CSS. CSS-эксперты помогают разобраться в пробле- мах каскадных таблиц стилей. ПРИМЕЧАНИЕ Прежде чем задавать в CSS-Discuss вопрос, который ранее до вас уже задавали 47 000 человек, проверьте их "вики"-совместимый сайт, в котором участники группы свободно добавляют, редак- тируют и обновляют статьи друг друга. Этот сайт превратился в очень удобный каталог подсказок и приемов, практических методов и исчерпывающего объяснения тем по CSS. Зайдите на страницу http://css-discuss.incutio.com/. Форумы CSSCreator ( www.csscreator.com/css-forum/ ). Очень активный форум, предлага- ющий помощь и советы по всему, начиная с базового CSS и заканчивая усовер- шенствованными разметками. CSS-форум на SitePoint.com ( www.sitepoint.com/forums/forumdisplay.php?f=53 ). Другая полезная группа для любителей CSS. CSS-Tricks.com ( http://css-tricks.com/forums ). На этом относительно новом фору- ме можно найти полезную информацию. Если вы программируете на PHP или JavaScript, то найдете здесь много полезного для себя. Подсказки, приемы и советы по CSS Сеть упрощает для всех возможность стать издателем. Однако когда каждый яв- ляется издателем, тяжело перебирать весь материал и найти в нем понятную, крат- кую и точную информацию. В Интернете достаточно много качественных матери- алов по CSS, что, как ни странно, не очень хорошо. Приведу некоторые ссылки по теме CSS из числа лучших. CSS-Tricks.com ( http://css-tricks.com ). Этот блог, который ведет всего один чело- век, полон прекрасных советов по использованию CSS. Вы найдете здесь часто обновляющиеся советы и рекомендации, а также исчерпывающие видеоуроки. Sitepoint ( www.sitepoint.com/subcat/css ). Содержит множество статей и руко- водств по технологии CSS. Здесь также часто появляются самые последние новости и информация по CSS. Приложение 2. Информационные ресурсы, касающиеся CSS 605 Smashing Magazine ( www.smashingmagazine.com/category/css ). Здесь собраны одни из лучших ресурсов в Интернете, а в категории CSS вы найдете практически бесконечное количество ссылок, освещающих самые креативные подходы к при- менению каскадных таблиц стилей для создания веб-дизайна. NetMagazine ( http://www.netmagazine.com/tag/css?ct=tutorial ). На этом сайте часто можно найти интересные и полезные руководства по CSS. CSS-навигация В гл. 9 было показано, как с нуля создавать навигационные кнопки для сайта. Но учебные онлайн-пособия — отличный способ закрепить знания. Кроме того, как только вы поймете весь процесс в подробностях, вам не нужно будет делать это самим каждый раз. В Интернете вы можете найти примеры средств навигации, которые могут вдохновить вас на новые свершения. Учебные пособия. Listutorial ( http://css.maxdesign.com.au/listutorial/ ). Пошаговые пособия по созда- нию навигационных систем из неупорядоченных списков. 40 Premium CSS Menu and Navigation Solutions ( www.tripwiremagazine.com/2012/06/ css-menu-and-navigation.html ). Дополнительные учебники. Меню навигации Apple.com , созданной исключительно с применением средств CSS3 ( www.marcofolio.net/css/the_apple.com_navigation_menu_created_using_only _css3.html ). Если вам нравится простой и понятный внешний вид Apple.com, можно поинтересоваться, как создать их меню с помощью CSS. Примеры в режиме онлайн CSS Navigation Bar Code Generator ( http://lab.mattvarone.com/navbar ). Ленитесь или желаете сэкономить время? Позвольте этому онлайн-инструменту создать весь необходимый код для использования волшебного метода, рассмотренного ранее в этой книге. CSS Menu Maker ( http://cssmenumaker.com ). Большой выбор интересных пане- лей навигации с широким использованием новых свойств CSS3. Их можно на- строить под нужды вашего сайта, а затем загрузить код. CSS Showcase ( www.alvit.de/css-showcase/ ). Галерея навигационных меню, вкла- док и методик CSS-навигации. Listamatic ( http://css.maxdesign.com.au/listamatic/ ). Выставка основанных на CSS навигационных систем. Здесь также есть много ссылок на родственные сайты. Listamatic2 ( http://css.maxdesign.com.au/listamatic2/ ). CSS-меню, включающее вложенные списки с подменю. CSS Menu Builder ( www.cssmenubuilder.com/ ). Множество интересных меню и по- лезных технологий. Посмотрите обязательно. Адаптируемое навигационное меню CSS ( http://pixelsdaily.com/resources/html-css/ responsive-css-navigation-menu/ ). Адаптируемое меню, изменяющееся от горизон- тальной панели до двухстрочной панели и до стопки кнопок в два столбца. 606 Приложения Разметка CSS Разметка CSS настолько гибкая и удобная для применения, что можно потратить всю жизнь, исследуя ее возможности. И некоторые люди, кажется, делают только это. Вы можете извлечь пользу из их трудов, читая статьи, изучая онлайн-примеры и экспериментируя с инструментами, которые могут сделать некоторую работу с CSS за вас. Информация о блочной модели Interactive CSS Box Model ( www.redmelon.net/tstme/box_model/ ) Забавный интер- активный инструмент для визуализации блочной модели. Блог-пост Пола Айриша (Paul Irish) * { box-sizing: border-box } FTW ( http:// paulirish.com/2012/box-sizing-border-box-ftw/ ). Довольно влиятельный блог-пост, выступающий за отмену старой блочной модели CSS и за использование свой- ства box-sizing в качестве более подходящего способа управления высотой и ши- риной элементов. Примеры разметок PageBlox ( www.pageblox.com ). Предоставляет онлайн-средство для создания адаптируемых конструкций средствами CSS. Учитывает недостатки браузеров и генерирует медиазапросы для больших и маленьких экранов. CSS Layout Generator ( www.pagecolumn.com ). Выберите количество столбцов, настройте несколько кнопок, и этот сайт сгенерирует весь необходимый HTML- и CSS-код. Когда под рукой такой сайт, кому теперь нужна эта книга? (Шучу.) Even More Layout Generators ( www.webdesignbooth.com/15-extremely-usefulcss-grid- layout-generator-for-web-designers ). Если вас не устраивают возможности сайтов, автоматически создающих код HTML и CSS, здесь вы найдете список из 15 он- лайн-инструментов. 960 Grid System ( http://960.gs ). Одна из лучших сред разработки CSS, предо- ставляющая набор базовых стилей, а также методику использования разделов div и имен классов для создания составных, многостолбцовых разметок с фик- сированной шириной (подробное видеопредставление этой системы вы найде- те на http://nettuts.com/videos/screencasts/adetailed-look-at-the-960-css-framework/ ). Есть даже онлайн-средство, помогающее создавать свою собственную grid- структуру на основе grid-системы 960: http://grids.heroku.com YUI Grids CSS ( https://developer.yahoo.com/yui/grids ). Собственная система CSS- разметки от Yahoo!. Как и 960 Grid System, описанная выше, представляет собой базовую среду разработки сложных многостолбцовых разметок. Twitter Bootstrap ( http://twitter.github.com/bootstrap/ ). Полный набор инструмен- тов для создания веб-сайта, включающий компоненты HTML, CSS и JavaScript, упрощающие создание полноценной, адаптируемой страницы на основе grid- технологии с весьма интересными вставками на JavaScript. Foundation ( http://foundation.zurb.com ). Еще один комплект инструментов для разработки веб-сайтов. Он очень похож на Twitter Bootstrap и включает HTML, CSS и JavaScript. Содержит прекрасную документацию и относительно легок в освоении. Приложение 2. Информационные ресурсы, касающиеся CSS 607 Разнообразные ресурсы по разметкам Adaptive CSS Layouts ( www.smashingmagazine.com/2009/06/09/smart-fixesfor-fluid- layout s). Предоставляет множество ресурсов для создания гибких разметок, адаптирующихся под полную ширину окна браузера. TJK Desigh ( http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp ). Огромная запись в блоге, в которой берется отдельная HTML-страница и де- монстрируется восемь различных способов ее разметки только с CSS. Variable fixed width layout ( www.clagnut.com/blog/1663/ ). Краткая запись в блоге о методике регулирования количества столбцов на странице, основанной на ширине окна браузера. 3-Column Layout Index ( http://css-discuss.incutio.com/?page=ThreeColumnLayouts ). Практически исчерпывающий список различных разметок с тремя столбцами. Выставочные сайты Доскональное знание стандарта CSS не поможет, если ваше воображение не работает. Отличным источником вдохновения может стать творческая работа других людей. Через поисковые системы вы найдете больше выставочных сайтов по CSS, а я пере- числю некоторые из них, где вы можете оценить и изучить красивые CSS-дизайны. ZenGarden ( www.csszengarden.com ). Источник всех сайтов-выставок CSS: много различных дизайнов для одного и того же HTML-кода. CSS Beauty ( www.cssbeauty.com/ ). Замечательная галерея вдохновляющих CSS- дизайнов. CSS Elite ( www.csselite.com ). «Выставка всего самого лучшего, что есть в веб- дизайнах на CSS» — так говорят многие… CSS Mania ( http://cssmania.com/ ). Еще один сайт-витрина, с марта 2004 года это наиболее обновляемая выставка CSS во всем мире. CSS Winner ( www.csswinner.com ). На этом сайте каждый день объявляется но- вый «победитель». Не могу понять, как при таких судьях, являющихся на самом деле простыми подростками, бродящими по Интернету, не выходя из своих комнат, выявляются весьма интересно сконструированные сайты. Программное обеспечение для CSS Существует много различных способов создания каскадных таблиц стилей (CSS). Самый простой — придерживаться бесплатных текстовых редакторов, которые поставляются вместе с Windows и Mac OS, таких как Блокнот или TextEdit. Но есть и специальные CSS-редакторы, а также полноценные программы для разработки веб-страниц, например Dreamweaver, которые включают в себя инструменты для создания CSS. Windows и Mac Style Master ( www.westciv.com/style_master/product_info/ ). Это мощный CSS-ре- дактор с длинной историей, который содержит множество инструментов, вклю- чая простые мастера, шаблоны-примеры, обучающие программы и полный CSS- справочник. 608 Приложения Dreamweaver ( www.adobe.com/dreamweaver/ ). Предназначенный не только для CSS, этот инструмент веб-разработки «высшего сорта» включает все, что вам нужно для создания всего сайта. Визуальные инструменты для редактирования облегчают возможность увидеть эффект от CSS на вашей веб-странице по мере того, как вы ее создаете. Sublime Text ( http://www.sublimetext.com ). Эффективный редактор кода, подхо- дящий для создания широкого спектра текстовых документов. Он не является инструментальным средством для разработки CSS, но пользуется широкой по- пулярностью среди веб-разработчиков. Только для Windows Top Style ( www.topstyle4.com ). Почтенный CSS-редактор, который также позво- лит вам редактировать HTML-документы, — комплектное приобретение (у од- ного продавца) для создания веб-страниц. Включает много инструментов для увеличения производительности. Есть также бесплатная «легкая» версия. Microsoft Expression Web ( www.microsoft.com/expression/products/Web_Overview. aspx ). Полноценный инструмент для проектирования сайтов, который очень хорошо работает с CSS. Только для Mac Espresso ( http://www.macrabbit.com/espresso/ ). Универсальное средство для веб- дизайна, включающее редактор кода, FTP-программу и CSSEdit 3, эффектив- ный и простой редактор CSS. Code ( http://panic.com/coda/ ). Еще одно универсальное средство для создания веб-приложений со встроенным средством редактирования CSS. |