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

@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>

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

Новые блоги и статьи Все статьи Все блоги /
Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025

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

	Смещение текста 06.12.2011, 11:14. Показов 6774. Ответов 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

Опции темы