Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы CSS » Синтаксис CSS. Основы CSS для начинающих. Урок №2

17.01.2017


12:15


1777


5


Синтаксис CSS. Основы CSS для начинающих. Урок №2

Синтаксис CSS. Основы CSS для начинающих. Урок №2

Всем привет!
Хоть я и обещал, что урок №2 будет уже практическим, но мне пришлось нарушить свое обещание. Я подумал, что нужно разъяснить, как оформлять правильно стили, чтобы в будущем не возникал такой вопрос.

CSS, как и любой другой язык программирования, имеет свои правила заполнения. Отличие CSS от HTML в том, что в нем нет тег, атрибутов, а только одни лишь правила, в которых указываются, как будет выглядеть HTML документ (цвет, размер текста, фон, позиция блоков и т.д.).
В этом уроке объясню все теоретически, и, если что-то будет непонятно, то на практике все станет на свои места.
Вот так выглядит схема заполнения:

Синтаксис CSS. Основы CSS для начинающих. Урок №2

 

Как видно на рисунке, сначала пишем «селектор». То есть, указываем, к  какому html тегу (тегам) нужно применить правило (тег, ID, класс).
В фигурных скобках указываем правила « { тут правила CSS } ». Правила складываются из «свойства» и «значения».
Основные «свойства» и «значения» мы рассмотрим во всех остальных уроках из категории «Основы CSS».

Пример правила CSS:

Синтаксис CSS. Основы CSS для начинающих. Урок №2

Правило задавалось к тегу <body>. В итоге, на всех страницах цвет фона веб-страницы будет «#cc0000».

Вот вся схема заполнений правил для тег, ID, класса

- для тега

В HTML:

<H2>Заголовок</H2>

В CSS:

H2 {font-size: 18px;}

- для ID

В HTML:

<div id="footer">блок</div>

В CSS:

#footer {width: 200px;}

- для класса (class)

В HTML:

<p class="footer-text">текст</p>

В CSS:

.footer-text {font-size: 18px;}



Случайные записи:

  1. Полезные функции php List, Isset, Unset, Empty, Date, Count и Exit. Основы PHP с нуля. Урок №18
  2. Нам 1 годик! С Днем Рождения StepkinBlog.ru!!!
  3. Изображение. Основы bootstrap 3 для начинающих. Урок №15
  4. Подключение. Основы bootstrap 3 для начинающих. Урок №2
  5. Работа со строками в php. Основы PHP с нуля. Урок №7

Последние записи рубрики:

  1. Бесплатный курс по основам CSS
  2. Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
  3. Тесты CSS онлайн. Основы CSS для начинающих
  4. Слои в CSS. Основы CSS для начинающих. Урок №16
  5. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15

5 ответа(ов) на статью: “Синтаксис CSS. Основы CSS для начинающих. Урок №2”

  1. Кирилл says:

    Это основы основ, в которые волей-неволей въезжаешь сразу по ходу дела. Расскажите про необычные синтаксические конструкции, вроде правил @media, и прочее? Я очень редко такие встречаю, было бы интересно почитать какие существуют и где используются

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Эта категория "Основы CSS" рассчитана для людей, которые только знакомятся с CSS. Как то не хочется им все усложнять. Про правила @medi я буду рассказывать в категории "CSS дополнение".
    Хочу этот блог вести правильно и поэтапно. А то с первым блогом у меня получилось немного каша. Найти там что-то трудно. Вот и стараюсь на этом блоге все делать поэтапно и в правильные категории.
    Спасибо, Кирилл, за комментарий и за то, что ты читаешь мой блог!
    Удачи!!!

    Ответить

  2. Борис says:

    Я познакомился только с HTML.
    Теперь, следуя вашему меню на сайте, хочу познакомиться с CSS.
    Где урок 1, который должен подготовить меня к переходу от HTML к изучению CSS?
    Во 2-м уроке мне сразу же стало не понятно:
    - что такое ID?
    - что такое класс?
    Или мне для изучения CSS еще надо с чем-то познакомиться?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Вот 1 урок по основам CSS - "Знакомство с CSS. Основы CSS для начинающих. Урок №1"/
    - что такое ID?
    - что такое класс?
    ID и класс нужно для того, чтобы дать имя какому-то HTML элементу. Через ID и класс мы можем менять стиль элемента.
    Например в HTML:

    <p class="text">ТУТ ТЕКСТ</p>

    а в CSS

    .text
    {
    color:#ccc;
    }
    

    Вот что я сделал. На всем HTML документе, где есть класс "text", текст будет серого цвета. Серый цвет я задал в CSS.

    Что Вам нужно для изучения CSS? Начать с первого урока и пробовать весь кода на действии.

    Ответить

    Борис ответил(а) на комментарий:

    Спасибо, пока ждал ответа, въехал сам (в отношении ID и Class)
    С уважением -дед Борис

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 231

Уведомление для пользователей AdBlock

Включая adblock (блокировщик рекламы) вы лишаете меня заработка, и тем самым лишаете смысла трудиться над своим сайтом, помогать вам и отвечать на комментарии. Если вы решились отключить adblock для моего блога, спасибо!

Как отключить AdBlock?