Словарь css и html – CSS справочник — свойства по алфавиту и с описанием по разделам

Словарь 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> </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>.

Значения тегов разметки документа

Теги разметки

— специальные команды для расположения на экране текста, графики, видео и аудио фрагментов, а также команды, служащие для связи с другими 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 | PuzzleWeb.ru

Данный справочник предоставляет подробное описание всех CSS свойств с максимально упрощенными примерами, для более легкого понимания работы свойства.

Свойство Описание 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 и в более ранних версиях не поддерживается свойство, добавляющее тень к тексту.

Термины | htmlbook.ru

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

Абсолютный адресПолный адрес документа с указанием протокола Интернет (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, универсальный указатель ресурсов)Адрес файла или документа.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *