Latest web development tutorials
×

CSS курс

CSS курс CSS Краткое введение CSS грамматика CSS Id и Class селектор CSS создать CSS фон(background) CSS текст(text) CSS шрифты(Fonts) CSS ссылка(link) CSS стили списка(ul) CSS таблица(table) CSS Box модель CSS рамка(border) CSS контур(outline) CSS маржа(margin) CSS начинка(padding) CSS Группировка и вложенность CSS размер(Dimension) CSS дисплей(display) CSS разместить(position) CSS терка(float) CSS выравнивать(align) CSS Сочетание селекторов CSS Псевдо-классы CSS Псевдо-элемент CSS Панель навигации CSS Выпадающее меню CSS Галерея изображений CSS Прозрачное изображение/непрозрачный CSS технологии мозаики изображения CSS Тип носителя CSS селекторы атрибутов CSS резюме CSS примеров

CSS3 курс

CSS3 курс CSS3 Краткое введение CSS3 рамка(border) CSS3 фон CSS3 постепенное изменение CSS3 Текстовые эффекты CSS3 шрифты CSS3 2D изменение CSS3 3D изменение CSS3 переход CSS3 анимация CSS3 Multi-колонки CSS3 Пользовательский интерфейс

CSS Адаптивный дизайн

Viewport Grid View Медиа-запросы изображение видео(video) рамка

CSS справочное руководство

CSS справочное руководство CSS селектор CSS Речь Ссылка CSS Web Безопасные шрифты CSS анимация CSS блок CSS цвет CSS значения цвета CSS название цвета CSS шестнадцатеричный цвет

Создание CSS

При чтении таблицы стилей, браузер будет основан на его форматированный HTML-документа.


Как вставить таблицу стилей

Вставьте таблицу стилей тремя способами:

  • Внешний таблица стилей
  • Внутренний таблица стилей
  • Инлайн стиль

Внешний таблица стилей

Когда стиль применяется ко многим страницам требуется, внешний таблица стилей будет идеальным выбором. В случае внешней таблицы стилей, вы можете изменить файл, чтобы изменить внешний вид всего сайта. Каждая страница использует тег <LINK> для ссылки на таблицу стилей. <Link> тег в (документ) Руководитель:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Браузер будет читать из декларации mystyle.css стиля файла в соответствии с ним для форматирования документа.

Внешний таблица стилей может быть отредактирован в любом текстовом редакторе. Файлы не могут содержать HTML-теги. Таблица стилей должен быть сохранен с расширением .css. Ниже приведен пример файла таблицы стилей:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("../images/back40.gif");}

замечание Не оставляйте пробелы между значением свойства и единицы измерения. Если вы используете "Левое: 20 пикселей" вместо "Левое: 20px", он действителен только в IE 6, но он не работает в Mozilla / Firefox или Netscape в.


Внутренний таблица стилей

Когда один документ требует особый стиль, внутренний лист стиль должен быть использован. Вы можете использовать тег <STYLE> в заголовке документа, чтобы определить внутреннюю таблицу стилей, как это:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>


Инлайн стиль

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

Чтобы использовать встроенные стили, вам нужно использовать атрибут стиля (стиль) в соответствующем теге. Атрибут Style может содержать любое свойство CSS. Этот пример показывает, как изменить цвет абзаца и левого края:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>


Несколько стилей

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

Например, внешний таблица стилей имеет три свойства для h3 селектора:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

Внутренняя таблица стилей имеет два свойства для h3 селектора:

h3
{
text-align:right;
font-size:20pt;
}

Если стиль имеет внутренние таблицы стилей и внешние таблицы стилей связывают эту страницу в то же время, то h3 получаете:

color:red;
text-align:right;
font-size:20pt;

Это свойство цвета будет наследоваться от внешнего таблицы стилей и расположения текста (выравнивания текста) и размер шрифта (размер шрифта) будут заменены внутренними правилами таблицы стилей.


Несколько стилей наслаиваются один

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

Stacking заказ

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

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

  1. браузер по умолчанию
  2. Внешний таблица стилей
  3. Внутренняя таблица стилей (в <HEAD> тег внутри)
  4. Строчный стиль (HTML элементы внутри)

Таким образом, встроенный стиль (внутри элемента HTML) имеет наивысший приоритет, что означает, что он имеет приоритет над следующей декларации стиля: этикетка заявление стиль, внешний стиль заявление таблица стилей, или стиль заявление браузера (значение по умолчанию).

замечаниеСовет: Если вы используете внешний файл стилей в <голове> также определяется стиль, таблица стилей будет заменить внешние файлы внутреннего стиля.