CSS учебник
Начало работы с CSS
Поиск…
замечания
Стили могут быть созданы несколькими способами, что позволяет различной степени повторного использования и объема, когда они указаны в исходном HTML-документе. Внешние таблицы стилей можно повторно использовать в HTML-документах. Встроенные таблицы стилей применяются ко всему документу, в котором они указаны. Встроенные стили применяются только к отдельному HTML-элементу, на котором они указаны.
Версии
Внешний лист стилей
Внешняя таблица стилей CSS может применяться к любому количеству HTML-документов, помещая элемент <link> в каждый HTML-документ.
Атрибут rel <link> должен быть установлен как "stylesheet" , а атрибут href - относительный или абсолютный путь к таблице стилей. Хотя использование относительных URL-путей обычно считается хорошей практикой, также могут использоваться абсолютные пути. В HTML5 атрибут type может быть опущен .
Рекомендуется, чтобы <link> помещался в тег <head> HTML-файла, чтобы стили загружались до стилей, которые они стилируют. В противном случае пользователи будут видеть вспышку неравномерного содержимого .
пример
привет-world.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello world!</h1>
<p>I ♥ CSS</p>
</body>
</html>
style.css
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
Убедитесь, что вы указали правильный путь к вашему CSS-файлу в href. Если файл CSS находится в той же папке, что и ваш HTML-файл, путь не требуется (например, пример выше), но если он сохранен в папке, укажите его так: href="foldername/style.css" .
<link rel="stylesheet" type="text/css" href="foldername/style.css">
Внешние таблицы стилей считаются лучшим способом обработки CSS. Для этого существует очень простая причина: когда вы управляете сайтом, скажем, на 100 страницах, все контролируются одной таблицей стилей, и вы хотите изменить цвета ссылок с синего на зеленый, намного проще сделать изменение в вашем файле CSS, и пусть изменения «каскад» на всех 100 страницах, чем на 100 отдельных страниц и сделать то же самое изменение 100 раз. Опять же, если вы хотите полностью изменить внешний вид своего сайта, вам нужно только обновить этот файл.
Вы можете загрузить как можно больше CSS-файлов на своей странице HTML.
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">
Правила CSS применяются с некоторыми базовыми правилами, и порядок имеет значение. Например, если у вас есть файл main.css с некоторым кодом в нем:
p.green { color: #00FF00; }
Все ваши абзацы с «зеленым» классом будут написаны светло-зеленым цветом, но вы можете переопределить это с другим .css-файлом, просто включив его после main.css. Вы можете иметь override.css со следующим кодом, следующим за main.css, например:
p.green { color: #006600; }
Теперь все ваши абзацы с «зеленым» классом будут написаны более темным зеленым, а не светло-зеленым.
Применяются и другие принципы, такие как «важное» правило, специфика и наследование.
Когда кто-то впервые посещает ваш сайт, их браузер загружает HTML текущей страницы плюс связанный файл CSS. Затем, когда они переходят на другую страницу, их браузеру нужно только загрузить HTML-страницу этой страницы; файл CSS кэшируется, поэтому его не нужно загружать снова. Поскольку браузеры кэшируют внешнюю таблицу стилей, ваши страницы загружаются быстрее.
Внутренние стили
CSS, заключенный в теги <style></style> в документе HTML, функционирует как внешняя таблица стилей, за исключением того, что он живет в HTML-документе, а не в отдельном файле, и поэтому может применяться только к документу, в котором он жизни. Обратите внимание, что этот элемент должен находиться внутри элемента <head> для проверки HTML (хотя он будет работать во всех текущих браузерах, если он помещен в body ).
<head>
<style>
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>I ♥ CSS</p>
</body>
Встроенные стили
Используйте встроенные стили для применения стиля к определенному элементу. Обратите внимание, что это не является оптимальным. Рекомендуется использовать правила стиля в <style> или внешнем файле CSS, чтобы поддерживать различие между контентом и презентацией.
Встроенные стили переопределяют любой CSS в <style> или в таблице внешнего стиля. Хотя это может быть полезно в некоторых случаях, этот факт чаще всего не снижает ремонтопригодность проекта.
Стили в следующем примере применяются непосредственно к элементам, к которым они прикреплены.
<h1 style="color: green; text-decoration: underline;">Hello world!</h1>
<p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p>
Встраиваемые стили - это, как правило, самый безопасный способ обеспечения совместимости с различными почтовыми клиентами, программами и устройствами, но может потребовать много времени для написания и немного сложной работы.
Правило CSS @import (одно из CSS-правил)
CSS-правило @import CSS используется для импорта правил стиля из других таблиц стилей. Эти правила должны предшествовать всем другим типам правил, кроме правил @charset; поскольку это не вложенный оператор, @import не может использоваться внутри условных групповых at-правил. @import .
Как использовать @import
Вы можете использовать правило @import следующими способами:
A. С тегом внутреннего стиля
<style>
@import url('/css/styles.css');
</style>
B. С внешней таблицей стилей
Следующая строка импортирует файл CSS с именем additional-styles.css в корневой каталог в файл CSS, в котором он отображается:
@import '/additional-styles.css';
Также возможен импорт внешнего CSS. Обычный вариант использования - файлы шрифтов.
@import 'https://fonts.googleapis.com/css?family=Lato';
Дополнительный второй аргумент правила @import - это список медиа-запросов:
@import '/print-styles.css' print;
@import url('landscape.css') screen and (orientation:landscape);
Изменение CSS с помощью JavaScript
Чистый JavaScript
С помощью свойства style элемента можно добавлять, удалять или изменять значения свойств CSS с помощью JavaScript.
var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';
Обратите внимание, что свойства стиля называются в стиле нижнего верблюда. В примере вы видите, что семейство font-family css становится fontFamily в javascript.
В качестве альтернативы непосредственно работать с элементами вы можете создать элемент <style> или <link> в JavaScript и добавить его в <body> или <head> документа HTML.
JQuery
Изменение свойств CSS с помощью jQuery еще проще.
$('#element').css('margin', '5px');
Если вам нужно изменить более одного правила стиля:
$('#element').css({
margin: "5px",
padding: "10px",
color: "black"
});
jQuery включает два способа изменения правил CSS, имеющих в них дефисы (например, font-size ). Вы можете поместить их в кавычки или верблюд-футляр в название правила стиля.
$('.example-class').css({
"background-color": "blue",
fontSize: "10px"
});
Смотрите также
Списки стилей с CSS
Существует три разных свойства для элементов list-style-type : list-style-type , list-style-image и list-style-position , которые должны быть объявлены в этом порядке. Значения по умолчанию: диск, внешний и ни один, соответственно. Каждое свойство может быть объявлено отдельно или с использованием сокращенного свойства в list-style .
list-style-type определяет форму или тип точки маркера, используемой для каждого элемента списка.
Некоторые из допустимых значений типа list-style-type :
- диск
- круг
- площадь
- десятичный
- низший романский
- Верхняя-римской
- никто
(Полный список см. В Wiki спецификации W3C )
Например, чтобы использовать квадратные точки маркера для каждого элемента списка, вы должны использовать следующую пару значений свойства:
li {
list-style-type: square;
}
Свойство list-style-image определяет, установлен ли значок элемента списка с изображением, и принимает значение none или URL-адрес, указывающий на изображение.
li {
list-style-image: url(images/bullet.png);
}
Свойство list-style-position определяет, где размещать маркер элемента списка, и принимает одно из двух значений: «внутри» или «снаружи».
li {
list-style-position: inside;
}