Локальный справочник CSS

CSS свойства выравнивания

Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.

CSS свойства фона

Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.

CSS свойства границ

Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.

CSS свойства переходов и анимации

Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.

CSS свойства таблиц и списков

Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.

CSS остальные свойства

Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.

Справочник CSS

Используется когда стилю фона необходимо одновременно присвоить несколько значений. Может иметь от одного до пяти значений из атрибутов применяемых к стилю фона.

Атрибуты стиля фона и их возможные значения:

background-attachment — прокрутка фонового изображения.

• fixed — фиксированный фон.
• scroll — подвижный фон (по умолчанию).

background-color — определяет цвет фона элемента.

• #ff0000 — шестнадцатеричное значение цвета RGB.
• red — именное значение цвета.
• RGB(255, 0, 0) — значение цвета RGB.
• transparent — прозрачный фон.

background-image — фоновое изображение элемента.

• url — путь к файлу с изображением.
• none — изображение отсутствует.

background-position — позиция фонового изображения элемента.

по горизонтали:
• left — расположить слева.
• center — расположить по центру.
• right — расположить справа.

  по вертикали:

• top — расположить сверху.
• center — расположить по центру.
• bottom — расположить снизу.

background-repeat — регулирует повторение фонового изображения.

• no-repeat — не повторять, показать только одно изображение.
• repeat — повторять (по умолчанию).
• repeat-x — повторять только по горизонтали.
• repeat-y — повторять только по вертикали.

Для более детального ознакомления смотрите каждый атрибут отдельно.

Синтаксис:
Допустимые значения указываются через пробел в любой последовательности.

body <
background: url(fon.jpg) fixed repeat-y
>

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

Возможные значения:

• fixed — фиксированный фон.
• scroll — подвижный фон (по умолчанию).

Синтаксис:

body <
background-image: url(fon.jpg);
background-attachment: fixed
>

Цвет может быть задан следующими методами:

• #ff0000 — шестнадцатеричное значение цвета RGB.
• red — именное значение цвета.
• RGB(255, 0, 0) — значение цвета RGB.
• transparent — прозрачный фон.

Синтаксис:

h1 < background-color: red >
h2 < background-color: #ff0000 >
h3 < background-color: RGB(255, 0, 0) >

К фоновому изображению указывается путь, либо устанавливается отсутствие фонового рисунка.

Значения:

• url() — путь к файлу с изображением.
• none — изображение отсутствует (по умолчанию).

Синтаксис:

body <
background-image: url(fon.jpg)
>

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

Значения:

по горизонтали:
• left — расположить слева.
• center — расположить по центру.
• right — расположить справа.

по вертикали:

Синтаксис:

body <
background-image: url(fon.jpg);
background-repeat: no-repeat;
background-position: center top
>

Фоновое изображение заданное background-image по умолчанию заполняет весь элемент «плиткой», однако, присвоив background-repeat значения изложенные ниже можно задать несколько вариантов «выкладывания» этой «плитки»

Значения:

• no-repeat — не повторять, показать только одно изображение.
• repeat — повторять (по умолчанию).
• repeat-x — повторять только по горизонтали.
• repeat-y — повторять только по вертикали.

Синтаксис:

body <
background-image: url(fon.jpg);
background-repeat: repeat-x
>

Атрибуты управляющие бордюром и их возможные значения:

border-style

• none — граница отсутствует (по умолчанию).
• dotted — граница из ряда точек.
• dashed — пунктирная граница.
• solid — сплошная граница
• double — двойная граница
• groove — граница «бороздка»
• ridge — граница «гребень»
• inset — вдавленная граница
• outset — выдавленная граница

border-width — устанавливает ширину границы. border-color — цвет бордюра, может быть задан одним из четырёх вариантов:

• #ff0000 — шестнадцатеричное значение цвета RGB.
• red — именное значение цвета.
• RGB(255, 0, 0) — значение цвета RGB.
• transparent — прозрачный бордюр.

Синтаксис:
Так как атрибут border является базовым то указываются только значения родственных атрибутов, в любом порядке через пробел.

div <
border: RGB(255, 0, 0) 6px double
>

Атрибуты управляющие бордюром и их возможные значения:
border-style

• none — граница отсутствует (по умолчанию).
• dotted — граница из ряда точек.
• dashed — пунктирная граница.
• solid — сплошная граница
• double — двойная граница
• groove — граница «бороздка»
• ridge — граница «гребень»
• inset — вдавленная граница
• outset — выдавленная граница

border-width — устанавливает ширину границы. border-color — цвет бордюра, может быть задан одним из четырёх вариантов:

• #ff0000 — шестнадцатеричное значение цвета RGB.
• red — именное значение цвета.
• RGB(255, 0, 0) — значение цвета RGB.
• transparent — прозрачный бордюр.

Синтаксис:
Указываются значения родственных атрибутов, в любом порядке через пробел.

div <
border-bottom: red 6px dashed
>

border-bottom-colorr — цвет бордюра, может быть задан одним из четырёх вариантов:

• #ff0000 — шестнадцатеричное значение цвета RGB.
• red — именное значение цвета.
• RGB(255, 0, 0) — значение цвета RGB.
• transparent — прозрачный бордюр.

Синтаксис:

div <
border: red 5px solid;
border-bottom-color: #0000ff
>

border-bottom-style может иметь следующие значения:

• none — граница отсутствует (по умолчанию).
• dotted — граница из ряда точек.
• dashed — пунктирная граница.
• solid — сплошная граница
• double — двойная граница
• groove — граница «бороздка»
• ridge — граница «гребень»
• inset — вдавленная граница
• outset — выдавленная граница

Синтаксис:

p <
border: red 5px dotted;
border-bottom-style: solid
>

Ширина границы может быть задана значением в пикселях, а так же с помощью зарезервированных слов:

• thin — тонкая граница
• medium — средняя толщина границы
• thick — толстая граница

Синтаксис:

div <
border: #00ff00 solid;
border-bottom-width: thin;
border-left-width: medium;
border-right-width: thick;
border-top-width: 12px
>

Внешний вид границ таблицы может принимать следующий вид:

• separate — ячейки таблицы отделены друг от друга (по умолчанию).
• collapse — ячейки таблицы не имеют промежутков между собой.
• inherit — свойства наследуются у родителя элемента.

Синтаксис:

Бравый справочник css-свойств для новичка

Как новички изучают css-свойства? Они читают про все свойства, которые только есть, что-то запоминают, в основном только width, height и background, а потом постоянно рыщут по своим конспектам и гуглу, пытаются вспомнить какое свойство за что отвечает, как оно пишется и какие у него есть значения.

И тут мне пришла в голову идея. А что если сделать такую штуку, которая наглядно показывает как пишутся и работают все css-свойства? Причем, все это на одной странице.

Таким образом, за два вечера создался вот такой css-помощник: lesson-web.ru/modules/css_helper

В левой части мы видим результат работы css-свойств, а справа, собственно, список css-свойств, которые мы можем увидеть в действии.

В окне результата у нас есть один, как будто бы, div с классом .box. Если установить свойство float, то в окне появится три одинаковых блока.

Также можно задать текстовое содержимое этого блока. Есть пять вариантов:

В блоке с css-свойствами мы можем:

• активировать или деактивировать свойство, кликнув по checkbox;
• задать значение свойства;
• понять свойство на простом русском языке
• если на сайте есть описание по данному свойству, то можно перейти по ссылке и более подробно изучить его.

Значение можно задать тремя способами:

1. Просто ввести значение в input
2. Если это цвет, то указать его на палитре
3. Если у свойства если стандартный набор значений, то можно выбрать его из списка

Собственно, вот такая приятная мелочь получилась) Если у вас есть какие-то идеи как можно улучшить этот помощник, то с радостью почитаю их в комментариях!

Руководство по CSS

На этой странице

