Что такое CSS?
CSS расшифровывается как каскадные таблицы стилей . _
CSS описывает, как должны отображаться элементы HTML .
Пример CSS
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
Нажмите на кнопку «Попробуйте сами», чтобы увидеть, как это работает.
Синтаксис CSS
Правило CSS состоит из селектора и блока объявлений :
Селектор указывает на элемент HTML для стиля (h1).
Блок объявлений (в фигурных скобках) содержит одно или несколько объявлений, разделенных точкой с запятой.
Каждое объявление включает имя свойства CSS и значение, разделенные двоеточием.
В следующем примере все элементы <p> будут выровнены по центру, окрашены в красный цвет и имеют размер шрифта 32 пикселя:
Пример
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
Тот же пример также можно записать так:
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
Внешняя таблица стилей
Таблицу стилей CSS можно хранить во внешнем файле:
мой стиль.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
Внешние таблицы стилей связаны с HTML-страницами с помощью тегов <link> :
Пример
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
Встроенный стиль
Пример
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
Каскадный порядок
Если для HTML-элементов указаны разные стили, стили будут каскадироваться в новые стили со следующим приоритетом:
- Приоритет 1: встроенные стили
- Приоритет 2: внешние и внутренние таблицы стилей
- Приоритет 3: Браузер по умолчанию
- Если разные стили определены на одном и том же уровне приоритета, последний из них имеет наивысший приоритет.
Пример
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
Демонстрация CSS — одна HTML-страница — несколько стилей!
Здесь мы покажем одну HTML-страницу, отображаемую с 4 разными таблицами стилей.
Нажмите на кнопки таблицы стилей (1-4), чтобы просмотреть страницу, отображаемую с различными стилями.
Полное руководство по CSS
Это было краткое описание CSS.
Полное руководство по CSS можно найти в W3Schools CSS Tutorial .
Полный справочник по CSS можно найти в Справочнике по CSS от W3Schools .