Modularscale

Псевдо-классы Псевдо-класс CSS это ключевое слово, добавленное к селектору, которое определяет его особое состояние.Например, :hover применит стиль, когда пользователь наводит курсор на элемент, указанный селектором. Псевдо-классы, вместе с pseudo-elements, позволят вам не только применить стиль к элементу, относящемуся к контенту дерева документа, но и к внешним факторам, таким как история навигации (:visited, например, статус контента (как :checked на некоторых элементах формы), или позиция курсора мыши ( :hover, которая дает знать, наведен ли курсор на элемент или нет. СинтаксисEdit Как читать CSS синтаксис. Список стандартных псевдо-классовEdit СпецификацииEdit Смотрите такжеEdit pseudo-elements Метки документа и участники Обновлялась последний раз:bychek.ru,

Bonnes pratiques pour les déclarations @font-face Petit rappel historique À l’origine, les déclarations CSS @font-face faisaient partie de la norme CSS 2.0 et étaient supportées aussi bien par Internet Explorer 6 que par Netscape 4. Nous étions alors à la fin des années 90 et la guerre entre ces deux navigateurs faisait rage. Avec CSS 3, c’est le grand retour en force des fontes web à travers le module CSS Fonts qui redéfinit la méthode d’insertion des fontes personnalisées dans les navigateurs. Déclaration simplifiée Une déclaration simple ressemble à ça : La propriété font-family permet de définir le nom de la fonte tel qu’il sera utilisé par la suite dans les déclarations de style. Gestion des formats de fonte Le problème de l’exemple précédent, c’est qu’il ne fonctionnera qu’avec les navigateurs qui supportent les polices au format TrueType. Il n’y a qu’une seule façon de déclarer plusieurs fichiers alternatifs pour une même fonte, c’est en séparant les déclarations d’url par une virgule (pratique assez courante avec CSS3). Conclusion

Compose to a Vertical Rhythm “Space in typography is like time in music. It is infinitely divisible, but a few proportional intervals can be much more useful than a limitless choice of arbitrary quantities.” So says the typographer Robert Bringhurst, and just as regular use of time provides rhythm in music, so regular use of space provides rhythm in typography, and without rhythm the listener, or the reader, becomes disorientated and lost. On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding. All of these factors must calculated with care in order that the rhythm is maintained. The basic unit of vertical space is line height. Establishing a suitable line height The easiest place to begin determining a basic line height unit is with the font size of the body copy. Spacing between paragraphs With our rhythmic unit set at 18px we need to ensure that it is maintained throughout the body copy.

Атрибут title Атрибут title в HTML Атрибут создаёт всплывающую подсказку при наведении курсора мышки на элемент. Внешний вид подсказки изменить нельзя. <mark title="какой-то текст">Title</mark> Содержимым атрибута может быть только текст. <mark title="строка 1 строка 2 строка 3">Title</mark> Для того, чтобы внутри title сделать кавычки, их следует заменить на специальные символы. <a href="" title="&quot;какой-то текст&quot;">специальные символы</a> Если нужны свойства title, но не нужно, чтобы данные были показаны человеку во всплывающей подсказке, то применяется атрибут date-*. <div data-tel="89033000000">номер телефона</div> В JavaScript от ищется как .dataset.name <div>номер телефона</div><script> document.querySelector('div').dataset.tel = "89033000000"; </script> title не индексируется: Яндекс, Google. title в изображениях | SEO Title в теге img учитывается только Яндексом [эксперимент Devaka]. title в ссылке: Яндекс, Google title в картинке: Яндекс, Google alt: Яндекс, Google Вывод:

Typograph – Scale & Rhythm This page falls somewhere between a tool and an essay. It sets out to explore how the intertwined typographic concepts of scale and rhythm can be encouraged to shake a leg on web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you can play upon it. Choosing sizes Don’t compose without a scale. Of course, good typesetting requires something more than selecting a series of font sizes, just as music consists of something more than choosing notes. Vertical Tempo Most pages of continuous prose pulse with a particular vertical rhythm, established by the lines of its main words, sentences, and paragraphs. For this, Bringhurst suggests another rule of thumb: Add and delete vertical space in measured intervals. Size and rhythm make each other interesting. Sizing up the <body> The first step: establish the size of the main text. Here, it pays to work with the grain. Declare <body> font-size using % The em

47 Top Typography Tools and Resources Typography is the foundation of design on the web. Back in 2006, designer and founder of iA Oliver Reichenstein even went so far as to proclaim "web design is 95% typography." It's imperative, then, to have a thorough, grounded education in optimizing and utilizing typography to create a balanced, harmonious, accessible hierarchy of content, when working on the web. To help you improve and learn more about typography, we have compiled 25 useful tools and resources, from fundamentals to modular scales. Have we left out your favorite typography tool or resource? If so, please share your recommendations with other readers in the comments. 1. Founded in 2008, Typekit offers a library of fonts, from old classics to new favorites, which can be used on the web. The browsing interface is well organized. 2. Recently acquired by Monotype, Typecast provides a platform to quickly style type in the browser and check for readability, rendering and beauty as you work. 3. 4. 5. 7. 8. 9. 10. 11. 12. 13.

easy2code Code Style: Open standards Web design with CSS, XHTML, Java servlets and Javascript