Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

Оформляем CSS таблицу

Оформление CSS таблицы

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

Как я уже говорил, в первом уроке язык CSS не является самостоятельным и без html страницы он бесполезен, поэтому для начала нам необходимо разобраться, как связать нашу страницу с CSS таблицей.

Как подключить таблицу стилей CSS

Здесь существуют три варианта, мы можем оформлять css таблицу непосредственно в документе или же мы будем выносить её в отдельный файл, или прописывать стили непосредственно в тэгах. Давайте рассмотри все варианты.

Первый вариант CSS таблица в самом документе, я это сделаю на примере самой простой страницы:

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css"”>
   Здесь мы будем оформлять CSS таблицу </style>
</head>
<body>
<p>Проба</p>
</body>
</html>

Как видите, все реализуется просто по средствам добавления простого тега <style>, который вставляется между тегами <head>, так же к нему приписывается атрибут type указывающий на тип содержания тега. А внутри самого тега уже и будет сам CSS код.

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

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Проба</p>
</body>
</html>

Как видите буквально одной строчкой с помощью тега <link>, здесь так же прописываем атрибуты, rel – говорит браузеру что это таблица стилей, type как и в предыдущем случае и href здесь мы прописываем путь к файлу с таблицей, в данной ситуации она находится в той же директории, что и html файл к которому мы её подключаем, если же она будет скажем в папке root, то запись будет root/style.css

И последний третий способ подключения это стили непосредственно в тегах прописывается как атрибут, следующим образом:

<p style=””>Проба</p>

Как вы видите, мы просто добавили атрибут style, в который в последствии, мы и будем прописывать CSS код.

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

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

Структура селектора

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

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css"”>
 p {
 color: #ff0000;
}
</style>
</head>

Теперь давайте разберемся, что у нас изменится, а изменится у нас только цвет текста в теге абзаца <p>, и станет он красным, и что самое интересное если у нас в документе будут еще абзацы с этим тегом, то текст во всех абзацах станет красным. Такова особенность селектора тэгов, а добились мы этого простым правилом, которое вам уже пора запоминать, а именно color: #ff0000; цвет вы естественно можете указать любой вам понравившийся я лично, беру код понравившегося цвета в фотошопе:

Выбор цвета

Вы же можете делать так же или использовать таблицы стандартных цветов или же совместимых их вы можете найти у меня на сайте в разделе «Разное».

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

Дата публикации:2014-03-27


Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget