Практическое занятие

Задание 1. Буквица

Разместим на новой веб-странице абзац текста и выделим первую букву абзаца тегом <span> для придания ей стилевых свойств, отличных от свойств абзаца. Изменим у первой буквы шрифт, размер шрифта, цвет.  У абзаца зададим ширину, выравнивание на странице сделаем по центру (margin), увеличим внутренние поля и изменим цвет фона.


Напишем html-код.

 <!doctype html>
<html>
<head>
<title>Буквица</title>
<style type="text/css">
p {
   width: 50%;
   margin: 200px auto;
   padding: 30px;
   background-color: #FFBF00;
}
  span {
    font-size: 29pt;
    color: blue;
    font-family: impact;
}
</style>
</head>
<body>
    <p><span>Р</span>азозлилася старуха зима: задумала она всякое дыхание со света
       сжить. Прежде всего стала она до птиц добираться: надоели ей они
       своим криком и писком. Подула зима холодом, посорвала листья с
       лесов и дубрав и разметала их по дорогам. Некуда птицам
       деваться: стали они стайками собираться, думушку думать.
       Собрались, покричали и полетели за высокие горы, за синие моря,
       в теплые страны. Остался воробей, и тот под стрехузабился.
    </p>
</body>
</html>


Задание 2. Наложитель стилей

Создадим текстовый блок и четыре чекбокса для добавления свойств текста: полужирный, курсив, подчеркнутый, зачеркнутый.

<!DOCTYPE HTML>
<HTML>
  <HEAD>
        <title>Селекторы</title>
<STYLE>
.main {
  padding: 50px;
  background: #777;
  color: white;
  font-size: 1.2em;
}
.b:checked ~ .main {
  font-weight: bold
}
.i:checked ~ .main {
  font-style: italic
}
.s:checked ~ .main {
   text-decoration: line-through
}
.u:checked ~ .main {
   text-decoration: underline
}
input[type="checkbox"]:checked + label {
  background: #e83737;
  color: #fff;
  border-color: #e83737;
}
input[type="checkbox"] + label {
  font-size: 30pt;
}
</STYLE>
</HEAD>
<BODY>
<INPUT TYPE="checkbox" ID="c1" NAME="r1" CLASS="b">
<LABEL FOR="c1">полужирный</LABEL>
<INPUT TYPE="checkbox" ID="c2" NAME="r1" CLASS="i">
<LABEL FOR="c2">курсив</LABEL>
<INPUT TYPE="checkbox" ID="c3" NAME="r1" CLASS="u">
<LABEL FOR="c3">подчеркнутый</LABEL>
<INPUT TYPE="checkbox" ID="c4" NAME="r1" CLASS="s">
<LABEL FOR="c4">зачеркнутый</LABEL>

<DIV CLASS="main">
    <H1>Добавитель стилей</H1>
    <p>Разозлилася старуха зима: задумала она всякое дыхание со света сжить. Прежде всего стала она до птиц добираться: надоели ей они своим криком и писком. Подула зима холодом, посорвала листья с лесов и дубрав и разметала их по дорогам. Некуда птицам деваться: стали они стайками собираться, думушку думать. Собрались, покричали и полетели за высокие горы, за синие моря, в теплые страны. Остался воробей, и тот под стреху забился.
    </P>
</DIV>
</BODY>
</HTML>



Последнее изменение: Вторник, 3 марта 2020, 22:05