понедельник, 25 ноября 2019 г.

Использованные скрипты с CodeWeek 2019!

В этом посту я собрал все скрипты, которые использовались мной на CodeWeek 2019!

С этого мы начали! 1. <title>С этого мы начали!</title>
<script>
alert("Так начался наш CodeWeek!");
</script>

Пробуем делать действия

2. <title>Пробуем делать действия</title>
<script type="text/javascript">
var one = 6;
var two = 23;
var add = one + two;
var minus = one - two;
var multiply = one * two;
var divide = one/two;
document.write("Первая цифра: = " + one + "<br />Вторая цифра: = " + two + " <br />");
document.write(one + " + " + two + " = " + add + "<br/>");
document.write(one + " - " + two + " = " + minus + "<br/>");
document.write(one + " * " + two + " = " + multiply + "<br/>");
document.write(one + " / " + two + " = " + divide + "<br/>");
</script>



3. <title>Пробуем конструкцию while</title>
<script type="text/javascript">
document.write("<b>Используем конструкцию while </b><br />");
var i = 0, j = 1, k;
document.write("Числа фибоначчи, которые меньше 121<br />");
while(i<121)
{
document.write(i + "<br />");
k = i+j;
i = j;
j = k;
}
</script>


Пробуем конструкцию if
4. <title>Пробуем конструкцию if</title>
<script type="text/javascript">
var age = prompt("Сколько тебе лет?");
if(age>=18)
document.write("У тебя медицина платная!<br />");
if(age<18)
document.write("У тебя медицина бесплатная!<br />");
</script>
</head>




5. <title>Пробуем конструкцию if...else</title>
<script type="text/javascript">
var hours = new Date().getHours();
if(hours<12)
document.write(Доброе утро!<br />");
else
document.write(Добрый день!<br />");
</script>

понедельник, 4 ноября 2019 г.

Работаем со шрифтами и цветом!


А теперь самое приятное в CSS, мы меняем шрифты и цвета тексту! А приятно всё тем, что это - конец всего объяснения CSS.
И задаётся вопрос - как установить сам шрифт? Это делается очень просто: нужно установить свойство font-family, после которого в ковычках пишется сам шрифт.
Именно таким образом в этом предложении я поставил шрифт Times New Roman
Это выглядит вот так:
<span style="font-family: "Times New Roman;">...

Также доступны видоизменения шрифтов с помощью свойств font-weight ( жирность текста ), font-stretch ( растянутость шрифта ), font-style ( курсивность текста ) и font-size ( размер текста )

Если вы думали, что изменение шрифта - просто, то изменение цвета ещё проще! Чтобы поменять цвет используется атрибут color после которого можно написать цвет ( например: black, white, yellow, red,... ) или его код ( сейчас все из мира дизайна меня поймут - значение из букв и цифр, перед которым стоит #).
Здесь у меня стоит чёрный цвет, который я поставил, написав black
Здесь у меня стоит хах, смешно, стоит один из любимых цветов для графического дизайна, который я поставил, написав #181f27. Сейчас добавлю подленник мною сказанного. мой темплейт не поддерживает этот цвет

В идеальном мире это выглядело бы именно так:
<span style="color: black; font-family: &quot;open sans&quot;;">...
и
<span style="color: #181f27; font-family: &quot;open sans&quot;;">...

Официально заявляю, что вы теперь всемогущий пониматель основ великого CSS, для совершения цели ничего не остаётся, кроме тестирования

пятница, 1 ноября 2019 г.

Работаем с текстом с помощью CSS

Работаем с текстом с помощью CSS! Чем дальше мы идём, тем скучнее всё выглядит.
 

Сейчас я дам отдельные списки по разным способам преобразования текста!

text-transform

Cвойство text-transform стилизует текст:
  1. text-transform: none - отсутствие эффектов.
  2. text-transform: capitalize делает все первые буквы слов прописными.
  3. text-transform: uppercase делает все буквы прописными.
  4. text-transform: lowercase делает все буквы строчными.
  5. text-transform: initial - значение по умолчанию.
  6. text-transform: inherit - наследование значений от родительского элемента.

white-space

Cвойство white-space работает с пробелами и переносами строк:
  1. white-space: normal - отсутствие эффектов: между словами один пробел, текст переносится по необходимости.
  2. white-space: nowrap запрещает переносить текст, это возможно осуществить только с помощью <br />.
  3. white-space: pre в браузере отображаются дополнительные пробелы и переносы.
  4. white-space: pre-wrap сохраняет пробелы в тексте, переносит текст по необходимости.
  5. white-space: pre-line удаляет лишние пробелы в тексте.
  6. white-space: break-spaces - работает аналогично pre-wrap, только пробелы в конце строк имеют значение.
  7. white-space: initial - значение по умолчанию.
  8. white-space: inherit - наследование значений от родительского элемента.

tab-size

Cвойство tab-size устанавливает отступ, который получается с помощью клавиши TAB, оно работает только для элементов <textarea>, <pre>. Это свойство может быть обозначенно целым положительным числом или длинной ( в правильных единицах измерения, например, px ), также доступны значения initial, inherit

word-break

Cвойство word-break определяет возможность мягкого перехода текста на новую строку, разделяя слова. Используются значения normal, break-all ( разрыв строк происходит без переноса слов ), keep-all ( разрыв происходит между парными символами ), initial, inherit.

line-break

Cвойство line-break определяет правила переноса строк относительно знаков препинания и символов
  1. line-break: auto назначает значение по умолчанию относительно используемого браузера.
  2. line-break: loose разделяет строки по наименьшему количеству правил, чаще используется для коротких строк.
  3. line-break: normal разбивает строки стандартным набором правил.
  4. line-break: strict разделяет строки, используя строгий набор правил переноса.
  5. line-break: initial - значение по умолчанию.
  6. line-break: inherit наследует значение.

text-align

Свойства text-align, text-align-all, text-align-last выравнивают текст по значению, которое вы устанавливаете. Такими могут быть: start, end, left, right, center, justify и match-parent по-моему, понятно, что есть что

Извиняюсь за сухость этой темы творческое мышление меня сегодня подвело - в следующий раз будет лучше!