Смещение текста

@GRURUS · Регистрация: 27.06.2011

Студворк — интернет-сервис помощи студентам

Плиззз...подскажите как сместить текст, дословно цитирую задачу "Во втором абзаце, в первом предложении часть слов расположена выше основного текста, а часть слов - ниже. Это должно быть сделано не средствами CSS"

@Daredevi1 · 06.12.2011, 13:08

Код где?

@GRURUS · 06.12.2011, 14:41 **[ТС]**

HTML5
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
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//RU">
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=Windows-1251">
 
 
<!--Заголовок окна браузера-->
<TITLE>Контрольная работа</TITLE>
<!--Указываем путь к style.css-->
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>
 
<!--Тело документа-->
<BODY>
<H1 class="zagolovok1">НЕМНОГО ИСТОРИИ</H1>
<H1 class="zagolovok1_1">НЕМНОГО ИСТОРИИ</H1>
 
 
<P class="P1">В течение многих лет предпринималось немало попыток разработать концепцию 
универсальной информационной базы данных, в которой можно было бы не только 
получать информацию из любой точки земного шара, но и иметь удобный способ 
связи информационных сегментов друг с другом, так чтобы наиболее важные 
данные могли быть быстро найдены. В 60-е годы исследования в этой области 
породили понятие <b><i>"информационной Вселенной"</b></i> (docuniverse = documentation + 
universe), которая преобразила бы всю информационную деятельность. Но только в 
настоящее время появилась технология, воплотившая эту идею и предоставляющая 
возможности ее реализации в масштабах планеты.</P>
 
 
<H1 class="zagolovok2">WWW - "ВСЕМИРНАЯ ПАУТИНА"</H1>
 
 
<P class="P2">WWW -  это аббревиатура от "World Wide Web" ("Всемирная паутина"). 
Официальное определение World Wide Web звучит как мировая виртуальная 
файловая система – широкомасштабная гипермедиа-среда, ориентированная на 
предоставление универсального доступа к информационным ресурсам. 
Проект WWW возник в начале 1989 года в Европейской Лаборатории физики 
элементарных частиц (CERN) в Женеве <a href="http://www.cern.ch">(http://www.cern.ch/)</a>&nbsp Идея проекта состояла в 
создании гипертекстовой системы связи документов в компьютерной сети. Со 
временем World Wide Web (WWW, Web) превратилась в общемировую систему, 
состоящую из программного обеспечения – WWW технологий и связанных между 
собой документов.</P>
 
 
<P>Используя специальный программный интерфейс для WWW, изменился процесс 
просмотра и создания информации. Суть в том, что компьютер, подключенный к 
Интернет в режиме on-line, можно преобразовать в Web-сервер и наполнить его 
информацией. По всему миру существуют тысячи информационных серверов, и с 
любого компьютера, имеющего выход в Интернет, можно установить сетевое 
соединение с Web-сервером и смотреть текст, графику, видеоролики, слушать 
аудиоклипы (все это вместе и называется гипермедиа). 
Первый такой сервер был организован в CERN, там же с целью развития и 
поддержки стандартов WWW технологий был создан The World Wide Web 
Consortium, или W3C. Web-сервер Консорциума <a href="http://www.w3.org/pub/WWW/">http://www.w3.org/pub/WWW/</a> является 
интегрирующим сервером по поддержке WWW технологий в Интернет.</P> 
 
 
</BODY>
</HTML>

@GRURUS · 06.12.2011, 14:46 **[ТС]**

Получается вот так

а вот текст сместить не могу...

@darya1987 · 03.02.2024, 09:51

А как сделали красную и синюю границу? Делаю, получается с двух сторон у всех абзацев..

@rr33rr · 03.02.2024, 10:29

Сообщение от darya1987

А как сделали красную и синюю границу? Делаю, получается с двух сторон у всех абзацев..

Покажите код, что и как вы делаете.

А вообще, граница с одной стороны делается с помощью CSS правил вроде border-left: 5px solid red; border-right: 5px double blue;.

Пример

PHP/HTML
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
<!doctype html>
<html>
<head>
<style>
body {
  background: #ccc;
}
p {
  padding: 0 1em;
  background: #fff;
}
 
.red {
  border-left: 5px solid red;
}
.blue {
  border-right: 5px double blue;
}
</style>
</head>
<body>
  <p class="red">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer eget aliquet nibh praesent tristique magna. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Non enim praesent elementum facilisis leo. Pretium quam vulputate dignissim suspendisse in est. Aliquam nulla facilisi cras fermentum odio eu. Viverra tellus in hac habitasse platea dictumst vestibulum. Adipiscing elit duis tristique sollicitudin nibh sit. Non consectetur a erat nam at lectus urna duis. Viverra maecenas accumsan lacus vel facilisis. Neque egestas congue quisque egestas. Tempus egestas sed sed risus pretium quam. Egestas tellus rutrum tellus pellentesque. Nisl pretium fusce id velit. Tincidunt dui ut ornare lectus sit amet. Venenatis cras sed felis eget velit aliquet sagittis id consectetur. Mauris rhoncus aenean vel elit scelerisque mauris.
  </p>
  <p class="blue">
    Leo vel orci porta non pulvinar. Massa id neque aliquam vestibulum. Elementum pulvinar etiam non quam lacus suspendisse faucibus. Cursus eget nunc scelerisque viverra mauris in aliquam. Quis eleifend quam adipiscing vitae. Amet cursus sit amet dictum. Id velit ut tortor pretium viverra suspendisse potenti nullam. Feugiat vivamus at augue eget arcu dictum varius duis. Egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Et netus et malesuada fames ac turpis. Augue ut lectus arcu bibendum at varius vel. Mauris pellentesque pulvinar pellentesque habitant morbi. In aliquam sem fringilla ut morbi tincidunt augue interdum. Sed elementum tempus egestas sed sed risus pretium quam vulputate. At quis risus sed vulputate.
  </p>
  <p>
    Morbi leo urna molestie at. Feugiat in ante metus dictum at tempor commodo. Mauris rhoncus aenean vel elit scelerisque mauris. Id leo in vitae turpis. Fames ac turpis egestas integer eget aliquet nibh praesent tristique. Etiam erat velit scelerisque in dictum non. Enim praesent elementum facilisis leo vel fringilla est. Lobortis scelerisque fermentum dui faucibus in ornare. At urna condimentum mattis pellentesque id nibh tortor. Id venenatis a condimentum vitae. Nisl condimentum id venenatis a condimentum. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Gravida arcu ac tortor dignissim convallis aenean et tortor at. Ut consequat semper viverra nam. Aliquam eleifend mi in nulla posuere sollicitudin aliquam. Vitae aliquet nec ullamcorper sit amet risus nullam eget. Elit duis tristique sollicitudin nibh sit. Aliquet risus feugiat in ante metus dictum. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Ut pharetra sit amet aliquam id.
  </p>
  <p>
    Lacus vel facilisis volutpat est velit egestas dui. Sed euismod nisi porta lorem mollis aliquam ut porttitor leo. Id consectetur purus ut faucibus pulvinar. Nunc non blandit massa enim nec dui nunc. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Magnis dis parturient montes nascetur. Tellus mauris a diam maecenas sed enim ut sem. Et pharetra pharetra massa massa ultricies mi. Mauris a diam maecenas sed enim ut sem viverra aliquet. Feugiat scelerisque varius morbi enim nunc faucibus. Duis ut diam quam nulla porttitor massa id. In fermentum posuere urna nec tincidunt praesent semper feugiat. At quis risus sed vulputate odio ut enim. Erat nam at lectus urna duis convallis. Nibh sed pulvinar proin gravida. Sed turpis tincidunt id aliquet risus. Ut enim blandit volutpat maecenas volutpat. Pharetra vel turpis nunc eget lorem. Eget sit amet tellus cras. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec.
  </p>
  <p>
    Faucibus ornare suspendisse sed nisi. Semper risus in hendrerit gravida rutrum. A pellentesque sit amet porttitor eget dolor morbi non arcu. Diam donec adipiscing tristique risus nec feugiat in. In aliquam sem fringilla ut morbi. Nisl purus in mollis nunc sed id. Nullam ac tortor vitae purus. Aliquet sagittis id consectetur purus ut faucibus. Nisl vel pretium lectus quam id leo. Quisque egestas diam in arcu cursus euismod quis. Molestie a iaculis at erat pellentesque adipiscing. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Dapibus ultrices in iaculis nunc sed augue lacus. Facilisi nullam vehicula ipsum a arcu cursus. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu.
  </p>
</body>
</html>

См в песочнице

@darya1987 · 03.02.2024, 11:51

Code
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
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//RU">
<HTML><HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=Windows-1251">
<TITLE>Контрольная работа</TITLE>
</HEAD>
<style>
.ten
{
margin-top:2px;
margin-righr:2px;
text-shadow: 2px 2px #000080;
font: 30 bold ;
color:#0000FF;
}
body{
padding-left:5em;
padding-right:2em;
padding-top:1em;
padding-bottom:2em;
font-size:17;
}
</style>
 
 
<body  bgcolor=#d3d3d3 TEXT="black" lINK="brown"   font-face="Arial"size="5">
<div class="ten" align="center">НЕМНОГО ИСТОРИИ</div>
   </BODY>
 
 
 
<html>
<head>
<div>
<table align='center'>
<style>
td{
border-left: 3px solid  red;}
</style>
<td BGCOLOR=white width="40%" height="15%";>
<p>В течение многих лет предпринималось немало попыток разработать концепцию 
универсальной информационной базы данных, в которой можно было бы не только 
получать информацию из любой точки земного шара, но и иметь удобный способ 
связи информационных сегментов друг с другом, так чтобы наиболее важные 
данные могли быть быстро найдены. В 60-е годы исследования в этой области 
породили понятие<b> "информационной Вселенной" </b>(docuniverse = documentation + 
universe), которая преобразила бы всю информационную деятельность. Но только в 
настоящее время появилась технология, воплотившая эту идею и предоставляющая 
возможности ее реализации в масштабах планеты.</p>
 </td>
</table>
</div>
</head> 
</html>
 
 
 
</p>
</p>
</p>

@rr33rr · 03.02.2024, 12:38

darya1987, кто вам в 2024 году контрольные работы по HTML 3.2 задает?
Бегите оттуда. )

Ну а так правильно примерно так:

PHP/HTML
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<TITLE>Контрольная работа</TITLE>
<style>
body {
  background: #d3d3d3;
  color: black;
  font-family: Arial;
  padding-left: 5em;
  padding-right: 2em;
  padding-top: 1em;
  padding-bottom: 2em;
  font-size: 17px;
}
.ten {
  text-shadow: 2px 2px #000080;
  font-weight: bold;
  font-size: 30px;
  color: #0000FF;
  text-align: center;
}
a {
  color: brown;
}
.red {
  border-left: 3px solid red;
  padding-left: 1em;
  background: #fff;
}
</style>
</HEAD>
<body>
<div class="ten">НЕМНОГО ИСТОРИИ</div>
<p class="red">
  В течение многих лет предпринималось немало попыток разработать концепцию 
  универсальной информационной базы данных, в которой можно было бы не только 
  получать информацию из любой точки земного шара, но и иметь удобный способ 
  связи информационных сегментов друг с другом, так чтобы наиболее важные 
  данные могли быть быстро найдены. В 60-е годы исследования в этой области 
  породили понятие<b> "информационной Вселенной" </b>(docuniverse = documentation + 
  universe), которая преобразила бы всю информационную деятельность. Но только в 
  настоящее время появилась технология, воплотившая эту идею и предоставляющая 
  возможности ее реализации в масштабах планеты.
</p>
</head> 
</html>

См в песочнице

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@GRURUS 9 / 9 / 4 Регистрация: 27.06.2011 Сообщений: 295

	Смещение текста 06.12.2011, 11:14. Показов 6861. Ответов 7 Метки нет (Все метки) Плиззз...подскажите как сместить текст, дословно цитирую задачу "Во втором абзаце, в первом предложении часть слов расположена выше основного текста, а часть слов - ниже. Это должно быть сделано не средствами CSS" 0

@Daredevi1 311 / 303 / 78 Регистрация: 09.05.2009 Сообщений: 723
	06.12.2011, 13:08
	Код где? 0

@GRURUS 9 / 9 / 4 Регистрация: 27.06.2011 Сообщений: 295
	06.12.2011, 14:46 [ТС]
	Получается вот так а вот текст сместить не могу... 0

@darya1987 0 / 0 / 0 Регистрация: 23.10.2021 Сообщений: 12
	03.02.2024, 09:51
	А как сделали красную и синюю границу? Делаю, получается с двух сторон у всех абзацев.. 0