CSS - Краткое руководство

• Superior styles to HTML - CSS имеет гораздо более широкий набор атрибутов, чем HTML, поэтому вы можете гораздо лучше рассмотреть свою HTML-страницу по сравнению с HTML-атрибутами.

• Multiple Device Compatibility- Таблицы стилей позволяют оптимизировать контент для более чем одного типа устройств. Используя один и тот же HTML-документ, можно представить разные версии веб-сайта для портативных устройств, таких как КПК и сотовые телефоны, или для печати.

• Global web standards- Теперь атрибуты HTML устарели и рекомендуется использовать CSS. Поэтому неплохо начать использовать CSS на всех страницах HTML, чтобы сделать их совместимыми с будущими браузерами.

Кто создает и поддерживает CSS?

CSS создается и поддерживается группой людей в W3C, которая называется Рабочей группой CSS. Рабочая группа CSS создает документы, называемые спецификациями. Когда спецификация обсуждается и официально ратифицируется членами W3C, она становится рекомендацией.

Эти утвержденные спецификации называются рекомендациями, потому что W3C не контролирует фактическую реализацию языка. Это программное обеспечение создают независимые компании и организации.

NOTE - Консорциум World Wide Web, или W3C, представляет собой группу, которая дает рекомендации о том, как работает Интернет и как он должен развиваться.

Версии CSS

Каскадные таблицы стилей уровня 1 (CSS1) вышли из W3C как рекомендация в декабре 1996 года. Эта версия описывает язык CSS, а также простую модель визуального форматирования для всех тегов HTML.

CSS2 стал рекомендацией W3C в мае 1998 года и основан на CSS1. В этой версии добавлена ​​поддержка таблиц стилей для конкретных носителей, например принтеров и звуковых устройств, загружаемых шрифтов, позиционирования элементов и таблиц.

selector { property: value }

Example - Вы можете определить границу таблицы следующим образом -

table{ border :1px solid #C00; }

Здесь таблица - это селектор, а граница - это свойство, а заданное значение 1px solid # C00 - это значение этого свойства.

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

Селекторы типов

Это тот же селектор, который мы видели выше. Опять же, еще один пример, чтобы дать цвет всем заголовкам уровня 1 -

h1 {
   color: #36CFFF; 
}

Универсальные селекторы

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

* { 
   color: #000000; 
}

Это правило отображает содержимое каждого элемента в нашем документе черным цветом.

Селекторы потомков

Предположим, вы хотите применить правило стиля к определенному элементу, только если он находится внутри определенного элемента. Как показано в следующем примере, правило стиля будет применяться к элементу <em>, только если он находится внутри тега <ul>.

ul em {
   color: #000000; 
}

Селекторы классов

Вы можете определить правила стиля на основе атрибута class элементов. Все элементы, имеющие этот класс, будут отформатированы в соответствии с определенным правилом.

.black {
   color: #000000; 
}

Это правило отображает содержимое в черном цвете для каждого элемента с атрибутом class, установленным в черный цвет в нашем документе. Вы можете сделать его более конкретным. Например -

h1.black {
   color: #000000; 
}

Это правило отображает содержимое черным цветом только для элементов <h1> с атрибутом class, установленным на черный .

К данному элементу можно применить более одного селектора класса. Рассмотрим следующий пример -

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

Селекторы ID

Вы можете определить правила стиля на основе атрибута id элементов. Все элементы, имеющие этот идентификатор, будут отформатированы в соответствии с определенным правилом.

#black {
   color: #000000; 
}

Это правило отображает содержимое в черном цвете для каждого элемента с атрибутом id, установленным в черный цвет в нашем документе. Вы можете сделать его более конкретным. Например -

h1#black {
   color: #000000; 
}

Это правило отображает содержимое черным цветом только для элементов <h1> с атрибутом id, установленным на черный .

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

#black h2 {
   color: #000000; 
}

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

Дочерние селекторы

Вы видели селекторы потомков. Есть еще один тип селектора, который очень похож на потомков, но имеет другой функционал. Рассмотрим следующий пример -

body > p {
   color: #000000; 
}

Это правило отобразит все абзацы черным, если они являются прямым потомком элемента <body>. Другие абзацы, помещенные внутри других элементов, таких как <div> или <td>, не повлияют на это правило.

Селекторы атрибутов

Вы также можете применять стили к HTML-элементам с определенными атрибутами. Правило стиля ниже будет соответствовать всем элементам ввода, имеющим атрибут type со значением text -

input[type = "text"] {
   color: #000000; 
}

Преимущество этого метода заключается в том, что элемент <input type = "submit" /> не изменяется, а цвет применяется только к желаемым текстовым полям.

К селектору атрибутов применяются следующие правила.

• p[lang]- Выбирает все элементы абзаца с атрибутом lang .

• p[lang="fr"]- Выбирает все элементы абзаца, атрибут lang которых имеет значение точно "fr".

• p[lang~="fr"]- Выбирает все элементы абзаца, атрибут lang которых содержит слово «fr».

• p[lang|="en"]- Выбирает все элементы абзаца, атрибут lang которых содержит значения, которые в точности равны «en» или начинаются с «en-».

Несколько правил стиля

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

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Здесь все пары свойств и значений разделены символом semicolon (;). Вы можете хранить их в одной или нескольких строках. Для удобства чтения мы храним их в отдельных строках.

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

Селекторы группировки

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

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Это правило определения стиля будет применимо также к элементам h1, h2 и h3. Порядок в списке не имеет значения. Все элементы в селекторе будут иметь соответствующие объявления, примененные к ним.

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

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}

Это даст следующий результат -

Атрибуты

Атрибуты, связанные с элементами <style>:

Атрибут	Значение	Описание
тип	текст / css	Задает язык таблицы стилей как тип содержимого (тип MIME). Это обязательный атрибут.
СМИ	экран tty телевидение проекция портативный Распечатать шрифт Брайля слуховой все	Задает устройство, на котором будет отображаться документ. Значение по умолчанию - все . Это необязательный атрибут.

Встроенный CSS - Атрибут стиля

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

<element style = "...style rules....">

Атрибуты

Атрибут	Значение	Описание
стиль	правила стиля	Значение атрибута style представляет собой комбинацию объявлений стиля, разделенных точкой с запятой (;).

пример

Ниже приведен пример встроенного CSS, основанного на приведенном выше синтаксисе.

<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

Это даст следующий результат -

Внешний CSS - элемент <link>

Элемент <link> можно использовать для включения внешнего файла таблицы стилей в ваш HTML-документ.

Внешняя таблица стилей - это отдельный текстовый файл с .cssрасширение. Вы определяете все правила стиля в этом текстовом файле, а затем можете включить этот файл в любой HTML-документ с помощью элемента <link>.

Вот общий синтаксис включения внешнего файла CSS -

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

Атрибуты

Атрибуты, связанные с элементами <style>:

Атрибут	Значение	Описание
тип	текст css	Задает язык таблицы стилей как тип содержимого (тип MIME). Этот атрибут обязателен.
href	URL	Задает файл таблицы стилей, имеющий правила стилей. Этот атрибут является обязательным.
СМИ	экран tty телевидение проекция портативный Распечатать шрифт Брайля слуховой все	Задает устройство, на котором будет отображаться документ. Значение по умолчанию - все . Это необязательный атрибут.

пример

Рассмотрим простой файл таблицы стилей с именем mystyle.css, имеющий следующие правила:

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Теперь вы можете включить этот файл mystyle.css в любой HTML-документ следующим образом:

<head>
   <link type = "text/css" href = "mystyle.css" media = " all" />
</head>

Импортированный CSS - правило @import

@import используется для импорта внешней таблицы стилей аналогично элементу <link>. Вот общий синтаксис правила @import.

<head>
   @import "URL";
</head>

Здесь URL - это URL-адрес файла таблицы стилей, имеющего правила стилей. Вы также можете использовать другой синтаксис -

<head>
   @import url("URL");
</head>

пример

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

<head>
   @import "mystyle.css";
</head>

Переопределение правил CSS

Мы обсудили четыре способа включения правил таблиц стилей в документ HTML. Вот правило, отменяющее любое правило таблицы стилей.

• Любая встроенная таблица стилей имеет наивысший приоритет. Таким образом, он переопределит любое правило, определенное в тегах <style> ... </style>, или правила, определенные в любом внешнем файле таблицы стилей.

• Любое правило, определенное в тегах <style> ... </style>, переопределит правила, определенные в любом внешнем файле таблицы стилей.

• Любое правило, определенное во внешнем файле таблицы стилей, имеет самый низкий приоритет, и правила, определенные в этом файле, будут применяться только тогда, когда два вышеупомянутых правила не применимы.

Работа со старыми браузерами

Есть еще много старых браузеров, которые не поддерживают CSS. Итак, мы должны проявлять осторожность при написании нашего встроенного CSS в HTML-документе. В следующем фрагменте показано, как можно использовать теги комментариев, чтобы скрыть CSS от старых браузеров.

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

Комментарии CSS

Часто вам может потребоваться добавить дополнительные комментарии в блоки таблицы стилей. Таким образом, очень легко комментировать любую часть таблицы стилей. Вы можете просто поместить свои комментарии в /*..... это комментарий в таблице стилей ..... * /.

Вы можете использовать / * .... * / для комментирования многострочных блоков аналогично тому, как это делается в языках программирования C и C ++.

пример

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
            /* This is a single-line comment */
            text-align: center;
         }
         /* This is a multi-line comment */
      </style>
   </head>

   <body>
      <p>Hello World!</p>
   </body>
</html>

Это даст следующий результат -

%	Определяет измерение в процентах относительно другого значения, обычно включающего элемента.	p {font-size: 16pt; высота строки: 125%;}
см	Определяет размер в сантиметрах.	div {margin-bottom: 2cm;}
Эм	Относительное измерение высоты шрифта в длинных интервалах. Поскольку em-единица эквивалентна размеру данного шрифта, если вы назначите шрифт на 12pt, каждая единица «em» будет 12pt; таким образом, 2em будет 24pt.	p {letter-spacing: 7em;}
бывший	Это значение определяет измерение относительно x-высоты шрифта. Высота по оси x определяется высотой строчной буквы x шрифта.	p {font-size: 24pt; высота строки: 3ex;}
в	Определяет размер в дюймах.	p {word-spacing: .15in;}
мм	Определяет размер в миллиметрах.	p {интервал между словами: 15 мм;}
ПК	Определяет размер в пиках. Пика эквивалентна 12 очкам; Таким образом, на дюйм приходится 6 пиков.	p {font-size: 20pc;}
pt	Определяет измерение в пунктах. Точка определяется как 1/72 дюйма.	body {font-size: 18pt;}
px	Определяет размер в пикселях экрана.	p {padding: 25px;}

Шестнадцатеричный код	#RRGGBB	п {цвет: # FF0000;}
Короткий шестнадцатеричный код	#RGB	p {color: # 6A7;}
RGB%	rgb (rrr%, ggg%, bbb%)	p {color: rgb (50%, 50%, 50%);}
Абсолютный RGB	rgb (rrr, ggg, bbb)	p {color: rgb (0,0,255);}
ключевое слово	бирюзовый, черный и др.	п {цвет: бирюзовый;}

Эти форматы более подробно описаны в следующих разделах -

Цвета CSS - шестнадцатеричные коды

Шестнадцатеричное число - это 6-значное представление цвета. Первые две цифры (RR) представляют значение красного цвета, следующие две - значение зеленого цвета (GG), а последние - значение синего цвета (BB).

Шестнадцатеричное число - это 6-значное представление цвета. Первые две цифры (RR) представляют значение красного цвета, следующие две - значение зеленого цвета (GG), а последние - значение синего цвета (BB).

Шестнадцатеричное значение можно взять из любого графического программного обеспечения, такого как Adobe Photoshop, Jasc Paintshop Pro, или даже с помощью Advanced Paint Brush.

Каждому шестнадцатеричному коду будет предшествовать знак решетки или решетки "#". Ниже приведены примеры использования шестнадцатеричной записи.

цвет	Цвет HEX
	# 000000
	# FF0000
	# 00FF00
	# 0000FF
	# FFFF00
	# 00FFFF
	# FF00FF
	# C0C0C0
	#FFFFFF

Цвета CSS - короткие шестнадцатеричные коды

Это более короткая форма шестизначной записи. В этом формате каждая цифра дублируется, чтобы получить эквивалентное шестизначное значение. Например: # 6A7 становится # 66AA77.

Шестнадцатеричное значение можно взять из любого графического программного обеспечения, такого как Adobe Photoshop, Jasc Paintshop Pro, или даже с помощью Advanced Paint Brush.

Каждому шестнадцатеричному коду будет предшествовать знак решетки или решетки "#". Ниже приведены примеры использования шестнадцатеричной записи.

цвет	Цвет HEX
	# 000
	# F00
	# 0F0
	# 0FF
	# FF0
	# 0FF
	# F0F
	#FFF

Цвета CSS - значения RGB

Это значение цвета указывается с помощью rgb( )свойство. Это свойство принимает три значения, по одному для красного, зеленого и синего цветов. Значение может быть целым числом от 0 до 255 или процентом.

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

Ниже приведен пример отображения нескольких цветов с использованием значений RGB.

цвет	Цвет RGB
	rgb (0,0,0)
	RGB (255,0,0)
	rgb (0,255,0)
	RGB (0,0,255)
	RGB (255,255,0)
	RGB (0,255,255)
	RGB (255,0,255)
	RGB (192,192,192)
	RGB (255,255,255)

Цветовые коды зданий

Вы можете создать миллионы цветовых кодов с помощью нашего Color Code Builder. Проверьте нашиHTML Color Code Builder. Чтобы использовать этот инструмент, вам понадобится браузер с поддержкой Java.

Безопасные цвета для браузера

Вот список из 216 цветов, которые считаются наиболее безопасными и компьютерно-независимыми. Эти цвета варьируются от шестнадцатеричного кода 000000 до FFFFFF. Эти цвета безопасны в использовании, поскольку они гарантируют, что все компьютеры будут правильно отображать цвета при использовании 256-цветовой палитры -

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCC66	CCCC99	ССС	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

Установите цвет фона

Ниже приведен пример, демонстрирующий, как установить цвет фона для элемента.

<html>
   <head>
   </head>

   <body>
      <p style = "background-color:yellow;">
         This text has a yellow background color.
      </p>
   </body>
</html>

Это даст следующий результат -

Установите фоновое изображение

Мы можем установить фоновое изображение, вызвав локальные сохраненные изображения, как показано ниже -

<html>
   <head>
      <style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      </style>
   </head>
   
   <body>
      <h1>Hello World!</h1>
   </body>
