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



CSS (Каскадные таблицы стилей) автоматизирует создание сайтов. С помощью них можно создавать удивительный дизайн ваших страниц.

Изучать CSS без знания языка HTML не возможно. Только в совокупности это дает результат. Для чего же нужны таблицы CSS? Если работать только с HTML, то сделав сайт даже на 20 страницах, и решив изменить дизайн, вы будете переделывать все 20 страниц. В то время, когда используется таблица CSS, достаточно внести изменения только в нее и на странице получить необходимый результат.

Стиль - набор параметров, которые представляют внешний вид объекта.

Для одного элемента может задаваться несколько стилей, используя каскадирование, т.е. приоритет слоев.

Преимущества CSS

  • CSS сокращает размер кода и делает его читабельным.
  • CSS задает такие параметры, которые нельзя задать только языком HTML. Например, убрать подчеркивание у ссылок.
  • CSS легко с помощью параметров изменяет внешний вид страниц.
  • С CSS используют блочную верстку сайта.

СSS подчиняется правилам, которые определяют как будет выглядеть элемент страницы документа.


Подключение CSS к HTML.


Существует несколько способов присоединения стилей к таблицам HTML.

Внешние таблицы стилей.


Создайте страницу HTML с таким кодом.

Пример записи кода:

<html> <head> <title></title> </head> <body> <h1>Это заголовок первого уровня</h1>Здесь просто текст <h2>Это заголовок второго уровня</h2>Здесь просто текст </body> </html>

РЕЗУЛЬТАТ:

Это заголовок первого уровня

Здесь просто текст

Это заголовок второго уровня

Здесь просто текст

Откройте в блокноте пустую страницу и сохраните ее как style.css в ту же папку, что и index.html.

Теперь мы подключим таблицу стилей к страницам HTML, чтобы управлять несколькими страницами сразу. Рассмотрим это на примере одной страницы. Для этого существует тег link. Это самый удобный способ подключения между тегами <head></head>.

Пример записи кода:

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="../Poleznoe/style.css"> </head> <body> <h1>Это заголовок первого уровня</h1>Здесь просто текст <h2>Это заголовок второго уровня</h2>Здесь просто текст </body> </html>

Внутренние таблицы стилей


Внутренние таблицы стилей присоединяют к элементу HTML с помощью атрибута style. Этот способ имеет недостаток в том, что данный стиль нужно будет применять к каждому заголовку на странице.


Пример записи кода:

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="../Poleznoe/style.css"> </head> <body> <h1 style="color:blue">Это заголовок первого уровня</h1> </body> </html>

РЕЗУЛЬТАТ:

Это заголовок первого уровня


Встроенные таблицы стилей


Такая таблица стилей встраивается в заголовок HTML-страницы с помощью тегов <style></style> и параметра type, который говорит о подключении таблицы стилей. Недостатком является то, что стили нужно создавать для каждой страницы.

Пример записи кода:

<html> <head> <title></title> <style type="text/css"> h1{ color:blue } </style> </head> <body> <h1>Это заголовок первого уровня</h1> <h1>Это заголовок первого уровня</h1> </body> </html>

РЕЗУЛЬТАТ:

Это заголовок первого уровня

Это заголовок первого уровня


В данном случае все заголовки h1 на странице будут синего цвета. Если какой-нибудь заголовок нужен красного цвета, применим для него внутреннюю таблицу стилей:


Пример записи кода:

<html> <head> <title></title> <style type="text/css"> h1{ color:blue } </style> </head> <body> <h1>Это заголовок первого уровня</h1> <h1 style="color:red">Это заголовок первого уровня</h1> </body> </html>

РЕЗУЛЬТАТ:

Это заголовок первого уровня

Это заголовок первого уровня


Далее рассмотрим: Cелекторы CSS и правила.