Данный справочник по CSS перечисляет все стандартные свойства, псевдоклассы и псевдоэлементы, @-правила, единицы измерения и селекторы CSS в алфавитном порядке. Справочник позволит вам быстро найти подробную информацию о каждом из них. Он не только перечисляет свойства CSS 1 и CSS 2.1, но является и справочником по CSS3 со ссылками на описание каждого стандартизированного или уже стабилизированного свойства CSS3. Также включает в себя краткое руководство DOM-CSS / CSSOM.

Заметьте, что определения CSS-правил полностью (ASCII) тексто-ориентированы, в то время как определения правил DOM-CSS / CSSOM объектно-ориентированы.

Смотрите также Mozilla CSS Extensions для Gecko-специфичных свойств с префиксом -moz ; и WebKit CSS Extensions для WebKit-специфичных свойств. Смотрите Обзор CSS-префиксов для разных браузеров от Peter Beverloo для всех свойств с префиксами.

Базовый синтаксис правил

Имейте в виду, что любая синтаксическая ошибка в задании правил сделает некорректным всё правило.

Стили

Примеры

Больше о примерах: #1, #2

@-правила

Так как у них есть много различных структурных форматов, смотрите нужный синтаксис @-правил.

Справочник CSS

Наш справочник по каскадным таблицам стилей CSS содержит свойства, которые по возможности являются стандартными в CSS3 . Свойства отсортированы по алфавиту и по категориям. После перехода на страницу справочника с описанием требуемого свойства, вы сможете посмотреть его синтаксис, описание, список допустимых значений, а также ряд примеров использования данного css -свойства. Кроме того, внизу страницы обычно располагаются ссылки на документацию по данному свойству на официальном сайте W3C и страницу справочника CSS на официальном сайте Mozilla Firefox .

Чтобы посмотреть результат выполнения исходного кода примера во фрейме кодового блока, используйте кнопку ‘Результат’ .

Если в ходе освоения учебного материала у вас возникнут трудности, пишите мне в индивидуальный ‘Чат с автором’ (по возможности стараюсь отвечать всем).

Основы CSS — Руководство для самых маленьких

Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS, для чего нужен и как его правильно использовать. Это базовый урок из серии «Для самых маленьких», в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS — Каскадных таблиц стилей (Cascading Style Sheets).

Часть 1. Основы CSS

Данный урок является логическим продолжением урока «Основы HTML для начинающих», в котором я подробно объяснял, что такое язык разметки HTML, как он устроен и работает, базовые теги и правила верстки. В данном же уроке мы затронем стилизацию документа, созданного с использованием языка разметки, т.е. придание определенной формы, определенного цвета, последовательности, размеров различных элементов и текста на странице, рассмотрим наиболее эффективные приемы работы с каскадными таблицами стилей. Поняв основы, вы сможете самостоятельно правильно и эффективно стилизовать HTML документы.

Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.

Вообще, CSS довольно элементарный формальный язык, который придумали для описания внешнего вида документов. Это говорит о том, что он довольно прост и состоит из самобытных примитивных конструкций, которые не так сложны для изучения. Самое сложное не синтаксис, не правила написания конструкций, а огромное количество CSS свойств для запоминания, которые выполняют различные задачи. Благо, все правила англоязычные с соответствующей смысловой нагрузкой. Простой перевод на наш язык дает понятие о том, что это правило делает и наоборот — при переводе того, что мы хотим добиться определенным свойством на английский язык, велика вероятность того, что мы получим правильное свойство. Это значительно упрощает запоминание CSS правил на интуитивном уровне. Например, если нужно задать фоновый цвет достаточно сделать перевод на английский, в результате чего получаем background-color (отдельные слова в CSS пишутся через дефис).

1.1 Использование CSS в HTML документах

CSS довольно просто использовать в HTML документах. Его можно:

Подключить как внешний CSS файл к документу. Для этого достаточно прописать тег
в теге . Это наиболее распространенный способ подключения таблиц стилей к документу, когда внешнее оформление страниц выносится в отдельный внешний CSS файл.

