Словарь CSS — Как создать сайт
Интернет словарь CSS, для вебмастера
CSS — Cascading Style Sheets (каскадные таблицы стилей). CSS — это язык форматирования, он назначает HTML-тегам различные CSS-свойства, которые влияют на их цвет, фон, размеры, высоту, ширину, отступы, границы, положение, прозрачность и многое другое.
Другие названия: КСС, стили.
Форматирование — это изменение внешнего вида.
CSS-файл — это файл, имеющий расширение .css В этом файле, размещают CSS-код.
CSS-документ — это CSS-файл открытый с помощью текстового редактора, например Блокнота. CSS-документ содержит CSS-код.
CSS-код — весь код или часть кода CSS-документа.
Теги <style> </style> — между этими тегами располагается CSS-код, если он расположен в HTML-документе. Теги <style> </style> обычно расположены в голове HTML-документа. Теги </style> позволяет назначать CSS-свойства, отдельно для каждой страницы сайта.
Тег <link> — данный тег ссылается на CSS-файл, через атрибут href=" ", значением которого является адрес CSS-файла.
Атрибут — это глобальный атрибут HTML-тега, его значением выступает CSS-код. Атрибут style=" " позволяют назначать CSS-свойства, отдельно для каждого элемента страницы.
CSS-свойство — основная часть языка CSS, назначается различным элементам страницы. С помощью CSS-свойств можно управлять цветом, фоном, размером, высотой, шириной, отступами, границами, положением, прозрачностью и другими характеристиками HTML-тегов.
Другие названия: свойство.
CSS-значение — значение CSS-свойства, может быть ключевым словом, единицой измерения, адресом.
Другие названия: значение.
CSS-селектор — это выборка элементов в HTML-документе. Выборка может происходить по имени тега, классу, ID и другим параметрам.
Другие названия: селектор.
Словарь HTML — Как создать сайт
Интернет словарь HTML, для вебмастера
HTML — HyperText Markup Language (язык разметки гипер текста), основной язык создания сайтов.
Другие названия: язык HTML, ХТМЛ.
HTML-файл — это файл, имеющий расширение .html или .htm
HTML-документ — это HTML-файл открытый с помощью текстового редактора, например Блокнота. HTML-документ содержит HTML-код.
HTML-код — это весь код или часть кода HTML-документа.
HTML-страница — это HTML-файл открытый с помощью браузера.
Другие названия: страница, веб-страница, web-страница.
HTML-тег — основная часть HTML-языка. У каждого тега есть своё имя на английском языке, до и после которого ставятся угловые скобки. Теги бывают парными и одиночными. Схема парного тега:
<имяТега> </имяТега>
Другие названия: тэг, тег, таг, tag.
HTML-атрибут — свойство тега, назначающее ему какую либо характеристику, влияющие на внешность: цвет, размер, фон, выравнивание и т.д. Схема внедрения атрибута в HTML-тег:
<имяТега атрибут=" "> </имяТега>
Другие названия: атрибут, свойство, параметр, характеристика.
Здесь следует отметить, что в современном веб-строительстве, HTML-атрибуты влияющие на внешность тега не используются, вместо данных атрибутов применяют CSS-свойства. На данный момент в атрибутах желательно использовать лишь src, href, id, class и некоторые другие специфичные атрибуты не влияющие на внешность.
Значение HTML-атрибута — в качестве значений атрибута выступают: числовые величины, ключевые слова, адреса. Схема внедрения значения в атрибут HTML-тега:
<имяТега атрибут="значение"> </имяТега>
Примеры HTML-тегов с атрибутами и их значениями:
<a href="http://gabdrahimov.ru">Перейти на сайт</a> <div> </div> <img src="myFoto.jpg">
HTML-элемент — это какой-либо объект страницы созданный с помощью тегов, например абзац <p> </p> это элемент, изображение <img> это элемент, заголовок <h2> <h2> это тоже элемент и т.д. Смотреть на теги как на объекты, вы начнёте когда станете изучать DOM.
Другие названия: элемент, объект, HTML-объект.
Словарь HTML тегов | Step For Top
HTML-документ (страничка) -документ, написанный на языке разметки гипертекста (HTML). Заключается между тегами<HTML> и </HTML>.
Значения тегов разметки документа
Теги разметки
Основные теги разметки
<HEAD> и </HEAD>.Между этими тегами располагается информация о документе.
<TITLE> и </TITLE>. В эих тегах заключается названиестранички, которое будет выведено в рамке окна программы просмотра.
<BODY> и </BODY>. «Тело» документа (текст,графика и т.д.) располагается между этими двумя тегами.
Параметры флага <BODY>:
BGCOLOR — цвет фона (<BODY BGCOLOR =»#FFFFFF»>)
BACKGROUND — «обои» или бэкграунд
TEXT — цвет текста
LINK — цвет гипертекстовой связи (ссылки)
VLINK — цвет ссылки, уже посещенной в прошлом
ALINK — цвет активной ссылки Теги, служащие для форматирования текста
<P> и </P> Теги,служащие для выделения абзацев. Новый абзац всегда отделяется от предыдущего пустой строкой.
<BR> Флаг, служащий для переноса текста на другую строку. Может также служить для отделения графики от текста на интервал.
<HR> Флаг, служащий для логического разделения текста горизонтальной линией.
<PRE> и </PRE> Между этими тегами располагается предварительно отформатированный текст. На экран он выводится шрифтом типа»курьер».
Параметры выравнивания
Используются в <P> и <H*>
ALIGN=LEFT — выравнивание по левому полю
ALIGN=RIGHT — выравнивание по правому полю
ALIGN=CENTER — выравнивание по центру
Теги выравнивания
<LEFT> и </LEFT>— выравнивание по левому полю
<RIGHT> и </RIGHT> — выравнивание по правому полю
<CENTER> и </CENTER> — выравнивание по центру
Заголовки, служащие для выделения логических частей текста
<h2> и </h2>Заголовок первого уровня.
<h3> и </h3> Заголовок второго уровня.
<h4> и </h4> Заголовок третьего уровня.
<h5> и </h5> Заголовок четвертого уровня.
<H5> и </H5> Заголовок пятого уровня.
<H6> и </H6> Заголовок шестого уровня.
Теги для выделения текста и шрифта
<B> и </B> Теги для выделения текста (слов, букв) жирным шрифтом.
<I> и </I> Теги для выделения текста (слов, букв)курсивным шрифтом, типа Italic.
<U> и </U> Текст, расположенный между двумя этими тегами,будет подчеркнут.
<BLINK> и </BLINK> Текст, расположенный между двумя этими тегами, будет мигать.
<FONT SIZE=+n> и </FONT>
<FONT SIZE=-n> и </FONT> Теги для изменения размера шрифта.
<FONT COLOR=»#0000FF> и </FONT> Теги для изменения цвета шрифта.
Теги для формирования списков
<OL> и </OL> Теги,показывающие начало и конец нумерованного списка
<UL> и </UL> Теги, показывающие начало и конец маркированного списка.
<LI> Элемент списка
<DL> и </DL> Теги, показывающие начало и конец глоссария.
<DT> Термин глоссария, располагается без отступа от левого поля страницы.
<DD> Описание термина, располагается с отступом от левого поля страницы.
Теги-команды для вставки в текст объектов нетекстовой информации
<IMG SRC =»file.gif»> или <IMG SRC =» file.jpg»> — команда для вставки графического изображения
<IMG SRC =» file.wav»> — команда для вставки звукового фрагмента
<IMG SRC =» file.avi»> — команда для вставки видео фрагмента
Параметры графического изображения
WIDHT — ширина картинки в пикселях
HEIGHT— высота картинки в пикселях
ALIGN — выравнивание (ALIGN=LEFT — выравнивание по левому полю,ALIGN=RIGHT — по правому полю, ALIGN=TOP — по верхней границе, ALIGN=BOTTOM -по нижней границе, ALIGN=MIDDLE или CENTER — по центру)
HSPACE — горизонтальный отступ от графического изображения
VSPACE — вертикальный отступ
ALT — альтернативный текст, служит для обозначения изображения
Команды, служащие для гиперсвязи с другими HTML-документами и ресурсами Интернет
<A HREF=»fail.htm»> и </A> или <A HREF=»http://www.ru»>и </A> — гиперсвязи
<ADDRESS><A HREF=mailto:[email protected]>[email protected]</ADDRESS> — гиперсвязь с адресом электронной почты
Таблицы
Таблица — сетка для показа данных в строках и столбцах, а также средство для форматирования текста
<TABLE> и </TABLE>Теги для вставки таблицы в HTML документ
Параметры флага <TABLE>
BGCOLOR — цвет фона
BORDER — ширина бордюра
WIDHT — ширина таблицы
Теги разметки таблицы
<CAPTION> и </CAPTION>— название таблицы, имеет параметр ALIGN=TOP — выравнивание над таблицей иALIGN=BOTTOM — под таблицей.
<TR> и </TR> Строчка таблицы. Может иметь параметрыBGCOLOR — цвет фона внутри строки; ALIGN=LEFT, RIGHT, CENTER — выравнивание внутри строки; VALIGN=TOP, BOTTOM, MIDDLE — вертикальное выравнивание внутри строки таблицы.
<TD> и </TD> Столбец таблицы. Может иметь параметрыBGCOLOR — цвет фона под столбцом; ALIGN=LEFT, RIGHT, CENTER — выравнивание внутри столбца; VALIGN=TOP, BOTTOM, MIDDLE — вертикальное выравнивание; COLSPANрастягивание клетки на несколько столбцов, ROWSPAN — растягивание клетки на несколько строк.
<TH> и </TH> Заголовок столбца. Может иметь параметрыBGCOLOR — цвет фона под названием; ALIGN=LEFT, RIGHT, CENTER — выравнивание;VALIGN=TOP, BOTTOM, MIDDLE — вертикальное выравнивание; COLSPAN, ROWSPAN -растягивание клетки на несколько столбцов или строк; WIDHT — ширина названия.
Рамки-фреймы
Рамки-фреймы — средство для разделения экрана на несколько областей, в каждой из которых отображается содержимое отдельной Web-странички или даже целого Web-сайта.
<FRAMESET> и </FRAMESET> Теги для создания рамки
Параметры флага <FRAMESET>
COLS — подразделяют экран на опредленное количество колонок (вертикальных)
ROWS — подразделяют экран на опредленное количество колонок(горизонтальных)
BORDCOLOR — цвет рамки
BORDER — ширина бордюра
FRAMEBORDER — граница рамки (FRAMEBORDER=YES — есть граница,FRAMEBORDER=NO — нет границы,
FRAMESPACING=n — ширина границы)
<FRAME> Флаг для описания рамки (<FRAME SRC=»file.htm»>).
Параметры флага <FRAME>
SCROLING — параметр для регулировки полосы прокрутки:
SCROLING=YES — полоса прокрутки будет всегда
SCROLING=NO — полосы прокрутки не будет
SCROLING=AUTO — полоса прокрутки появляется только в случае необходимости
MARGINWIDHT и MARGINHEIGHT — параметры, которые управляют отступом внутри рамок, служат для выравнивания графического изображения внутри рамки
NORESIZE — параметр, указывающий на то, что размер рамки-фрейма никогда не будет меняться.
A link to <A HREF=»file.htm»TARGET=»frame2″> file.htm</A> -Связь между фреймами
TARGET — атрибут связи между фреймами. Имеет несколько значений:
_BLANK загружает содержимое страницы, заданной ссылкой, в новое пустое окно.
_SELF содержимое страницы, заданной ссылкой, в окно, которое содержит ссылку.
_PARENT загружает содержимое страницы, заданной ссылкой, в окно,являющееся непосредственным владельцем набора фреймов.
_TOP содержимое страницы, заданной ссылкой, в окно, игнорируя используемые фреймы.
Обработка браузеров, не поддерживающих фреймы:
<FRAMESET>
…Здесь располагаются фреймы
</FRAMESET>
<NOFRAMES>
<BODY>
…Здесь располагается текст без фреймов
<BODY>
</NOFRAMES>
В секции, предназначенной для тех пользователей, которые»не видят» рамки, можно расположить какой-нибудь пояснительный текст.
Бегущая строка
<MARQUEE>ТЕКСТ</MARQUEE>— Флаг, создающий бегущую строку
<MARQUEE DIRECTION=left>TEKCT</MARQUEE> — Если бегущую строку нужно направить справа налево
<MARQUEE DIRECTION=right>TEKCT</MARQUEE> — движение слева направо.
scroll — стандартное движение от правого края к левому
slide — надпись один раз пробегает от правого края к левому, где и остается.
alternate — движение от правого края страницы к левому и обратно.Бесконечный цикл.
<MARQUEE LOOP=n BEHAVIOR=scroll>TEKCT</MARQUEE> -Ограничение числа циклов. Значение n оператора LOOP указывает число повторений цикла.
<MARQUEE WIDHT=n>TEKCT</MARQUEE> — указать ширину участка,занимаемого бегущей строкой, где n — ширина той части страницы, на которой расположена бегущая строка. Значение n указывается как в пикселях, так и в процентах от общей ширины видимой части страницы.
<MARQUEE scrollamount=n>TEKCT</MARQUEE> — Регулировка движения надписи по экрану. Здесь n — число пикселей.
<MARQUEE scrolldelay=t>TEKCT</MARQUEE> В данном случае переменная величина — время t — измеряется в миллисекундах. Метод задания скорости состоит в указании времени, спустя которое текст будет перерисован на экране заново.
<FONTSIZE=n><MARQUEE> ТЕКСТ</MARQUEE></FONT> -возможность указывать величину шрифта текста в строке.
<MARQUEE BGCOLOR=n> ТЕКСТ </MARQUEE> — окрасить поверхность бегущей строки в какой-либо цвет, где n, как это бывало и раньше, можно указать в вид шестнадцатеричного числа либо написав его название
<MARQUEE HEIGHT=n>ТЕКСТ</MARQUEE> — указать высоту бегущей строки, задавая величину n в пикселях
Статьи по теме:
| Свойство | Описание | CSS |
|---|---|---|
| align-content | Задаёт вертикальное выравнивание flex-элементов для flex-контейнеров с многострочным содержимым. | 3 |
| align-items | Вертикальное выравнивание flex-элементов внутри flex-контейнера. | 3 |
| align-self | Вертикальное выравнивание flex-элемента. | 3 |
| flex | Определяет ширину, сжатие и растяжение для flex-элемента. | 3 |
| flex-basis | Указывает ширину для flex-элемента. | 3 |
| flex-direction | Направление расположения flex-элементов. | 3 |
| flex-flow | Направление расположения и возможность переноса для flex-элементов. | 3 |
| flex-grow | Определяет коэффициент растяжения flex-элемента. | 3 |
| flex-shrink | Определяет коэффициент сжатия flex-элемента. | 3 |
| flex-wrap | Определяет возможность переноса flex-элементов. | 3 |
| justify-content | Горизонтальное выравнивание flex-элементов. | 3 |
| order | Определяет порядок вывода flex-элементов. | 3 |
| Свойство | Описание | CSS |
| @keyframes | Позволяет создавать анимацию. | 3 |
| animation | Позволяет установить несколько или все значения свойств animation в одном объявлении. | 3 |
| animation-delay | Определяет, когда запустится анимация. | 3 |
| animation-direction | Указывает будет ли анимация проигрываться в реверсе на альтернативных циклах. | 3 |
| animation-duration | Определяет сколько понадобится времени, чтобы закончить 1 цикл анимации. | 3 |
| animation-fill-mode | Задаёт стиль для элемента, когда анимация не проигрывается (до её запуска, во время остановки или после её окончания). По умолчанию CSS анимация не влияет на элемент до тех пор, пока анимация не запуститься, во время паузы и после её завершения. Это и позволяет переопределить свойство animation-fill-mode. |
3 |
| animation-iteration-count | Определяет сколько раз анимация должна будет проигрываться. | 3 |
| animation-name | Определяет имя для @keyframes. | 3 |
| animation-play-state | Указывает будет анимация проигрываться или будет в режиме паузы. | 3 |
| animation-timing-function | Определяет кривую скорости для анимации. | 3 |
| backface-visibility | Определяет, должна ли быть видна задняя сторона элемента или нет. | 3 |
| Свойство | Описание | CSS |
| margin | Задает внешние отступы для элемента. | 1 |
| margin-bottom | Задает нижний внешний отступ для элемента. | 1 |
| margin-left | Задает левый внешний отступ для элемента. | 1 |
| margin-right | Задает правый внешний отступ для элемента. | 1 |
| margin-top | Задает верхний внешний отступ для элемента. | 1 |
| padding | Устанавливает внутренние отступы в элементе. | 1 |
| padding-bottom | Задает нижний отступ(внутреннее поле) для элемента. | 1 |
| padding-left | Задает левый отступ(внутреннее поле) для элемента. | 1 |
| padding-right | Задает правый отступ(внутреннее поле) для элемента. | 1 |
| padding-top | Задает верхний отступ(внутреннее поле) для элемента. | 1 |
| Свойство | Описание | CSS |
| bottom | Указывает направление смещения позиционированного элемента от нижнего края. | 2 |
| clear | Указывает с какой стороны элемента не допускаются плавающие элементы. | 1 |
| clip | Определяет видимую часть абсолютно позиционированных элементов. | 2 |
| display | Указывает, как будет отображаться элемент в браузере. | 1 |
| float | Определяет будет ли элемент плавающим. | 1 |
| left | Указывает направление смещения позиционированного элемента от левого края. | 2 |
| position | Определяет метод позиционирования элементов. | 2 |
| right | Указывает направление смещения позиционированного элемента от правого края. | 2 |
| top | Указывает направление смещения позиционированного элемента от верхнего края. | 2 |
| visibility | Определяет, является ли элемент видимым. | 2 |
| z-index | Указывает порядок расположения элементов по оси Z. | 2 |
| Свойство | Описание | CSS |
| height | Устанавливает фиксированную высоту. | 1 |
| max-height | Указывает максимальную фиксированную высоту. | 2 |
| max-width | Указывает максимальную фиксированную ширину. | 2 |
| min-height | Указывает минимальную фиксированную высоту. | 2 |
| min-width | Указывает минимальную фиксированную ширину. | 2 |
| overflow | Определяет, что предпринять, если содержимое элемента превосходит размер области элемента. | 2 |
| overflow-x | Указывает, обрезать или нет левый/правый край содержимого — если оно переполняет доступную область элемента для его содержания. | 3 |
| overflow-y | Указывает, обрезать или нет верхний/нижний край содержимого — если оно переполняет доступную область элемента для его содержания. | 3 |
| resize | Указывает, может ли размер элемента изменяться пользователем. | 3 |
| width | Устанавливает фиксированную ширину. | 1 |
| Свойство | Описание | CSS |
| border | Позволяет использовать основные свойства границ в одном объявлении. | 1 |
| border-bottom | Позволяет использовать значения основных свойств для нижней границы рамки в одном объявлении. | 1 |
| border-bottom-color | Задает цвет для нижней границы рамки. | 1 |
| border-bottom-left-radius | Позволяет сделать округлую границу нижнего левого угла. | 3 |
| border-bottom-right-radius | Позволяет сделать округлую границу нижнего правого угла. | 3 |
| border-bottom-style | Определяет стиль для нижней границы рамки. | 1 |
| border-bottom-width | Определяет ширину для нижней границы рамки. | 1 |
| border-color | Задает цвет для границ рамки элемента. | 1 |
| border-image | Позволяет использовать изображение в качестве рамки. | 3 |
| border-left | Позволяет использовать значения основных свойств для левой границы рамки в одном объявлении. | 1 |
| border-left-color | Задает цвет для левой границы рамки. | 1 |
| border-left-style | Определяет стиль для левой границы рамки. | 1 |
| border-left-width | Определяет ширину для левой границы рамки. | 1 |
| border-radius | Позволяет изменить форму углов. | 3 |
| border-right | Меняет внешний вид правой границы рамки. | 1 |
| border-right-color | Задает цвет для правой границы рамки. | 1 |
| border-right-style | Определяет стиль для правой границы рамки. | 1 |
| border-right-width | Задает ширину для правой границы рамки. | 1 |
| border-style | Задает стиль для границ рамки элемента. | 1 |
| border-top | Меняет внешний вид верхней границы рамки. | 1 |
| border-top-color | Задает цвет для верхней границы рамки. | 1 |
| border-top-left-radius | Позволяет сделать округлую границу верхнего левого угла. | 3 |
| border-top-right-radius | Позволяет сделать округлую границу верхнего правого угла. | 3 |
| border-top-style | Определяет стиль для верхней границы рамки. | 1 |
| border-top-width | Определяет ширину для верхней границы рамки. | 1 |
| border-width | Задает ширину для границ рамки элемента. | 1 |
| outline | Создает внешнюю границу вокруг элемента. | 2 |
| outline-color | Определяет цвет внешней границы. | 2 |
| outline-offset | Сдвигает внешнюю границу на заданное расстояние от края элемента. | 3 |
| outline-style | Указывает стиль для внешней границы. | 2 |
| outline-width | Указывает ширину для внешней границы. | 2 |
| Свойство | Описание | CSS |
| border-collapse | Определяет будут ли границы рамки объединены в одну. | 2 |
| border-spacing | Определяет расстояние между границами смежных ячеек и общей рамкой таблицы. | 2 |
| caption-side | Указывает расположение заголовка таблицы. | 2 |
| empty-cells | Регулирует видимость пустых ячеек в таблице. | 2 |
| table-layout | Задает алгоритм использования макета таблицы. | 2 |
| Свойство | Описание | CSS |
| color | Изменяет цвет текста. | 1 |
| direction | Определяет направление написания текста. | 2 |
| letter-spacing | Контролирует расстояние между символами в тексте. | 1 |
| line-height | Определяет межстрочный интервал(интерлиньяж). | 1 |
| quotes | Определяет тип кавычек для встроенных цитат. | 2 |
| text-align | Указывает способ выравнивания содержимого по горизонтали. | 1 |
| text-decoration | Добавляет некоторые элементы декорирования к тексту. | 1 |
| text-indent | Определяет отступ первой строки в тексте элемента. | 1 |
| text-overflow | Указывает, что должно произойти, когда текст переполняет содержащий элемент. | 3 |
| text-transform | Контролирует использование строчных и прописных букв в тексте. | 1 |
| vertical-align | Определяет вертикальное выравнивание в элементе. | 1 |
| white-space | Определяет способ обработки пробелов внутри элемента. | 1 |
| word-break | Определяет правила переноса для не-CJK сценариев. | 3 |
| word-spacing | Определяет ширину пробелов между словами. | 1 |
| word-wrap | Позволяет прерывать длинные слова для переноса на другую строку. | 3 |
| Свойство | Описание | CSS |
| perspective | Определяет, на сколько пикселей удален 3D элемент от точки обзора. | 3 |
| perspective-origin | Определяет, где располагается 3D элемент на осях x и y. | 3 |
| transform | Применяет 2D или 3D преобразование к элементу. | 3 |
| transform-origin | Позволяет изменить позицию преобразованных элементов. | 3 |
| transform-style | Определяет, как вложенные элементы будут отображаться в трехмерном пространстве. | 3 |
| transition | Управляет эффектом трансформации. | 3 |
| transition-delay | Указывает, когда должен начаться эффект трансформации. | 3 |
| transition-duration | Указывает продолжительность трансформации. | 3 |
| transition-property | Указывает название CSS свойства, для которого будет применен эффект трансформации. | 3 |
| transition-timing-function | Задает кривую скорости для эффекта трансформации. | 3 |
| Свойство | Описание | CSS |
| background | Устанавливает несколько или все значения свойств фона в одном объявлении. | 1 |
| background-attachment | Указывает будет ли фоновое изображение фиксированным. | 1 |
| background-clip | Определяет область в элементе, для которой задается фон. | 3 |
| background-color | Устанавливает цвет фона для элемента. | 1 |
| background-image | Устанавливает фоновое изображение в элементе. | 1 |
| background-origin | Указывает область позиционирования для фонового изображения. | 3 |
| background-position | Устанавливает начальное место для фонового изображения. | 1 |
| background-repeat | Задает, как фоновое изображение будет повторяться на экране. | 1 |
| background-size | Указывает размер для фонового изображения. | 3 |
| Свойство | Описание | CSS |
| font | Изменяет стандартный вид текста. | 1 |
| @font-face | Позволяет использование любого шрифта на странице. | 3 |
| font-family | Указывает шрифт или семейство шрифтов для текста. | 1 |
| font-size | Указывает размер для шрифта. | 1 |
| font-size-adjust | Контролирует размер неосновных шрифтов. | 3 |
| font-stretch | Регулирует ширину текста. | 3 |
| font-style | Позволяет изменять стиль текста. | 1 |
| font-variant | Конвертирует строчные буквы в прописные уменьшенного размера. | 1 |
| font-weight | Задает ширину символов текста. | 1 |
| Свойство | Описание | CSS |
| box-sizing | Позволяет заставить определенные элементы заполнять область определенным способом. | 3 |
| column-count | Разделяет элемент на колонки. | 3 |
| column-gap | Задает расстояние между колонками элемента. | 3 |
| column-rule | Свойство column-rule позволяет указать значения свойств column-rule-* (ширину, стиль и цвет) в одном объявлении. | 3 |
| column-rule-color | Определяет цвет границы между колонками. | 3 |
| column-rule-style | Определяет стиль границы между колонками. | 3 |
| column-rule-width | Указывает ширину границы между колонками. | 3 |
| columns | Позволяет использовать значения свойств column-width и column-count в одном объявлении. | 3 |
| column-span | Указывает элементу количество колонок для обхвата. | 3 |
| column-width | Определяет ширину колонок. | 3 |
| content | Определяет содержимое для псевдо-элементов ::before и ::after. | 2 |
| counter-increment | Увеличивает значение счетчика. | 2 |
| counter-reset | Устанавливает начальное значение счетчика. | 2 |
| cursor | Изменяет вид курсора мыши. | 2 |
| page-break-after | Определяет наличие или отсутствие разрыва страницы после заданного элемента. | 2 |
| page-break-before | Определяет наличие или отсутствие разрыва страницы перед заданным элементом. | 2 |
| page-break-inside | Определяет наличие или отсутствие разрыва страницы внутри элемента. | 2 |
Самоучитель CSS | Отличия html и CSS
Каскадные таблицы стилей (Cascading Style Sheets) предоставляют дополнительные возможности для разметки html-документа и свободу по созданию уникального дизайна для веб-страниц.
Прежде чем приступить к изучению CSS, у вас уже должен быть небольшой опыт работы с HTML, имеется ввиду, что вы уже создавали простые страницы и знакомы с основными HTML тегами для разметки документа.
Стили по умолчанию
Когда браузер обрабатывает HTML-код, он использует встроенный по умолчанию стиль представления HTML-элементов на веб-странице. Чтобы понять, что такое «стиль по умолчанию» рассмотрим в качестве примера элементы <h2> — <h6>: заголовки являются блочными элементами, занимают всю доступную ширину в родительском элементе, имеют разрыв строки до и после элемента, текст заголовка отображается жирным начертанием и имеет определённый размер, в зависимости от уровня заголовка, всё это вместе является встроенным стилем для заголовков.
С помощью CSS можно переопределить установленный для элементов стиль по умолчанию на свой собственный, создав тем самым уникальный стиль оформления для элементов веб-страницы, например изменить цвет текста заголовка и размер шрифта, выделить изображение красной рамкой и т.д.
Что такое CSS?
- CSS — Каскадные Таблицы Стилей(Cascading Style Sheets)
- Стиль — правило, описывающее форматирование отдельного элемента на странице
- Стили были добавлены для решения проблемы оформления веб-страниц
- Стили можно хранить в отдельных документах, что уменьшает размер HTML-кода
Чем полезны таблицы стилей помещенные в отдельный документ? Ответ очень прост, можно собрать все стили, которые используются на сайте, в один внешний файл с расширением .css и связать его со всеми страницами сайта. После этого, когда вы будете редактировать стиль, изменения моментально затрагивают все элементы на страницах сайта, где есть ссылка на данный внешний файл со стилями. Таким образом, вы можете полностью изменить внешний вид путем редактирования единственного файла таблицы стилей, что существенно упрощает работу, нежели редактировать стили на каждой странице в отдельности.
HTML и CSS
CSS и HTML — это два разных языка для разных целей.
При написании html-кода для CSS, выбирая теги, ориентируйтесь на роль, которую играет фрагмент текста на веб странице, а не на внешний вид, который текст приобретает благодаря этому тегу.
Применяя CSS для дизайна веб-страницы, вы используете HTML только по его прямому назначению, то есть именно для разметки веб-страницы на логические фрагменты, не заботясь о форматировании и внешнем виде страницы.
Небольшой пример использования CSS:
С помощью стилей, картинка была позиционирована с левой стороны, а для текста был изменен размер, цвет и добавлена тень.
В браузере Internet Explorer 9 и в более ранних версиях не поддерживается свойство, добавляющее тень к тексту.
| Абсолютный адрес | Полный адрес документа с указанием протокола Интернет (http, ftp и др.). Например: http://htmlbook.ru/help, http://htmlbook.ru/example/help.png. |
| Атрибут | Параметр тега, расширяющий его возможности. Позволяет гибко управлять и настраивать характеристики добавляемых на страницу элементов. |
| Битая ссылка | Ссылка, которая указывает на несуществующий документ (файл) или просто написанная с ошибкой. |
| Браузер | Программа, предназначенная для просмотра сайтов и навигации по ним. К популярным браузерам относится Internet Explorer, Firefox, Opera, Safari, Chrome. |
| Веб-сервер | Программа, в работу которой входит анализ приходящих запросов, формирование и отдача документов пользователю. |
| Веб-страница | Отдельный документ сайта в одном из популярных форматах: HTML, XML, PDF и др. |
| Относительный адрес | Путь к файлу относительно текущего документа. |
| Сайт | Совокупность веб-страниц, объединенных дизайном, содержанием и единым адресом. |
| Свойство | Стилевой атрибут, который используется для добавления определенного стиля к элементам веб-страницы. |
| Селектор | Имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. |
| Скриншот | Копия экрана или текущего окна в виде изображения. |
| Спецификация | Свод правил по работе с HTML, CSS и другими веб-технологиями. Продвигается организацией Веб Консорциум (WWW Consortium, W3C), в задачу которого входит разработка и внедрение единых веб-стандартов. |
| Ссылка | Текст или изображение, ведущее на другой документ. Иногда используется слово «гиперссылка», когда из контекста не понятно, идет ли речь о ссылке в Сибирь или ссылке на веб-страницу. |
| Протокол | Набор соглашений для передачи данных по сети. В Интернете наиболее распространен HTTP (Hyper Text Transfer Protocol, протокол передачи гипертекста). |
| Псевдокласс | Стилевой атрибут, определяющий стиль элемента, у которого состояние меняется от действий пользователя. Также псевдоклассы отслеживают положение в дереве документа. |
| Псевдоэлемент | Стилевой атрибут, позволяющий задать стиль элементов не определенных в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста. |
| Фрейм | Технология HTML, позволяющая разбить окно браузера на отдельные области, расположенные рядом друг с другом. |
| CSS (Cascading Style Sheets, каскадные таблицы стилей) | Набор правил форматирования, который применяется к элементам документа для изменения их внешнего вида и положения в документе. |
| URL (Universal resource locator, универсальный указатель ресурсов) | Адрес файла или документа. |