Урок 4. Введение в css (Cascading style sheets —каскадные таблицы стилей)
CSS – формальный язык описания внешнего вида документа, работающий совместно с HTML. Он связывает с элементами документа разнообразные визуальные стили, определяющие их размер, цвет, фон, рамки и т. п. Т.е. с помощью инструмента CSSмы задаем размеры сайта и его блокам, определяем размеры шрифта заголовкам и абзацам, раскрашиваем таблицы и другие элементы и т.д.
Стили можно задавать внутри HTML документа
<p style=»font—size: 16рх»>Текст первой новости</p>
В данном абзаце мы изменили шрифт до 16 пикселей
Если у нас будет текст, состоящий из 20 абзацев, то для каждого абзаца дано будет указать данный стиль!
Поэтому все элементы стилей выносят в отдельный файл style.css, ссылаясь на него в шапке страницы (тег <head>) в тэге <link>
Создадим файл style.css в папке, где находится страница index.html
В файле style.css зададим шрифт 16px (пикселей) для всех абзацев
р {
font-size: 16px
}
Как задать определенные параметры только части абзацев?
Для этого используются атрибут id (идентификатор) и class
АТРИБУТ id
В файле index.html нужно указать
<p id=»text»> Текст первой новости</р>
В файле style.css: #text {font-size: 16рх}
Если вы используете атрибут id, то в файле style.css нужно перед значением идентификатора указать #
АТРИБУТ class
В файле index.html нужно указать
<p class=»text»> Текст первой новости</р>
В файле style.css: .text {font-size: 16рх}
Если вы используете атрибут class, то в файле style.css нужно перед значением идентификатора поставить . (точку)
Смысл добавления точки в начале имени класса заключается в том, что одно название класса можно связывать с разными элементами и назначать каждому из них собственный стиль.
Атрибуты id и class применяют не только к тексту, но и к картинкам, блокам и прочим элементам.
Как правило, с помощью атрибута id задают имена блоков <div id=»имя блока»>, а атрибут class применяют к конкретных элементам (тэгам): p (абзац), img (картинка), h1,h2,… (заголовки) и т.д.