<html>

Это даст следующий результат -

Повторите фоновое изображение

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

По умолчанию свойство background-repeat будет иметь значение повторения .

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Это даст следующий результат -

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

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Это даст следующий результат -

В следующем примере показано, как повторить фоновое изображение по горизонтали.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   
   <body>
      <p>Tutorials point</p>
   </body>
</html>

Это даст следующий результат -

Установите положение фонового изображения

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

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Это даст следующий результат -

В следующем примере показано, как установить положение фонового изображения на 100 пикселей от левого края и на 200 пикселей от верхнего края.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Это даст следующий результат -

Установите вложение фона

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

В следующем примере показано, как установить фиксированное фоновое изображение.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

Это даст следующий результат -

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

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

Это даст следующий результат -

Сокращенное свойство

Вы можете использовать свойство background для одновременной установки всех свойств фона. Например -

<p style = "background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
</p>

Установите семейство шрифтов

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

<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This text is rendered in either georgia, garamond, or the 
         default serif font depending on which font  you have at your system.
      </p>
   </body>
</html>

Это даст следующий результат -

Установить стиль шрифта

Ниже приведен пример, демонстрирующий, как установить стиль шрифта элемента. Возможные значения: нормальный, курсив и наклонный .

<html>
   <head>
   </head>

   <body>
      <p style = "font-style:italic;">
         This text will be rendered in italic style
      </p>
   </body>
</html>

Это даст следующий результат -

Установите вариант шрифта

В следующем примере показано, как установить вариант шрифта элемента. Возможные значения: normal и small-caps .

<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:small-caps;">
         This text will be rendered as small caps
      </p>
   </body>
</html>

Это даст следующий результат -

Установите толщину шрифта

В следующем примере показано, как установить толщину шрифта элемента. Свойство font-weight позволяет указать, насколько жирным является шрифт. Возможные значения: нормальный, полужирный, жирный, светлый, 100, 200, 300, 400, 500, 600, 700, 800, 900 .

<html>
   <head>
   </head>

   <body>
      <p style = "font-weight:bold;">
         This font is bold.
      </p>
      
      <p style = "font-weight:bolder;">
         This font is bolder.
      </p>
      
      <p style = "font-weight:500;">
         This font is 500 weight.
      </p>
   </body>
</html>

Это даст следующий результат -

Установите размер шрифта

В следующем примере показано, как установить размер шрифта элемента. Свойство font-size используется для управления размером шрифтов. Возможные значения могут быть xx-small, x-small, small, medium, large, x-large, xx-large, less, large, размер в пикселях или в% .

<html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         This font size is 20 pixels
      </p>
      
      <p style = "font-size:small;">
         This font size is small
      </p>
      
      <p style = "font-size:large;">
         This font size is large
      </p>
   </body>
</html>

Это даст следующий результат -

Установите размер шрифта Adjust

В следующем примере показано, как установить размер шрифта для элемента. Это свойство позволяет вам настроить высоту по оси x, чтобы шрифты были более разборчивыми. Возможное значение может быть любым числом.

<html>
   <head>
   </head>

   <body>
      <p style = "font-size-adjust:0.61;">
         This text is using a font-size-adjust value.
      </p>
   </body>
</html>

Это даст следующий результат -

Установить растяжение шрифта

В следующем примере показано, как задать растяжение шрифта элемента. Это свойство полагается на то, что компьютер пользователя имеет расширенную или сжатую версию используемого шрифта.

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

<html>
   <head>
   </head>

   <body>
      <p style = "font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer 
         doesn't have a <br>condensed or expanded version of the font being used.
      </p>
   </body>
</html>

Это даст следующий результат -

Сокращенное свойство

Вы можете использовать свойство font для одновременной установки всех свойств шрифта. Например -

<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 15px georgia;">
         Applying all the properties on the text at once.
      </p>
   </body>
</html>

Это даст следующий результат -

• В text-decoration Свойство используется для подчеркивания, надчеркивания и зачеркивания текста.

• В text-transform Свойство используется для преобразования текста в прописные или в прописные или строчные буквы.

• В white-space Свойство используется для управления потоком и форматированием текста.

• В text-shadow Свойство используется для установки тени текста вокруг текста.

Установить цвет текста

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

<html>
   <head>
   </head>

   <body>
      <p style = "color:red;">
         This text will be written in red.
      </p>
   </body>
</html>

Это даст следующий результат -

Установить направление текста

В следующем примере показано, как задать направление текста. Возможные значения: ltr или rtl .

<html>
   <head>
   </head>

   <body>
      <p style = "direction:rtl;">
         This text will be rendered from right to left
      </p>
   </body>
</html>

Это даст следующий результат -

Установите расстояние между символами

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

<html>
   <head>
   </head>

   <body>
      <p style = "letter-spacing:5px;">
         This text is having space between letters.
      </p>
   </body>
</html>

Это даст следующий результат -

Установите интервал между словами

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

<html>
   <head>
   </head>

   <body>
      <p style = "word-spacing:5px;">
         This text is having space between words.
      </p>
   </body>
</html>

Это даст следующий результат -

Установите отступ текста

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

<html>
   <head>
   </head>

   <body>
      <p style = "text-indent:1cm;">
         This text will have first line indented by 1cm and this line will remain at 
         its actual position this is done by CSS text-indent property.
      </p>
   </body>
</html>

Это даст следующий результат -

Установите выравнивание текста

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

<html>
   <head>
   </head>

   <body>
      <p style = "text-align:right;">
         This will be right aligned.
      </p>
      
      <p style = "text-align:center;">
         This will be center aligned.
      </p>
      
      <p style = "text-align:left;">
         This will be left aligned.
      </p>
   </body>
</html>

Это даст следующий результат -

Украшение текста

В следующем примере показано, как украсить текст. Возможные значения: none, underline, overline, line-through, blink .

<html>
   <head>
   </head>

   <body>
      <p style = "text-decoration:underline;">
         This will be underlined
      </p>
      
      <p style = "text-decoration:line-through;">
         This will be striked through.
      </p>
      
      <p style = "text-decoration:overline;">
         This will have a over line.
      </p>
      
      <p style = "text-decoration:blink;">
         This text will have blinking effect
      </p>
   </body>
</html>

Это даст следующий результат -

Установите регистры текста

В следующем примере показано, как установить регистры для текста. Возможные значения: нет, заглавные, прописные, строчные .

<html>
   <head>
   </head>

   <body>
      <p style = "text-transform:capitalize;">
         This will be capitalized
      </p>
      
      <p style = "text-transform:uppercase;">
         This will be in uppercase
      </p>
      
      <p style = "text-transform:lowercase;">
         This will be in lowercase
      </p>
   </body>
</html>

Это даст следующий результат -

Установите пробел между текстом

В следующем примере показано, как обрабатывается пустое пространство внутри элемента. Возможные значения: normal, pre, nowrap .

<html>
   <head>
   </head>

   <body>
      <p style = "white-space:pre;">
         This text has a line break and the white-space pre setting 
         tells the browser to honor it just like the HTML pre tag.
      </p>
   </body>
</html>

Это даст следующий результат -

Установить тень текста

В следующем примере показано, как задать тень вокруг текста. Это может поддерживаться не всеми браузерами.

<html>
   <head>
   </head>

   <body>
      <p style = "text-shadow:4px 4px 8px blue;">
         If your browser supports the CSS text-shadow property, 
         this text will have a  blue shadow.
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство границы изображения

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

Ширина в ноль пикселей означает отсутствие границы.

Вот пример -

<html>
   <head>
   </head>

   <body>
      <img style = "border:0px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:3px dashed red;" src = "/css/images/logo.png" />
   </body>
</html>

Это даст следующий результат -

Свойство высоты изображения

Свойство height изображения используется для установки высоты изображения. Это свойство может иметь значение длины или в%. Давая значение в%, он применяет его к блоку, в котором доступно изображение.

Вот пример -

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />
   </body>
</html>

Это даст следующий результат -

Свойство ширины изображения

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

Вот пример -

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" />
   </body>
</html>

Это даст следующий результат -

Свойство -moz-opacity

Свойство -moz-opacity изображения используется для установки непрозрачности изображения. Это свойство используется для создания прозрачного изображения в Mozilla. IE используетfilter:alpha(opacity=x) для создания прозрачных изображений.

В Mozilla (-moz-opacity: x) x может принимать значение от 0,0 до 1,0. Меньшее значение делает элемент более прозрачным (то же самое и с CSS3-допустимой прозрачностью синтаксиса: x).

В IE (filter: alpha (opacity = x)) x может принимать значение от 0 до 100. Меньшее значение делает элемент более прозрачным.

Вот пример -

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />
   </body>
</html>

Это даст следующий результат -

Обычно все эти свойства хранятся в заголовочной части HTML-документа.

Помните, что: hover ДОЛЖЕН стоять после ссылки: и: посещенный в определении CSS, чтобы быть эффективным. Кроме того,: active ДОЛЖЕН идти после: hover в определении CSS следующим образом:

