StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
17.01.2017
12:15
6370
5
Синтаксис CSS. Основы CSS для начинающих. Урок №2
Всем привет!
Хоть я и обещал, что урок №2 будет уже практическим, но мне пришлось нарушить свое обещание. Я подумал, что нужно разъяснить, как оформлять правильно стили, чтобы в будущем не возникал такой вопрос.
CSS, как и любой другой язык программирования, имеет свои правила заполнения. Отличие CSS от HTML в том, что в нем нет тег, атрибутов, а только одни лишь правила, в которых указываются, как будет выглядеть HTML документ (цвет, размер текста, фон, позиция блоков и т.д.).
В этом уроке объясню все теоретически, и, если что-то будет непонятно, то на практике все станет на свои места.
Вот так выглядит схема заполнения:
Как видно на рисунке, сначала пишем «селектор». То есть, указываем, к какому html тегу (тегам) нужно применить правило (тег, ID, класс).
В фигурных скобках указываем правила « { тут правила CSS } ». Правила складываются из «свойства» и «значения».
Основные «свойства» и «значения» мы рассмотрим во всех остальных уроках из категории «Основы CSS».
Пример правила CSS:
Правило задавалось к тегу <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;}
Случайные записи:
- Горизонтальное меню. Основы bootstrap 3 для начинающих. Урок №10
- Состояние кнопки – Bootstrap 3
- Полезные функции php List, Isset, Unset, Empty, Date, Count и Exit. Основы PHP с нуля. Урок №18
- Рамка в CSS. Основы CSS для начинающих. Урок №12
- Выпадающее меню (списки). Основы bootstrap 3 для начинающих. Урок №9
Это основы основ, в которые волей-неволей въезжаешь сразу по ходу дела. Расскажите про необычные синтаксические конструкции, вроде правил @media, и прочее? Я очень редко такие встречаю, было бы интересно почитать какие существуют и где используются
Ответить
23 января, 2017 at 10:49
Эта категория "Основы CSS" рассчитана для людей, которые только знакомятся с CSS. Как то не хочется им все усложнять. Про правила @medi я буду рассказывать в категории "CSS дополнение".
Хочу этот блог вести правильно и поэтапно. А то с первым блогом у меня получилось немного каша. Найти там что-то трудно. Вот и стараюсь на этом блоге все делать поэтапно и в правильные категории.
Спасибо, Кирилл, за комментарий и за то, что ты читаешь мой блог!
Удачи!!!
Ответить
Я познакомился только с HTML.
Теперь, следуя вашему меню на сайте, хочу познакомиться с CSS.
Где урок 1, который должен подготовить меня к переходу от HTML к изучению CSS?
Во 2-м уроке мне сразу же стало не понятно:
- что такое ID?
- что такое класс?
Или мне для изучения CSS еще надо с чем-то познакомиться?
Ответить
21 февраля, 2017 at 23:05
Вот 1 урок по основам CSS - "Знакомство с CSS. Основы CSS для начинающих. Урок №1"/
- что такое ID?
- что такое класс?
ID и класс нужно для того, чтобы дать имя какому-то HTML элементу. Через ID и класс мы можем менять стиль элемента.
Например в HTML:
а в CSS
.text { color:#ccc; }Вот что я сделал. На всем HTML документе, где есть класс "text", текст будет серого цвета. Серый цвет я задал в CSS.
Что Вам нужно для изучения CSS? Начать с первого урока и пробовать весь кода на действии.
Ответить
23 февраля, 2017 at 15:02
Спасибо, пока ждал ответа, въехал сам (в отношении ID и Class)
С уважением -дед Борис