Вопросы по CSS - [118] :: Web-программирование :: Компьютерный форум Ru.Board

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в on-line?

Вход • Забыли пароль? • Первый раз на этом сайте? • Регистрация

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Модерирует : Cheery
Версия для печати • Подписаться • Добавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129

Xrobak

Advanced Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Ссылки для самостоятельного изучения:

Теория + примеры + учебники:
• W3School: CSS Tutorial
• MDN: Cascading Style Sheets (CSS)
• WebReference: Уроки по HTML и CSS
• htmlbook: Справочник CSS
• YouTube: Основы CSS/CSS3
• CSS для JavaScript-разработчика
• Основы CSS - каскадные таблицы стилей
• Статьи по основам CSS

Применение на практике:
• StackOverflow: 'CSS' Questions
• CSS-Tricks

Первый пост темы (до включения шапки).. ··· Текущий бэкап шапки..

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 18:46 27-10-2004 | Исправлено: TheBarmaley, 05:24 27-02-2019

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Valivan77777

Цитата:

Можно ли удалить определённое слово из текста?

CSS не манипулирует содержимым. если слово обернуто в какой от тег - можно спрятать.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:27 31-05-2022

WONDROUS

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Кто может подсказать, если делать анимированный заголовок (хидер), чтобы каждой букве задать параметр появления (через тот же AOS), то каждую букву надо прописывать через span? Это, скорее всего, не вопрос по CSS, но не знал, где спросить.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 21:02 11-06-2022 | Исправлено: WONDROUS, 23:58 11-06-2022

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

то кажду букву надо прописывать через span?

да, но можно не вручную, а с помощью js

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 23:14 11-06-2022

WONDROUS

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Я правильно понимаю, что анимация AOS работает только с div, а со span нет? То есть тот же aos="fade" должен быть только внутри div?

Сразу извиняюсь, если снова не той теме спрашиваю.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 16:54 13-06-2022

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

То есть тот же aos="fade" должен быть только внутри div?

fade это изменение прозрачности, не должно влиять. Вот там, где изменение размеров, может.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 19:20 13-06-2022

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Понятно, спасибо за ответ! Да, так и есть, только fade работает.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 19:42 13-06-2022

WONDROUS

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Просьба подсказать на своих установок для анимации AOS. Хотел сделать эффект scale(0.8) -> scale(1.5) -> scale(1), но как это сделать?

Код:

[data-aos=scale] {
    opacity: 0;
    transform:scale(1.5);
}
[data-aos=scale].aos-animate {
    opacity: 1;
    transform: scale(1);
    transition-property: opacity, transform;
}

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 15:33 02-07-2022

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

Хотел сделать эффект scale(0.8) -> scale(1.5) -> scale(1), но как это сделать?

внятнее? последовательно анимации к одному элементу?

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:17 02-07-2022

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Да, для одного элемента.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 22:26 02-07-2022

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS ну, так создайте одну анимацию, где 33% на один scale, следующие 33 на другой, последние 34 на третий. https://css-tricks.com/using-multi-step-animations-transitions/
	Всего записей: 15684 \| Зарегистр. 20-09-2014 \| Отправлено: 22:29 02-07-2022

Vladsvn

Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Добрый день!

Сайт предусматривает закачку файла без перезагрузки страницы, и для этого есть такой код:

<input class="site_load_file" style="display: none;" accept="image/*" name="loadfile" type="file" />
<span class="ui_preloader ">
<span class="ui_preloader__dot"></span>
<span class="ui_preloader__dot"></span>
<span class="ui_preloader__dot"></span>
</span>
</div>

Не могу понять смысл и функции четырех span, тем более, что относящиеся к ним классы отсутствуют в файлах CSS и JS.

Это какая-то специфика закачки?

Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 17:01 20-07-2022

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Vladsvn
CSS не влияет на закачку никак, только на визуальное представление.
наверняка это просто был какой то индикатор активности - бегающие точки или что то еще.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 19:18 20-07-2022

Vladsvn

Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Добрый день!

Есть в коде вот такая строка:
<div class="avatar__bg" style="width: 32px; height:32px; color: #b4581c; background-color: #fbf8bb;"><span class="text-uppercase text-center font-weight-bold">VV</span></div>

Я не могу понять необходимости нагромождения class, style и span. В этом может быть какой-то скрытый смысл? Какой-то механизм подключения функционала? В JS я ни одного из этих классов не вижу.

Почему нельзя написать

<div class="a1" >
<p class="a2">VV</p>
</div>

И в этих класса а1 и а2 отразить все требования к воспроизведению VV ?

Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 13:05 22-07-2022 | Исправлено: Vladsvn, 15:40 22-07-2022

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Vladsvn

Цитата:

И в этих класса а1 и а2 отразить все требования к воспроизведению VV

В идеале так и должно быть. Но не. Всегда удобно создавать кучу похожих классов, лишь немного отличающихся один от другого.

Цитата:

В JS я ни одного из этих классов не вижу.

Они могут и вообще там не использоваться. F12, выбрать элемент - покажет откуда и какие стили применяются.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 16:19 22-07-2022

Vladsvn

Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Гугл предостерегает от использования составных классов, да и я этого не люблю, но, конечно же, не стоит доводить дело до абсурда. Но когда я вижу идущие подряд 5 классов, из которых одного вообще нет в CSS файле, то не знаю, чего и думать...

Добавлено:
Не могу я понять профессиональную запись CSS...

Вот такой код:
.vote--sum-negative .vote__value {
background-color: #fff1f1;
color: #e52e3a;
}

Но в файле CSS отсутствует отдельно .vote__value, а в коде страницы нет комбинации vote--sum-negative .vote__value, зато есть
<div id="comment_rating_2465" class="vote__value">0</div>

Вот как это работает?

Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 17:38 22-07-2022

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Vladsvn

Цитата:

.vote--sum-negative .vote__value

откройте любые основы по CSS.
это работает для любого потомка с классом vote__value у родителя которого есть класс vote--sum-negative

https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Selectors
https://itchief.ru/html-and-css/selectors
https://web.dev/i18n/ru/learn/css/selectors/
https://frontender.info/basic-css-selectors-explained-with-cats/

Цитата:

Но когда я вижу идущие подряд 5 классов, из которых одного вообще нет в CSS файле

смотреть нужно в самом браузере, сказал же как. потому что другой css файл может подгружаться скриптом.

например

все очевидно и понятно

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:16 22-07-2022 | Исправлено: Mavrikii, 21:40 22-07-2022

Vladsvn

Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Спасибо за ссылки!

Цитата:

это работает для любого потомка с классом vote__value у родителя которого есть класс vote--sum-negative

Это я понимаю, но в коде страницы вообще нет класса vote--sum-negative. То есть, нет родителя то!

А вот здесь
<div id="comment_rating_2465" class="vote__value">0</div>
используется класс "vote__value", но сам этот класс в файле CSS отсутствует.
По моим понятиям, в этом диве стили вообще не заданы.

А с учетом того, что и родитель отсутствует, само это выражение бесполезно.

Цитата:

.vote--sum-negative .vote__value {
background-color: #fff1f1;
color: #e52e3a;
}

Разве не так?

Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 21:51 22-07-2022

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Vladsvn

Цитата:

То есть, нет родителя то!

js может создать его в процессе голосования.

Цитата:

Разве не так?

у вас css может подгружаться отдельно, смотреть нужно на элементе в браузере, показал как.

к тому же, судя по названию, это расцветка в случае негативного суммы голосов, а значит будет использоваться не всегда.
что уже говорит о том, что ситация динамическая.

Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:57 22-07-2022 | Исправлено: Mavrikii, 22:10 22-07-2022

Vladsvn Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Спасибо!
	Всего записей: 351 \| Зарегистр. 07-09-2016 \| Отправлено: 22:03 22-07-2022

Vladsvn

Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Все ж таки никак понять не могу...

Вот такая строка:

.modal-open .modal-dialog, .modal-openReg .modal-dialog, .modal-openRest .modal-dialog, .modal-openComp .modal-dialog { }

Из всего этого в коде присутствует только дочерний элемент modal-dialog. Ни одного материнского элемента в коде страницы нет (и для простоты будем считать, что в процессе работы он создаться не может).

Если я верно понимаю, вся эта запись эквивалентна

.modal-dialog { }

Так?

Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 14:32 23-07-2022

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC