Каскадные таблицы стилей CSS

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

Как подключить CSS файл

Для подключения используется тег link. Посмотрите пример подключения файла css:

1
<link rel="stylesheet" href="style.css">

В данном примере мы подключаем файл style.css типа stylesheet. Сам файл style.css — это обычный файл, в котором мы будем прописывать стили различных элементов. По началу он полностью пустой. Скачать пример Html страницы с подключенным файлов style.css.

С помощью CSS можно задать оформление для любых элементов заключенных в тег body. Если вы хотите задать оформление всем элементам заключенным в тег <p></p> нужно написать следующий синтаксис

1
2
3
p {
 
}

Т.е. для описания стилей элемента мы должны указать только название этого элемента без угловых скобок. Затем в фигурных скобках мы указываем стили и их значение.

Рассмотрим пример:

p {
  background: pink;
  width: 250px;
  height: 40px;
}

See the Pen CSS Основы by Alex (@Asmodey) on CodePen.

Здесь мы прописали стили для всех элементов p (параграфов). Давайте рассмотрим их подробнее:

  • background — задает цвет фона. Цвет можно задавать именем, кодом
  • width — ширина блока. Здесь задана в пикселях. Обратите внимание, что надпись 250px выполнена слитно. Если единицы измерения написать отдельно от числа — то это вызовет ошибку CSS
  • height — высота элемента.

Довольно просто? Да! Стиль задается в формате свойство: значение. Конец строки обозначается точкой с запятой.

Возникает вопрос, а если мы хотим создать элемент параграфа, который будет отличаться по оформлению от других параграфов? Для этого нужно присвоить элементу имя. Здесь возможны два пути:

  • Присвоить элементу уникальное имя, которое не будет повторяться в рамках страницы и будет однозначно характеризовать данный элемент. Такое имя называется идентификатор. Как задать идентификатор:
    1
    
      <p id="one"></p>
  • Второй способ добавить к элементу класс. К данному классу могут принадлежать и другие элементы.
    1
    
      <p class="two"></p>

Как задать оформление элементу с id и class? Давайте рассмотрим пример:

#one {
  background: red;
  width: 300px;
  height: 40px;
}
.two {
  background: blue;
  width: 100px;
  height: 50px;
}

See the Pen id&class by Alex (@Asmodey) on CodePen.

Как видите, чтобы обратиться к элементу который имеет id нужно в CSS перед именем идентификатора поставить знак #. Для задания стилей классу элементов поставьте перед именем класса точку. Обратите внимание #one и .two пишутся слитно.

Как записываются селекторы

  • h2 -стили описанные далее, применятся для всех заголовков второго уровня
  • p — стили применятся для всех параграфов
  • .one — стили применятся для всех элементов имеющих класс one
  • #four — стиль применим для элемента с id=four.
  • p.one — стиль применится для параграфов имеющих класс one
  • h2#five — стиль применится только к заголовку второго уровня с id равным five

Задание для выполнения

Задание 1. Создайте HTML документ как показано ниже.

1
2
3
4
<h2>Привет</h2>
<p>Это просто текст</p>
<hr />
<p>Но оформи его как следует</p>
Задайте стили таким образом, чтобы получить такой внешний вид:

Задание 2. Наберите следующий код HTML:

1
2
3
<p class="one"></p>
  <p class="two"></p>
  <p class="three"></p>
Используя CSS сделайте такой внешний вид:

Задание 3. Используя теги sub и sup выполните подобное форматирование текста:

Задание 4. Оформите используя CSS текст, как показано на рисунке ниже

Задание 5. Напишите код HTML, чтобы получить результат, приведенный на рисунке ниже. Прочитать о вставке специальных символов в html страницу можно здесь.

Задание 6. Сделайте текст, как показано на рисунке ниже. В качестве шрифта укажите Impact..

Задание 7. Напишите код HTML, чтобы получить результат, приведенный на рисунке

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

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