Последние учебники веб-разработки
×

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

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

CSS3 Введение CSS3 Закругленные углы CSS3 Пограничные изображения CSS3 Фон CSS3 Цвета CSS3 Градиенты CSS3 Тени CSS3 Текст CSS3 шрифты CSS3 2D Трансформации CSS3 3D Трансформации CSS3 Переходы CSS3 Анимации CSS3 Изображений CSS3 Кнопки CSS3 пагинация CSS3 Несколько столбцов CSS3 Пользовательский интерфейс CSS3 Box Определение размеров CSS3 Flexbox CSS3 Медиа-запросы CSS3 Примеры MQ

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

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

CSS Примеры CSS викторина CSS сертификат

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

CSS Как...


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


Три способа вставить CSS

Есть три способа вставки таблицы стилей:

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

Внешний лист Стиль

С помощью внешней таблицы стилей, вы можете изменить внешний вид всего веб-сайта, изменив только один файл!

Каждая страница должна содержать ссылку на внешний файл таблицы стилей внутри <link> элемента. <link> элемент проходит внутри <head> раздел:

пример

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Попробуй сам "

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

Вот как "myStyle.css" выглядит:

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}
Заметка Не добавляйте пробел между значением свойства и единицы (например, margin-left:20 px; ). Правильный путь: margin-left:20px;

Внутренний лист Стиль

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

Внутренние стили определены в <style> элемент, внутри <head> сечение HTML страницы:

пример

<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>
Попробуй сам "

Встроенные стили

Встроенного стиля может быть использован для применения уникального стиля для одного элемента.

Чтобы использовать встроенные стили, добавьте атрибут стиля к соответствующему элементу. Атрибут стиля может содержать любое свойство CSS.

В приведенном ниже примере показано , как изменить цвет и левое поле в <h1> элемента:

пример

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
Попробуй сам "
Заметка Встроенный стиль теряет многие из преимуществ таблицы стилей (путем смешивания содержимого с помощью презентации). Используйте этот метод экономно!

Несколько таблицы стилей

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

пример

Предположим , что внешний таблица стилей имеет следующий стиль для <h1> элемента:

h1 {
    color: navy;
}

Затем, предположим , что внутренний таблица стилей также имеет следующий стиль для <h1> элемента:

h1 {
    color: orange;   
}

Если внутренний стиль определяется после ссылки на внешнюю таблицу стилей, то <h1> элементы будут "orange" :

пример

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
    color: orange;
}
</style>
</head>
Попробуй сам "

Тем не менее, если внутренний стиль определяется перед ссылкой на внешнюю таблицу стилей, то <h1> элементы будут "navy" - "navy" :

пример

<head>
<style>
h1 {
    color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Попробуй сам "

каскадные Заказать

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

Вообще говоря, мы можем сказать, что все стили будут "Каскад" в новый "виртуальный" таблицы стилей по следующим правилам, где номер один имеет наивысший приоритет:

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

Таким образом, встроенный стиль (внутри конкретного HTML - элемента) имеет наивысший приоритет, что означает , что она будет переопределить стиль , определенный внутри <head> тег, или во внешнем таблицы стилей, или значение по умолчанию браузер.

Попробуй сам "


Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»