<style type = "text/css">
   a:link {color: #000000}
   a:visited {color: #006600}
   a:hover {color: #FFCC00}
   a:active {color: #FF00CC}
</style>

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

Установите цвет ссылок

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

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
     </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Это создаст следующую черную ссылку -

Установите цвет посещенных ссылок

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

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = ""> link</a> 
   </body>
</html>

Будет создана следующая ссылка. Когда вы щелкнете по этой ссылке, она изменит свой цвет на зеленый.

Изменение цвета ссылок при наведении курсора мыши

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

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

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

Изменить цвет активных ссылок

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

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Будет создана следующая ссылка. Он изменит свой цвет на розовый, когда пользователь щелкнет по нему.

Теперь посмотрим, как использовать эти свойства на примерах.

Свойство border-collapse

Это свойство может иметь два значения: свернуть и разделить . В следующем примере используются оба значения -

<html>
   <head>
      <style type = "text/css">
         table.one {border-collapse:collapse;}
         table.two {border-collapse:separate;}
         
         td.a {
            border-style:dotted; 
            border-width:3px; 
            border-color:#000000; 
            padding: 10px;
         }
         td.b {
            border-style:solid; 
            border-width:3px; 
            border-color:#333333; 
            padding:10px;
         }
      </style>
   </head>

   <body>
      <table class = "one">
         <caption>Collapse Border Example</caption>
         <tr><td class = "a"> Cell A Collapse Example</td></tr>
         <tr><td class = "b"> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two">
         <caption>Separate Border Example</caption>
         <tr><td class = "a"> Cell A Separate Example</td></tr>
         <tr><td class = "b"> Cell B Separate Example</td></tr>
      </table>
   </body>
</html>

Это даст следующий результат -

Свойство border-spacing

Свойство border-spacing определяет расстояние, разделяющее соседние ячейки ». границы. Может принимать одно или два значения; это должны быть единицы длины.

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

NOTE - К сожалению, это свойство не работает в Netscape 7 или IE 6.

<style type="text/css">
   /* If you provide one value */
   table.example {border-spacing:10px;}
   /* This is how you can provide two values */
   table.example {border-spacing:10px; 15px;}
</style>

Теперь давайте изменим предыдущий пример и посмотрим на эффект -

<html>
   <head>
      <style type = "text/css">
         table.one {
            border-collapse:separate;
            width:400px;
            border-spacing:10px;
         }
         table.two {
            border-collapse:separate;
            width:400px;
            border-spacing:10px 50px;
         }
      </style>
   </head>

   <body>
   
      <table class = "one" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Collapse Example</td></tr>
         <tr><td> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Separate Example</td></tr>
         <tr><td> Cell B Separate Example</td></tr>
      </table>
      
   </body>
</html>

Это даст следующий результат -

Свойство со стороны подписи

Свойство caption-side позволяет вам указать, где содержимое элемента <caption> должно быть размещено по отношению к таблице. В следующей таблице перечислены возможные значения.

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

NOTE - Эти свойства могут не работать с вашим браузером IE.

<html>
   <head>
      <style type = "text/css">
         caption.top {caption-side:top}
         caption.bottom {caption-side:bottom}
         caption.left {caption-side:left}
         caption.right {caption-side:right}
      </style>
   </head>

   <body>
   
      <table style = "width:400px; border:1px solid black;">
         <caption class = "top">
            This caption will appear at the top
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "bottom">
            This caption will appear at the bottom
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "left">
            This caption will appear at the left
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "right">
            This caption will appear at the right
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      
   </body>
</html>

Это даст следующий результат -

Свойство пустых ячеек

Свойство empty-cells указывает, должна ли ячейка без содержимого отображать границу.

Это свойство может иметь одно из трех значений - показать, скрыть или наследовать .

Вот свойство empty-cells, используемое для скрытия границ пустых ячеек в элементе <table>.

<html>
   <head>
      <style type = "text/css">
         table.empty {
            width:350px;
            border-collapse:separate;
            empty-cells:hide;
         }
         td.empty {
            padding:5px;
            border-style:solid;
            border-width:1px;
            border-color:#999999;
         }
      </style>
   </head>

   <body>
   
      <table class = "empty">
         <tr>
            <th></th>
            <th>Title one</th>
            <th>Title two</th>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty">value</td>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty"></td>
         </tr>
      </table>
      
   </body>
</html>

Это даст следующий результат -

Свойство table-layout

Свойство table-layout должно помочь вам контролировать, как браузер должен отображать или размещать таблицу.

Это свойство может иметь одно из трех значений: фиксированное, автоматическое или наследование .

В следующем примере показана разница между этими свойствами.

NOTE - Это свойство не поддерживается многими браузерами, поэтому не полагайтесь на это свойство.

<html>
   <head>
      <style type = "text/css">
         table.auto {
            table-layout: auto
         }
         table.fixed {
            table-layout: fixed
         }
      </style>
   </head>
   
   <body>
   
      <table class = "auto" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
      <br />
      
      <table class = "fixed" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
   
   </body>
</html>

Это даст следующий результат -

Свойство border-color позволяет изменять цвет границы, окружающей элемент. Вы можете индивидуально изменить цвет нижней, левой, верхней и правой сторон границы элемента, используя свойства -

• border-bottom-color изменяет цвет нижней границы.

• border-top-color изменяет цвет верхней границы.

• border-left-color изменяет цвет левой границы.

• border-right-color изменяет цвет правой границы.

В следующем примере показано действие всех этих свойств -

<html>
   <head>
      <style type = "text/css">
         p.example1 {
            border:1px solid;
            border-bottom-color:#009900; /* Green */
            border-top-color:#FF0000;    /* Red */
            border-left-color:#330000;   /* Black */
            border-right-color:#0000CC;  /* Blue */
         }
         p.example2 {
            border:1px solid;
            border-color:#009900;        /* Green */
         }
      </style>
   </head>

   <body>
      <p class = "example1">
         This example is showing all borders in different colors.
      </p>
      
      <p class = "example2">
         This example is showing all borders in green color only.
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство стиля границы

Свойство border-style позволяет вам выбрать один из следующих стилей границы:

• none- Без границы. (Эквивалент ширины границы: 0;)

• solid - Граница - одна сплошная линия.

• dotted - Граница представляет собой серию точек.

• dashed - Граница - это серия коротких линий.

• double - Граница - две сплошные линии.

• groove - Граница выглядит так, как будто она вырезана на странице.

• ridge - Бордюр выглядит противоположным пазу.

• inset - Граница заставляет поле выглядеть так, как будто оно встроено в страницу.

• outset - Граница заставляет коробку выглядеть так, как будто она выходит из холста.

• hidden - То же, что none, за исключением разрешения конфликтов границ для элементов таблицы.

Вы можете индивидуально изменить стиль нижней, левой, верхней и правой границ элемента, используя следующие свойства:

• border-bottom-style изменяет стиль нижней границы.

• border-top-style изменяет стиль верхней границы.

• border-left-style изменяет стиль левой границы.

• border-right-style изменяет стиль правой границы.

В следующем примере показаны все эти стили границ -

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>
      
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>
      
      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>
      
      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>
      
      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>
      
      <p style = "border-width:4px; border-style:ridge">
         This is a ridge  border.
      </p>
      
      <p style = "border-width:4px; border-style:inset;">
         This is a inset border.
      </p>
      
      <p style = "border-width:4px; border-style:outset;">
         This is a outset border.
      </p>
      
      <p style = "border-width:4px; border-style:hidden;">
         This is a hidden border.
      </p>
      
      <p style = "border-width:4px; 
         border-top-style:solid;
         border-bottom-style:dashed;
         border-left-style:groove;
         border-right-style:double;">
         This is a a border with four different styles.
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство border-width

Свойство border-width позволяет вам установить ширину границ элемента. Значением этого свойства может быть либо длина в пикселях, точках или сантиметрах, либо оно должно быть тонким, средним или толстым.

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

• border-bottom-width изменяет ширину нижней границы.

• border-top-width изменяет ширину верхней границы.

• border-left-width изменяет ширину левой границы.

• border-right-width изменяет ширину правой границы.

В следующем примере показана ширина всей этой границы -

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border whose width is 4px.
      </p>
      
      <p style = "border-width:4pt; border-style:solid;">
         This is a solid border whose width is 4pt.
      </p>
      
      <p style = "border-width:thin; border-style:solid;">
         This is a solid border whose width is thin.
      </p>
      
      <p style = "border-width:medium; border-style:solid;">
         This is a solid border whose width is medium;
      </p>
      
      <p style = "border-width:thick; border-style:solid;">
         This is a solid border whose width is thick.
      </p>
      
      <p style = "border-bottom-width:4px;border-top-width:10px;
         border-left-width: 2px;border-right-width:15px;border-style:solid;">
         This is a a border with four different width.
      </p>
   </body>
</html>

Это даст следующий результат -

Свойства границы с использованием сокращений

Свойство границы позволяет вам указать цвет, стиль и ширину линий в одном свойстве -

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

<html>
   <head>
   </head>

   <body>
      <p style = "border:4px solid red;">
         This example is showing shorthand property for border.
      </p>
   </body>
</html>

Это даст следующий результат -

• В margin-right указывает правое поле элемента.

Теперь посмотрим, как использовать эти свойства на примерах.

Маржинальное свойство

Свойство margin позволяет вам установить все свойства для четырех полей в одном объявлении. Вот синтаксис для установки поля вокруг абзаца -

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <p style = "margin: 15px; border:1px solid black;">
         all four margins will be 15px
      </p>
      
      <p style = "margin:10px 2%; border:1px solid black;">
         top and bottom margin will be 10px, left and right margin will be 2% 
         of the total width of the document.
      </p>
      
      <p style = "margin: 10px 2% -10px; border:1px solid black;">
         top margin will be 10px, left and right margin will be 2% of the 
         total width of the document, bottom margin will be -10px
      </p>
      
      <p style = "margin: 10px 2% -10px auto; border:1px solid black;">
         top margin will be 10px, right margin will be 2% of the total 
         width of the document, bottom margin will be -10px, left margin 
         will be set by the browser
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство margin-bottom

Свойство margin-bottom позволяет вам установить нижнее поле элемента. Может иметь значение длины,% или авто.

Вот пример -

<html>
   <head>
   </head>

   <body>
      <p style = "margin-bottom: 15px; border:1px solid black;">
         This is a paragraph with a specified bottom margin
      </p>
      
      <p style = "margin-bottom: 5%; border:1px solid black;">
         This is another paragraph with a specified bottom margin in percent
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство верхнего края

Свойство margin-top позволяет вам установить верхнее поле элемента. Может иметь значение длины,% или авто.

Вот пример -

<html>
   <head>
   </head>

   <body>
      <p style = "margin-top: 15px; border:1px solid black;">
         This is a paragraph with a specified top margin
      </p>
      
      <p style = "margin-top: 5%; border:1px solid black;">
         This is another paragraph with a specified top margin in percent
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство margin-left

Свойство margin-left позволяет вам установить левое поле элемента. Может иметь значение длины,% или авто.

Вот пример -

<html>
   <head>
   </head>

   <body>
      <p style = "margin-left: 15px; border:1px solid black;">
         This is a paragraph with a specified left margin
      </p>
      
      <p style = "margin-left: 5%; border:1px solid black;">
         This is another paragraph with a specified top margin in percent
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство margin-right

Свойство margin-right позволяет вам установить правое поле элемента. Может иметь значение длины,% или авто.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <p style = "margin-right: 15px; border:1px solid black;">
         This is a paragraph with a specified right margin
      </p>
      <p style = "margin-right: 5%; border:1px solid black;">
         This is another paragraph with a specified right margin in percent
      </p>
   </body>
</html>

Это даст следующий результат -

Теперь посмотрим, как использовать эти свойства на примерах.

Свойство типа списка

Свойство list-style-type позволяет вам управлять формой или стилем маркера (также известного как маркер) в случае неупорядоченных списков и стилем нумерации символов в упорядоченных списках.

Вот значения, которые можно использовать для неупорядоченного списка -

Sr.No.	Значение и описание
1	none NA
2	disc (default) Закрашенный круг
3	circle Пустой круг
4	square Закрашенный квадрат

Вот значения, которые можно использовать для упорядоченного списка -

Значение	Описание	пример
десятичный	номер	1,2,3,4,5
десятичный ведущий ноль	0 перед числом	01, 02, 03, 04, 05
нижняя альфа	Строчные буквенно-цифровые символы	а, б, в, г, д
верхняя альфа	Буквенно-цифровые символы в верхнем регистре	A, B, C, D, E
нижний римский	Строчные римские цифры	я, II, III, IV, V
верхний римский	Римские цифры в верхнем регистре	I, II, III, IV, V
нижнегреческий	Маркер нижнегреческий	альфа, бета, гамма
нижнелатинский	Маркер нижнелатинский	а, б, в, г, д
верхнелатинский	Маркер верхнелатинский	A, B, C, D, E
иврит	Маркер - традиционная нумерация на иврите.
армянский	Маркер - традиционная армянская нумерация.
грузинский	Маркер - традиционная грузинская нумерация.
cjk-идеографический	Маркер - простые идеографические числа
хирагана	Маркер - хирагана	а, я, у, е, о, ка, ки
катакана	Маркер - катакана	A, I, U, E, O, KA, KI
хирагана-ироха	Маркер - хирагана-ироха	я, ро, ха, ни, хо, он, чтобы
катакана-ироха	Маркер - катакана-ироха	Я, RO, HA, NI, HO, HE, TO

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Это даст следующий результат -

Свойство list-style-position

Свойство list-style-position указывает, должен ли маркер появляться внутри или за пределами поля, содержащего маркеры. Он может иметь одно из двух значений -

Sr.No.	Значение и описание
1	none NA
2	inside Если текст переходит на вторую строку, он переносится под маркер. Он также будет отображаться с отступом в том месте, где текст начинался бы, если бы список имел значение external.
3	outside Если текст переходит на вторую строку, текст будет выровнен по началу первой строки (справа от маркера).

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Это даст следующий результат -

Свойство list-style-image

Изображение в стиле списка позволяет вам указать изображение, чтобы вы могли использовать свой собственный стиль маркера. Синтаксис аналогичен свойству background-image с буквами url, начинающимися со значения свойства, за которыми следует URL в скобках. Если он не находит данное изображение, используются маркеры по умолчанию.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Это даст следующий результат -

Свойство в стиле списка

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

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Это даст следующий результат -

Свойство смещения маркера

Свойство marker-offset позволяет вам указать расстояние между маркером и текстом, относящимся к этому маркеру. Его значение должно быть длиной, как показано в следующем примере -

К сожалению, это свойство не поддерживается в IE 6 и Netscape 7.

Вот пример -

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Это даст следующий результат -

• В padding служит сокращением для предыдущих свойств.

Теперь посмотрим, как использовать эти свойства на примерах.

Свойство padding-bottom

Свойство padding-bottom устанавливает нижнее заполнение (пробел) элемента. Это может принимать значение в процентах.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-bottom: 15px; border:1px solid black;">
         This is a paragraph with a specified bottom padding
      </p>
      
      <p style = "padding-bottom: 5%; border:1px solid black;">
         This is another paragraph with a specified bottom padding in percent
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство padding-top

Свойство padding-top устанавливает верхнее заполнение (пробел) элемента. Это может принимать значение в процентах.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-top: 15px; border:1px solid black;">
         This is a paragraph with a specified top padding
      </p>
      
      <p style = "padding-top: 5%; border:1px solid black;">
         This is another paragraph with a specified top padding in percent
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство padding-left

Свойство padding-left устанавливает левое заполнение (пробел) элемента. Это может принимать значение в процентах.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-left: 15px; border:1px solid black;">
         This is a paragraph with a specified left padding
      </p>
      
      <p style = "padding-left: 15%; border:1px solid black;">
         This is another paragraph with a specified left padding in percent
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство padding-right

Свойство padding-right устанавливает правое заполнение (пробел) элемента. Это может принимать значение в процентах.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-right: 15px; border:1px solid black;">
         This is a paragraph with a specified right padding
      </p>
      
      <p style = "padding-right: 5%; border:1px solid black;">
         This is another paragraph with a specified right padding in percent
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство заполнения

Свойство padding устанавливает отступ (пробел) слева, справа, сверху и снизу элемента. Это может принимать значение в процентах.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding: 15px; border:1px solid black;">
         all four padding will be 15px 
      </p> 
      
      <p style = "padding:10px 2%; border:1px solid black;"> 
         top and bottom padding will be 10px, left and right
         padding will be 2% of the total width of the document. 
      </p> 
      
      <p style = "padding: 10px 2% 10px; border:1px solid black;">
         top padding will be 10px, left and right padding will 
         be 2% of the total width of the document, bottom padding will be 10px
      </p> 
      
      <p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
         top padding will be 10px, right padding will be 2% of
         the total width of the document, bottom padding and top padding will be 10px 
      </p>
   </body>
</html>

Это даст следующий результат -

1	auto Форма курсора зависит от области контекста, над которой он находится. Например, I над текстом, передачей ссылки и так далее ...
2	crosshair Перекрестие или знак плюса
3	default Стрелка
4	pointer Указывающая рука (в IE 4 это значение - рука)
5	move Бар I
6	e-resize Курсор указывает на то, что край прямоугольника следует переместить вправо (на восток).
7	ne-resize Курсор указывает на то, что край прямоугольника следует переместить вверх и вправо (север / восток).
8	nw-resize Курсор указывает, что край прямоугольника нужно переместить вверх и влево (север / запад).
9	n-resize Курсор указывает на то, что край прямоугольника необходимо переместить вверх (на север).
10	se-resize Курсор указывает на то, что край прямоугольника следует переместить вниз и вправо (юг / восток).
11	sw-resize Курсор указывает на то, что край прямоугольника нужно переместить вниз и влево (юг / запад).
12	s-resize Курсор указывает на то, что край прямоугольника следует переместить вниз (на юг).
13	w-resize Курсор указывает на то, что край прямоугольника следует переместить влево (на запад).
14	text Бар I
15	wait Песочные часы
16	help Знак вопроса или воздушный шарик, идеально подходит для использования над кнопками справки
17	<url> Источник файла изображения курсора

NOTE- Вы должны попытаться использовать только эти значения, чтобы добавить полезную информацию для пользователей, и в некоторых местах они ожидают увидеть этот курсор. Например, использование перекрестия при наведении курсора на ссылку может сбить с толку посетителей.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <p>Move the mouse over the words to see the cursor change:</p>
      
      <div style = "cursor:auto">Auto</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default</div>
      
      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-resize</div>
      <div style = "cursor:ne-resize">ne-resize</div>
      <div style = "cursor:nw-resize">nw-resize</div>
      
      <div style = "cursor:n-resize">n-resize</div>
      <div style = "cursor:se-resize">se-resize</div>
      <div style = "cursor:sw-resize">sw-resize</div>
      <div style = "cursor:s-resize">s-resize</div>
      <div style = "cursor:w-resize">w-resize</div>
      
      <div style = "cursor:text">text</div>
      <div style = "cursor:wait">wait</div>
      <div style = "cursor:help">help</div>
   </body>
</html>

Это даст следующий результат -

• В outline-width Свойство используется для установки ширины контура.

• В outline-style Свойство используется для установки стиля линии для контура.

• В outline-color Свойство используется для установки цвета контура.

• В outline Свойство используется для установки всех трех вышеупомянутых свойств в одном операторе.

Свойство outline-width

Свойство outline-width определяет ширину контура, добавляемого к блоку. Его значение должно быть длиной или одним из значений тонкого, среднего или толстого, как и атрибут border-width.

Ширина в ноль пикселей означает отсутствие контура.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:solid;">
         This text is having thick outline.
      </p>
      <br />
      
      <p style = "outline-width:5px; outline-style:solid;">
         This text is having 5x outline.
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство в стиле контура

Свойство outline-style определяет стиль линии (сплошной, пунктирной или пунктирной), огибающей элемент. Может принимать одно из следующих значений -

• none- Без границы. (Эквивалент ширины контура: 0;)

• solid - Контур - одна сплошная линия.

• dotted - Контур представляет собой серию точек.

• dashed - Контур - это серия коротких линий.

• double - Контур - две сплошные линии.

• groove - Контур выглядит так, как будто он вырезан на странице.

• ridge - Контур противоположен пазу.

• inset - Контур заставляет окно выглядеть так, как будто оно встроено в страницу.

• outset - Контур заставляет коробку выглядеть так, как будто она выходит из холста.

• hidden - То же самое.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство цвета контура

Свойство outline-color позволяет указать цвет контура. Его значение должно быть либо именем цвета, либо шестнадцатеричным цветом, либо значением RGB, как в свойствах color и border-color.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Это даст следующий результат -

Контурное свойство

Свойство схемы - это сокращенное свойство, которое позволяет вам указывать значения для любого из трех свойств, рассмотренных ранее, в любом порядке, но в одном операторе.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline:thin solid red;">
         This text is having thin solid red outline.
      </p>
      <br />
      
      <p style = "outline:thick dashed #009900;">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Это даст следующий результат -

• В max-width Свойство используется для установки максимальной ширины блока.

• В min-width Свойство используется для установки минимальной ширины поля.

Свойства высоты и ширины

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

Вот пример -

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400pixels wide and 100 pixels high
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство line-height

Свойство line-height позволяет увеличивать расстояние между строками текста. Значение свойства line-height может быть числом, длиной или процентом.

Вот пример -

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
         This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
         This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство max-height

Свойство max-height позволяет указать максимальную высоту окна. Значение свойства max-height может быть числом, длиной или процентом.

NOTE - Это свойство не работает ни в Netscape 7, ни в IE 6.

Вот пример -

<html>
   <head>
   </head>  
   <body>
      <p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
      </p>
      <br>
      <br>
      <br>
      <img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
   </body>
</html>

Это даст следующий результат -

Свойство min-height

Свойство min-height позволяет указать минимальную высоту блока. Значение свойства min-height может быть числом, длиной или процентом.

NOTE - Это свойство не работает ни в Netscape 7, ни в IE 6.

Вот пример -

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
      </p>
      <img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
   </body>
</html>

Это даст следующий результат -

Свойство max-width

Свойство max-width позволяет вам указать максимальную ширину поля. Значение свойства max-width может быть числом, длиной или процентом.

NOTE - Это свойство не работает ни в Netscape 7, ни в IE 6.

Вот пример -

<html>
   <head>
   </head>

   <body>
      <p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
      </p>
      <img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
   </body>
</html>

Это даст следующий результат -

Свойство min-width

Свойство min-width позволяет вам указать минимальную ширину поля. Значение свойства min-width может быть числом, длиной или процентом.

NOTE - Это свойство не работает ни в Netscape 7, ни в IE 6.

Вот пример -

<html>
   <head>
   </head>

   <body>
      <p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 100px high and min width is 400px
         This paragraph is 100px high and min width is 400px
      </p>
      <img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
   </body>
</html>

Это даст следующий результат -

1	visible Позволяет содержимому выходить за границы содержащего его элемента.
2	hidden Содержимое вложенного элемента просто обрезается на границе содержащего элемента, и полосы прокрутки не видны.
3	scroll Размер содержащего элемента не меняется, но добавляются полосы прокрутки, чтобы пользователь мог прокручивать для просмотра содержимого.
4	auto Цель такая же, как и у прокрутки, но полоса прокрутки будет отображаться только в том случае, если содержимое переполняется.

Вот пример -

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
      <p>Example of scroll value:</p>
      <div class = "scroll">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class = "auto">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
   </body>
</html>

Это даст следующий результат -

1	visible Ящик и его содержимое показаны пользователю.
2	hidden Поле и его содержимое становятся невидимыми, хотя они по-прежнему влияют на макет страницы.
3	collapse Это используется только с динамическими столбцами таблицы и эффектами строк.

Вот пример -

<html>
   <head>
   </head>

   <body>
      <p>
         This paragraph should be visible in normal way.
      </p>
   
      <p style = "visibility:hidden;">
         This paragraph should not be visible.
      </p>
   </body>
</html>

Это даст следующий результат -

• Вверх - используйте отрицательное значение для вершины .
• Вниз - используйте положительное значение для вершины .

NOTE- Вы можете использовать нижнее или правое значение так же, как верхнее и левое .

Вот пример -

<html>
   <head>
   </head>

   <body>
      <div style = "position:relative; left:80px; top:2px; background-color:yellow;">
         This div has relative positioning.
      </div>
   </body>
</html>

Это даст следующий результат -

Абсолютное позиционирование

Элемент с position: absolute находится в указанных координатах относительно левого верхнего угла экрана.

Вы можете использовать два значения top и left вместе со свойством position для перемещения HTML-элемента в любое место HTML-документа.

• Сдвинуть влево - используйте отрицательное значение влево .
• Сдвинуть вправо - используйте положительное значение для левого .
• Вверх - используйте отрицательное значение для вершины .
• Вниз - используйте положительное значение для вершины .

NOTE- Вы можете использовать нижнее или правое значение так же, как верхнее и левое.

Вот пример -

<html>
   <head>
   </head>

   <body>
      <div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
         This div has absolute positioning.
      </div>
   </body>
</html>

Фиксированное позиционирование

Фиксированное позиционирование позволяет фиксировать положение элемента в определенном месте на странице независимо от прокрутки. Указанные координаты будут относиться к окну браузера.

Вы можете использовать два значения top и left вместе со свойством position для перемещения HTML-элемента в любое место HTML-документа.

• Сдвинуть влево - используйте отрицательное значение влево .
• Сдвинуть вправо - используйте положительное значение для левого .
• Вверх - используйте отрицательное значение для вершины .
• Вниз - используйте положительное значение для вершины .

NOTE- Вы можете использовать нижнее или правое значение так же, как верхнее и левое .

Вот пример -

<html>
   <head>
   </head>

   <body>
      <div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
         This div has fixed positioning.
      </div>
   </body>
</html>

<body>
   <div style = "background-color:red; 
      width:300px; 
      height:100px; 
      position:relative; 
      top:10px; 
      left:80px; 
      z-index:2">
   </div>
      
   <div style = "background-color:yellow; 
      width:300px; 
      height:100px; 
      position:relative; 
      top:-60px; 
      left:35px; 
      z-index:1;">
   </div>
      
   <div style = "background-color:green; 
      width:300px; 
      height:100px; 
      position:relative; 
      top:-220px; 
      left:120px; 
      z-index:3;">
   </div>
</body>

Это даст следующий результат -

Наиболее часто используемые псевдоклассы следующие:

Sr.No.	Значение и описание
1	:link Используйте этот класс, чтобы добавить особый стиль к непосещенной ссылке.
2	:visited Используйте этот класс, чтобы добавить особый стиль к посещенной ссылке.
3	:hover Используйте этот класс, чтобы добавить особый стиль к элементу при наведении на него указателя мыши.
4	:active Используйте этот класс, чтобы добавить особый стиль к активному элементу.
5	:focus Используйте этот класс, чтобы добавить особый стиль к элементу, когда элемент находится в фокусе.
6	:first-child Используйте этот класс, чтобы добавить особый стиль к элементу, который является первым потомком какого-либо другого элемента.
7	:lang Используйте этот класс, чтобы указать язык для использования в указанном элементе.

При определении псевдоклассов в блоке <style> ... </style> следует отметить следующие моменты:

• a: hover ДОЛЖЕН стоять после: link и: посещенный в определении CSS, чтобы быть эффективным.

• a: active ДОЛЖЕН стоять после: hover в определении CSS, чтобы быть эффективным.

• Имена псевдоклассов не чувствительны к регистру.

• Псевдоклассы отличаются от классов CSS, но их можно комбинировать.

Псевдокласс: link

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

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
      </style>
   </head>

   <body>
      <a href = "">Black Link</a>
   </body>
</html>

Это создаст следующую черную ссылку -

Псевдокласс: visit

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

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = "">Click this link</a>
   </body>
</html>

Это создаст следующую ссылку. Когда вы щелкнете по этой ссылке, она изменит свой цвет на зеленый.

Псевдокласс: hover

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

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Bring Mouse Here</a>
   </body>
</html>

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

Псевдокласс: active

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

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Click This Link</a>
   </body>
</html>

Будет создана следующая ссылка. Когда пользователь щелкает по ней, цвет меняется на розовый.

Псевдокласс: focus

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

<html>
   <head>
      <style type = "text/css">
         a:focus {color: #0000FF}
      </style>
   </head>

   <body>
      <a href = "">Click this Link</a>
   </body>
</html>

Будет создана следующая ссылка. Когда эта ссылка становится активной, ее цвет меняется на оранжевый. Цвет меняется обратно, когда он теряет фокус.

Псевдокласс: first-child

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

Для того, чтобы: первый ребенок работал в IE <! DOCTYPE> должен быть объявлен вверху документа.

Например, чтобы сделать отступ в первом абзаце всех элементов <div>, вы можете использовать это определение -

<html>
   <head>
      <style type = "text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>

   <body>
   
      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be indented</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p>
      
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div. This paragraph will not be effected.</p>
      </div>
      
   </body>
</html>

Это даст следующий результат -

Псевдокласс: lang

Псевдокласс языка : lang позволяет создавать селекторы на основе языковых настроек для определенных тегов.

Этот класс полезен в документах, которые должны обращаться к нескольким языкам, которые имеют разные соглашения для определенных языковых конструкций. Например, во французском языке для цитирования обычно используются угловые скобки (<и>), а в английском языке используются кавычки ('и').

В документе, который должен устранить это различие, вы можете использовать псевдокласс: lang для соответствующего изменения кавычек. Следующий код изменяет тег <blockquote> в соответствии с используемым языком:

<html>
   <head>
      <style type = "text/css">
         
         /* Two levels of quotes for two languages*/
         :lang(en) { quotes: '"' '"'  "'"  "'"; }
         :lang(fr) { quotes: "<<" ">>" "<" ">"; }
      </style>
   </head>
   
   <body>
      <p>...<q lang = "fr">A quote in a paragraph</q>...</p>
   </body>
</html>

Селекторы: lang будут применяться ко всем элементам в документе. Однако не все элементы используют свойство кавычек, поэтому эффект будет прозрачным для большинства элементов.

Это даст следующий результат -

Наиболее часто используемые псевдоэлементы следующие:

Sr.No.	Значение и описание
1	:first-line Используйте этот элемент, чтобы добавить специальные стили к первой строке текста в селекторе.
2	:first-letter Используйте этот элемент, чтобы добавить особый стиль к первой букве текста в селекторе.
3	:before Используйте этот элемент для вставки некоторого содержимого перед элементом.
4	:after Используйте этот элемент для вставки некоторого содержимого после элемента.

Псевдоэлемент: first-line

В следующем примере показано, как использовать элемент : first-line для добавления специальных эффектов к первой строке элементов в документе.

<html>
   <head>
      <style type = "text/css">
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      </style>
   </head>

   <body>
      <p class = "noline">
         This line would not have any underline because this belongs to nline class.
      </p>
      
      <p>
         The first line of this paragraph will be underlined as defined in the 
         CSS rule above. Rest of the lines in this paragraph will remain normal. 
         This example shows how to use :first-line pseduo element to give effect 
         to the first line of any HTML element.
      </p>
   </body>
</html>

Будет создана следующая ссылка -

Псевдоэлемент: first-letter

В следующем примере показано, как использовать элемент : first-letter для добавления специальных эффектов к первой букве элементов в документе.

<html>
   <head>
      <style type = "text/css">
         p:first-letter { font-size: 5em; }
         p.normal:first-letter { font-size: 10px; }
      </style>
   </head>

   <body>
      <p class = "normal">
         First character of this paragraph will be normal and will have font size 10 px;
      </p>
      
      <p>
         The first character of this paragraph will be 5em big as defined in the 
         CSS rule above. Rest of the characters in this paragraph will remain 
         normal. This example shows how to use :first-letter pseduo element 
         to give effect to the first characters  of any HTML element.
      </p>
   </body>
</html>

Это создаст следующую черную ссылку -

Псевдоэлемент: before

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

<html>
   <head>
      <style type = "text/css">
         p:before {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
   </body>
</html>

Это создаст следующую черную ссылку -

Псевдоэлемент: after

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

<html>
   <head>
      <style type = "text/css">
         p:after {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
   </body>
</html>

Это создаст следующую черную ссылку -

Правило @import

Правило @import позволяет импортировать стили из другой таблицы стилей. Он должен отображаться в самом начале таблицы стилей перед любым правилом, а его значением является URL-адрес.

Это можно записать одним из двух следующих способов -

<style type = "text/css">
   <!--
      @import "mystyle.css";
      or
      @import url("mystyle.css");
      .......other CSS rules .....
   -->
</style>

Значение правила @import заключается в том, что оно позволяет разрабатывать таблицы стилей с использованием модульного подхода. Вы можете создавать различные таблицы стилей, а затем включать их везде, где они вам нужны.

Правило @charset

Если вы пишете свой документ с использованием набора символов, отличного от ASCII или ISO-8859-1, вы можете установить правило @charset в верхней части таблицы стилей, чтобы указать, в каком наборе символов написана таблица стилей.

Правило @charset должно быть написано в самом начале таблицы стилей, даже без пробела перед ним. Значение заключено в кавычки и должно быть одним из стандартных наборов символов. Например -

<style type = "text/css">
   <!--
      @charset "iso-8859-1"
      .......other CSS rules .....
   -->
</style>

Правило @ font-face

Правило @ font-face используется для исчерпывающего описания начертания шрифта для использования в документе. @ font-face также может использоваться для определения местоположения шрифта для загрузки, хотя это может иметь ограничения, зависящие от реализации.

В общем, @ font-face чрезвычайно сложен, и его использование не рекомендуется никому, кроме тех, кто разбирается в метриках шрифтов.

Вот пример -

<style type = "text/css">
   <!--
      @font-face {
         font-family: "Scarborough Light";
         src: url("http://www.font.site/s/scarbo-lt");
      }
      @font-face {
         font-family: Santiago;
         src: local ("Santiago"),
         url("http://www.font.site/s/santiago.tt")
         format("truetype");
         unicode-range: U+??,U+100-220;
         font-size: all;
         font-family: sans-serif;
      }
   -->
</style>

Правило! Important

Каскадные таблицы стилей каскад. Это означает, что стили применяются в том же порядке, в котором они читаются браузером. Применяется первый стиль, затем второй и так далее.

Правило! Important предоставляет способ сделать ваш CSS каскадным. Он также включает правила, которые должны применяться всегда. Правило, имеющее свойство! Important, будет применяться всегда, независимо от того, где это правило появляется в документе CSS.

Например, в следующей таблице стилей текст абзаца будет черным, хотя первое примененное свойство стиля - красный:

<style type = "text/css">
   <!--
      p { color: #ff0000; }
      p { color: #000000; }
   -->
</style>

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

<html>
   <head>
      <style type = "text/css">
         p { color: #ff0000 !important; }
         p { color: #000000; }
      </style>
   </head>

   <body>
      <p>Tutorialspoint.com</p>
   </body>
</html>

Здесь вы сделали p {color: # ff0000! Important; } обязательный, теперь это правило будет применяться всегда, даже если вы определили другое правило p {color: # 000000; }

Это даст следующий результат -

1	opacity Уровень непрозрачности. 0 полностью прозрачен, 100 полностью непрозрачен.
2	finishopacity Уровень непрозрачности на другом конце объекта.
3	style Форма градиента непрозрачности. 0 = равномерный 1 = линейный 2 = радиальный 3 = прямоугольный
4	startX Координата X для начала градиента непрозрачности.
5	startY Координата Y для начала градиента непрозрачности.
6	finishX Координата X конца градиента непрозрачности.
7	finishY Координата Y для конца градиента непрозрачности.

пример

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" alt = "CSS Logo" 
         style = "Filter: Alpha(Opacity=100, 
         FinishOpacity = 0, 
         Style = 2, 
         StartX = 20, 
         StartY = 40, 
         FinishX = 0, 
         FinishY = 0)" />
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: blue;
         Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
   </body>
</html>

Это даст следующий результат -

Размытость

Размытие в движении используется для создания размытых изображений или текста с направлением и силой. В этом фильтре можно использовать следующие параметры -

Sr.No.	Параметр и описание
1	add Правда или ложь. Если true, изображение добавляется к размытому; и если false, изображение не добавляется к размытому изображению.
2	direction Направление размытия по часовой стрелке с округлением до 45 градусов. Значение по умолчанию - 270 (слева). 0 = верх 45 = Вверху справа 90 = Вправо 135 = Внизу справа 180 = снизу 225 = Внизу слева 270 = Влево 315 = Вверху слева
3	strength Количество пикселей, на которое будет увеличиваться размытие. По умолчанию - 5 пикселей.

пример

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" alt = "CSS Logo" 
         style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: blue; 
         Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials
      </div>
   </body>
</html>

Это даст следующий результат -

Цветовой фильтр

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

Sr.No.	Параметр и описание
1	color Цвет, который вы хотите сделать прозрачным.

пример

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/images/css.gif" 
         alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
      
      <p>Text Example:</p>
      
      <div style = "width: 580; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: #3300FF; 
         Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
   </body>
</html>

Это даст следующий результат -

Эффект падающей тени

Drop Shadow используется для создания тени вашего объекта с указанным смещением и цветом по X (по горизонтали) и Y (по вертикали).

В этом фильтре можно использовать следующие параметры -

Sr.No.	Параметр и описание
1	color Цвет капли тени в формате #RRGGBB.
2	offX Количество пикселей, на которое тень смещается от визуального объекта по оси x. Положительные целые числа перемещают тень вправо, отрицательные целые числа перемещают тень влево.
3	offY Количество пикселей, на которое тень смещается от визуального объекта по оси Y. Положительные целые числа перемещают тень вниз, отрицательные целые числа перемещают тень вверх.
4	positive Если true, все непрозрачные пиксели объекта имеют тень. Если false, все прозрачные пиксели имеют тень. По умолчанию это правда.

пример

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter:drop-shadow(2px 2px 1px #FF0000);">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>
   </body>
</html>

Это даст следующий результат -

Эффект переворота

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

Sr.No.	Параметр и описание
1	FlipH Создает горизонтальное зеркальное отображение
2	FlipV Создает вертикальное зеркальное отображение

пример

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: FlipH">
      
      <img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV">
      
      <p>Text Example:</p>
      
      <div style = "width: 300; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: FlipV">CSS Tutorials</div>
   </body>
</html>

Это даст следующий результат -

Эффект свечения

Эффект свечения используется для создания свечения вокруг объекта. Если это прозрачное изображение, то вокруг непрозрачных пикселей создается свечение. В этом фильтре можно использовать следующие параметры -

Sr.No.	Параметр и описание
1	color Цвет, в котором должно быть свечение.
2	strength Интенсивность свечения (от 1 до 255).

пример

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
   </body>
</html>

Это даст следующий результат -

Эффект оттенков серого

Эффект градаций серого используется для преобразования цвета объекта в 256 оттенков серого. В этом фильтре используется следующий параметр -

Sr.No.	Параметр и описание
1	grayscale Преобразует цвета объекта в 256 оттенков серого.

пример

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: grayscale(50%)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: grayscale(50%)">CSS Tutorials</div>
   </body>
</html>

Это даст следующий результат -

Обратный эффект

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

Sr.No.	Параметр и описание
1	Invert Сопоставляет цвета объекта с их противоположными значениями в цветовом спектре.

пример

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: invert(100%)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: invert(100%)">CSS Tutorials</div>
   </body>
</html>

Это даст следующий результат -

Эффект маски

Эффект маски используется для превращения прозрачных пикселей в заданный цвет и делает непрозрачные пиксели прозрачными. В этом фильтре используется следующий параметр -

Sr.No.	Параметр и описание
1	color Цвет, которым станут прозрачные области.

пример

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Mask(Color=#00FF00)">CSS Tutorials
      </div>
   </body>
</html>

Это даст следующий результат -

Теневой фильтр

Фильтр тени используется для создания ослабленной тени в указанном направлении и цвете. Это фильтр, который находится между Dropshadow и Glow. В этом фильтре можно использовать следующие параметры -

Sr.No.	Параметр и описание
1	color Цвет, которым должна быть тень.
2	direction Направление размытия по часовой стрелке с округлением до 45 градусов. Значение по умолчанию - 270 (слева). 0 = верх 45 = Вверху справа 90 = Вправо 135 = Внизу справа 180 = снизу 225 = Внизу слева 270 = Влево 315 = Вверху слева

пример

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: 
         Arial Black; 
         color: red; 
         filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials
      </div>
   </body>
</html>

Это даст следующий результат -

Волновой эффект

Волновой эффект используется для придания объекту синусоидального искажения, чтобы он выглядел волнистым. В этом фильтре можно использовать следующие параметры -

Sr.No.	Параметр и описание
1	add Значение 1 добавляет исходное изображение к волнистому изображению, 0 - нет.
2	freq Количество волн.
3	light Сила света на волне (от 0 до 100).
4	phase С какой степени должна начинаться синусоида (от 0 до 100).
5	strength Интенсивность волнового эффекта.

пример

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) 
         Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials
      </div>
   </body>
</html>

Это даст следующий результат -

Рентгеновский эффект

Рентгеновский эффект изменяет оттенки серого и сглаживает глубину цвета. В этом фильтре используется следующий параметр:

Sr.No.	Параметр и описание
1	xray Оттенки серого и сглаживание глубины цвета.

пример

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Xray">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Xray">CSS Tutorials
      </div>
   </body>
</html>

Это даст следующий результат -

Ниже приведен пример -

<style tyle = "text/css">
   <!--
      @media print {
         body { font-size: 10pt }
      }
	
      @media screen {
         body { font-size: 12pt }
      }
      @media screen, print {
         body { line-height: 1.2 }
      }
   -->
</style>

Язык документа

В HTML 4.0 атрибут media в элементе LINK указывает целевой носитель внешней таблицы стилей -

Ниже приведен пример -

<style tyle = "text/css">
   <!--
      <!doctype html public "-//w3c//dtd html 4.0//en">
      <html>
         <head>
            <title>link to a target medium</title>
            <link rel = "stylesheet" type = "text/css" media = "print, 
               handheld" href = "foo.css">
         </head>

         <body>
            <p>the body...
         </body>
      </html>
   -->
</style>

Распознаваемые типы носителей

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

Sr.No.	Значение и описание
1	all Подходит для всех устройств.
2	aural Предназначен для синтезаторов речи.
3	braille Предназначен для устройств с тактильной обратной связью Брайля.
4	embossed Предназначен для постраничных принтеров Брайля.
5	handheld Предназначен для портативных устройств (обычно с маленьким экраном, монохромный, с ограниченной пропускной способностью).
6	print Предназначен для постраничного непрозрачного материала и для документов, просматриваемых на экране в режиме предварительного просмотра. Пожалуйста, обратитесь к разделу о страничных носителях.
7	projection Предназначен для проецирования презентаций, например, проекторов или для печати на прозрачных пленках. Пожалуйста, обратитесь к разделу о страничных носителях.
8	screen Предназначен в первую очередь для цветных компьютерных экранов.
9	tty Предназначен для носителей, использующих сетку символов с фиксированным шагом, например телетайпов, терминалов или портативных устройств с ограниченными возможностями отображения.
10	tv Предназначен для устройств телевизионного типа.

NOTE - Имена типов носителей нечувствительны к регистру.

CSS2 определяет «страничный блок», блок конечных размеров, в котором отображается содержимое. Страничный блок представляет собой прямоугольную область, содержащую две области:

• The page area- Область страницы включает поля, расположенные на этой странице. Края области страницы действуют как начальный содержащий блок для макета, который возникает между разрывами страницы.

• The margin area - Он окружает область страницы.

Вы можете указать размеры, ориентацию, поля и т. Д. Страничного бокса в правиле @page. Размеры страничного бокса задаются свойством size. Размеры области страницы - это размеры страничного бокса за вычетом области полей.

Например, следующее правило @page устанавливает размер страничного бокса равным 8,5 × 11 дюймов и создает поле «2 см» со всех сторон между краем страничного бокса и областью страницы -

<style type = "text/css">
   <!--
      @page { size:8.5in 11in; margin: 2cm }
   -->
</style>

Вы можете использовать свойства margin, margin-top, margin-bottom, margin-left и margin-right в правиле @page, чтобы установить поля для вашей страницы.

Наконец, свойство меток используется в правиле @page для создания меток обрезки и совмещения вне поля страницы на целевом листе. По умолчанию отметки не печатаются. Вы можете использовать одно или оба ключевых слова обрезки и перекрестия для создания меток обрезки и регистрационных меток, соответственно, на целевой странице печати.

Установка размера страницы

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

• auto - Страничный блок будет настроен на размер и ориентацию целевого листа.

• landscape- Отменяет ориентацию цели. Страничный блок имеет тот же размер, что и целевой, а более длинные стороны расположены горизонтально.

• portrait- Отменяет ориентацию цели. Страничный блок имеет тот же размер, что и целевой, а более короткие стороны расположены горизонтально.

• length- Значения длины для свойства «размер» создают абсолютный страничный блок. Если указано только одно значение длины, оно устанавливает ширину и высоту страничного бокса. Для свойства size нельзя использовать процентные значения.

В следующем примере внешние края страничного бокса будут выровнены с целью. Процентное значение свойства «поле» относится к целевому размеру, поэтому, если целевые размеры листа составляют 21,0 см × 29,7 см (т. Е. A4), поля равны 2,10 см и 2,97 см.

<style type = "text/css">
   <!--
      @page {
         size: auto;   /* auto is the initial value */
         margin: 10%;
      }
   -->
</style>

В следующем примере устанавливается ширина страничного бокса 8,5 дюйма и высота 11 дюймов. Для страничного блока в этом примере требуется целевой размер листа 8,5 × 11 дюймов или больше.

<style type = "text/css">
   <!--
      @page {
         size: 8.5in 11in;  /* width height */
      }
   -->
</style>

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

<style type = "text/css">
   <!--
      @page { size : portrait }
      @page rotated { size : landscape }
      table { page : rotated }
   -->
</style>

В соответствии с указанным выше правилом, если при печати браузер обнаруживает в документе элемент <table>, а текущий макет страницы является вертикальным макетом по умолчанию, он запускает новую страницу и печатает таблицу на странице с альбомной ориентацией.

Левая, правая и первая страницы

При печати двусторонних документов поля страниц на левой и правой страницах должны быть разными. Это может быть выражено через два псевдокласса CSS следующим образом:

<style type = "text/css">
   <!--
      @page :left {
         margin-left: 4cm;
         margin-right: 3cm;
      }

      @page :right {
         margin-left: 3cm;
         margin-right: 4cm;
      }
   -->
</style>

Вы можете указать стиль для первой страницы документа с помощью псевдокласса: first -

<style type = "text/css">
   <!--
      @page { margin: 2cm } /* All margins set to 2cm */

      @page :first {
         margin-top: 10cm    /* Top margin on first page 10cm */
      }
   -->
</style>

Управление разбивкой на страницы

Если не указано иное, разрывы страниц происходят только при изменении формата страницы или когда содержимое выходит за пределы поля текущей страницы. Чтобы иным образом принудительно или подавить разрывы страниц, используйте свойства page-break-before, page-break-after и page-break-inside .

Оба параметра page-break-before и page-break-after принимают ключевые слова auto, always, избежать, left и right .

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

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

<style type = "text/css">
   <!--
      h1 { page-break-before : right }
      h2 { page-break-after : avoid }
   -->
</style>

Используйте только auto и избегайте значений со свойством page-break-inside . Если вы предпочитаете, чтобы ваши таблицы не разбивались по страницам, если это возможно, вы должны написать правило:

<style type = "text/css">
   <!--
      table { page-break-inside : avoid }
   -->
</style>

Контроль над вдовами и сиротами

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

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

• В widows Свойство определяет минимальное количество строк абзаца, которое должно оставаться в верхней части страницы.

Вот пример создания 4 строк внизу и 3 строк вверху каждой страницы:

<style type = "text/css">
   <!--
      @page{orphans:4; widows:2;}
   -->
</style>

• Медицинская документация

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

Свойства CSS также позволяют изменять качество синтезированной речи (тип голоса, частота, интонация и т. Д.).

Вот пример -

<html>
   <head>
      <style type = "text/css">
         h1, h2, h3, h4, h5, h6 {
            voice-family: paul;
            stress: 20;
            richness: 90;
            cue-before: url("../audio/pop.au");
         }
         p {
            azimuth:center-right;
         }
      </style>
   </head>

   <body>
   
      <h1>Tutorialspoint.com</h1>
      <h2>Tutorialspoint.com</h2>
      <h3>Tutorialspoint.com</h3>
      <h4>Tutorialspoint.com</h4>
      <h5>Tutorialspoint.com</h5>
      <h6>Tutorialspoint.com</h6>
      <p>Tutorialspoint.com</p>
      
   </body>
</html>

Это даст следующий результат -

Синтезатор речи будет озвучивать заголовки голосом (своего рода звуковым шрифтом), называемым «пол», ровным тоном, но очень богатым голосом. Перед озвучиванием заголовков с указанного URL-адреса будет воспроизведен образец звука.

Абзацы с классом «heidi» появятся спереди слева (если звуковая система поддерживает пространственный звук), а абзацы с классом «peter» - справа.

Теперь мы увидим различные свойства, относящиеся к звуковым медиа.

• В azimuth наборы свойств, откуда должен исходить звук по горизонтали.

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

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

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

• В cue это сокращение для установки метки до и после.

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

• В pause-before указывает паузу, которую необходимо соблюдать перед произнесением содержимого элемента.

• В pause это сокращение для установки паузы до и после паузы.

• В pitch указывает средний тон (частоту) говорящего голоса.

• В pitch-range определяет изменение средней высоты тона.

• В play-during указывает звук, который будет воспроизводиться в качестве фона, пока произносится содержимое элемента.

• В richness определяет насыщенность или яркость говорящего голоса.

• В speak определяет, будет ли текст воспроизводиться на слух, и если да, то каким образом.

• В speak-numeral определяет, как произносятся цифры.

• В speak-punctuation указывает, как произносится пунктуация.

• В speech-rate указывает скорость разговора.

• В stress задает высоту «локальных пиков» в интонационном контуре голоса.

• В voice-family указывает список имен голосовых семейств с приоритетом.

• В volume относится к средней громкости голоса.

Свойство азимута

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

• angle- Положение описывается как угол в диапазоне от -360 до 360 градусов . Значение 0deg означает, что прямо впереди в центре звуковой сцены. 90deg находится справа, 180deg позади, и 270deg (или, что то же самое , и более удобно, -90deg ) слева.

• left-side- То же, что и 270deg. С «позади», «270 градусов».

• far-left- То же, что и «300 градусов». С «позади», «240 градусов».

• left- То же, что и "320deg". С «позади», «220 град.».

• center-left- То же, что и "340deg". С «сзади», «200град.».

• center- То же, что и "0deg". С «сзади», «180 градусов».

• center-right- То же, что и "20deg". С «позади», «160 градусов».

• right- То же, что и 40deg. С «сзади», «140град.».

• far-right- То же, что и «60 градусов». С «сзади», «120град».

• right-side- То же, что и «90 градусов». С «сзади», «90 градусов».

• leftwards- Перемещает звук влево относительно текущего угла. Точнее вычитает 20 градусов.

• rightwards- Сдвигает звук вправо относительно текущего угла. Точнее добавляет 20 градусов.

Вот пример -

<style type = "text/css">
   <!--
      h1   { azimuth: 30deg }
      td.a { azimuth: far-right }          /*  60deg */
      #12  { azimuth: behind far-right }   /* 120deg */
      p.comment { azimuth: behind }        /* 180deg */
   -->
</style>

Недвижимость на возвышении

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

• angle- Определяет высоту как угол от -90 до 90 градусов . 0deg означает «на переднем горизонте», что примерно означает уровень слушателя. 90 градусов означает прямо над головой, а -90 градусов означает прямо под.

• below - То же, что и "-90deg".

• level - То же, что и "0deg".

• above - То же, что и «90 градусов».

• higher - Добавляет 10 градусов к текущей высоте.

• lower - Вычитает 10 градусов из текущего значения высоты.

Вот пример -

<style type = "text/css">
   <!--
      h1   { elevation: above }
      tr.a { elevation: 60deg }
      tr.b { elevation: 30deg }
      tr.c { elevation: level }
   -->
</style>

Свойство cue-after

Свойство cue-after указывает звук, который будет воспроизводиться после произнесения содержимого элемента, чтобы отделить его от других. Возможные значения включают -

• url - URL-адрес звукового файла для воспроизведения.

• none - Ничего не надо играть.

Вот пример -

<style type = "text/css">
   <!--
      a {cue-after: url("dong.wav");}
      h1 {cue-after: url("pop.au"); }
   -->
</style>

Свойство cue-before

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

• url - URL-адрес звукового файла для воспроизведения.

• none - Ничего не надо играть.

Вот пример -

<style type = "text/css">
   <!--
      a {cue-before: url("bell.aiff");}
      h1 {cue-before: url("pop.au"); }
   -->
</style>

Свойство cue

Свойство cue - это сокращение для установки cue-before и cue-after . Если даны два значения, первое значение - метка до, а второе - метка после . Если указано только одно значение, оно применяется к обоим свойствам.

Например, следующие два правила эквивалентны -

<style type = "text/css">
   <!--
      h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
      h1 {cue: url("pop.au") }
   -->
</style>

Свойство паузы после

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

• time - Выражает паузу в абсолютных единицах времени (секундах и миллисекундах).

• percentage- Относится к значению, обратному значению свойства скорости речи . Например, если скорость речи составляет 120 слов в минуту (то есть слово занимает полсекунды или 500 мс), то пауза после 100% означает паузу в 500 мс, а пауза после 20% означает 100 мс. .

Свойство паузы перед

Это свойство определяет паузу, которую необходимо соблюдать перед произнесением содержимого элемента. Возможные значения:

• time - Выражает паузу в абсолютных единицах времени (секундах и миллисекундах).

• percentage- Относится к значению, обратному значению свойства скорости речи . Например, если скорость речи составляет 120 слов в минуту (то есть слово занимает полсекунды или 500 мс), то пауза перед 100% означает паузу в 500 мс, а пауза перед 20% означает 100 мс. .

Свойство паузы

Это свойство является сокращением для установки паузы до и после паузы . Если даны два значения, первое значение - пауза до, а второе - пауза после.

Вот пример -

<style type = "text/css">
   <!--
      /* pause-before: 20ms; pause-after: 20ms */
      h1 { pause : 20ms }  
	
      /* pause-before: 30ms; pause-after: 40ms */
      h2{ pause : 30ms 40ms }  
	
      /* pause-before: ?; pause-after: 10ms */
      h3 { pause-after : 10ms }
   -->
</style>

Свойство поля

Это свойство указывает средний тон (частоту) говорящего голоса. Средняя высота голоса зависит от голосового семейства. Например, средняя высота стандартного мужского голоса составляет около 120 Гц, а для женского голоса - около 210 Гц. Возможные значения:

• frequency - Определяет средний тон говорящего голоса в герцах (Гц).

• x-low, low, medium, high, x-high - Эти значения не соответствуют абсолютным частотам, поскольку эти значения зависят от семейства голосов.

Свойство диапазона высоты тона

Это свойство определяет изменение среднего шага. Возможные значения:

• number- Значение от «0» до «100». Диапазон высоты тона «0» дает ровный монотонный голос. Диапазон высоты тона 50 дает нормальный перегиб. Диапазоны высоты тона более 50 создают анимированные голоса.

Свойство игрового процесса

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

• URI - Звук, обозначенный этим <uri>, воспроизводится в качестве фона во время озвучивания содержимого элемента.

• mix- Если это ключевое слово присутствует, это означает, что звук, унаследованный от свойства play-during родительского элемента, продолжает воспроизводиться, а звук, обозначенный uri , смешивается с ним. Если микс не указан, фоновый звук элемента заменяет родительский.

• repeat- Если это ключевое слово присутствует, это означает, что звук будет повторяться, если он слишком короткий, чтобы заполнить всю продолжительность элемента. В противном случае звук воспроизводится один раз, а затем останавливается.

• auto - Звук родительского элемента продолжает воспроизводиться.

• none - Это ключевое слово означает тишину.

Вот пример -

<style type = "text/css">
   <!--
      blockquote.sad { play-during: url("violins.aiff") }
      blockquote q   { play-during: url("harp.wav") mix }
      span.quiet     { play-during: none }
   -->
</style>

Богатство собственности

Это свойство определяет насыщенность или яркость голоса. Возможные значения:

• number- Значение от «0» до «100». Чем выше значение, тем сильнее будет слышен голос. При более низком значении голос будет мягким и приятным.

Говорить собственности

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

• none - Подавляет звуковой рендеринг, поэтому элементу не требуется время для рендеринга.

• normal - Использует языковые правила произношения для отображения элемента и его дочерних элементов.

• spell-out - произносит текст по одной букве за раз.

Обратите внимание на разницу между элементом, свойство volume которого имеет значение «silent», и элементом, свойство «speak» которого имеет значение «none». Первый занимает столько же времени, как если бы он был произнесен, включая любую паузу до и после элемента, но звук не генерируется. Последнее не требует времени и не отображается.

Говорите-цифровое свойство

Это свойство определяет, как произносятся цифры. Возможные значения:

• digits- Произносите цифры как отдельные цифры. Таким образом, «237» произносится как «Два, три, семь».

• continuous- Произносите цифру как полное число. Таким образом, «237» произносится как «двести тридцать семь». Представления слов зависят от языка.

Свойство "говорить-пунктуация"

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

• code - Знаки препинания, такие как точка с запятой, фигурные скобки и т. Д., Следует произносить буквально.

• none - Знаки препинания не следует произносить, а вместо этого следует естественным образом использовать в виде различных пауз.

Свойство скорости речи

Это свойство определяет скорость разговора. Обратите внимание, что допустимы как абсолютные, так и относительные значения ключевых слов. Возможные значения:

• number - Определяет скорость разговора в словах в минуту.

• x-slow - То же, что и 80 слов в минуту.

• slow - То же, что 120 слов в минуту.

• medium - То же, что 180 - 200 слов в минуту.

• fast - То же, что 300 слов в минуту.

• x-fast - То же, что и 500 слов в минуту.

• faster - Добавляет 40 слов в минуту к текущей скорости речи.

• slower - Вычитает 40 слов в минуту из текущей скорости речи.

Свойство напряжения

Это свойство определяет высоту «локальных пиков» в интонационном контуре голоса. Английский - это язык с ударением, и различным частям предложения присваивается основное, вторичное или высшее ударение. Возможные значения:

• number- Значение от «0» до «100». Значение ценностей зависит от языка, на котором говорят. Например, уровень «50» для стандартного англоязычного мужского голоса (средняя высота = 122 Гц), говорящего с нормальной интонацией и ударением, будет иметь другое значение, чем «50» для итальянского голоса.

Свойство голосовой семьи

Значение представляет собой список имен голосовых семейств, разделенных запятыми. Он может иметь следующие значения -

• generic-voice- Ценности - это голос семьи. Возможные значения: «мужчина», «женщина» и «ребенок».

• specific-voice - Ценности являются конкретными экземплярами (например, комик, триноиды, карлос, лани).

Вот пример -

<style type = "text/css">
   <!--
      h1 { voice-family: announcer, male }
      p.part.romeo  { voice-family: romeo, male }
      p.part.juliet { voice-family: juliet, female }
   -->
</style>

Объем Свойство

Громкость относится к средней громкости голоса. Он может иметь следующие значения -

• numbers- Любое число от «0» до «100». «0» представляет минимальный уровень громкости звука, а 100 соответствует максимальному комфортному уровню.

• percentage - Эти значения вычисляются относительно унаследованного значения, а затем обрезаются до диапазона от «0» до «100».

• silent- Вообще нет звука. Значение «0» не означает то же самое, что «без звука».

• x-soft - То же, что и «0».

• soft - То же, что и «25».

• medium - То же, что и «50».

• loud - То же, что и «75».

• x-loud - То же, что и «100».

Вот пример -

<style type = "text/css">
   <!--
      P.goat  { volume: x-soft }
   -->
</style>

Абзацы с классом goat будет очень мягко.

@media print {
   p.bodyText {font-family:georgia, times, serif;}
}
@media screen, print {
   p.bodyText {font-size:10pt}
}

Если вы определяете свою таблицу стилей в отдельном файле, вы также можете использовать атрибут media при связывании с внешней таблицей стилей -

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

• CSS имеет решающее значение для будущего веб-документов и будет поддерживаться большинством браузеров.

• CSS более точен, чем таблицы, что позволяет просматривать ваш документ в соответствии с вашими намерениями, независимо от окна браузера.

• Отслеживание вложенных таблиц может быть настоящей проблемой. Правила CSS, как правило, хорошо организованы, легко читаются и легко меняются.

Наконец, мы предлагаем вам использовать любую технологию, которая вам подходит, и использовать то, что вы знаете или что представляет ваши документы наилучшим образом.

CSS также предоставляет свойство table-layout, чтобы ваши таблицы загружались намного быстрее. Ниже приведен пример -

<table style = "table-layout:fixed;width:600px;">
   <tr height = "30">
      <td width = "150">CSS table layout cell 1</td>
      <td width = "200">CSS table layout cell 2</td>
      <td width = "250">CSS table layout cell 3</td>
   </tr>
</table>

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

Образец макета столбца

Вот шаги по созданию простого макета столбца с помощью CSS:

Установите поля и отступы всего документа следующим образом:

<style style = "text/css">
   <!--
      body {
         margin:9px 9px 0 9px;
         padding:0;
         background:#FFF;
      }
   -->
</style>

Теперь мы определим столбец желтого цвета, а позже мы прикрепим это правило к <div> -

<style style = "text/css">
   <!--
      #level0 {
         background:#FC0;
      }
   -->
</style>

До этого момента у нас будет документ с желтым телом, поэтому давайте теперь определим еще одно деление внутри level0 -

<style style = "text/css">
   <!--
      #level1 {
         margin-left:143px;
         padding-left:9px;
         background:#FFF;
      }
   -->
</style>

Теперь мы вложим еще одно подразделение в level1, и мы изменим только цвет фона -

<style style = "text/css">
   <!--
      #level2 {
         background:#FFF3AC;
      }
   -->
</style>

Наконец, мы воспользуемся той же техникой, вложим разделение level3 внутри level2, чтобы получить визуальный макет для правого столбца -

<style style = "text/css">
   <!--
      #level3 {
         margin-right:143px;
         padding-right:9px;
         background:#FFF;
      }
      #main {
         background:#CCC;
      }
   -->
</style>

Завершите исходный код следующим образом -

<style style = "text/css">
   body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
   }
	
   #level0 {background:#FC0;}
	
   #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
   }
	
   #level2 {background:#FFF3AC;}
	
   #level3 {
      margin-right:143px;
      padding-right:9px;
      background:#FFF;
   }
	
   #main {background:#CCC;}
</style>
<body>
   <div id = "level0">
      <div id = "level1">
         <div id = "level2">
            <div id = "level3">
               <div id = "main">
                  Final Content goes here...
               </div>
            </div>
         </div>
      </div>
   </div>
</body>

Точно так же вы можете добавить верхнюю панель навигации или рекламную панель вверху страницы.

Это даст следующий результат -

W3C CSS Validator (Консорциум World Wide Web). Этот валидатор проверяет ваш CSS путем загрузки файла, прямого ввода или использования URI - по одной странице за раз. Этот валидатор поможет вам найти все ошибки в вашем CSS. Валидатор проверки CSS WDG позволяет проверять CSS путем прямого ввода, загрузки файла и использования URI. Ошибки будут перечислены по номерам строк и столбцов, если они у вас есть. Ошибки обычно сопровождаются ссылками, объясняющими причину ошибки.

Валидатор CSS проверяет ваши каскадные таблицы стилей, чтобы убедиться, что они соответствуют стандартам CSS, установленным Консорциумом W3. Есть несколько валидаторов, которые также сообщат вам, какие функции CSS поддерживаются какими браузерами (поскольку не все браузеры одинаковы в своей реализации CSS).

Зачем проверять свой HTML-код?

Существует ряд причин, по которым вам следует проверять свой код. Но основные из них -

• Он обеспечивает кроссбраузерность, кроссплатформенность и совместимость в будущем.

• Веб-сайт хорошего качества увеличивает видимость в поисковых системах.

• Профессионализм: как веб-разработчик, ваш код не должен вызывать ошибок, пока его видят посетители.

CSS3 - это сотрудничество спецификаций CSS2 и новых спецификаций, мы можем назвать это сотрудничество module. Некоторые из модулей показаны ниже -

• Selectors
• Модель коробки
• Backgrounds
• Значения изображений и замененное содержимое
• Текстовые эффекты
• 2D преобразования
• 3D преобразования
• Animations
• Макет с несколькими столбцами
• Пользовательский интерфейс

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

Sr.No.	Значение и описание
1	border-radius Используйте этот элемент для установки свойства радиуса четырех границ
2	border-top-left-radius Используйте этот элемент для установки границы верхнего левого угла
3	border-top-right-radius Используйте этот элемент для установки границы правого верхнего угла
4	border-bottom-right-radius Используйте этот элемент для установки границы правого нижнего угла
5	border-bottom-left-radius Используйте этот элемент для установки границы левого нижнего угла

пример

Это свойство может иметь три значения. В следующем примере используются оба значения -

<html>
   <head>
      <style>
         #rcorners1 {
            border-radius: 25px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
         #rcorners2 {
            border-radius: 25px;
            border: 2px solid #8AC007;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
         #rcorners3 {
            border-radius: 25px;
            background: url(/css/images/logo.png);
            background-position: left top;
            background-repeat: repeat;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
      </style>
   </head>

   <body>
      <p id = "rcorners1">Rounded corners!</p>
      <p id = "rcorners2">Rounded corners!</p>
      <p id = "rcorners3">Rounded corners!</p>
   </body>
</html>

Это даст следующий результат -

Каждый уголок собственности

Мы можем указать свойство каждого угла, как показано ниже в примере -

<html>
   <head>
      <style>
         #rcorners1 {
            border-radius: 15px 50px 30px 5px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
         #rcorners2 {
            border-radius: 15px 50px 30px;
            background: #a44170;
            padding: 20px;
            width: 100px;
            height: 100px; 
         }
         #rcorners3 {
            border-radius: 15px 50px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
      </style>
   </head>

   <body>
      <p id = "rcorners1"></p>
      <p id = "rcorners2"></p>
      <p id = "rcorners3"></p>
   </body>
<body>

Это даст следующий результат -

Sr.No.	Значение и описание
1	border-image-source Используется для установки пути к изображению
2	border-image-slice Используется для нарезки пограничного изображения
3	border-image-width Используется для установки ширины граничного изображения
4	border-image-repeat Используется для закругления, повторения и растяжения изображения границы.

пример

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

<html>
   <head>
      <style>
         #borderimg1 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 10px;
         }
         #borderimg2 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 20px;
         }
         #borderimg3 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 30px;
         }
      </style>
   </head>

   <body>
      <p id = "borderimg1">This is image boarder example.</p>
      <p id = "borderimg2">This is image boarder example.</p>
      <p id = "borderimg3">This is image boarder example.</p>
   </body>
