Скопируйте файл test.html и вставьте копию рядом. Название будет, к примеру button-test.html. Впишите в него этот короткий HTML-код:
Сохраните файл и посмотрите в браузере что получается.
Потом попробуйте поочередно другие свойства стилей: font-size: 30px (размер шрифта) и margin: 30px (внешние отступы). Размеры указываются в пикселях (px). Пикслель — это точка экрана. После каждого изменения сохраняйте файл, а в браузере обновляйте страницу.
Затем напишите в button-test.html все эти стили сразу (когда CSS-свойств несколько, разделяем их точкой с запятой ;):
<button style="color: red; font-size: 30px; margin: 30px">Test</button>
Стили могут назначаться элементам и другими способами, но через style это выглядит понятнее. В дальнейшем мы будем менять CSS из программы.
Вообще в теги с помощью различных свойств (атрибутов) можно добавлять различные настройки и параметры. Их можно добавлять много и в любых сочетаниях.
Посмотрим это на практике. Создайте новый файл с именем tag-test.html и вставьте в него HTML-код:
<a>Test</a>
Сохраните и посмотрите что получится в браузере. Пока ничего интересного.
Добавьте свойство стилей style=" ":
<a style="color: red; font-size: 30px">Test</a>
Посмотрите в браузере что изменилось.
Добавьте свойство адреса href=" ":
<a href="http://yandex.ru" style="color: red; font-size: 30px">Test</a>
Посмотрите в браузере: добавилось подчеркивание — теперь это не просто красный текст, а ссылка на главную страницу Яндекса.
Теперь добавим к этому элементу свойство onmouseover, пусть при наведении мышкой появится сообщение “123”:
<a href="http://yandex.ru" style="color: red; font-size: 30px" onmouseover="alert('123');">Test</a>
Проверьте, что получилось. Обратите внимание, как использованы двойные и одинарные кавычки, когда одни вложены в другие:
onmouseover="alert('123');"
Если везде вставить только двойные кавычки (или только одинарные), компьютер не сможет понять, какие кавычки к чему относятся и будет ошибка.
<button style="color: red">Test</button>
<!-- текст кнопки будет красным --> Сохраните файл и посмотрите в браузере что получается.
Потом попробуйте поочередно другие свойства стилей: font-size: 30px (размер шрифта) и margin: 30px (внешние отступы). Размеры указываются в пикселях (px). Пикслель — это точка экрана. После каждого изменения сохраняйте файл, а в браузере обновляйте страницу.
Затем напишите в button-test.html все эти стили сразу (когда CSS-свойств несколько, разделяем их точкой с запятой ;):
<button style="color: red; font-size: 30px; margin: 30px">Test</button>
Стили могут назначаться элементам и другими способами, но через style это выглядит понятнее. В дальнейшем мы будем менять CSS из программы.
Вообще в теги с помощью различных свойств (атрибутов) можно добавлять различные настройки и параметры. Их можно добавлять много и в любых сочетаниях.
Посмотрим это на практике. Создайте новый файл с именем tag-test.html и вставьте в него HTML-код:
<a>Test</a>
Сохраните и посмотрите что получится в браузере. Пока ничего интересного.
Добавьте свойство стилей style=" ":
<a style="color: red; font-size: 30px">Test</a>
Посмотрите в браузере что изменилось.
Добавьте свойство адреса href=" ":
<a href="http://yandex.ru" style="color: red; font-size: 30px">Test</a>
Посмотрите в браузере: добавилось подчеркивание — теперь это не просто красный текст, а ссылка на главную страницу Яндекса.
Теперь добавим к этому элементу свойство onmouseover, пусть при наведении мышкой появится сообщение “123”:
<a href="http://yandex.ru" style="color: red; font-size: 30px" onmouseover="alert('123');">Test</a>
Проверьте, что получилось. Обратите внимание, как использованы двойные и одинарные кавычки, когда одни вложены в другие:
onmouseover="alert('123');"
Если везде вставить только двойные кавычки (или только одинарные), компьютер не сможет понять, какие кавычки к чему относятся и будет ошибка.
По кавычкам и точке с запятой - понятно. А пробелы имеют какое-то значение? Вот здесь, например:
ОтветитьУдалить<button style="color: red; font-size: 30px;
Экспериментально поняла, что не имеют значения. Но на всякий случай, уточняю).
В остальном - все понятно, спасибо).
Пробелы не имеют значения) И Вам спасибо)
УдалитьКогда у меня появилось сообщение "123", я попробовал нажать на "Тest", у меня ничего не вышло. Потом запретил показывать уведомления на этой станице, и снова попробовал нажать на "Test", перешел на яндекс. Это нормально?
ОтветитьУдалитьИзвините за задержку с ответом: все нормально
Удалить1) при наведении курсора на ссылку запускается js-код (alert(123))
дело в том, что появляющиеся алерты (уведомления, всплывающие окошки) блокируют страницу.
2) при запрете уведомлений ничего не блокирует страницу и происходит переход по ссылке