slogin.info

ihc 468x60 1 1
< >
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 2063
В это уроке мы коснемся основ написания CSS-кода.

Код таблиц стилей представляет собой очень логичную структуру. Для начала нам нужно указать для каких элементов HTML мы хотим применить тот или иной стиль, для этого можно использовать названия тэгов, классы или идентификаторы. Это разнообразие будет изученно нами пойзже. Для начала стоит понять, что прописывание стилей, например, для тэга <p> будет распространнятся на все <p> тэги этой страницы. В CSS принято для указания элемента, к которому применять стиль убирать угловые скобочки. Эту часть называют селектором и здесь он будет такой "p" После того, как мы указали элемент применения стиля, нужно определить стиль. Так как это может быть целый ряд различных свойств и их атрибутов, то нужно как-то их сгруппировать, для этого существуют фигурные скобки {}, внутри которых и помещают все эти свойства и их атрибуты.

Таким образом банальный стиль по изменению цвета текста всех тэгов <p> в красный цвет будет выглядеть следующим образом:

p {color:#ff0000;} /* Меняет цвет текста абзацев на красный. p - здесь селектор, а {color:#ff0000;} - свойства стиля */

Как вы заметили, после закрывающей фигуркой скобки следует еще какой-то текст, это комментарии в CSS, любая строка/строки, заключенные в такую пару /* и */ будут восприниматься бразуером, как комментарии и не будут использоваться.

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

Внутри фигурных скобок по своим правилам пишутся свойства, общий шаблон следующий:

*Название свойства*:*параметры свойства*;

Примеры *Название свойства*: color, font-size, float, text-align и т.д. Все названия свойств пишутся в одно слово, без пробелов.

*параметры свойства* могут быть атомарными(единственными), так и составными и разделятся пробелами/запятыми.

Название свойства от параметров обязательно разделяется двоиточием, и параметры свойства заканчиваются точкой с запятой, это важно соблюдать.

Пример атомарного свойства: "color:#ff0000;"

Пример составного свойства: "border:1px solid #000000;"

Таким образом и получаются таблицы стилей, вот пример такой таблицы с несколькими стилями:

body {
    margin:0;
    padding:0;
    font-family: 'Open Sans', sans-serif;
    color:#303030;
} /* body - селектор, остальное свойства стиля для тэга <body> */

img {border: none;} /* img - селектор, остальное свойства стиля для тэга <img> */

h2 {
    font-size:40px;
    text-align:center;
    margin:15px 0;
    } /* h2 - селектор, остальное свойства стиля для тэга <h2> */

div.topen {
    width:100%;
    height:80px;
    background:#f2f4f4;
} /* div.top - селектор, остальное свойства стиля для тэга <div> с классом topen */

Тест

  1. Выберите составное свойство:
    1. margin:0;
    2. margin:15px 0;
    3. height:80px;
    4. background:#f2f4f4;
  2. Каким образом в CSS выделяются комментарии:
    1. {здесь комментарий}
    2. // здесь комментарий
    3. /* здесь комментарий */
    4. " здесь комментарий "
  3. Что в этом коде является селектором? {cv class="brush:css;first-line: 1;"}img {border: none;}{/cv}
    1. none
    2. все
    3. border
    4. img
Ответы на тест

1. - b

2. - c

3. - d

< >

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    6.00
  • ZOMRO
    5.60
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Последнее с форума

ZOMRO аватар
А Вы уже приобрели защиту от всех известных DDoS-атак (L2-L7)? Наши преимущества: Защищаем от атак ...
Перейти в тему
ZOMRO аватар
Жаркое лето дарит горячие бонусы для наших партнёров! Вознаграждение до 40% от всех платежей и прив...
Перейти в тему
ZOMRO аватар
VIP-тарифы для Вас! Высокопроизводительные VDS/VPS по VIP-тарифам будет отличным решением для тех, ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.