</html>

Это даст следующий результат -

Наиболее часто используемые значения показаны ниже -

Sr.No.	Значение и описание
1	background Используется для установки всех свойств фонового изображения в одном разделе
2	background-clip Используется для объявления области рисования фона
3	background-image Используется для указания фонового изображения
4	background-origin Используется для указания положения фоновых изображений
5	background-size Используется для указания размера фоновых изображений

пример

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

<html>
   <head>
      <style>
         #multibackground {
            background-image: url(/css/images/logo.png), url(/css/images/border.png);
            background-position: left top, left top;
            background-repeat: no-repeat, repeat;
            padding: 75px;
         }
      </style>
   </head>

   <body>
   
      <div id = "multibackground">
         <h1>www.tutorialspoint.com</h1>
         <p>
            Tutorials Point originated from the idea that there exists a class of 
            readers who respond better to online content and prefer to learn new 
            skills at their own pace from the comforts of their drawing rooms. 
            The journey commenced with a single tutorial on HTML in  2006 and elated 
            by the response it generated, we worked our way to adding fresh tutorials 
            to our repository which now proudly flaunts a wealth of tutorials and 
            allied articles on topics ranging from programming languages to web designing 
            to academics and much more..
         </p>
      </div>
      
   </body>
</html>

Это даст следующий результат -

Размер мультифона

Допускается свойство нескольких фонов для добавления разных размеров для разных изображений. Пример синтаксиса показан ниже -

#multibackground {
   background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
   background-size: 50px, 130px, auto;
}

Как показано выше в примере, каждое изображение имеет определенные размеры: 50 пикселей, 130 пикселей и автоматический размер.

#d1 {background-color: rgba(255, 0, 0, 0.5);} 
#d2 {background-color: rgba(0, 255, 0, 0.5);}  
#d3 {background-color: rgba(0, 0, 255, 0.5);}

HSL означает hue, saturation, lightness. Здесь Huge - это градус на цветовом круге, насыщенность и яркость - процентные значения от 0 до 100%. Пример синтаксиса HSL, как показано ниже -

#g1 {background-color: hsl(120, 100%, 50%);}  
#g2 {background-color: hsl(120, 100%, 75%);}  
#g3 {background-color: hsl(120, 100%, 25%);}

HSLA означает hue, saturation, lightness and alpha. Значение альфа определяет непрозрачность, как показано в формате RGBA. Пример синтаксиса HSLA, как показано ниже -

#g1 {background-color: hsla(120, 100%, 50%, 0.3);}  
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}  
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}

opacityДля более тонких красок необходимо добавить черный цвет для увеличения непрозрачности. Пример синтаксиса непрозрачности показан ниже -

#g1 {background-color:rgb(255,0,0);opacity:0.6;}  
#g2 {background-color:rgb(0,255,0);opacity:0.6;}  
#g3 {background-color:rgb(0,0,255);opacity:0.6;}

В следующем примере показано свойство цвета rgba.

<html>
   <head>
      <style>
         #p1 {background-color:rgba(255,0,0,0.3);}
         #p2 {background-color:rgba(0,255,0,0.3);}
         #p3 {background-color:rgba(0,0,255,0.3);}
      </style>
   </head>

   <body>
      <p>RGBA colors:</p>
      <p id = "p1">Red</p>
      <p id = "p2">Green</p>
      <p id = "p3">Blue</p>
   </body>
</html>

Это даст следующий результат -

В следующем примере показано свойство цвета HSL.

<html>
   <head>
      <style>
         #g1 {background-color:hsl(120, 100%, 50%);}
         #g2 {background-color:hsl(120,100%,75%);}
         #g3 {background-color:hsl(120,100%,25%);}
      </style>
   </head>

   <body>
      <p>HSL colors:</p>
      <p id = "g1">Green</p>
      <p id = "g2">Normal Green</p>
      <p id = "g3">Dark Green</p>
   </body>
</html>

Это даст следующий результат -

В следующем примере показано свойство цвета HSLA.

