Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 25.12.2022, 10:57   #1
Пенсионер1
Новичок
Джуниор
 
Регистрация: 25.12.2022
Сообщений: 5
По умолчанию Как и куда вставить код CSS в текст HTML.

Есть код который работает, но есть и вопрос:
=================================== =======================
Код:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Текст</title>
<style>
<!--
h2
	{margin-right:0cm;
	margin-left:0cm;
	font-size:12.0pt;}
.style1 {color: #000000}
span
	{color: "#FF00FF"; text-decoration: underline}
.dem
 {text-decoration: none; font-weight: bold; background-color: white; text-decoration: none; color: black}

table.MsoNormalTable
	{mso-style-parent:"";
	font-size:12.0pt;
	font-family:"Arial"}
.cc
	{color: blue; font-weight: bold; background: #FFFFFF}
span
	{color: black; font-weight: bold; background: #FFF4BF}
-->
</style>
<style type="text/css">
 .sub{ visibility: hidden; display: none; }
</style>
<script language=javascript>
var msub= new Array(100) 	
	function CLOP(subName) {
if (eval(subName).style.visibility == "visible") {
    eval(subName).style.visibility = "hidden";  // скрытие объекта
    eval(subName).style.display = "none"
    eval("img"+subName).src="plus.gif" }          // смена образа кнопки
else {     
    eval(subName).style.visibility = "visible";
    eval(subName).style.display = "list-item"
    eval("img"+subName).src="minus.gif" }}
</script>
<meta name="Microsoft Border" content="b, default">
</head>

<body>
Тема 0. <img src ="plus.gif" id="imgsub0" onclick ="CLOP('sub0')"> 
<br>
<table border="1" width="100%" class="sub" id="sub0" bgcolor="#CCFFCC">
<tr>
	<td> 1. <img src ="plus.gif" id="imgsub1" onclick ="CLOP('sub1')"> <br>
		<table border="1" width="100%" class="sub" id="sub1" bgcolor="#FFFFFF">
			<tr>
			<td> 1.
			</td>
			</tr>
		</table><br>
               2. <img src ="plus.gif" id="imgsub2" onclick ="CLOP('sub2')"> <br>
		<table border="1" width="100%" class="sub" id="sub2" bgcolor="#FFFFFF">
			<tr>
			<td> 2.
			</td>
			</tr>
		</table>			
	</td>
</tr>
</table>

</body>
</html>
=================================== =======================
Сейчас я могу это сделать через Word-макрос, но это "криво" - надо выходить из файла, макросить и снова входить.
хотелось бы (если возможно):
-------------------------------
1. ввести функцию f(n) чтобы этот текст получался из
Код:
<body>
	Тема  f(0)	
</body>
затем после её отработки
Код:
<body>
	Тема 0. <img src ="plus.gif" id="imgsub0" onclick ="CLOP('sub0')"> 
	<br>
	<table border="1" width="100%" class="sub" id="sub0" bgcolor="#CCFFCC">
	<tr>
		<td> 0.
		</td>
	</tr>
	</table>		
</body>
затем, если надо, вставить ещё пару f(n) и после их отработки получить верхний = основной фрагмент
Код:
<body>
	Тема 0. <img src ="plus.gif" id="imgsub0" onclick ="CLOP('sub0')"> 
	<br>
	<table border="1" width="100%" class="sub" id="sub0" bgcolor="#CCFFCC">
	<tr>
		<td>f(1)<br>
		    f(2)
		</td>
	</tr>
	</table>
		
</body>
-------------------------------
2. ввести массив для всех этих переменных sub, так чтоб знать какие из них [-]/[+] открыты/скрыты
Какие находятся внутри каких. Чтоб открывать по запросу к ветке 2 и её 2 и ствол 0 ведущий к ней.

-------------------------------
3. Я умею программировать скажем в С, но не понимаю, как программировать в CSS, нет опыта и нет примера.
Можно ли встраивать код в середину текста? Комментарии же можно, а код? Он же "должен" отрабатывать при кликах?

То есть снова вопрос 1, но другими словами.
Может быть где-то на форуме есть примеры готовых программ, чтобы увидеть их и в коде, и в работе.

Последний раз редактировалось Пенсионер1; 25.12.2022 в 11:04.
Пенсионер1 вне форума Ответить с цитированием
Старый 25.12.2022, 14:51   #2
Вадим Фролов
Пользователь
 
Аватар для Вадим Фролов
 
Регистрация: 02.05.2022
Сообщений: 81
По умолчанию

Ну вот примера самого html. У меня файлы css подключены отдельно как и файлы с кодом js.
Код:
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Лендинг page с карточками городов России.">
    <meta name="author" content="Vadim Frolov">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./pages/index.css">
    <link rel="shortcut icon" href="./images/logo-icon.png">
    <title>Проектная работа Mesto</title>
  </head>
  <body class="root">
    <div class="page">
      <header class="header">
        <img class="header__logo" src="./images/header-logo.svg" alt="Надписть на логотипе Mesto Russia">
      </header>
      <main class="content">
        <section class="profile">
          <div class="profile__container">
            <img class="profile__avatar" src="./images/profile-avatar.jpg" alt="Изображенна фото Жак-Ив Кусто в красной шапке">
            <div class="profile__info">
              <h1 class="profile__title">Жак-Ив Кусто</h1>
              <button class="profile__edit-button" id="myBtn" type="button"></button>
              <p class="profile__subtitle">Исследователь океана</p>
            </div>
          </div>
          <button class="profile__add-button" type="button"></button>
        </section>
        <section class="elements"></section>
        <template id="element-template">
          <div class="element">
            <button class="element__trash"></button>
            <img class="element__mask" src="#" alt="Изображения городов России">
            <div class="element__group">
              <h2 class="element__title"></h2>
              <button class="element__like-button"></button>
            </div>
          </div>
        </template>
      </main>
      <footer class="footer">
        <p class="footer__copyright">&copy; 2022. Фролов Вадим</p>
      </footer>
      <div class="popup popup_type_edit-profile">
        <div class="popup__container">
          <button class="popup__close" type="button"></button>
          <h2 class="popup__title">Редактировать профиль</h2>
          <form class="popup__form" name="editForm" id="editForm" novalidate>
            <label class="popup__label">
              <input id="nameInput" class="popup__input popup__input_type_name" name="nameInput" type="text" placeholder="Имя" minlength="2" maxlength="40" required>
              <span class="nameInput-error error"></span>
            </label>
            <label class="popup__label">
              <input id="jobInput" class="popup__input popup__input_type_job" name="jobInput" type="text" placeholder="О себе" minlength="2" maxlength="200" required>
              <span class="jobInput-error error"></span>
            </label>
            <button class="popup__save popup__save_disabled" type="submit">Сохранить</button>
          </form>
        </div>
      </div>
      
      <div class="popup popup_type_image">
        <figure class="popup__image-container">
          <img class="popup__image" src="#" alt="Изображения городов России">
          <figcaption class="popup__image-title"></figcaption>
          <button class="popup__close" type="button"></button>
        </figure>
      </div>
    </div>
    <script src="./scripts/validationConfig.js"></script>
    <script src="./scripts/validate.js"></script>
    <script src="./scripts/initialCards.js"></script>
    <script src="./scripts/index.js"></script>
  </body>
</html>
Код:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      /*Тут можешь писать ВСЕ стили для всего документа html страницы*/
    </style>
  </head>

  <body>

/*тут в боди контент твоей страницы*/

 <script src="./script/index.js">

/*Скрипт лучше писать внизу перед закрывающим боди и уже внутри тут 
пишешь код для ВСЕГО html документа*/

    </script>
  </body>
</html>
Если непонятно, пишите, смогу более подробней рассказать.

Последний раз редактировалось BDA; 26.12.2022 в 07:03.
Вадим Фролов вне форума Ответить с цитированием
Старый 25.12.2022, 15:10   #3
Пенсионер1
Новичок
Джуниор
 
Регистрация: 25.12.2022
Сообщений: 5
По умолчанию

В принципе можно действовать и проще.
Достаточно иметь пару не используемых в тексте символов (или слов скажем @ и %%). тогда в два приёма:
Код:
<body>
	Тема  @	
</body>
затем после её замены @ через ^h на отдельно хранимое
Код:
<body>
	Тема %%. <img src ="plus.gif" id="imgsub%%" onclick ="CLOP('sub%%')"> 
	<br>
	<table border="1" width="100%" class="sub" id="sub%%" bgcolor="#CCFFCC">
	<tr>
		<td> %%.
		</td>
	</tr>
	</table>		
</body>
и уж затем после 2й замены %% через ^h на нужный №
Код:
<body>
	Тема 0. <img src ="plus.gif" id="imgsub0" onclick ="CLOP('sub0')"> 
	<br>
	<table border="1" width="100%" class="sub" id="sub0" bgcolor="#CCFFCC">
	<tr>
		<td> 0.
		</td>
	</tr>
	</table>		
</body>
Но главный вопрос остаётся: Как и куда вставить код CSS в текст HTML?
Где увидеть пример "средней" по размеру CSS программы?

Спасибо, не мог войти из-за пароля. Сейчас поизучаю Ваши посты.

Последний раз редактировалось BDA; 26.12.2022 в 07:04.
Пенсионер1 вне форума Ответить с цитированием
Старый 25.12.2022, 15:34   #4
macomics
Участник клуба
 
Регистрация: 17.04.2022
Сообщений: 1,833
По умолчанию

CSS (тэг <style></style>) это не программа, а набор значений для форматирования элементов в HTML.
Если вы хотите написать программу, тогда это JS (тэк <script></script>).

Для формирования динамической информации на странице вам надо создать шаблон и с помощью JavaScript наполнить его информацией. Но информацию можно получать от разных источников. Например можно запрашивать ее с сервера или из массива заданного в программе на JS.

Вот текст на HTML
Код HTML:
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>Document</title>
 </head>
 <body>

 </body>
</html>
Добавим к нему разметку (CSS)
Код HTML:
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
  .main {
    background-color: black;
    text-align: center;
    text-decoration: underline;
  }
  </style>
 </head>
 <body class="main">

 </body>
</html>
А вот теперь добавим JS
Код HTML:
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
  .main {
    background-color: black;
    text-align: center;
    text-decoration: underline;
  }
  </style>
  <script>
   function f(num) {
     return "Тема " + num + ". <img src =\"plus.gif\" id=\"imgsub0\"> \
<br>\
<table border=\"1\" width=\"100%\" class=\"sub\" id=\"sub0\" bgcolor=\"#CCFFCC\">\
<tr>\
	<td> 1. <img src =\"plus.gif\" id=\"imgsub1\"> <br>\
		<table border=\"1\" width=\"100%\" class=\"sub\" id=\"sub1\" bgcolor=\"#FFFFFF\">\
			<tr>\
			<td> 1.\
			</td>\
			</tr>\
		</table><br>\
               2. <img src =\"plus.gif\" id=\"imgsub2\"> <br>\
		<table border=\"1\" width=\"100%\" class=\"sub\" id=\"sub2\" bgcolor=\"#FFFFFF\">\
			<tr>\
			<td> 2.\
			</td>\
			</tr>\
		</table>\
	</td>\
</tr>\
</table>";
   }
   function init() {
     document.body.innerHTML = f(0) + f(1) + f(2);
   }
  </script>
 </head>
 <body class="main" onload="init();">

 </body>
</html>
macomics вне форума Ответить с цитированием
Старый 25.12.2022, 16:26   #5
Пенсионер1
Новичок
Джуниор
 
Регистрация: 25.12.2022
Сообщений: 5
По умолчанию

Огромное спасибо за подсказки. Я кажется начал "понимать" логику CSS + JS.
Я "знаю" как собрать данные со всех sub-ов в массив и как затем выяснить их иерархию в тексте, но...

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

Может надо повесить какой-нибудь флаг одноразового допуска к построению массива?
Я должен подумать и проверить. Трудно в 70 лет думать "по новому".
Ещё раз огромное Вам всем спасибо за подсказки.
Пенсионер1 вне форума Ответить с цитированием
Старый 25.12.2022, 16:45   #6
macomics
Участник клуба
 
Регистрация: 17.04.2022
Сообщений: 1,833
По умолчанию

Зачем менять иерархию. Используя JS вы можете менять и CSS свойства элементов. Для скрытия какого-либо элемента достаточно просто его убрать (добавить {display: none;} или {visibility: hidden;})
macomics вне форума Ответить с цитированием
Старый 26.12.2022, 06:39   #7
Пенсионер1
Новичок
Джуниор
 
Регистрация: 25.12.2022
Сообщений: 5
По умолчанию

Для скрытия...
Вы правы, с этого я и начал:
Цитата:
Сообщение от Пенсионер1 Посмотреть сообщение
Есть код который работает
...
Код:
<html>
...
<script language=javascript>
var msub= new Array(100) 	
	function CLOP(subName) {
if (eval(subName).style.visibility == "visible") {
    eval(subName).style.visibility = "hidden";  // скрытие объекта
    eval(subName).style.display = "none"
    eval("img"+subName).src="plus.gif" }          // смена образа кнопки
else {     
    eval(subName).style.visibility = "visible";
    eval(subName).style.display = "list-item"
    eval("img"+subName).src="minus.gif" }}
</script>
...
</html>
Зачем менять иерархию.
Менять не иерархию (писателя), а видимость элементов (читателю)
Никто не любит читать "много букофф" особенно пустых. Затем и придуманы оглавления и редакторы с ними и метками/закладками для читателей, чтобы выходить сразу на интересное место (если известно где оно) не читая моря не интересных мест.

Много ещё трудностей для писателей и читателей. Слабоваты ещё редакторы и википедии. Не подарок и крошечные экраны смартфонов-телефонов...
Что-то ещё будет лет через 10-20?
Пенсионер1 вне форума Ответить с цитированием
Старый 26.12.2022, 08:03   #8
macomics
Участник клуба
 
Регистрация: 17.04.2022
Сообщений: 1,833
По умолчанию

Для создания оглавления в HTML предусмотрены якоря.
macomics вне форума Ответить с цитированием
Старый 29.12.2022, 14:12   #9
Пенсионер1
Новичок
Джуниор
 
Регистрация: 25.12.2022
Сообщений: 5
По умолчанию

Грустно, что я сам (без общения с Вами) не сообразил такой пустяк. И многократно "криво" воссоздавал нужную мне инфо.структуру текста.
Проще всего "писателю" прямо в тексте иметь заготовку кода и через ^C + ^h заменять № на нужное значение
Код:
<!-- Ниже 8 строк для создания [+] вставок
№. <img src ="plus.gif" id="imgsub№" onclick ="CLOP('sub№')">            Утверждение
<table border="1" width="100%" class="sub" id="sub№" bgcolor="#FFFFFF">
  <tr>
    <td> №.<br>                                                          Доказательство
	<img src ="minus.gif"  id="imgsub№" onclick ="CLOP('sub№')"> №.  скрыть доказательство, если оно не нужно 
    </td>
  </tr>
</table> 
-->
Правда сегодня люди пользуются div-ами, они значительно сильнее "проработаны".
Ещё раз, Вадим Фролов и macomics огромное Вам спасибо.
Пенсионер1 вне форума Ответить с цитированием
Старый 29.12.2022, 14:23   #10
Valick
Форумчанин
 
Регистрация: 27.04.2022
Сообщений: 484
По умолчанию

Пенсионер1, честно говоря ничего не понял. По ощущениям попытка изобретения шаблонизатора без использования серверного языка. И язык С вам тут не помошник.
Вам нужна связка PHP+HTML+JS, ну и MySQL в переспективе.
Valick вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
куда вставить else leon2009sp PHP 19 28.03.2022 22:00
В HTML с помощью ява скрипта по нажатию на button вставить в inpute текст Alar JavaScript, Ajax 0 07.09.2020 00:57
Куда вставить код?!! Женя32 PHP 8 03.08.2017 16:08
куда лучше вставить прогресс бар? megostudent Общие вопросы Delphi 3 28.09.2011 10:09