Оcновы CSS. Языка css. Блок. Как работать с css
 Скачать 19.73 Kb.
|
|
Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS. Блок . Как работать с CSS Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки {}, внутри которых следует писать CSS свойства. CSS свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство - это цвет, а "красный" - это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство. Давайте покрасим все абзацы в красный цвет: Это HTML код: Абзац с текстом. Это CSS код: p { color: red; } Так код будет выглядеть в браузере: Абзац с текстом. А теперь давайте покрасим абзацы в зеленый цвети сделаем их большого размера: Абзац с текстом. p { color: red; font-size: 25px; } Так код будет выглядеть в браузере: Абзац с текстом. Обратите внимание на оформление CSS кода: каждое новое свойство пишется с новой строки. Блок . Способы подключения CSS к HTML коду Давайте теперь разберемся с тем, как сделать так, чтобы написанный CSS применился к нашему HTML коду. Это можно сделать тремя способами. Первый способ заключается в том, что CSSбудет написан в отдельном файле и специальным образом подключен к нашей HTML странице. Еще два способа заключаются в том, что CSS код будет написан прямо на HTML странице. Первый способ используется гораздо чаще (в подавляющем большинстве случаев). Одновременно можно применять все три способа. Давайте разберемся с этими способами более подробно. Способ 1. Отдельный CSS файл Самый распространенный способ подключения CSS - это когда он хранится в отдельном файле и этот файл подключается ко всем страницам нашего сайта. Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество, хоть тысяча. Мы сделаем изменение в одном месте CSS файла, например, покрасим все абзацы в красный цвет, и эти изменения применятся на всей 1000 HTML страниц, к которым подключен наш CSS файл. Очень удобно и быстро. Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию: . Сам CSS файл должен быть с расширением .css. Обычно его называют styles.css или style.css. В следующем примере к нашему HTML файлу подключается CSS файл style.css: Это абзац с текстом. Это абзац с текстом. . Это абзац с текстом. style="color: red; font-weight: bold;"> Это абзац с текстом. |