Прописать стили в самом документе, используя тег

Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.

Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.

Пример инлайнового вывода фонового изображения секции из админ. панели сайта:

Вывод $bgi_option — простой пример, показывающий что значение свойства задается в админке сайта.

1.2 CSS синтаксис

Как я уже говорил ранее, CSS имеет довольно простой синтаксис. Давайте разберем его.

Правила объявлений настолько просты, что их можно описать в одном предложении. Сначала пишется селектор, который выбирает конкретный элемент на странице, после фигурных скобок пишутся свойства со значениями после двоеточия, а сами свойства отделяются друг от друга точкой с запятой. Это всё.

Просто, не правда ли?

Самое сложное в CSS объявлении — селектор. Подробнее узнать о том, как формируются и как используются селекторы вы можете в уроке Все CSS селекторы в одном уроке — это очень важная тема, так как здесь раскрывается вся магия выборки элементов на странице, рекомендую посмотреть этот урок в обязательном порядке всем новичкам.

Вкратце CSS селектор — (от слова select — выбирать) — это конструкция, с которой начинается каждый блок объявлений и которая служит для выборки элемента или однотипных элементов на странице для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега, например:

Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет — серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class, все эти элементы получат одинаковое оформление — серый фон цвета #999.

1.3 Каскадирование, наследование и приоритет

Понять принцип каскадирования несложно. Давайте взглянем на пример:

Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children, который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent. Если в HTML документе мы вынесем тег .children из тега div с классом .parent, он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.

Что мы получим в результате нашего примера. Тег с классом .children получит цвет текста #666, так как имеет более длинный каскад, а .parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children, то его текст покрасится в цвет родителя color: #999;

Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

1. Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important. Не важно, какую вложенность имеет селектор, каким образом используются стили — инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать !important.
   Пример использования !important:
2. Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style, которые мы рассмотрели ранее:
3. Стили, заданные в теге style в самом документе имеют меньший приоритет;
4. Ещё меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега
5. Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
   В результате тег

, находящийся в теге с классом .my-class получит значение свойства margin: 15px.

Стоит также отметить, что количество классов или идентификаторов, а также наличие дополнительных псевдоклассов и конструкций в селекторе повышают приоритет для стилизации:

И т.д. по логической цепочке.

И в завершение по приоритетам важно отметить, что стили, идущие в последующих объявлениях ниже по документу также имеют наибольший приоритет. Например:

В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

Что касается наследования, здесь всё просто. Все дочерние элементы наследуют некоторые свойства родителя. Какие именно свойства наследуются предстоит выяснить вам в процессе изучения различных свойств и применении их на практике. Например, цвет текста всегда наследуется потомками, а отступы — нет.

Часть 2. CSS свойства

Я думаю нет смысла перечислять все CSS свойства, так как их очень много и практичней обратиться к справочнику всех CSS свойств. Я рекомендую изучить CSS свойства в справочнике на HTMLBook.

Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

CSS Свойство

Частота использования

Описание

Часть 3. Медиа-запросы

Медиа-запросы в CSS — это база для создания отзывчивой верстки, позволяющая стилизовать элементы в зависимости от размера экрана или устройства, на котором отображается веб-сайт. Технически Медиа-запрос — это простое логическое выражение, которое может быть или истинным или ложным. Условиями для такого выражения являются либо параметры устройства, на котором отображается веб-страница, либо размер экрана в пикселах.

В данном руководстве мы рассмотрим базовые возможности медиа-запросов, которые необходимы для адаптивной верстки сайтов и практически полезны.

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

Размещение свойств в медиа-запросе не дает никакого приоритета, поэтому логичней размещать медиа-запросы в конце CSS документа, либо загружать тегом link внешний CSS файл с медиа-запросами после загрузки основных стилей сайта для правильного переопределения последних на разных разрешениях или на различных устройствах.

Часть 4. Рекомендации

Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

1. Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
2. Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через >

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

CSS/Справочник

Справочник по каскадным таблицам стилей.

Содержание

Введение [ править ]

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Цель создания CSS [ править ]

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

Обзорная история CSS [ править ]

CSS1 [ править ]

Первая версия CSS1 была принята как рекомендация W3C 17 декабря 1996 года. Она предоставляет пользователю следующие возможности:

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

CSS2 [ править ]

12 мая 1998 года была принята как рекомендация W3C вторая версия CSS2. В CSS2 дополнительно предоставляются следующие возможности:

• задавать направление текста в элементе (слева направо или справа налево);
• управлять позиционированием элемента на странице;
• задавать видимую область элемента и обрезать все остальное;
• управлять отображением контента, который выходит за пределы размеров элемента;
• генерировать контент до и после элемента, в том числе и автоматическая нумерация;
• управлять внешним видом курсора;
• управлять положением элементов по оси z (то есть возможность располагать один элемент поверх другого);
• показывать вместо элемента пустое место;
• задавать минимально возможные и максимально возможные размеры элемента;
• указывать расстояние между ячейками таблицы, либо схлопывать их;
• управлять обводкой элемента: задавать ее толщину, тип и цвет;
• указать тип и цвет для каждой границы элемента отдельно;
• задавать фиксированные размеры элементам таблицы;
• управлять внешним видом кавычек, в которые оборачиваются цитаты;
• задавать таблицы стилей для не визуальных носителей: управлять контентом при печати, а также задавать звуковое оформление контента (силу, громкость голоса, длину пауз и т. д.) для голосовых браузеров.

CSS2.1 [ править ]

8 сентября 2009 года была утверждена CSS2.1. Эта версия формировалась в течение более 10-ти лет. Создание CSS2.1 — это попытка привести спецификацию в соответствие со сложившимися реалиями:

• исправлен ряд ошибок CSS2;
• изменились некоторые моменты, реализация которых в подавляющем большинстве браузеров отличается от спецификации CSS2;
• убрали особенности CSS2, которые, в силу того, что не были реализованы, были отвергнуты CSS сообществом;
• удалили фрагменты CSS2, которые будут устаревшими в CSS3;
• добавили некоторые новые значения свойств.

CSS3 [ править ]

Будущее, которое стало реальностью.

На момент написания статьи активно разрабатывается спецификация CSS3. Возможности, которые сулит нам CSS3 значительно превосходят предыдущие версии. Это и анимация, которая ранее ложилась на плечи скриптов, и различные скругления, тени, множественные фоны и прочие вещи, для реализации которых в CSS2 приходилось прилагать значительные усилия.

Преимущества CSS [ править ]

1. управление отображением множества документов с помощью одной таблицы стилей;
2. более точный контроль над внешним видом страниц;
3. различные представления для разных носителей информации (экран, печать, и т. д.);
4. сложная и проработанная техника дизайна.

Кроссбраузерность [ править ]

Программное обеспечение для создания CSS [ править ]

Способы подключения CSS к документу [ править ]

Правила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих формат CSS. (По сути, формат CSS — это обычный текстовый файл. В файле .css не содержится ничего, кроме перечня правил CSS и комментариев к ним.)

То есть, эти таблицы стилей могут быть подключены, внедрены в описываемый ими веб-документ четырьмя различными способами:

• когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега
• , располагающегося в этом документе между тегами и . (Тег
• будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа;

• когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами (которые, в свою очередь, располагаются в этом документе между тегами и ) сразу после тега

• когда таблица стилей описана в самом документе, она может располагаться в нём между тегами (которые, в свою очередь, располагаются в этом документе между тегами и ). Все правила этой таблицы действуют на протяжении всего документа;

• когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.

В первых двух случаях говорят, что к документу применены внешние таблицы стилей, а во вторых двух случаях — внутренние таблицы стилей.

Для добавления CSS к XML-документу, последний должен содержать специальную ссылку на таблицу стилей. Например:

Справочник HTML5/CSS3

Предлагаю справочник по HTML5 и CSS3 в формате .CHM

49 комментариев: Справочник HTML5/CSS3

Справочники то, что надо!

-) сам одно время долго искал подобные справочники.