<html>
   <head>
      <style>
         #d1 {background-color:hsla(120,100%,50%,0.3);}
         #d2 {background-color:hsla(120,100%,75%,0.3);}
         #d3 {background-color:hsla(120,100%,25%,0.3);}
      </style>
   </head>

   <body>
      <p>HSLA colors:</p>
      <p id = "d1">Less opacity green</p>
      <p id = "d2">Green</p>
      <p id = "d3">Green</p>
   </body>
</html>

Это даст следующий результат -

В следующем примере показано свойство Opacity.

<html>
   <head>
      <style>
         #m1 {background-color:rgb(255,0,0);opacity:0.6;} 
         #m2 {background-color:rgb(0,255,0);opacity:0.6;} 
         #m3 {background-color:rgb(0,0,255);opacity:0.6;}
      </style>
   </head>

   <body>
      <p>HSLA colors:</p>
      <p id = "m1">Red</p>
      <p id = "m2">Green</p>
      <p id = "m3">Blue</p>
   </body>
</html>

Это даст следующий результат -

Линейные градиенты

Линейные градиенты используются для расположения двух или более цветов в линейных форматах, например сверху вниз.

Сверху вниз

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(pink,green);
            background: -o-linear-gradient(pink,green);
            background: -moz-linear-gradient(pink,green); 
            background: linear-gradient(pink,green); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

Это даст следующий результат -

Слева направо

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left, red , blue);
            background: -o-linear-gradient(right, red, blue); 
            background: -moz-linear-gradient(right, red, blue);
            background: linear-gradient(to right, red , blue);
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

Это даст следующий результат -

Диагональ

Диагональ начинается с левой верхней и правой кнопки.

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left top, red , blue); 
            background: -o-linear-gradient(bottom right, red, blue); 
            background: -moz-linear-gradient(bottom right, red, blue);
            background: linear-gradient(to bottom right, red , blue); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

Это даст следующий результат -

Многоцветный

<html>
   <head>
      <style>
         #grad2 {
            height: 100px;
            background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: linear-gradient(red, orange, yellow, red, blue, green,pink); 
         }
      </style>
   </head>

   <body>
      <div id = "grad2"></div>
   </body>
</html>

Это даст следующий результат -

Радиальные градиенты CSS3

Радиальные градиенты отображаются в центре.

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-radial-gradient(red 5%, green 15%, pink 60%); 
            background: -o-radial-gradient(red 5%, green 15%, pink 60%); 
            background: -moz-radial-gradient(red 5%, green 15%, pink 60%); 
            background: radial-gradient(red 5%, green 15%, pink 60%); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

Это даст следующий результат -

Повторяющиеся радиальные градиенты CSS3

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%); 
            background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: repeating-radial-gradient(blue, yellow 10%, green 15%); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

Это даст следующий результат -

<html>
   <head>
      <style>
         h1 {
            text-shadow: 2px 2px;
         }
         h2 {
            text-shadow: 2px 2px red;
         }
         h3 {
            text-shadow: 2px 2px 5px red;
         }
         h4 {
            color: white;
            text-shadow: 2px 2px 4px #000000;
         }
         h5 {
            text-shadow: 0 0 3px #FF0000;
         }
         h6 {
            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
         }
         p {
            color: white;
            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
         }
      </style>
   </head>

   <body>
      <h1>Tutorialspoint.com</h1>
      <h2>Tutorialspoint.com</h2>
      <h3>Tutorialspoint.com</h3>
      <h4>Tutorialspoint.com</h4>
      <h5>Tutorialspoint.com</h5>
      <h6>Tutorialspoint.com</h6>
      <p>Tutorialspoint.com</p>
   </body>
</html>

Это даст следующий результат -

тень коробки

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

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            padding: 15px;
            background-color: red;
            box-shadow: 10px 10px;
         }
      </style>
   </head>

   <body>
      <div>This is a div element with a box-shadow</div>
   </body>
</html>

Это даст следующий результат -

Sr.No.	Значение и описание
1	text-align-last Используется для выравнивания последней строки текста
2	text-emphasis Используется для выделения текста и цвета
3	text-overflow используется для определения того, как пользователям сообщается о переполненном содержимом, которое не отображается
4	word-break Используется для разрыва строки по слову
5	word-wrap Используется для разрыва строки и перехода на следующую строку

Переполнение текста

Свойство text-overflow определяет, каким образом пользователи получают сигнал о переполненном содержимом, которое не отображается. примерный пример переполнения текста показан следующим образом -

<html>
   <head>
      <style>
         p.text1 {
            white-space: nowrap; 
            width: 500px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: clip;
         }
         p.text2 {
            white-space: nowrap; 
            width: 500px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: ellipsis;
         }
      </style>
   </head>

   <body>
   
      <b>Original Text:</b>
   
      <p>
         Tutorials Point originated from the idea that there exists a class of 
         readers who respond better to online content and prefer to learn new 
         skills at their own pace from the comforts of their drawing rooms.
      </p>
      
      <b>Text overflow:clip:</b>
   
      <p class = "text1">
         Tutorials Point originated from the idea that there exists
         a class of readers who respond better to online content and prefer 
         to learn new skills at their own pace from the comforts of their 
         drawing rooms.
      </p>
      
      <b>Text overflow:ellipsis</b>
   
      <p class = "text2">
         Tutorials Point originated from the idea that there exists
         a class of readers who respond better to online content and 
         prefer to learn new skills at their own pace from the comforts 
         of their drawing rooms.
      </p>
      
   </body>
</html>

Это даст следующий результат -

CSS3 разбиение на слова

Следующий код, используемый для разрыва строки, показывает пример кода разрыва слова.

<html>
   <head>
      <style>
         p.text1 {
            width: 140px; 
            border: 1px solid #000000;
            word-break: keep-all;
         }
         p.text2 {
            width: 140px; 
            border: 1px solid #000000;
            word-break: break-all;
         }
      </style>
   </head>

   <body>
   
      <b>line break at hyphens:</b>
      <p class = "text1">
         Tutorials Point originated from the idea that there exists a 
         class of readers who respond better to online content and prefer 
         to learn new skills at their own pace from the comforts of 
         their drawing rooms.
      </p>
      
      <b>line break at any character</b>
   
      <p class = "text2">
         Tutorials Point originated from the idea that there exists a 
         class of readers who respond better to online content and 
         prefer to learn new skills at their own pace from the comforts 
         of their drawing rooms.
      </p>
      
   </body>
</html>

Это даст следующий результат -

Перенос слов в CSS

Перенос слов используется для разрыва строки и переноса на следующую строку. Следующий код будет иметь образец синтаксиса -

p {
   word-wrap: break-word;
}

