Уроки по CSS.
Урок 2:
В этом уроке я раскажу вам о типах блоков в CSS.
Но для начала, о единициах измерения в CSS (о самых основных):
px - пиксель. стандартная единица измерения для разрешающей способности монитора. Минусы использования px за единицу измерения, в том, что на разных устройствах (в том числе и печати) они разного размера и вы можете получить или кашу-малашу, или точки вместо букв.
*Внимание! Использование px являюется плохим тоном.
pt - пункт, равен 1/72 дюйма.
pc - пики. 1 пика равна 12 пунктам.
cm - сантиметры
mm - миллиметры
% - проценты.
А теперь переходим, к непосредственно изучению блоков.
P.big /* Здесь мы редактируем стиль тега HTML - < P >. Тег обозначает новый абзац. ".big" - это класс тега. чуть ниже вы поймете что это значит,и какие бонусы это нам дает.
{
Font-Family: Impact; /* "Font-family" - является свойством, обозначающим название используемого шрифта, из предустановленных в системе(т.е. если на вашем компьютере нет этого шрифта, то он у вас отображаться не будет), в нашем случае Impact - очень жирный и не красивый шрифт, зато весьма и весьма заметный.
Font-weight: normal; /* "Font-weight" - является свойством, обозначающим вид шрифта. Бывают форм: bold (полужирный), normal (нормальный), italic (курсив).
Font-size: 14pt; /* "Font-size" - является свойством, обозначающим размер шрифта. В нашем случае это 10 пунктов.
Text-decoration: overline; /* "Text-decoration" - декорации шрифта, бывают форм: none (ничего), underline (подчеркнутый), line-through (зачеркнутый), overline (надчеркнутый), blink (мигание). *Внимание использование blink, не рекомендуется!
color: #003300; /* "color" - цвет шрифта.
}
P.main /* создаем новый класс тега "P".
{
Font-Family: Arial Narrow;
Font-style: italic;
Text-decoration: underline;
Text-align: right; /* "Text-align" - выравнивание текста, к определенной стороне. Бывает форм: left (по левому краю), center (по центру), right (по правому краю), justify (моноширно, как газетные столбцы).
Margin-left: 11pt; /* "Margin-left" - отступ блока от края границ. В примере ниже увидите как это действует.
color: #330000;
}
P.small
{
Font-size: 8pt;
Word-spacing: 10pt;
Text-align: justify;
color: #FF6600;
BackGround-color: BLACK; /* "BackGround-color" - как уже говорилось в прошлом уроке, это цвет заднего фона.
}
Для использования класса созданного вами в CSS, нужно добавить один параметр тега.
< p class="big" >Дальше идет текст< /p >
еще примеры:
< p class="main" >Дальше идет текст< /p >
< p class="small" >Дальше идет текст< /p >
А теперь наши стили в действие.
Это перед вами, текст класса BIG.
Это перед вами, текст класса MAIN.
Это перед вами, текст класса SMALL.
В этом уроке я раскажу вам о типах блоков в CSS.
Но для начала, о единициах измерения в CSS (о самых основных):
px - пиксель. стандартная единица измерения для разрешающей способности монитора. Минусы использования px за единицу измерения, в том, что на разных устройствах (в том числе и печати) они разного размера и вы можете получить или кашу-малашу, или точки вместо букв.
*Внимание! Использование px являюется плохим тоном.
pt - пункт, равен 1/72 дюйма.
pc - пики. 1 пика равна 12 пунктам.
cm - сантиметры
mm - миллиметры
% - проценты.
А теперь переходим, к непосредственно изучению блоков.
P.big /* Здесь мы редактируем стиль тега HTML - < P >. Тег обозначает новый абзац. ".big" - это класс тега. чуть ниже вы поймете что это значит,и какие бонусы это нам дает.
{
Font-Family: Impact; /* "Font-family" - является свойством, обозначающим название используемого шрифта, из предустановленных в системе(т.е. если на вашем компьютере нет этого шрифта, то он у вас отображаться не будет), в нашем случае Impact - очень жирный и не красивый шрифт, зато весьма и весьма заметный.
Font-weight: normal; /* "Font-weight" - является свойством, обозначающим вид шрифта. Бывают форм: bold (полужирный), normal (нормальный), italic (курсив).
Font-size: 14pt; /* "Font-size" - является свойством, обозначающим размер шрифта. В нашем случае это 10 пунктов.
Text-decoration: overline; /* "Text-decoration" - декорации шрифта, бывают форм: none (ничего), underline (подчеркнутый), line-through (зачеркнутый), overline (надчеркнутый), blink (мигание). *Внимание использование blink, не рекомендуется!
color: #003300; /* "color" - цвет шрифта.
}
P.main /* создаем новый класс тега "P".
{
Font-Family: Arial Narrow;
Font-style: italic;
Text-decoration: underline;
Text-align: right; /* "Text-align" - выравнивание текста, к определенной стороне. Бывает форм: left (по левому краю), center (по центру), right (по правому краю), justify (моноширно, как газетные столбцы).
Margin-left: 11pt; /* "Margin-left" - отступ блока от края границ. В примере ниже увидите как это действует.
color: #330000;
}
P.small
{
Font-size: 8pt;
Word-spacing: 10pt;
Text-align: justify;
color: #FF6600;
BackGround-color: BLACK; /* "BackGround-color" - как уже говорилось в прошлом уроке, это цвет заднего фона.
}
Для использования класса созданного вами в CSS, нужно добавить один параметр тега.
< p class="big" >Дальше идет текст< /p >
еще примеры:
< p class="main" >Дальше идет текст< /p >
< p class="small" >Дальше идет текст< /p >
А теперь наши стили в действие.
Это перед вами, текст класса BIG.
Это перед вами, текст класса MAIN.
Это перед вами, текст класса SMALL.