Веб программирование

Изучение HTML и CSS. Урок 2. Оформление текста. CSS

 
 

В прошлом уроке мы узнали многое о HTML и его структуре, а также познакомились с простейшими текстовыми тегами.
В этом уроке мы научимся оформлять наш текст. Итак, начнём.
Для того, чтобы оформить текст(и не только) недостаточно знания HTML. Здесь нужно знать основы CSS( с англ. Каскадные Таблицы Стилей).
Код со стилями можно ввести отдельно для тега внутри него через атрибут style=""(1)

Синий текст

C помощью тега style за пределами тега html(2)

Рэди

И отдельно подключить файл css(3 способ).




Основы CSS:

  1. Свойство и значение(например цвет-синий) разделяются с помощью ": ".
  2. В Отдельном описании CSS есть селекторы и классы, описание которых происходит внутри фигурных скобок("{" и "}").
  3. Правила разделяются с помощью ";".
  4. Селекторы - это имена тегов, нуждающихся в оформлении. Они описываются без дополнительных символов. Классы описываются с точкой перед названием класса. Для назначения класса нужно к тегу добавить атрибут "class" со значением(=) "любое название класса". Также есть идентификатор, задаются с помощью атрибута id со значением(=) "любое уникальный идентификатор", они отмечаются с "#" перед названием идентификатора. 
  5. Если написать несколько селекторов через запятую, то данное правило применится для всех. Также если отдельному элементу с подвторяющимся классом нужно применить другое правило, надо написать имя родителя и класс без пробела.
  6. Ещё одна уникальная возможность - наследование. К примеру если для body в css задан цвет текста-синий, то для всех тегов внутри него кроме ненаследуемых будет задан синий цвет текста. Вот ещё такая ситуация: если идут два разных правила с одинаковыми классами, селекторами, идентификаторами, то применится последнее правило.

Вот некоторые свойства CSS:

Свойство Назначение Возможные значения
color Цвет текста #000000, black, rgb(0, 0, 0)
font-family Имя шрифта текста "Arial", "Tahoma"...
font-size Размер текста 12pt, 17px, 3em
background-color Фоновой цвет #000000, black, rgb(0, 0, 0)
background-image Фоновое изображение url("/assets/img/cat.jpg")...
background-repeat Степень повтора фонового изображения repeat-x, repeat-y, no-repeat, repeat
background-position Выравнивание фонового изображения left top, 12px 20px, 13% 78%...











Вот небольшой пример со внутренними стилями:


CSS и оформление

Красный абзац

Синие заголовки

Просто абзац с общим для всех отступом

Всем пока!


Есть вопросы? Спроси на нашем форуме!!
Нет комментариев

Оставлять комментарии можно только зарегистрированным




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