Рубрики
CSS HTML HTML "Projects" JavaScript JQuery Портфолио

html\editor «sd»

Строчный вложенный редактор с перетаскиванием

Рубрики
CSS основы

Способы добавления стилей на страницу

  • ОТНОСИТЕЛЬНОЕ
локальное добавление стиля в корне текущей папки
<link rel="stylesheet" href="/САЙТ/style.css">
локальное добавление стиля в родительской папке корня текущей папки
<link rel="stylesheet" href="../style.css">
  • АБСОЛЮТНОЕ
добавление стиля по полному пути
<link rel="stylesheet" href="http://www.htmlbook.ru/style.css"
Рубрики
CSS HTML TextArea Теги

textarea внутри контейнера с табами

textarea встраивает свою высоту при изменении высоты контейнера с ограничением минимальной высоты и длинны

<div class="cont">
<div cass="tabs">tab</div>
<div cass="div">
<textarea></textarea>
</div>
</div>

<style>
.cont{  
min-width: 300px;
min-height: 280px;
}
.tabs{
height:10%;
}
.div{
height:90%;
}
textarea{
height:100%;
}
</style>
Рубрики
CSS

Fragments «CSS»

  • элемент «высота»
//высота по родительскому элементу
height: inherit;
  • элемент «вертикальное расположение»
//размещение элемента по вертикали (вверх)
vertical-align: top;
//размещение элемента по середине
vertical-align: middle;
  • элемент «рамка»
//рамка контейнера
border: 1px solid black;
  • элемент «Mouse»
//при наведении на элемент появляется курсор
cursor: pointer;
Рубрики
CSS CSS основы

Синтаксис

//синтаксис id
#211018104515 {code} error
#211018104515_id {code} error
#211018104515-id {code} error
#id-211018104515 {code} successfully
//синтаксис class
.211018104515 {code} successfully
.211018104515-click {code} successfully
.click-211018104515 {code} successfully
Рубрики
App CSS React React-project

Стилизация компонентов в React

styled-components
библиотека

Установка библиотеки через терминал

npm install --save styled-components

packge.json
добавляется библиотека

"dependencies":{
...
"styled-components":"^5.2.1",
...
}
Рубрики
App JS фреймворки React React-project Sass Фронтенд

Разворачивание интерфейсов в приложении на React

подключение стилизации
два способа

  • через модули SASS
  • через сторонние библиотеки
    (например react-rating-stars-component)

src\modules

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

Рубрики
CSS JavaScript lib Фрагменты кода

Fragments «JavaScript»

Операторы

  • swith
    условные операции, операции ветвления
switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    break;
  case 'value2':  // if (x === 'value2')
    ...
    break;
  default:
    ...
    break;
}

String «Работа с текстом»
символ начинается с 0!

  • «вложенный текст»
//весь текст после 2 символа
text=text.substr(2);
//заменить вложенный текст в другой вложенный текст
let new_text=text.replace(subtext1,subtext2);
  • «поиск вложенного текста»
//поиск первого вложенного текста
let index=text.indexOf(text);
//поиск последнего вложенного текста
let index=text.lastIndexOf(text);
  • «вырезать текст»
l длинна вырезаемого текста
s старт вырезаемого текста
str.slice(s,l)
  • «элемент текста»
//удалить последний элемент текста
text=text.slice(0, -1);
  • «прочие»
//проверка текста на пустоту и удаление невидимых символов (переход на следующую строку)
text.trim() == ''
//выполнить текст-код
let arr=eval(data);

События

  • ev событие «управление»
//элемент DOM на котором выполняется событие
let e=ev.currentTarget();

Массивы

  • преобразование
//строка в массив через "\n"
let arr=text.split("\n");
//массив в строку через "\n"
let text=arr.join("\n");
//проверка на массив
Array.isArray(obj);
  • базовые свойства
//ассоциативный массив Array(0) нет индексов
arr.length==0
  • перебор массива или выборки
//пройтись по массиву или объекту
arr.forEach(function(item, i, data) {code});
Array.from(arr, (item,index)=>{code});
for(var i=0;i<arr.length;i++){arr[i]};

Объекты

  • перебор свойств
for (let key in obj){
obj[key]
}
Рубрики
CSS WorldPress

Блок Форматированный

пример форматированного блока с кодом в новой записи WordPress
//форматированный блок с длинным кодом оформить с ползунками. В WorlPress Настроить\Дополнительные стили добавить css код для класса code1
.code1
{
 font-size:1.4rem;
}