1	TrueType Fonts (TTF) TrueType - это стандарт контурных шрифтов, разработанный Apple и Microsoft в конце 1980-х годов. Он стал наиболее распространенным шрифтом для операционных систем Windows и MAC.
2	OpenType Fonts (OTF) OpenType - это формат масштабируемых компьютерных шрифтов, разработанный Microsoft.
3	The Web Open Font Format (WOFF) WOFF используется для разработки веб-страниц и разработан в 2009 году. Сейчас он используется по рекомендации W3C.
4	SVG Fonts/Shapes SVG разрешает использование шрифтов SVG в документации SVG. Мы также можем применить CSS к SVG со свойством font face.
5	Embedded OpenType Fonts (EOT) EOT используется для разработки веб-страниц и встроен в веб-страницы, поэтому нет необходимости разрешать сторонние шрифты.

В следующем коде показан пример кода шрифта:

<html>
   <head>
      <style>
         @font-face {
            font-family: myFirstFont;
            src: url(/css/font/SansationLight.woff);
         }
         div {
            font-family: myFirstFont;
         }
      </Style>
   </head>
   
   <body>
      <div>This is the example of font face with CSS3.</div>
      <p><b>Original Text :</b>This is the example of font face with CSS3.</p>
   </body>
</html>

Это даст следующий результат -

Описание шрифтов

Следующий список содержал описание всех шрифтов, которые помещены в правило @ font-face -

Sr.No.	Значение и описание
1	font-family Используется для определения названия шрифта
2	src Используется для определения URL
3	font-stretch Используется для поиска, как растягивать шрифт
4	font-style Используется для определения стиля шрифтов
5	font-weight Используется для определения толщины шрифта (жирности)

1	matrix(n,n,n,n,n,n) Используется для определения матричных преобразований с шестью значениями
2	translate(x,y) Используется для преобразования элемента вместе с осью x и осью y
3	translateX(n) Используется для преобразования элемента вместе с осью x
4	translateY(n) Используется для преобразования элемента вместе с осью Y
5	scale(x,y) Используется для изменения ширины и высоты элемента
6	scaleX(n) Используется для изменения ширины элемента
7	scaleY(n) Используется для изменения высоты элемента
8	rotate(angle) Используется для поворота элемента на угол
9	skewX(angle) Используется для определения преобразований наклона вместе с осью x
10	skewY(angle) Используется для определения наклонных преобразований вместе с осью Y

В следующих примерах показаны все вышеупомянутые свойства.

Повернуть на 20 градусов

Поворот коробки под углом 20 градусов, как показано ниже -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(20deg);
            
            /* Safari */
            -webkit-transform: rotate(20deg);
            
            /* Standard syntax */
            transform: rotate(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
</html>

Это даст следующий результат -

Повернуть на -20 градусов

Поворот коробки с углом -20 градусов, как показано ниже -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(-20deg); 
         
            /* Safari */
            -webkit-transform: rotate(-20deg);
         
            /* Standard syntax */	
            transform: rotate(-20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
</html>

Это даст следующий результат -

Наклон оси X

Вращение прямоугольника с наклоном оси x, как показано ниже -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewX(20deg); 
            
            /* Safari */
            -webkit-transform: skewX(20deg);
            
            /* Standard syntax */	
            transform: skewX(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

Это даст следующий результат -

Наклон оси Y

Вращение коробки с наклоном оси y, как показано ниже -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewY(20deg); 
            
            /* Safari */
            -webkit-transform: skewY(20deg); 
            
            /* Standard syntax */	
            transform: skewY(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

Это даст следующий результат -

Матричное преобразование

Поворот блока с матричными преобразованиями, как показано ниже -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv1 {
            /* IE 9 */
            -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
            
            /* Safari */
            -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); 
            
            /* Standard syntax */
            transform: matrix(1, -0.3, 0, 1, 0, 0); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv1">
         Tutorials point.com
      </div>
   </body>
</html>

Это даст следующий результат -

Матрица трансформируется в другом направлении.

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv2 {
            /* IE 9 */
            -ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Safari */	
            -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Standard syntax */
            transform: matrix(1, 0, 0.5, 1, 150, 0); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv2">
         Tutorials point.com
      </div>
   </body>
</html>

Это даст следующий результат -

1	matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Используется для преобразования элемента с использованием 16 значений матрицы
2	translate3d(x,y,z) Используется для преобразования элемента с помощью оси X, оси Y и оси Z
3	translateX(x) Используется для преобразования элемента с помощью оси x
4	translateY(y) Используется для преобразования элемента с помощью оси Y
5	translateZ(z) Используется для преобразования элемента с помощью оси Y
6	scaleX(x) Используется для масштабирования, трансформирует элемент с помощью оси x
7	scaleY(y) Используется для масштабирования, трансформирует элемент с помощью оси Y
8	scaleY(y) Используется для преобразования элемента с помощью оси Z
9	rotateX(angle) Используется для поворота, преобразует элемент с помощью оси x
10	rotateY(angle) Используется для поворота, преобразует элемент с помощью оси Y
11	rotateZ(angle) Используется для поворота, преобразует элемент с помощью оси Z

3D-преобразования по оси X

В следующем примере показаны трехмерные преобразования по оси x.

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            -webkit-transform: rotateX(150deg); 
            
            /* Safari */
            transform: rotateX(150deg); 
            
            /* Standard syntax */
         }
      </style>
   </head>

   <body>
   
      <div>
         tutorials point.com
      </div>
      
      <p>Rotate X-axis</p>
      
      <div id = "myDiv">
         tutorials point.com.
      </div>
      
   </body>
</html>

Это даст следующий результат -

3D-преобразования по оси Y

В следующем примере показаны 3D-преобразования по оси Y:

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#yDiv {
            -webkit-transform: rotateY(150deg); 
            
            /* Safari */
            transform: rotateY(150deg); 
            
            /* Standard syntax */
         }
      </style>
   </head>

   <body>
   
      <div>
         tutorials point.com
      </div>
      
      <p>Rotate Y axis</p>
      
      <div id = "yDiv">
         tutorials point.com.
      </div>
      
   </body>
</html>

Это даст следующий результат -

3D-преобразования по оси Z

В следующем примере показаны 3D-преобразования по оси Z:

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#zDiv {
            -webkit-transform: rotateZ(90deg); 
            
            /* Safari */
            transform: rotateZ(90deg); 
            
            /* Standard syntax */
         }
      </style>
   </head>

   <body>
      <div>
         tutorials point.com
      </div>
      
      <p>rotate Z axis</p>
      
      <div id = "zDiv">
         tutorials point.com.
      </div>
   </body>
</html>

Это даст следующий результат -

В приведенном выше примере показаны высота, ширина, цвет, имя и продолжительность анимации с синтаксисом ключевых кадров.

Анимация перемещения влево

<html>
   <head>
      <style type = "text/css">
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
   </head>

   <body>
      <h1>Tutorials Point</h1>
      <p>this is an example of moving left animation .</p>
      <button onclick = "myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

Это даст следующий результат -

Перемещение левой анимации с ключевыми кадрами

<html>
   <head>
      <style type = "text/css">
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
   </head>

   <body>
      <h1>Tutorials Point</h1>
      
      <p>This is an example of animation left with an extra keyframe 
         to make text changes.</p>
      <button onclick = "myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

Это даст следующий результат -

1	column-count Используется для подсчета количества столбцов, на которые должен быть разделен элемент.
2	column-fill Используется для решения, как заполнять столбцы.
3	column-gap Используется для определения зазора между столбцами.
4	column-rule Используется для указания количества правил.
5	rule-color Используется для указания цвета правила столбца.
6	rule-style Используется для определения правила стиля для столбца.
7	rule-width Используется для указания ширины.
8	column-span Используется для указания промежутка между столбцами.

пример

Пример ниже показывает расположение текста как новую структуру бумаги.

<html>
   <head>
      <style>
         .multi {
            /* Column count property */
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
            
            /* Column gap property */
            -webkit-column-gap: 40px; 
            -moz-column-gap: 40px; 
            column-gap: 40px;
            
            /* Column style property */
            -webkit-column-rule-style: solid; 
            -moz-column-rule-style: solid; 
            column-rule-style: solid;
         }
      </style>
   </head>

   <body>
   
      <div class = "multi">
         Tutorials Point originated from the idea that there exists a class 
         of readers who respond better to online content and prefer to learn 
         new skills at their own pace from the comforts of their drawing rooms.
         The journey commenced with a single tutorial on HTML in 2006 and elated 
         by the response it generated, we worked our way to adding fresh tutorials
         to our repository which now proudly flaunts a wealth of tutorials and 
         allied articles on topics ranging from programming languages to web 
         designing to academics and much more.
      </div>
      
   </body>
</html>

Это даст следующий результат -

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

.multi {
   /* Column count property */
   -webkit-column-count: 4;
   -moz-column-count: 4;
   column-count: 4;
   
   /* Column gap property */
   -webkit-column-gap: 40px; 
   -moz-column-gap: 40px; 
   column-gap: 40px;
}

Это даст следующий результат -

1	appearance Используется, чтобы позволить пользователю создавать элементы как элементы пользовательского интерфейса.
2	box-sizing Позволяет пользователям четко фиксировать элементы на площади.
3	icon Используется для обозначения значка в области.
4	resize Используется для изменения размеров элементов, находящихся в области.
5	outline-offset Используется для рисования позади контура.
6	nav-down Используется для перемещения вниз при нажатии кнопки со стрелкой вниз на клавиатуре.
7	nav-left Используется для перемещения влево при нажатии кнопки со стрелкой влево на клавиатуре.
8	nav-right Используется для перемещения вправо при нажатии кнопки со стрелкой вправо на клавиатуре.
9	nav-up Используется для перемещения вверх при нажатии кнопки со стрелкой вверх на клавиатуре.

Пример свойства изменения размера

Свойство Resize имеет три общих значения, как показано ниже -

• horizontal
• vertical
• both

Использование both значение свойства resize в пользовательском интерфейсе css3 -

<html>
   <head>
      <style>
         div {
            border: 2px solid;
            padding: 20px; 
            width: 300px;
            resize: both;
            overflow: auto;
         }
      </style>
   </head>

   <body>
      <div>TutorialsPoint.com</div>
   </body>
</html>

Это даст следующий результат -

CSS3 смещение контура

Out line означает рисование линии вокруг элемента за пределами границы.

<html>
   <head>
      <style>
         div {
            margin: 20px;
            padding: 10px;
            width: 300px; 
            height: 100px;
            border: 5px solid pink;
            outline: 5px solid green;
            outline-offset: 15px;
         }
      </style>
   </head>

   <body>
      <div>TutorialsPoint</div>
   </body>
</html>

Это даст следующий результат -

<html>
   <head>
      <style>
         .div1 {
            width: 200px;
            height: 100px;
            border: 1px solid green;
         }
         .div2 {
            width: 200px;
            height: 100px;    
            padding: 50px;
            border: 1px solid pink;
         }
      </style>
   </head>

   <body>
      <div class = "div1">TutorialsPoint.com</div><br />
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

Это даст следующий результат -

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

CSS3 свойство размера блока

<html>
   <head>
      <style>
         .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
         }
         .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
            box-sizing: border-box;
         }
      </style>
   </head>

   <body>
      <div class = "div1">TutorialsPoint.com</div><br />
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

Вышеуказанный образец имеет одинаковую высоту и ширину с box-sizing:border-box. вот результат показан ниже.

Это даст следующий результат -

Вышеуказанные элементы имеют одинаковую высоту и ширину с box-sizing: border-box, поэтому результат всегда одинаков для обоих элементов, как показано выше.

<html>
   <head>
      <style>
         body {
            font: 600 14px/24px "Open Sans", 
               "HelveticaNeue-Light", 
               "Helvetica Neue Light", 
               "Helvetica Neue", 
               Helvetica, Arial, 
               "Lucida Grande", 
               Sans-Serif;
         }
         h1 {
            color: #9799a7;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 6px;
         }
         .container:before, .container:after {
            content: "";
            display: table;
         }
         .container:after {
            clear: both;
         }
         .container {
            background: #eaeaed;
            margin-bottom: 24px;
            *zoom: 1;
         }
         .container-75 {
            width: 75%;
         }
         .container-50 {
            margin-bottom: 0;
            width: 50%;
         }
         .container, section, aside {
            border-radius: 6px;
         }
         section, aside {
            background: #2db34a;
            color: #fff;
            margin: 1.858736059%;
            padding: 20px 0;
            text-align: center;
         }
         section {
            float: left;
            width: 63.197026%;
         }
         aside {
            float: right;
            width: 29.3680297%;
         }
      </style>
   </head>
   
   <body>
   
      <h1>100% Wide Container</h1>
      
      <div class = "container">
         <section>Section</section>
         <aside>Aside</aside>
      </div>
      
      <h1>75% Wide Container</h1>
      
      <div class = "container container-75">
         <section>Section</section>
         <aside>Aside</aside>
      </div>
      
      <h1>50% Wide Container</h1>
      
      <div class = "container container-50">
         <section>Section</section>
         <aside>Aside</aside>
      </div>
      
   </body>
</html>

Это даст следующий результат -

Медиа-запросы

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

<html>
   <head>
      <style>
         body {
            background-color: lightpink;
         }
         @media screen and (max-width: 420px) {
            body {
               background-color: lightblue;
            }
         }
      </style>
   </head>

   <body>
      <p>
         If screen size is less than 420px, then it will show lightblue 
         color, or else it will show light pink color
      </p>
   </body>
</html>

Это даст следующий результат -

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

Bootstrap - это самый популярный фреймворк для веб-дизайна, основанный на HTML, CSS и Java-скриптах, который помогает вам адаптировать веб-страницы для всех устройств.

<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <style>
         body {
            color:green;
         }
      </style>
   </head>

   <body>
   
      <div class = "container">
      
         <div class = "jumbotron">
            <h1>Tutorials point</h1> 
            <p>
               Tutorials Point originated from the idea that there exists a class 
               of readers who respond better to online content and prefer to learn 
               new skills at their own pace from the comforts of their drawing rooms.
            </p> 
         </div>
      
         <div class = "row">
            <div class = "col-md-4">
               <h2>Android</h2>
               <p>
                  Android is an open source and Linux-based operating system for mobile 
                  devices such as smartphones and tablet computers. Android was developed 
                  by the Open Handset Alliance, led by Google, and other companies.
               </p>
         </div>
         
         <div class = "col-md-4">
            <h2>CSS</h2>
            <p>
               Cascading Style Sheets, fondly referred to as CSS, is a simple design 
               language intended to simplify the process of making web pages presentable.
            </p>
         </div>
      
         <div class = "col-md-4">
            <h2>Java</h2>
            <p>
               Java is a high-level programming language originally developed by Sun 
               Microsystems and released in 1995. Java runs on a variety of platforms,
               such as Windows, Mac OS, and the various versions of UNIX. This tutorial
               gives a complete understanding of Java.
            </p>
         </div>
      </div>
      
   </body>
</html>

Это даст следующий результат -