Вай красава а то эти учебники с 500 страницами листать ппц не удобно)

Премного благодарен! Очень удобно и полезно!

Качайте отличная вещь.

Огромное вам спасибо! Очень нужный справочник в работе.

Спасибо.То что надо.

Отличные справочники!! Спасибо большое! )

Спасибо, очень полезная вещь, главное — ничего лишнего.

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

Все прекрасно работает, просто вытащи файл из архива, а только потом открывай.

Вытащил файл из архива на рабочий стол, открывается только меню, правая часть пустая.

Как вариант могу предложить зайти в свойства файла и нажать «Разблокировать».

Нужно зайти в свойство файла, снять атрибут: «Только чтение» и нажать кнопку «Разблокировать». У меня так заработало (Windows 7)

Да … дружище … благодарю тебя …. действительно нужные вещи !!

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

Ребят! Проблема! Файл скачен и открывается,но никакого текста! Никаких глав! Помогите!

Попробуйте снять галку «Только чтение».

Проблема такая же! Справа написано:
Переход на веб-страницу отменен
Попробуйте сделать следующее: Повторите ввод адреса.
А куда вводить адрес? С уважением к Вам Ахмад.

Никакой адрес вводить не нужно, чуть выше в комментариях писали:
Нужно зайти в свойство файла, снять атрибут: «Только чтение» и нажать кнопку «Разблокировать». У меня так заработало (Windows 7)

очень понятные и толковые справочники…Огромное спасибо..

спасибо просто капец спас время

огромное спасибо администратор и авторам

Решил проблему с открытием очень просто — переименовал файл так, чтобы в нем была только латиница.

Спасибо ОГРОМНОЕ.
Всё скачалось и открывается (7zip) и читабельно!

не работает не врите

извиняюсь всё работает

Для просмотра .CHM-файлов обычно используется стандартное средство просмотра Windows — Microsoft HTML Help Executable, находящееся в каталоге C:WINDOWS под именем hh.exe

Кликните по файлу правой кнопкой мыши, выберите пункт «Открыть с помощью…». Из списка предлагаемых программ выберите программу «Исполняемая справка в формате HTML Microsoft®» («Microsoft® HTML Help Executable»).

Если в списке такой программы нет, то нажмите «Обзор» и найдите в папке Windows исполняемый файл hh.exe.

Нажмите правой кнопкой на файле — свойства — разблокировать. И все будет открываться нормально!

sitesa >

Создание сайта

Справочник CSS

Примеры сайтов

Управление сайтом

Анимация на сайте

Программирование

Описание

Языком первого в мире сайта созданного в 1991 году был язык гипертекстовой разметки HTML. При помощи тегов HTML предписывалось как и куда разместить контент страницы.Впоследствии с развитием интернета сайты стали состоять из нескольких десятков и сотен страниц.

Встал вопрос об упрощении создания страниц и расширении функциональных возможностей инструментов для создания сайтов,так как HTML имел ограниченные функции.Так был создан язык CSS — Cascading Style Sheets , в переводе Каскадные таблицы стилей.

CSS имеет свой синтаксис ,или правило описания стилей для элементов HTML.Эти стили CSS могут записываться прямо на странице, но в большинстве случаев они записываются в отдельном документе, а на странице дается ссылка на этот документ.

Это одно из основных преимуществ CSS перед HTML ,так как изменив какой нибудь параметр в стиле CSS ,этот параметр сразу изменится на всех страницах сайта.В большинстве случаев на сайте используется и CSS и HTML.

Правило использования CSS.

1.Составляется текстовый файл с расширением .css с таблицей стилей. 2.На странице HTML между тегами и прописывается строка:

для подключения таблицы стилей.