Урок 4. Введение в css (Cascading style sheets —каскадные таблицы стилей)

CSS – формальный язык описания внешнего вида документа, работающий совместно с HTML. Он связывает с элементами документа разнообразные визуальные стили, определяющие их размер, цвет, фон, рамки и т. п. Т.е. с помощью инструмента CSSмы задаем размеры сайта и его блокам, определяем размеры шрифта заголовкам и абзацам, раскрашиваем таблицы и другие элементы и т.д.

Стили можно задавать внутри HTML документа

<stylefontsize: 16рх»>Текст первой новости</p>

В данном абзаце мы изменили шрифт до 16 пикселей

Если у нас будет текст, состоящий из 20 абзацев, то для каждого абзаца дано будет указать данный стиль!

Поэтому все элементы стилей выносят в отдельный файл style.css, ссылаясь на него в шапке страницы (тег <head>) в тэге <link>

структура тэга head

 

 

 

 

 

 

 

Создадим файл 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,… (заголовки) и т.д.

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