HTML styling без СSS

182

29 января 2020, 00:40

Всем привет! Прошу прощения за элементарные вопросы, но я учусь, учусь сам и спросить мне некого. В общем осваиваю HLML, до CSS ещё не дошёл. При стандартной установке параграфов и дивов - у меня текст растягивается по всей ширине экрана браузера, как и должно быть. Я понимаю, что CSS всё это поправит, но есть ли вариант внутри самого HTML документа разметит атрибуты дива или абзаца так, чтобы можно было сжать текст и сделать его наряднее?

Answer 1

<div style="width: 700px; color: #c00; font-size: 20px; font-family: 'Tahoma';">
  Здесь ваш текст...
</div>

Ну то же самое применяемо и для p и всего остального.

Весь статичный CSS по сути ничем не отличается от style="..." в HTML.

Просто, когда вы добавляете все стили в сам HTML, со временем код становится очень запутанным. А если вдруг хочется что-то в нем изменить - приходится возвращаться и менять всё, во всех одинаковых style="..."

Особенно сложно работать с таблицами на чистом HTML. И тут ему на помощь приходит CSS - по сути, то же самое, просто записанное в другом месте. Вы просто собираете все стили вверху страницы, под тегом <style>, оставляя HTML таким же простым, каким он и должен быть.

Возвращаясь к тому коду, что был написан вначале. Его эквивалент на CSS:

<style> .bubu {width: 700px; color: #c00; font-size: 20px; font-family: 'Tahoma';} </style>
<div class="bubu">
  Здесь ваш текст...
</div>

Что изменилось - всего лишь вместо style="..." дали вашему элементу новое имя (класс), к которому можно ссылаться через CSS и прикрутить к нему любой стиль. А если таких class="bubu" на странице будет 100 штук и вам захочется что-то в них изменить - всего лишь надо будет это изменение внести в .bubu {...} один раз... а не по 100 раз на каждом отдельном HTML-элементе.

Поэтому... параллельно с HTML как-раз надо CSS подтягивать. А вот позже уже в CSS можно научиться менять стили элементов при наведении курсора (CSS:hover), при клике (CSS:active) - делая страницу более "живой".

А есть еще и CSS-анимация.