Содержание

Красная строка в css


Как делается в css красная строка с помощью двух свойств

Приветствую вас на своем блоге. Иногда при оформлении текста появляется необходимость по-особенному оформить именно первую строчку текста. Так как в делается в css красная строка? Об этом я и хотел бы сегодня рассказать вам.

Свойство text-indent – отступ для первой строки текста

В css есть свойство, которое используется очень редко, поэтому о нем знают не все. Называется оно text-indent, а его смысл в том, чтобы задать отступ слева самой первой строчке текста в том элементе, для которой он указан. Я сразу же привожу пример:

Заголовок поста

Сама статья

Так вот, чтобы у нас получилась красная строка, пишем в css вот так:

Article{ Text-indent: 50px; }

Вот и все, а вот вам картинка, которая показывает, как все это будет выглядеть. Тут четко видно работу свойства text-indent.

Как применить другие свойства к первой строке

Но text-indent помогает всего лишь задать нужный отступ текстовому содержимому, но сама строка не выделяется по-другому, а иногда это может быть необходимо. Итак, что же нам делать, чтобы оформить первую строчку не так, как остальные?

Решение очень простое – псевдокласс first-line. Он был создан в css специально для того, чтобы можно было обращаться к первой линии текстового содержимого нужного нам элемента. Например, если взять ту же самую разметку, что мы описали выше, то вот так мы можем обратиться к первой строке:

Article:first-line{ Color: red; }

Псевдоклассы в css-селекторах пишутся так: ставится двоеточие, а потом вы должны написать имя нужного вам псевдокласса. А вообще об этом можете почитать вот эту статью. Так мы добавили первой строке красный цвет шрифта, так что теперь она очень сильно выделяется в тексте. Как вы понимаете, теперь к ней вы можете добавить любые другие свойства, какие посчитаете нужными. Например, жирное начертание или даже другой шрифт, отличный от основного.

Как видим, css предоставляет нам достаточно возможностей, чтобы оформить первую строку в тексте по-особенному. Интересно, что в нем даже есть псевдокласс, которым можно выбрать первую букву в элементе. О нем я написал здесь.

Итак, оформляйте текст средствами языка css, а эту статью на этом я заканчиваю.

«Красная строка» (отступ слева в первой строке абзаца) с помощью CSS | О жизни виртуальной и реальной

Суббота, Декабрь 11, 2010, 15:42 | Вебмастеру, Интернет | 5 063 просм. | 2 комментария

Для меня эта проблема всегда была больной. Читала статьи на эту тему — они повергали меня в уныние: одни предлагали ставить в начало каждого абзаца прозрачную картинку n-ной ширины, другие — выстроить в ряд кучу « »-ов. Жуть! В итоге я плюнула и вообще отказалась от «красных строк» в своих статьях. И только сегодня случайно узнала, что в CSS есть параметр, который устанавливает величину отступа первой строки блока текста — text-indent.

Единицы, в которых можно выставлять отступ — любые принятые в CSS: px (пиксели), pt (пункты), em (высота шрифта).

text-indent: 1,5 em;

Довольна теперь, как слон!

Похожие записи:
  • Скрипт подстановки копирайта при копипасте текста
  • Закругление углов div’ов и картинок с помощью CSS
  • Выравнивание картинки по центру в div’е

Понравилось? Поделись ссылкой с друзьями!

Как сделать красную строку в тексте сайта

Некоторые пользователи задаются вопросом: как сделать так, чтобы на сайте, новый абзац начинался с красной строки? Т.е логичная и эстетичная красная строка в тексте.

В общем в этом нет ничего сложного, если немного захотеть поработать… Но, думаю, если человек заботится о эстетическом виде своего сайта, то он обязательно с этой задачей справится, даже если имеет знаний о CSS меньше свой бабушки (красную строку посредством примера html — рассматривать сегодня не будем)). Ну а для большей доходчивости)) я к этой коротенькой статье приложу подробное видео, ниже.

как сделать красную строку в тексте статьи сайта CSS

Приступим: всё как и всегда — делайте бекап — или файла style.css или всего сайта скопом (нужная предосторожность). Также о предосторожностях ВООБЩЕ — можно узнать из статьи: Необходимые настройки новенького сайта на WordPress Немного теории CSS. Запоминать здесь особо, я так думаю, не нужно, но вот иметь в виду некоторые свойства языка css — необходимо.

Выравнивание задаётся свойством “text-align”, и имеет 4 значения:

left – выравнивание по левому краю center – выравнивание по центру right – выравнивание по правому краю justify – выравнивание по ширине

Взгляните на код, расположенный ниже:

Этот пример для того, если вы решите сделать постоянную задачу централизации заголовкам (селекторы h3, естественно, могут быть разными).

Как задаётся «центр» конкретному Title, я расскажу в видео.

h3{ text-align: center; }

Ну а этот, только для того, чтобы обычный текст «работал» по НАШЕЙ красной задаче — CSS.

Красная же строка задаётся свойством text-indent. Значение задаётся в пикселях, так что: кому сколько нравится…

p{ text-indent: 30px; }

Вот практически и всё: открываете файл стилей вашей темы и, для начала, прописывайте куда-нить в финал документа предложенный код.

Сохраните действия ваших редакций.

…и смотрите что получилось на страничке блога…

Теперь у вас каждый абзац текста будет с красной строки. Но… радоваться рановато…

Дело в следующем: если вы ещё мало подстраивали свою тему, то у вас эти «красные строки» будут прописываться где угодно: в сайдбарах, например. И одно дело, если вас это устраивает, но совсем другое, если — нет.

Посмотрите как у меня заданы отступы: «краснеет» только статья, а бар и т.п. — нет. Впрочем, всё на ваше эстетическое чувство)

Чтобы задать отступы только контексту статей, мы поступим чуть иначе: найдите в файле стилей селекторы с добавочным «р», к примеру, такие — (или наподобие)) #content p{…….. text-indent:30px}

Внимание: наверняка у вас будет как-то по-другому выполнен пример нужного вам селектора. Не пугайтесь! Просто отыщете (опытным путём) нужные вам строки и добавьте к ним «наши» text-indent: 30px; ориентируйтесь, скажем так, по признаку р скажем так.

Теперь вы знаете, как сделать строку в абзаце красной…

На этом занавес представления опускается……на рампы пыль печальная ложится…

…вопросы в комментариях — помогу, в чём дюжу… mihalica.ru !

Нажатия на кнопочки определяют Ваше высокое гражданское сознание

Удачи в работе и творчестве..!

css красная строка отступ в начале строки

На чтение 5 мин. Просмотров 134 Опубликовано

Абзацы

Любой текст имеет свою уникальную структуру: книги разделены на части, разделы и главы, газеты и журналы имеет отдельные рубрики и подзаголовки, которые, в свою очередь, включают фрагменты текста, также имеющие собственную структуру: абзацы, отступы и пр.

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

Для создания таких структурных единиц текста, как абзацы, в HTML-документах используется тег

, который разделяет фрагменты текста вертикальным отступом (до и после абзаца добавляется пустая строка).

Примечание: по умолчанию расстояние между абзацами равно 1em (em – это единица измерения равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.

Для изменения отступов между абзацами, без изменения размера шрифта, можно воспользоваться CSS свойством margin.

Не забывайте про закрывающий тег

Большинство браузеров будут отображать HTML документ корректно, даже если вы забыли про закрывающий тег.

Этот код будет работать в большинстве браузеров, но не полагайтесь на это. Забытый закрывающий тег может привести к непредвиденным результатам или ошибкам.

Красная строка

Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» – это означает начало новой мысли, главы или части.

Однако при создании веб-страниц оформление красной строки используется достаточно редко, несмотря на то, что она позволяет с гораздо большим удобством воспринимать текст в визуальном плане, что для традиционного читателя достаточно важно – не всем удобно читать электронный вариант текста.

Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent, которое позволяет поставить отступ перед первым предложением:

В примере, приведенном выше, первая строка каждого абзаца на странице будет начинаться с отступа в 25px. Пример, расположенный ниже, демонстрирует, как можно задать красную строку только для определенного абзаца на странице.

Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства ( например: -30px).

Свойство CSS text-indent служит для задания отступов в начале абзаца.

Синтаксис CSS text-indent

Где value принимает значение в пикселях или в процентах. Например

Пример: как отступ в начале абзаца для первой строки

Приведем пример с отступом в начале первой строки каждого абзаца в размере 20 пикселей.

На странице преобразуется в следующее

Пример с отступом. Выравнивание текста по левому краю. Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Отступы можно также задавать и более “изощренным” способом. Через знак пробела

Чтобы сделать отступ перед текстом, добавим перед текстом html код пробела – . Например

Но это стоит делать лишь в редких исключениях. Потому что для этого есть свойство CSS text-indent .

Бывают и еще более сильные изощрения. Можно в начале каждой строки вставлять “невидимое” изображение или наоборот видимое, если есть цель чем-то приукрасить начало абзаца. Например

text-indent

Что такое text-indent CSS

Положительное значение свойства text-indent определяет длину отступа первой строки элемента. Отрицательное значение — длину выступа.

Значение text-indent в процентах устанавливает отступ или выступ первой строки элемента в процентах от ширины элемента.

Красная строка в HTML: как сделать отступ первой строки абзаца

Разбивать текст на абзацы следует с помощью тега

могут быть следующие дочерние элементы [w3.org]: a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr.

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

Неудобно, что свойство наследуется и у inline-block элементов тоже присутствует отступ слева до содержимого. На inline элементы оно не распространяется, так как должно быть задано только блочным элементам.

Запретить наследование text-indent

Теперь свойство не наследуется и у inline-block элементов отсутствует отступ слева до содержимого.

Отодвигать только текст красной строки абзаца

Предложение после картинки не смещёно, так как оно находится уже на второй строке.

Вместо text-indent можно использовать margin для псевдоэлемента ::first-letter .

Предложение после картинки не смещёно, так как первой букве первой строки блока предшествует другой элемент строки.
initial 0
inherit наследует значение родителя
unset наследует значение родителя

Css отступ текста от края

Веб-ресурс оценивается пользователями по его внешней привлекательности. Поэтому даже информационно полезный текст может быть не прочитан из-за того, что он некачественно оформлен. Вывод – нужно тщательно и внимательно подходить не только к смысловому содержанию страниц сайта, но и к его визуальному представлению. Появление технологии CSS расширило возможности создания привлекательных статей. Одно из свойств, предназначенных для облегчения восприятия написанного – отступ текста CSS.

Поля и отступы: в чём разница?

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

  • поле задаётся свойством padding, отступ – margin;
  • поле определяется промежутком между содержимым и границей блока, отступ – между границами соседних блоков;
  • поля могут как учитываться в размерах элемента (ширине и высоте), так и нет.

Свойство margin

Итак, чтобы задать горизонтальный или вертикальный отступ текста CSS, используют конструкцию margin. Данное свойство применяется к тегу

задающего абзац документа. В самом простом случае оно записывается как:

Такая строчка означает, что вокруг блока текста (или любого другого блока) со всех сторон будет сделан отступ в 12 пикселей. Чтобы увеличить промежуток, например, в три раза, достаточно записать:

Но что делать, если интервал между блоками должен быть разный с каждой стороны? Разработчики веб-страниц используют несколько форм записи:

  1. margin: 11px 22px.
  2. margin: 11px 22px 33px.
  3. margin: 11px 22px 33px 44px.

В первом примере от нижней и верхней границ блока будут сделаны отступы по 11 пикселей, по бокам блока – по 22 пикселя. Согласно второй форме записи, между верхним краем блока и контентом будет 11 пикселей, между нижним – 33 пикселя, по бокам – по 22 пикселя. В третьем случае отступ текста CSS будет иметь значение 11 пикселей сверху, 22 пикселя справа, 33 пикселя снизу и 44 пикселя слева.

Также доступна возможность записи расстояния до границы блока только с одной стороны: margin-top, margin-bottom, margin-left, margin-right. Переведя названия свойств на русский язык, несложно догадаться об их назначении. Например, следующая запись говорит о том, что отступ справа будет равен 22 пикселя:

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

Свойство margin имеет особенность, которую должен помнить разработчик, когда использует отступ текста CSS по вертикали. Интервалы соседних элементов не суммируются, а налагаются друг на друга. Например, пусть один из блоков имеет margin-bottom: 15px, а примыкающий к нему снизу блок margin-top: 35px. Школьная арифметика и здравый смысл подсказывают, что общий отступ между ними будет 50 пикселей. На практике это не так. Блок с большим значением свойства margin «поглотит» своего соседа. В итоге интервал между элементами будет 35 пикселей.

«Красная» строка

Оформляя документ в текстовом редакторе, пользователи предпочитают задавать каждый новый абзац с помощью «красной» строки. С помощью CSS отступ текста слева несложно сделать – используется конструкция text-indent. Записывается она так:

То есть первая строка абзаца будет сдвинута относительного левого края на 11 пикселей. Чтобы текст на веб-странице больше походил на документ в редакторе, следует дополнительно установить выравнивание по ширине, то есть записать:

Помимо пикселей, при описании разметки допускается использование других единиц – дюймов, пунктов, процентов. Пусть блок имеет отступ текста CSS, равный 10%. При ширине блока, равной 500 пикселям, красная строка будет составлять 50 пикселей (10% от 500).

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

Удивительно, но абзацный отступ может принимать и отрицательные значения! В этом случае формируются так называемые выступы, то есть основной текст остаётся на месте, а первая строка смещается влево на 22 пикселя:

Чтобы буквы не перешли за левую границу браузера, дополнительно к text-indent нужно использовать конструкцию для задания поля:

Полезные рекомендации

Основные свойства CSS для форматирования текста рассмотрены. А закрепить их поможет практика. Вот несколько заключительных советов, как применять изученный материал при разработке веб-сайтов:

  • красная строка и отступ текста – разные понятия, и для их указания используются разные свойства;
  • для вертикальных отступов правила математики не действуют – интервалы накладываются, «побеждает» элемент с большим значением;
  • отрицательный абзацный отступ используют, чтобы указать первую строку абзаца с помощью изображения.

margin

Устанавливает величину отступа от каждого края элемента.

margin-bottom

Устанавливает величину отступа от нижнего края элемента.

margin-left

Устанавливает величину отступа от левого края элемента.

margin-right

Устанавливает величину отступа от правого края элемента.

margin-top

Устанавливает величину отступа от верхнего края элемента.

лабораторные работы и задачи по программированию и информатике, егэ по информатике

Отступы в CSS

Элемент в html — это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.

Отступы в CSS устанавливаются, например, для блочных элементов и таблиц. Рассмотрим основные свойства CSS для установки отступов:

Внешние отступы

Внешние отступы в CSS задаются при помощи свойства margin , которое устанавливает величину отступа от границ текущего элемента до внутренней границы его родительского элемента.

Свойство:

  • margin-bottom (нижний отступ)
  • margin-left (отступ слева)
  • margin-right (отступ справа)
  • margin-top (верхний отступ)

Значения:

Краткая запись:

margin:margin-top margin-right margin-bottom margin-left; margin:10px 20px 20px 30px;

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Внутренние отступы

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

Свойства:

  • padding-bottom (нижний отступ)
  • padding-left (отступ слева)
  • padding-right (отступ справа)
  • padding-top (верхний отступ)

Значения:

Краткая запись:

padding:padding-top padding-right padding-bottom padding-left; padding:10px 20px 20px 30px;

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Граница элемента (рамка)

Граница элемента в CSS устанавливается при помощи свойства border .

border-style (стиль границы)

Значения:

  • none (без границы)
  • dotted (из точек)
  • dashed (пунктирная)
  • solid (сплошная)
  • double (двойная)
  • groove (трехмерная)
  • ridge (трехмерная)
  • inset (трехмерная с тенью)
  • outset (трехмерная с тенью)

Пример:

border-width (ширина границы)

Значения:

  • thin (тонкая)
  • medium (средняя)
  • thick (толстая)
  • значение

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.

border-color (цвет границы)

Значения:

  • red (цвет)
  • rgb(255,0,0) (в системе rgb)
  • #ff0000 (в шестнадцатиричной системе)
  • transparent (прозрачная)

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Краткая запись:

border:border-width border-style border-color; border: 1px solid #000;

Внешние границы (outline)

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

outline-color (цвет)

Значения:

  • red (цвет)
  • rgb(255,0,0) (в системе rgb)
  • #ff0000 (в шестнадцатеричной системе)
  • invert (инвертированный, противоположный)

outline-width (ширина)

Значения:

  • thin (тонкая)
  • medium (средняя)
  • thick (толстая)
  • значение

outline-style (стиль границы)

Значения:

  • none (без границы)
  • dotted (из точек)
  • dashed (пунктирная)
  • solid (сплошная)
  • double (двойная)
  • groove (трехмерная)
  • ridge (трехмерная)
  • inset (трехмерная с тенью)
  • outset (трехмерная с тенью)

Краткая запись:

outline:outline-color outline-style outline-width; outline: #0f0 solid thick;

Некоторые приемы с границей

Рамка вокруг изображения

Пример:

Результат:

Двойная рамка с использованием CSS

Пример:

Результат:

Путь осилит идущий,

И поэтому я иду.
Через горы и пущи,
Через радость мою и беду.

Эффектные рамки для изображений

Курс CSS. Урок 11. Выравнивание текста, «красная» строка.

Курс CSS. Урок 11. Выравнивание текста, «красная» строка.

Курс CSS. Урок 11. Выравнивание текста, «красная» строка. Если не дано никаких указаний-свойства, то по умолчанию текст выравнивается по левому краю. Достигается требуемый способ выравнивания с помощью свойства (property) text-align: text-align:left; — по левому краю (по умолчанию), text-align:center; — по центру, text-align:right; — по правому краю, text-align:justify; — по ширине текста. Эффект «красной» строки, когда самая первая строка абзаца имеет определенный отступ от края достигается за счет свойства text-indent. Примеры: text-indent:32px; — отступ в первой строке равен 32 пикселям, text-indent:12%; — отступ в первой строке равен 12%. © Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru

11. Выравнивание текста, «красная» строка.

В этом уроке мы затронем еще 2 свойства по оформлению текста: его выравнивание и «красная» строка.

Также как есть определенные базовые значения по размеру шрифта и его насыщенности (жирности), также есть и базовое значение по выравниванию текста. Если не дано никаких указаний-свойства, то по умолчанию текст выравнивается по левому краю.

Но часто бывает необходимо применить иной способ выравнивания. Достигается требуемый способ выравнивания с помощью свойства (property) text-align:

Выравнивание текста:

text-align:left; — по левому краю (по умолчанию)

text-align:center; — по центру

text-align:right; — по правому краю

text-align:justify; — по ширине текста, т.е. по обоим краям (как в книгах и газетах). Эффект достигается за счет равномерного автоматического добавления пробелов между словами в абзаце.


Эффект «красной» строки, когда самая первая строка абзаца имеет определенный отступ от края достигается за счет свойства text-indent: «Красная» строка:

text-indent:32px; — отступ в первой строке равен 32 пикселям.

text-indent:12%; — отступ в первой строке равен 12%.

Для «красной» строки можно использовать и другие еденицы измерения, то разумнее всего использовать пиксели и проценты.

На базе данного теоретического материала попробуем создать соответствующие классы:

.text_align_left {
	text-align:left; 
	background-color:#F0F0F0;
	text-indent:5%;
}
.text_align_center {
	text-align:center; 
	background-color:#F0FFFF;
	text-indent:5%;
}
.text_align_right {
	text-align:right; 
	background-color:#F0F0FF;
	text-indent:5%;
}
.text_align_justify {
	text-align:justify; 
	background-color:#F0FFF0;
	text-indent:5%;
}

Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_011_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте…
css_011_001.zip ← скачайте пример, чтобы установить на свой сайт…

***** Машина-Функционал для передвижения по страничкам курса CSS *****

Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.

Если вы планируете вернуться сюда позднее…
Пожалуйста, запомните эту страничку —
URL: http://kocby.ru/css/p011.html

Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!

Свойство text-indent | CSS справочник

CSS свойства

Определение и применение

CSS свойство text-indent задает отступ первой строки в текстовом блоке (красная строка).

Поддержка браузерами

CSS синтаксис:

text-indent:"length | initial | inherit";

JavaScript синтаксис:

object.style.textIndent = "40%"

Значения свойства

ЗначениеОписание
lengthОпределяет размер отступа в единицах измерения CSS (px, pt, cm, em, и т.д.). Значение по умолчанию 0.
Допускается использование отрицательных значений, при этом, первая строка будет иметь отступ слева.
%Определяет размер отступа в процентах.
Допускается использование отрицательных значений, при этом, первая строка будет иметь отступ слева.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Да.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Свойство text-align.</title>
<style> 
.test {
text-indent : 0px; /* задаём отступ для первой строки текстового блока 0px (это значение по умолчанию). */
width : 500px; /* задаём ширину текстового блока. */
}
.test2 {
text-indent : 40px; /* задаём отступ для первой строки текстового блока 40px. */
width : 500px; /* задаём ширину текстового блока. */
}
.test3 {
text-indent : -20px; /* задаём отрицательный отступ для первой строки текстового блока. */
width : 500px; /* задаём ширину текстового блока. */
}
</style>
</head>
	<body>
		<p class = "test">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
		<p class = "test2">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
		<p class = "test3">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
	</body>
</html>
Пример указания отступа первой строки в текстовом блоке, используя CSS.CSS свойства

Как сделать отступ первой строки в html

Красная строка css или отступ первой строки абзаца

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

Добавляется этот отступ с помощью CSS свойства text-indent, в значение, которого указывается длина отступа. В качестве значения необходимо использовать одно из всех доступных единиц измерения в CSS (пиксели — px, дюймы — in, пункты – pt, проценты и др. )

Например, зададим для каждой первой строки, у каждого абзаца, левый отступ в размере 20px.

Открываем страницу в бразуере и смотрим на результат:

Если хотим задать отступ лишь для первого абзаца, то в этом случае лучше воспользоваться таким селектором как класс. То есть, для начала задаем класс первому абзацу, потом в стилях для этого класса задаем правило text-indent с нужным значением.

Сейчас я продемонстрирую Вам это на примере.

И вот результат:

И на этом все, больше нечего рассказать по этой теме. Теперь Вы знаете, как задать левый отступ для первой строки абзаца с помощью CSS свойства text-indent.

Похожие статьи:
  • Как изменить расстояние между строками в CSS с помощью свойства line-height
  • Селекторы в CSS
Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Свойство CSS text-indent

Свойство CSS text-indent служит для задания отступов в начале абзаца.

Синтаксис CSS text-indent

Где value принимает значение в пикселях или в процентах. Например

Пример: как отступ в начале абзаца для первой строки

Приведем пример с отступом в начале первой строки каждого абзаца в размере 20 пикселей.

На странице преобразуется в следующее

Пример с отступом. Выравнивание текста по левому краю. Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Отступы можно также задавать и более «изощренным» способом. Через знак пробела

Чтобы сделать отступ перед текстом, добавим перед текстом html код пробела — &nbsp;. Например

Но это стоит делать лишь в редких исключениях. Потому что для этого есть свойство CSS text-indent .

Бывают и еще более сильные изощрения. Можно в начале каждой строки вставлять «невидимое» изображение или наоборот видимое, если есть цель чем-то приукрасить начало абзаца. Например

Выравнивание и красная строка в CSS

В этой статье рассмотрим, как выровнять текст на странице, и как сделать красную строку, средствами СSS.

Выравнивание задаётся свойством “text-align”, и имеет 4 значения:

left – выравнивание по левому краю
center – выравнивание по центру
right – выравнивание по правому краю
justify – выравнивание по ширине

Красная строка задаётся свойством text-indent. Значение задаётся в пикселях, кому сколько нравится

И откроем страничку в браузере.

Результат неизменно превосходный. Все абзацы обзавелись красной строкой.

А если Вы хотите к красной строке ещё и красивую заглавную букву, то об этом на странице Красивая заглавная буква


Перемена

80-летний дед жалуется врачу:
&#8212; У меня после секса шум в ушах… что, это такое?
&#8212; Дедуля, это аплодисменты. »

HTML: Абзац и красная строка

HTML: Абзац и красная строка

  • Абзацы
  • Красная строка

Абзацы

Любой текст имеет свою уникальную структуру: книги разделены на части, разделы и главы, газеты и журналы имеет отдельные рубрики и подзаголовки, которые, в свою очередь, включают фрагменты текста, также имеющие собственную структуру: абзацы, отступы и пр.

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

Для создания таких структурных единиц текста, как абзацы, в HTML-документах используется тег <p> , который разделяет фрагменты текста вертикальным отступом (до и после абзаца добавляется пустая строка).

Примечание: по умолчанию расстояние между абзацами равно 1em (em — это единица измерения равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.

Для изменения отступов между абзацами, без изменения размера шрифта, можно воспользоваться CSS свойством margin .

Не забывайте про закрывающий тег

Большинство браузеров будут отображать HTML документ корректно, даже если вы забыли про закрывающий тег.

1

2

<p>Абзац

<p>Другой абзац</p>

Этот код будет работать в большинстве браузеров, но не полагайтесь на это. Забытый закрывающий тег может привести к непредвиденным результатам или ошибкам.

Красная строка

Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» — это означает начало новой мысли, главы или части.

Однако при создании веб-страниц оформление красной строки используется достаточно редко, несмотря на то, что она позволяет с гораздо большим удобством воспринимать текст в визуальном плане, что для традиционного читателя достаточно важно – не всем удобно читать электронный вариант текста.

Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent , которое позволяет поставить отступ перед первым предложением:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<html>

  <head>

    <style>

      p { text-indent: 25px; }

    </style>

  <head>

  <body>

 

    <p>

      Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым

      некоторые относят и красную строку, считая, что употребление ее не так уж и важно.

      Однако надо понимать, что любая запятая несет в себе как эстетическую, так

      и смысловую нагрузку, а не только является данью правилам грамматики – это

      касается и форматирования.

    </p>

 

  </body>

</html>

Попробовать »

В примере, приведенном выше, первая строка каждого абзаца на странице будет начинаться с отступа в 25px. Пример, расположенный ниже, демонстрирует, как можно задать красную строку только для определенного абзаца на странице.

1

2

3

4

5

6

7

<p>

  Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым

  некоторые относят и красную строку, считая, что употребление ее не так уж и важно.

  Однако надо понимать, что любая запятая несет в себе как эстетическую, так

  и смысловую нагрузку, а не только является данью правилам грамматики – это

  касается и форматирования.

</p>

Попробовать »

Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства ( например: -30px).

С этой темой смотрят:

  • HTML заголовки, линии и комментарии
  • HTML перенос строки
  • HTML теги для текста
  • Выравнивание текста
  • Как изменить шрифт
  • Стиль и размер шрифта

Что означает красный перечеркнутый элемент в сетке свойств CSS?

Инструменты веб-разработчика

В Visual Studio Orcas сетка свойств CSS отображает красную зачеркивание, когда она хочет сообщить вам, что свойство либо не унаследовано , либо переопределено правилом с более высоким приоритетом.

 

 Прочитайте всплывающую подсказку, когда вы увидите красный зачеркнутый объект, и он даст вам точную причину зачеркнутого.Вот различные причины, по которым вы можете видеть этот красный перечеркнутый элемент в сетке свойств CSS.

 

1. Свойство переопределяется встроенным стилем

 

Вы увидите эту всплывающую подсказку, когда свойство CSS переопределяется встроенным стилем тега HTML. Давайте рассмотрим пример:

 

 

<тип стиля = ”text/css”>

.MyStyle {цвет: #808000;}

 

 

 

Здесь у нас есть свойство цвета, примененное к HTML-кнопке через встроенный стиль, а также через атрибут класса.Класс объявлен в блоке стилей.

Поскольку свойство цвета, установленное во встроенном стиле, имеет приоритет над классом, цвет в MyStyle будет перечеркнут красным. Вы увидите всплывающую подсказку:

 

 

2. Свойство переопределено правилом CSS

 

Вы увидите такую ​​всплывающую подсказку, когда свойство CSS переопределяется другим правилом CSS.

 

В следующем примере свойство «цвет» применяется к DIV, а также устанавливается для элемента управления HTML-кнопки в DIV через MyStyle.

 

 

<тип стиля = ”text/css”>

.MyStyle {цвет: #808000;}

 

 

 

Выберите свойство «цвет», перечеркнутое красным, в режиме сводки.Подсказка инструмента будет следующей:

 

 

3. Свойство переопределяется правилом, где оно отмечено !important

 

Этот тип всплывающей подсказки отображается, когда свойство CSS переопределяется свойством другого правила CSS, потому что свойство было помечено как важное.

 

Скажем, у нас есть

 

<тип стиля = ”text/css”>

P{ цвет:Зеленый!важно }

 

Привет, мир!!

 

 

, затем текст Hello World!! будет отображаться зеленым, а не красным, несмотря на то, что красный цвет применяется через встроенный.Это связано с тем, что цвет свойства: зеленый помечен как важный. В этом случае подсказка будет выглядеть так:

.

 

 

4. Имущество не передается по наследству

 

Эта всплывающая подсказка появляется, когда свойство не наследуется дочерними тегами.

 

В приведенном ниже примере у нас есть кнопка внутри DIV. Обратите внимание, что свойство высоты здесь установлено в DIV.

 

 

 

 

 

 

Теперь, если вы выберете кнопку и откроете сетку свойств CSS, вы увидите свойство высоты, перечеркнутое красным.Подсказка в этом случае будет выглядеть так:

.

 

 

5. Свойство не наследуется, но может отображаться в дочерних элементах, которые не устанавливают это свойство

 

Это всплывающая подсказка, когда свойство не наследуется дочерними тегами. Это похоже на #4, за исключением того, что оно применяется только к background-image и background-color . Для этих свойств по умолчанию установлено значение none и Transparent , поэтому значение родительского тега видно через дочерний тег.

 

 

    Привет, мир

 

 

Здесь у нас есть SPAN внутри DIV. DIV имеет фоновый цвет, установленный через встроенное свойство. Теперь, если вы выберете SPAN и откроете сетку свойств CSS, вы увидите фоновый цвет, зачеркнутый красным. Подсказка в этом случае будет выглядеть так:

.

 

 

Это были все причины, по которым свойство может быть зачеркнуто красным в сетке свойств CSS.

 

— By Питер Спада и Решми Мангалор

О расширении Red Line — Red Extension

Соединение станции 95th Street со 130th Street

Обзор

Транзитное управление Чикаго (CTA) предлагает улучшить транспорт, продлив красную линию от терминала 95-й улицы до района 130-й улицы.Этот проект является частью программы Red Ahead, направленной на расширение и улучшение всей красной линии.

 

Цель и потребность

Назначение красной линии:

  • Сокращение времени в пути для жителей как в пределах проектной зоны, так и к югу от нее.
  • Улучшить мобильность и доступность для жителей, зависящих от общественного транспорта, в районе реализации проекта.
  • Улучшить скоростное железнодорожное сообщение с изолированными районами и обеспечить жизнеспособные связи между доступным жильем (например,g., проект государственного жилья Altgeld Gardens), рабочие места, услуги и возможности для получения образования, тем самым повышая уровень жизни и жизнеспособность района.
  • Обеспечьте возможность потенциальных соединений и соединений с другими видами общественного транспорта, включая региональную пригородную железную дорогу в районе проекта.
  • Стимулировать экономическое развитие в районе проекта, где новые станции могут послужить катализатором возрождения района и помочь обратить вспять десятилетия сокращения инвестиций в местные деловые районы.
     


Проект RLE необходим для решения следующих проблем:

  • Транзитные поездки на работу для жителей Дальнего Саутсайда длиннее, чем для пассажиров семи округов Чикаго в целом.
  • Зависимое от общественного транспорта население в зоне реализации проекта имеет ограниченный прямой доступ к скоростным железнодорожным перевозкам.
  • Территория проекта географически изолирована от основных центров деятельности и предоставляет жителям ограниченные транспортные возможности, что ограничивает доступ между доступным жильем и центрами занятости за пределами территории проекта.
  • Существующие транзитные рынки недостаточно обслуживаются, а транспортное сообщение в районе реализации проекта затруднено.
  • Сокращение инвестиций и ограниченное экономическое развитие в зоне реализации проекта негативно сказались на сообществах Дальнего Южного побережья.
     

 

Варианты проекта

CTA начал разработку альтернатив, которые изучаются в проекте EIS во время анализа альтернатив (AA), который проводился с 2006 по 2009 год. (открытые дома и встречи с заинтересованными сторонами), а также предварительный анализ потенциальных воздействий и затрат.
При подготовке проекта Отчета о воздействии на окружающую среду (EIS) CTA оценил следующие альтернативы и варианты:

  • Без альтернативы сборки
  • Скоростной автобус Альтернатива
  • Union Pacific Railroad Rail (UPRR) Альтернатива
    • Опция преимущественного проезда
    • Восточный вариант
    • Западный вариант
  • Альтернатива Halsted Rail

В августе 2014 года на основе технического анализа и отзывов общественности CTA объявила о сужении количества альтернатив до одной предпочтительной альтернативы с двумя вариантами — железнодорожной альтернативой UPRR.В проекте EIS будут обобщены экологические преимущества и воздействие альтернативы без строительства и двух альтернативных вариантов железной дороги UPRR: восточного варианта и западного варианта.
 

Нет альтернативы сборки

Альтернатива без строительства определяется как существующая транспортная система плюс любые совершенные улучшения транспорта, которые уже включены в Программу улучшения транспорта (TIP) Чикагского столичного агентства по планированию (CMAP) на 2010–2015 финансовый год. Все элементы альтернативы без сборки включены в каждую из других альтернатив.

Альтернатива без сборки включает следующее:

  • Существующая транспортная система
  • Запланированные улучшения транспорта, включая реконструкцию моста, проект улучшения терминала на 95-й улице, несколько проектов по улучшению дорог, включая обновление покрытия и согласование времени сигнала, работы на объектах Metra, строительство многофункциональной велосипедной/пешеходной дорожки и сохранение исторических объектов
  • Автобусный транспорт, ориентированный на сохранение существующих услуг и проектов

  

Железнодорожная альтернатива Union Pacific Railroad (UPRR) – предпочтительная местная альтернатива

Предлагаемая железнодорожная альтернатива UPRR продлит транзитную линию тяжелого железнодорожного транспорта от существующего терминала Red Line 95th Street до 130th Street.Железнодорожная альтернатива UPRR будет работать на эстакаде, идущей на юг от 95-й улицы вдоль скоростной автомагистрали I-57 на протяжении почти полумили до коридора UPRR в районе Эгглстон-авеню. Затем трасса повернет на юг вдоль коридора UPRR примерно до 111-й улицы, где повернет на юго-восток. К востоку от Саут-Прери-авеню трасса будет пересекать пути Canadian National / Metra Electric возле 119-й улицы, где она будет переходить на профиль на уровне, а затем продолжаться на юго-восток вдоль района пригородных перевозок Северной Индианы, Южного побережья Чикаго и железной дороги Южного Бена. (NICTD/CSS & SBRR) полоса отчуждения по участку полосы гавани Индианы (IHB) до 130-й улицы.12 августа 2009 г. Совет по транспорту Чикаго выбрал альтернативу UPRR в качестве предпочтительной на местном уровне альтернативы.

Предпочтительная местная альтернатива будет включать следующие функции:

  • Улучшения транспорта, которые уже включены в программу усовершенствования транспорта Чикагского столичного агентства по планированию на 2010-2015 финансовый год, как описано в альтернативе
  • без строительства
  • Расширение линии тяжелого железнодорожного транспорта протяженностью 5,3 мили от терминала 95th Street до 130th Street
  • Четыре новые станции на 103-й улице, 111-й улице, Мичиган-авеню и 130-й улице
  • Новые парковки и автовокзалы на каждой станции
  • Автобусный транзит с юга к новым станциям для более быстрого проезда в центр Чикаго
  • Новый двор и магазин на 120-й улице


В проекте EIS изучаются два варианта выравнивания:

  • Восточный вариант
    В соответствии с этим вариантом эстакада CTA будет размещена непосредственно к востоку от полосы отчуждения Union Pacific Railroad от 99-й улицы до 118-й улицы.
  • Западный вариант
    В соответствии с этим вариантом эстакада CTA будет размещена непосредственно к западу от полосы отчуждения Union Pacific Railroad от 99-й улицы к северу от 118-й улицы.

Предлагаемое направление линии скоростного транспорта будет одинаковым для двух восточного и западного вариантов от 95-й улицы до 99-й улицы и от 118-й улицы до 130-й улицы.

Цвет оформления текста — попутный ветер CSS

наследование украшения цвет украшения текста: наследование;
декор-текущий текст-декор-цвет: текущий цвет;
декоративный прозрачный текстовый декоративный цвет: прозрачный;
декоративный черный текстовый декоративный цвет: #000;
декоративный белый текстовый декоративный цвет: #fff;
декор-сланец-50 текст-декор-цвет: #f8fafc;
украшение-сланец-100 цвет-украшения-текста: #f1f5f9;
украшение-сланец-200 текст-украшение-цвет: #e2e8f0;
украшение-сланец-300 текст-украшение-цвет: #cbd5e1;
декор-сланец-400 текст-декор-цвет: #94a3b8;
декор-сланец-500 текст-декор-цвет: #64748b;
декор-сланец-600 текст-декор-цвет: #475569;
декор-сланец-700 текст-декор-цвет: #334155;
декор-сланец-800 текст-декор-цвет: #1e293b;
декор-сланец-900 текст-декор-цвет: #0f172a;
декор-серый-50 текст-декор-цвет: #f9fafb;
декоративный серый-100 текстовый декоративный цвет: #f3f4f6;
декор-серый-200 текст-декор-цвет: #e5e7eb;
декоративный серый-300 текстовый декоративный цвет: #d1d5db;
декор-серый-400 текст-декор-цвет: #9ca3af;
украшение-серый-500 текст-украшение-цвет: #6b7280;
украшение-серый-600 текст-украшение-цвет: #4b5563;
декор-серый-700 текст-декор-цвет: #374151;
украшение-серый-800 текст-украшение-цвет: #1f2937;
декор-серый-900 текст-декор-цвет: #111827;
декор-цинк-50 текст-декор-цвет: #fafafa;
декор-цинк-100 текст-декор-цвет: #f4f4f5;
декор-цинк-200 текст-декор-цвет: #e4e4e7;
декор-цинк-300 текст-декор-цвет: #d4d4d8;
декор-цинк-400 текст-декор-цвет: #a1a1aa;
декор-цинк-500 текст-декор-цвет: #71717a;
декор-цинк-600 текст-декор-цвет: #52525b;
декор-цинк-700 текст-декор-цвет: #3f3f46;
декор-цинк-800 текст-декор-цвет: #27272a;
декор-цинк-900 текст-декор-цвет: #18181b;
декор-нейтральный-50 текст-декор-цвет: #fafafa;
оформление-нейтральный-100 текст-украшение-цвет: #f5f5f5;
украшение-нейтральный-200 текст-украшение-цвет: #e5e5e5;
украшение-нейтральный-300 текст-украшение-цвет: #d4d4d4;
оформление-нейтральный-400 текст-украшение-цвет: #a3a3a3;
декоративный-нейтральный-500 текстовый-декоративный-цвет: #737373;
декор-нейтральный-600 текст-декор-цвет: #525252;
оформление-нейтральный-700 текст-украшение-цвет: #404040;
оформление-нейтральный-800 текст-украшение-цвет: #262626;
оформление-нейтральный-900 текст-украшение-цвет: #171717;
декор-камень-50 текст-декор-цвет: #fafaf9;
декоративный камень-100 текстовый декоративный цвет: #f5f5f4;
декоративный камень-200 текстовый декоративный цвет: #e7e5e4;
декор-камень-300 текст-декор-цвет: #d6d3d1;
декоративный камень-400 текстовый декоративный цвет: #a8a29e;
украшение-камень-500 текст-украшение-цвет: #78716c;
украшение-камень-600 текст-украшение-цвет: #57534e;
украшение-камень-700 текст-украшение-цвет: #44403c;
украшение-камень-800 текст-украшение-цвет: #292524;
украшение-камень-900 текст-украшение-цвет: #1c1917;
украшение-красный-50 текст-украшение-цвет: #fef2f2;
украшение-красный-100 текст-украшение-цвет: #fee2e2;
украшение-красный-200 текст-украшение-цвет: #fecaca;
украшение-красный-300 текст-украшение-цвет: #fca5a5;
украшение-красный-400 текст-украшение-цвет: #f87171;
украшение-красный-500 текст-украшение-цвет: #ef4444;
украшение-красный-600 текст-украшение-цвет: #dc2626;
украшение-красный-700 текст-украшение-цвет: #b91c1c;
украшение-красный-800 текст-украшение-цвет: #991b1b;
украшение-красный-900 текст-украшение-цвет: #7f1d1d;
украшение-оранжевый-50 текст-украшение-цвет: #fff7ed;
украшение-оранжевый-100 текст-украшение-цвет: #ffedd5;
украшение-оранжевый-200 текст-украшение-цвет: #fed7aa;
украшение-оранжевый-300 текст-украшение-цвет: #fdba74;
украшение-оранжевый-400 текст-украшение-цвет: #fb923c;
украшение-оранжевый-500 текст-украшение-цвет: #f97316;
украшение-оранжевый-600 текст-украшение-цвет: #ea580c;
украшение-оранжевый-700 текст-украшение-цвет: #c2410c;
украшение-оранжевый-800 текст-украшение-цвет: #9a3412;
украшение-оранжевый-900 цвет текста-украшения: #7c2d12;
украшение-янтарь-50 текст-украшение-цвет: #fffbeb;
украшение-янтарь-100 цвет-украшения текста: #fef3c7;
украшение-янтарный-200 текст-украшение-цвет: #fde68a;
украшение-янтарный-300 текст-украшение-цвет: #fcd34d;
украшение-янтарь-400 текст-украшение-цвет: #fbbf24;
украшение-янтарный-500 текст-украшение-цвет: #f59e0b;
украшение-янтарный-600 текст-украшение-цвет: #d97706;
декоративный-янтарный-700 текстовый-декоративный-цвет: #b45309;
украшение-янтарный-800 текст-украшение-цвет: #92400e;
декор-янтарь-900 текст-декор-цвет: #78350f;
украшение-желтый-50 текст-украшение-цвет: #fefce8;
украшение-желтый-100 текст-украшение-цвет: #fef9c3;
украшение-желтый-200 текст-украшение-цвет: #fef08a;
украшение-желтый-300 текст-украшение-цвет: #fde047;
украшение-желтый-400 текст-украшение-цвет: #facc15;
украшение-желтый-500 текст-украшение-цвет: #eab308;
украшение-желтый-600 текст-украшение-цвет: #ca8a04;
украшение-желтый-700 текст-украшение-цвет: #a16207;
украшение-желтый-800 текст-украшение-цвет: #854d0e;
украшение-желтый-900 текст-украшение-цвет: #713f12;
украшение-лайм-50 текст-украшение-цвет: #f7fee7;
украшение-лайм-100 текст-украшение-цвет: #ecfccb;
украшение-лайм-200 цвет-украшения текста: #d9f99d;
украшение-лайм-300 текст-украшение-цвет: #bef264;
декор-лайм-400 текст-декор-цвет: #a3e635;
декор-лайм-500 текст-декор-цвет: #84cc16;
декор-лайм-600 текст-декор-цвет: #65a30d;
украшение-лайм-700 цвет-украшения текста: #4d7c0f;
декор-лайм-800 текст-декор-цвет: #3f6212;
декор-лайм-900 текст-декор-цвет: #365314;
декоративный зеленый-50 текстовый декоративный цвет: #f0fdf4;
украшение-зеленый-100 текст-украшение-цвет: #dcfce7;
декоративный зеленый-200 текстовый декоративный цвет: #bbf7d0;
украшение-зеленый-300 текст-украшение-цвет: #86efac;
украшение-зеленый-400 текст-украшение-цвет: #4ade80;
украшение-зеленый-500 текст-украшение-цвет: #22c55e;
украшение-зеленый-600 текст-украшение-цвет: #16a34a;
украшение-зеленый-700 текст-украшение-цвет: #15803d;
украшение-зеленый-800 текст-украшение-цвет: #166534;
украшение-зеленый-900 текст-украшение-цвет: #14532d;
украшение-изумруд-50 текст-украшение-цвет: #ecfdf5;
украшение-изумруд-100 цвет-украшения-текста: #d1fae5;
украшение-изумруд-200 текст-украшение-цвет: #a7f3d0;
украшение-изумруд-300 текст-украшение-цвет: #6ee7b7;
украшение-изумруд-400 текст-украшение-цвет: #34d399;
декор-изумруд-500 текст-декор-цвет: #10b981;
украшение-изумруд-600 текст-украшение-цвет: #059669;
украшение-изумруд-700 текст-украшение-цвет: #047857;
украшение-изумруд-800 текст-украшение-цвет: #065f46;
украшение-изумруд-900 текст-украшение-цвет: #064e3b;
украшение-бирюзовый-50 текст-украшение-цвет: #f0fdfa;
украшение-бирюзовый-100 текст-украшение-цвет: #ccfbf1;
декоративный-бирюзовый-200 текстовый-декоративный-цвет: #99f6e4;
декоративный-бирюзовый-300 текстовый-декоративный-цвет: #5eead4;
декоративный-бирюзовый-400 текстовый-декоративный-цвет: #2dd4bf;
декоративный-бирюзовый-500 текстовый-декоративный-цвет: #14b8a6;
украшение-бирюзовый-600 текст-украшение-цвет: #0d9488;
украшение-бирюзовый-700 текст-украшение-цвет: #0f766e;
декор-бирюзовый-800 текст-декор-цвет: #115e59;
декоративный-бирюзовый-900 текстовый-декоративный-цвет: #134e4a;
украшение-голубой-50 текст-украшение-цвет: #ecfeff;
украшение-голубой-100 текст-украшение-цвет: #cffafe;
украшение-голубой-200 текст-украшение-цвет: #a5f3fc;
украшение-голубой-300 текст-украшение-цвет: #67e8f9;
украшение-голубой-400 цвет-украшения текста: #22d3ee;
украшение-голубой-500 текст-украшение-цвет: #06b6d4;
украшение-голубой-600 текст-украшение-цвет: #0891b2;
украшение-голубой-700 текст-украшение-цвет: #0e7490;
украшение-голубой-800 текст-украшение-цвет: #155e75;
украшение-голубой-900 текст-украшение-цвет: #164e63;
украшение-небо-50 текст-украшение-цвет: #f0f9ff;
украшение-небо-100 текст-украшение-цвет: #e0f2fe;
украшение-небо-200 текст-украшение-цвет: #bae6fd;
украшение-небо-300 текст-украшение-цвет: #7dd3fc;
украшение-небо-400 текст-украшение-цвет: #38bdf8;
украшение-небо-500 текст-украшение-цвет: #0ea5e9;
украшение-небо-600 текст-украшение-цвет: #0284c7;
украшение-небо-700 текст-украшение-цвет: #0369a1;
украшение-небо-800 текст-украшение-цвет: #075985;
украшение-небо-900 текст-украшение-цвет: #0c4a6e;
декоративный синий-50 текстовый декоративный цвет: #eff6ff;
украшение-синий-100 текст-украшение-цвет: #dbeafe;
украшение-синий-200 текст-украшение-цвет: #bfdbfe;
декоративный синий-300 текстовый декоративный цвет: #93c5fd;
украшение-синий-400 текст-украшение-цвет: #60a5fa;
украшение-синий-500 текст-украшение-цвет: #3b82f6;
украшение-синий-600 текст-украшение-цвет: #2563eb;
украшение-синий-700 текст-украшение-цвет: #1d4ed8;
украшение-синий-800 текст-украшение-цвет: #1e40af;
декоративный синий-900 текстовый декоративный цвет: #1e3a8a;
украшение-индиго-50 текст-украшение-цвет: #eef2ff;
украшение-индиго-100 текст-украшение-цвет: #e0e7ff;
украшение-индиго-200 цвет текста-украшения: #c7d2fe;
декор-индиго-300 текст-декор-цвет: #a5b4fc;
декор-индиго-400 текст-декор-цвет: #818cf8;
декор-индиго-500 текст-декор-цвет: #6366f1;
украшение-индиго-600 текст-украшение-цвет: #4f46e5;
декор-индиго-700 текст-декор-цвет: #4338ca;
декор-индиго-800 текст-декор-цвет: #3730a3;
декор-индиго-900 текст-декор-цвет: #312e81;
украшение-фиолетовый-50 текст-украшение-цвет: #f5f3ff;
украшение-фиолетовый-100 текст-украшение-цвет: #ede9fe;
украшение-фиолетовый-200 текст-украшение-цвет: #ddd6fe;
украшение-фиолетовый-300 текст-украшение-цвет: #c4b5fd;
украшение-фиолетовый-400 текст-украшение-цвет: #a78bfa;
украшение-фиолетовый-500 цвет текста-украшения: #8b5cf6;
украшение-фиолетовый-600 текст-украшение-цвет: #7c3aed;
украшение-фиолетовый-700 текст-украшение-цвет: #6d28d9;
украшение-фиолетовый-800 текст-украшение-цвет: #5b21b6;
украшение-фиолетовый-900 текст-украшение-цвет: #4c1d95;
украшение-фиолетовый-50 текст-украшение-цвет: #faf5ff;
украшение-фиолетовый-100 текст-украшение-цвет: #f3e8ff;
украшение-фиолетовый-200 текст-украшение-цвет: #e9d5ff;
украшение-фиолетовый-300 текст-украшение-цвет: #d8b4fe;
украшение-фиолетовый-400 текст-украшение-цвет: #c084fc;
украшение-фиолетовый-500 текст-украшение-цвет: #a855f7;
декор-фиолетовый-600 текст-декор-цвет: #9333ea;
украшение-фиолетовый-700 текст-украшение-цвет: #7e22ce;
украшение-фиолетовый-800 текст-украшение-цвет: #6b21a8;
украшение-фиолетовый-900 текст-украшение-цвет: #581c87;
украшение-фуксия-50 текст-украшение-цвет: #fdf4ff;
оформление-фуксия-100 текст-украшение-цвет: #fae8ff;
украшение-фуксия-200 цвет текста-украшения: #f5d0fe;
украшение-фуксия-300 текст-украшение-цвет: #f0abfc;
декор-фуксия-400 текст-декор-цвет: #e879f9;
декор-фуксия-500 текст-декор-цвет: #d946ef;
декор-фуксия-600 текст-декор-цвет: #c026d3;
декор-фуксия-700 текст-декор-цвет: #a21caf;
декор-фуксия-800 текст-декор-цвет: #86198f;
декор-фуксия-900 текст-декор-цвет: #701a75;
украшение-розовый-50 текст-украшение-цвет: #fdf2f8;
украшение-розовый-100 текст-украшение-цвет: #fce7f3;
украшение-розовый-200 текст-украшение-цвет: #fbcfe8;
украшение-розовый-300 текст-украшение-цвет: #f9a8d4;
украшение-розовый-400 текст-украшение-цвет: #f472b6;
украшение-розовый-500 текст-украшение-цвет: #ec4899;
украшение-розовый-600 текст-украшение-цвет: #db2777;
украшение-розовый-700 текст-украшение-цвет: #be185d;
украшение-розовый-800 текст-украшение-цвет: #9d174d;
украшение-розовый-900 текст-украшение-цвет: #831843;
украшение-роза-50 текст-украшение-цвет: #fff1f2;
украшение-роза-100 текст-украшение-цвет: #ffe4e6;
украшение-роза-200 текст-украшение-цвет: #fecdd3;
украшение-роза-300 текст-украшение-цвет: #fda4af;
украшение-роза-400 текст-украшение-цвет: #fb7185;
украшение-роза-500 текст-украшение-цвет: #f43f5e;
украшение-роза-600 текст-украшение-цвет: #e11d48;
украшение-роза-700 текст-украшение-цвет: #be123c;
украшение-роза-800 текст-украшение-цвет: #9f1239;
украшение-роза-900 текст-украшение-цвет: #881337;

На сайте внезапно появилась красная линия.Нужна помощь! — Общее — Форум

Б_Херст (Б. Херст) #1

Привет,

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

Вот мой сайт: https://digital-health-review.webflow.io/

прикреплен скриншот того, что я вижу

Сачин (Сачин Атрея) #2

Привет, @B_Hirst, добро пожаловать в сообщество webflow. Пожалуйста, проверьте свою структуру, так как вы добавили блок div с классом hover-line с приведенным ниже CSS

.

Удалите div , если вам не нужна разделительная линия.

надеюсь поможет

Б_Херст (Б. Херст) #3

Хорошо, глупый вопрос… как мне попасть в свою структуру?

МНМСЕО2020 (Кайл Мичем) #4

Красная линия соответствует вашей сетке.

Б_Херст (Б. Херст) #5

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

МНМСЕО2020 (Кайл Мичем) #6

Нажмите на 3 точки рядом с ноутбуком и снимите отметку с рентгеновского снимка или всего, что отмечено.

Мои инструкции могут немного отличаться, так как я разговариваю по мобильному телефону. Это просто по памяти.!
Скриншот_20210322-153242_Chrome|246×499

Б_Херст (Б. Херст) #7

Не повезло. не видел ничего, чтобы снять галочку

Б_Херст (Б. Херст) #8

исправили! Спасибо !!

горизонтальных линий | Учебники HTML

Есть много способов сделать ваши HTML-страницы более привлекательными и хорошо структурированными.В частности, горизонтальная линия может сыграть особую роль в том, чтобы сделать содержимое вашего сайта сбалансированным, четким и удобным для просмотра. Всякий раз, когда мы решаем внести какие-то большие изменения на наши веб-сайты, такие мелочи, как линии, могут иметь значение. Такие мелочи делают посыл вашего сайта более полным. Кроме того, они могут изменить визуальную привлекательность вашего веб-ресурса и то, как ваша аудитория воспринимает ваши данные.

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

Горизонтальная линия — это элемент HTML, который используется в качестве украшения вашей веб-страницы. Однако он также может пригодиться для множества других целей, например:

.

— разделитель, который визуально разделяет разные части вашего контента и ставит акцент там, где заканчивается одна идея и начинается другая.

— маркер, выделяющий некоторые значимые разделы веб-страницы.

— Горизонтальная линия считается одним из самых популярных и простых способов достижения самых разных целей на веб-сайте. Хотя на первый взгляд это может показаться простым, это многофункциональный элемент, который вы можете настроить в соответствии со своими конкретными требованиями. С помощью простых модификаций HTML-кода вашей веб-страницы вы можете настроить следующие характеристики горизонтальной линии:

Длина;

Ширина;

Цвет;

Выравнивание.

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

Горизонтальные линии очень полезны при разделении страницы на разные разделы. Чтобы добавить простую горизонтальную линию, просто введите , и вы получите следующее:


Как создать горизонтальную линию

Вы можете установить линию с помощью простого тега. Это сокращение от «Горизонтальное правило» и устанавливает классические внешние параметры.Отличие его от многих других в том, что он не нуждается в концевом теге и может существовать сам по себе. Вы можете изменить внешние характеристики элемента, используя дополнительные значения в теге:

Выглядит так. Например, если нам нужна длина 100 пикселей, мы должны установить такой тег: hr width = «100.

Выравнивание.
Выровнять линию можно по левому или правому краю, а также по центру. Эта функция действительна только в том случае, если вы уже указали параметр ширины, поскольку строка на всю страницу не может быть выровнена.Для выравнивания установите в теге «align» дополнительный атрибут и добавьте к нему направление: center — для центра, left — для левого и right — для правого выравнивания. Готовый тег в этом случае будет выглядеть так: если нам нужно установить выравнивание по центру для горизонтальной линии длиной 150 пикселей, то готовый тег будет выглядеть так: hr align=»center»width=» 150″. Обратите внимание, что «выравнивание», мера выравнивания, помещается в позицию 1, хотя атрибут зависит от ширины меры длины.
Ширина.

При желании вы также можете указать ширину, создав полужирное или тонкое подчеркивание. Этот критерий ни от чего не зависит и может использоваться самостоятельно без указания длины или выравнивания. Для этого используем атрибут size в теге и числовое значение, равное желаемой ширине в пикселях. Число указывается в кавычках после атрибута размера и символа «=».

Таким образом, если нам нужно создать линию шириной 15 пикселей, нам нужно создать следующий тег: hr size = «15».

Цвет.

Также устанавливается как самостоятельный индикатор. Для его изменения используйте атрибут цвета в сочетании с названием цвета в виде кода или на английском языке. Цвет указывается в кавычках после символа «=».

Таким образом, тег для стандартной белой линии можно записать двумя способами: hr color=»#FFFFFF» или hr color=»white»

Черный цвет можно создать с помощью кода # 000000.

Как сделать цветную горизонтальную линию?

Горизонтальные линии хорошо отделяют один блок текста от другого.Мелкий текст с горизонтальными линиями вверху и внизу привлекает к читателю больше внимания, чем обычный текст.

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

По умолчанию линия отображается серым цветом и с эффектом объема. Этот тип линии не всегда подходит под дизайн сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно относятся к этому вопросу, из-за чего вам придется использовать сразу несколько свойств стиля. В частности, более старые версии Internet Explorer используют свойство color для цвета линии, тогда как другие браузеры используют цвет фона.Но это еще не все, в этом случае обязательно укажите толщину линии (свойство высоты), отличное от нуля, и удалите границу вокруг линии, установив для свойства границы значение none. Сложив вместе все свойства селектора hr, мы получим универсальное решение для популярных браузеров.

Цвет горизонтальной линии час { граница: нет; /* Убираем границу */ цвет фона: красный; /*Цвет линии*/ красный цвет; /* Цвет линии для IE6-7 */ высота: 2 пикселя; / * Ширина линии * / } Текстовая строка
Примеры:

Это:

дает это:


Цвет: цвет линии:

Размер: Высота строки, выраженная в пикселях:

Ширина: Ширина линии, выраженная в процентах (%) или в пикселях (в моем примере это 50% от исходного размера):

или
Более продвинутый:

Это:

дает:


В данном случае мы использовали стиль:

Ширина границы 3 пикселя (3 пикселя)

с точкой

Базовый цвет черный: #000000

Точки синего цвета: #0099CC

Последний пример, чтобы объяснить больше, если это все еще необходимо ;):

Это

дает:


В этом случае чуть выше:

Ширина границы 2 пикселя (2 пикселя)

Штрих

Основной цвет белый: #FFFFFF

Серебристые штрихи: #C0C0C0

Возможные стили:

с точкой

— пунктир

-твердый

— двойной

-канавка

-начало

-вставка

-гребень

Это все, что я могу сказать о горизонтальных линиях!

Красная линия вокруг сообщения об ошибке в поле загрузки файла

Привет,

 

Я внедрил некоторые пользовательские CSS, чтобы изменить стиль сообщений об ошибках, и я очень доволен результатами.Единственное, что я хотел бы выяснить, это как удалить красноватую/розовую линию, которая появляется, когда я получаю сообщения об ошибках для кнопки загрузки нескольких файлов. Например, если я пытаюсь загрузить слишком большой файл или файл недопустимого типа, я получаю красную линию вокруг кнопки загрузки файла и сообщение об ошибке под ней. Пожалуйста, смотрите скриншот ниже. Я был бы очень рад, если бы смог избавиться от красной/розовой линии. Какой css мне нужно ввести, чтобы удалить эту строку?

 

 

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

 

.form-line-ошибка {

фон: нет повтора прокрутки 0 0 !важно;

}

 

.форма-сообщение об ошибке {

background:#fff !важно;

ширина: 185 пикселей;

-moz-box-shadow: нет !важно;

-webkit-box-shadow: нет !важно;

box-shadow: нет !важно;

отступ: 1px !важно;

}

 

.форма-ошибка-стрелка-внутренняя {

цвет границы: прозрачный !важно;

}

 

.form-validation-ошибка {

background-color:#fff;

граница: нет;

-moz-box-shadow:12px #fff;

-webkit-box-shadow: 12px #fff;

box-shadow: 12px #fff;

}

 

.form-ошибка-стрелка {

ширина: 0,1 пикселя;

высота: 0,1 пикселя;

цвет нижней границы: прозрачный !важно;

}

 

.обязательная форма {

цвет: красный;

}

 

.form-line-ошибка ввода,

.form-line-error textarea {

цвет границы: #ccc !важно;

-moz-box-shadow: нет !важно;

-webkit-box-shadow: нет !важно;

box-shadow: нет !важно;

}

 

.форма-кнопка-ошибка {

дисплей

: нет;

}

 

Заранее спасибо за помощь.Я признателен за это! Хорошего дня 🙂

 

— Мелисса

axure-redline-tool — нпм

Этот подключаемый модуль имитирует некоторые функции подключаемого модуля Measure for Sketch или InVision Inspect. Это приложение предназначено для тех, кто использует Axure в своих организациях и хотел бы предоставлять разработчикам всегда актуальные спецификации дизайна. Поскольку Axure не поддерживает плагины в самом приложении, этот код находится внутри и применяется к вашим проектам AxShare.

Супер базовая демонстрация

Использование плагина

Последняя версия

  

Текущая версия

  

Есть несколько способов использовать эту «установку» этого плагина. Самый простой вариант — скопировать приведенную выше ссылку на скрипт в свой проект AxShare в качестве плагина.Скопируйте сценарий той версии, которую хотите использовать, или просто используйте сценарий с пометкой «последний», чтобы всегда быть подписанным на последние обновления приложения. Код в сценариях выше обслуживается из CDN, чтобы обеспечить быстрый ответ, независимо от вашего местоположения. Если вы предпочитаете размещать код непосредственно в своем проекте AxShare, вам необходимо скопировать и вставить код, найденный в файле /axure-redline-tool/web/plugin.txt , в ваш проект AxShare в качестве подключаемого модуля. Комбинация кода получена из структуры разметки, ссылок CDN, соответствующего CSS и поддерживающей базы кода JavaScript/jQuery.

Чтобы применить этот код к одному из ваших проектов, размещенных на AxShare, перейдите на сайт www.share.axure.com и войдите в свою учетную запись. После входа в систему вы увидите встроенный значок шестеренки справа от каждого проекта Axure. При наведении курсора на этот значок отображается список параметров, включая ПЛАГИНЫ , которые следует выбрать. На странице плагина выберите NEW PLUGIN . Назовите свой плагин так, как считаете нужным, и выберите End of the Head в качестве места вставки.Вставьте код plugin.min.htm в область содержимого и сохраните плагин. Выберите все нужные страницы, на которых вы хотите использовать интерактивный инструмент пометки. Если вы хотите, чтобы плагин добавлялся к любым новым страницам, вы можете выбрать Добавить к новым страницам по умолчанию . После сохранения ваш плагин должен быть активирован. Чтобы изменить плагин, просто выберите , отредактируйте и вставьте любой код замены.

Предыдущие выпуски

Учебное пособие по подключаемому модулю Axure

Установка/Запуск

Установить узел.js

Обновите npm до последней версии:

 $ npm установить [email protected] -g 

Чтобы запустить демо-версию плагина в браузере, введите следующие команды:

 $ cd axure-redline-tool
$ нпм установить
$ глоток разработки 
Предпосылки/зависимости

Этот проект был создан и протестирован на jQuery 3.2 и Axure RP.

Сборка модифицированного плагина

Если вы внесли изменения и хотите создать обновленную версию подключаемого модуля, выполните следующие команды для создания подключаемого модуля .txt и plugin.js . Скопируйте содержимое plugin.txt в свой проект AxShare, как показано выше.

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

Чтобы быстро внести изменения для производства, введите следующие команды:

 $ cd axure-redline-tool
$ нпм установить
$ gulp build-prod 

Поскольку это скомпилированный плагин, т. е. HTML, CSS и JS объединены в один файл, вы также можете оставить плагин постоянно отслеживать изменения исходного кода.Это автоматически перестроит файл plugin.txt, после чего вы сможете скопировать код плагина непосредственно в AxShare. Это не откроет экземпляр плагина в вашем браузере. Для этого введите следующие команды:

 $ cd axure-redline-tool
$ нпм установить
$ gulp build-watch 

Ошибки/Недостатки

Поскольку этот код встроен в проекты Axure, он не имеет прямого контроля над экспортом ресурсов из Axure. Кроме того, проекты Axure обладают гораздо большей функциональностью и интерактивностью, чем проекты, созданные в Sketch, и их сложно перехватывать и взаимодействовать с ними.Код делает все возможное, чтобы обработать различные вложенные элементы, экспортированные из Axure, но если вы все же столкнетесь с проблемой, сообщите мне, и я быстро ее решу.

При первоначальном использовании размеры сгенерированной монтажной области могут показаться странными. Этот инструмент сканирует все элементы страницы и определяет размер монтажной области на основе наиболее экстремальных элементов. Если вам нужна монтажная область определенного размера, я бы предложил использовать фоновый прямоугольник в Axure, чтобы определить это. Кроме того, вы можете использовать комбинацию вертикальных и горизонтальных линий, чтобы определить границы монтажной области.Например, если вы хотите монтажную область размером 1000 x 1000 пикселей, поместите прямоугольник в качестве самого заднего элемента в вашем проекте Axure с координатами X и Y, равными 0, и размерами 1000 x 1000 пикселей.

*Axure предпочитает экспортировать некоторые распространенные элементы, такие как круги и линии, в виде изображений вместо использования CSS. Таким образом, вам может быть трудно найти точные размеры некоторых предметов. Обходной путь для кругов — разместить квадрат в Axure и установить радиус границы больше или равный 50% размеров квадрата.Затем это будет экспортировано как элемент HTML. Axure также испытывает трудности при экспорте элементов с большим количеством атрибутов границ и теней. Обычно он экспортирует их как изображения, и вы не сможете получить какие-либо атрибуты CSS.

Новые функции

  • Предоставить нарезанные изображения
  • Палитра цветов документа

Версии

Мы используем SemVer для управления версиями.

Авторов

См. также список участников, принимавших участие в этом проекте.

Лицензия

Этот проект находится под лицензией MIT — подробности см. в файле LICENSE.

Журнал изменений

Версия 1.1
  • Решена проблема переполнения прокручиваемого содержимого, влияющего на размер монтажной области. В терминах Axure скрытое содержимое динамической панели больше не приводит к тому, что сгенерированная монтажная область больше, чем видимые элементы.
  • Решено, как инструмент обрабатывает аннотации Axure. Аннотации можно читать, когда инструмент отключен.Пока инструмент включен, их значки не считаются интерактивными элементами.
  • Добавлена ​​функциональность команд клавиш для поддержки управления масштабированием с помощью [Ctrl +] / [Ctrl -] и клавиши Esc, чтобы закрыть панель инструментов с красной линией / отменить выбор элемента.
  • Добавлена ​​поддержка отслеживания масштабирования, чтобы обеспечить сохранение текущего уровня масштабирования при прохождении потоков.
Версия 1.1.1
  • Пересмотренный код для решения проблем с визуализацией монтажной области. Axure использует изображения вместо CSS для многих распространенных элементов, таких как линии и круги.Эти экспортированные изображения часто имеют неправильные размеры, из-за чего инструмент пометки неправильно определяет размер монтажной области. Код был изменен соответствующим образом для обработки этих сценариев.
  • Инструмент теперь удаляет фокус элемента при прокрутке страницы. Из-за этой проблемы оранжевое поле выбора оставалось фиксированным, пока элемент ниже прокручивался. Код в настоящее время закрывает инструмент красной линии при прокрутке. Позднее усовершенствование будет состоять в том, чтобы привязать оранжевое поле выбора к выбранному элементу, чтобы поле оставалось даже при прокрутке.
Версия 1.1.2
  • Сценарии сборки перенесены из Grunt в Gulp. Теперь доступны дополнительные параметры сборки, а внедрение кода было улучшено.
Версия 1.1.3
  • Предварительный просмотр образца цвета для атрибутов цвета и цвета фона.
  • Теперь поддерживаются HEX и RGB(A). Цветовые форматы можно переключать, щелкая образец цвета.
Версия 1.1.4
  • Обеспечена поддержка виджетов повторителей.Обновлен код для игнорирования встроенных тегов script и style.
  • Добавлен атрибут box-sizing для ввода, чтобы обеспечить правильный размер в разных браузерах.
Версия 1.2
  • Пересмотрен способ расчета межэлементных размеров. Раньше все элементы повторялись, а атрибуты данных добавлялись. Теперь это делается в режиме реального времени только на активных элементах. Это поможет производительности на страницах с большим количеством элементов.
  • Устранена проблема, из-за которой инструмент отображал непредусмотренное скрытое содержимое.
  • Устранены небольшие изменения стилей CSS для улучшения согласованности отображения атрибутов.
  • Устранена проблема, из-за которой инструмент выдавал ошибку при отключении, когда элемент выбран.
  • Инструмент теперь обеспечивает правильное заполнение монтажной области при масштабировании.
  • Устранено мерцание измерения, возникавшее при наведении указателя мыши на измерительную линию или метку.
Версия 2.0.1
  • Имена компонентов Axure. Теперь инструмент будет отображать имена всех элементов, которые вы использовали в своем проекте.
  • Аннотации всегда доступны для щелчка — аннотации всегда доступны для щелчка, даже если инструмент включен.
  • Переместить переключатель красной линии — переключатель включения инструмента красной линии был перемещен в верхний заголовок для лучшей видимости.
  • Показать атрибуты псевдокласса — инструмент теперь предоставляет CSS для тех псевдоклассов, которые предоставляет Axure.
  • Ссылка на CDN. Инструмент теперь можно обслуживать по ссылке CDN, что означает более быстрое время загрузки и отсутствие копирования огромных блоков кода.
  • Взаимодействие с горячими клавишами. Теперь больше не требуется отключать инструмент для взаимодействия с элементами Axure.Удерживая [Ctrl] (Windows) или [⌘] (Mac), вы можете наводить курсор на элементы или щелкать их.
  • Ссылки для бизнеса и разработчиков. Теперь инструмент предлагает обмен ссылками как для бизнеса, так и для разработчиков. Бизнес-ссылка не позволит инструменту даже отобразиться на странице. Это гарантирует, что при обмене прототипами с бизнесом не возникнет путаницы.
  • Loading Spinner — на больших страницах инструмент может занять довольно много времени для рендеринга монтажной области. Индикатор загрузки помогает указать фоновое действие.
  • Образцы цвета — обновленный код для обработки образцов цвета для любого атрибута CSS, содержащего цвет.
  • Родительская непрозрачность — при настройке непрозрачности всего элемента в Axure она применяется только к родительскому элементу. Инструмент теперь может точно извлекать эту информацию.
Версия 2.0.3
  • Добавлено поле свойств блока CSS для удобства вырезания и вставки.
Версия 2.0.4
  • Когда цвета RGBA отображаются с непрозрачностью 1, теперь мы преобразуем их в RGB.
  • Если непрозрачность атрибута CSS равна 1, теперь мы не будем его отображать.
  • Устранена ошибка в Microsoft Edge, из-за которой возникали проблемы при отображении значений цвета RGBA.
Версия 2.0.5
  • При совместном использовании бизнес-ссылки аннотации по умолчанию отключены через интерфейсную панель AxShare.
Версия 2.0.6
  • Пересмотрен способ формирования ссылок общего доступа для размещения ссылок на частные корпоративные серверы.
Версия 2.0,7
  • Исправлена ​​загрузка страниц HTML, CSS и шрифтов Google. Загрузка шрифтов приводила к неправильным измерениям элементов jQuery.
  • Обновлен CSS для поддержки создания монтажной области RP9.
  • Обновлено для поддержки аннотаций RP9.
Версия 3.0.0
  • Приложение перенесено на React.
  • Незначительные изменения пользовательского интерфейса.
  • Поддержка наложения сетки.
Версия 3.0.1
Версия 3.0.2
  • Добавлена ​​поддержка собственного инструмента проверки и Axure Cloud.
Версия 3.0.3
  • Исправлена ​​проблема с модальным телом заставки.
Версия 3.0.4
  • Устранены ошибки взаимодействия с собственным инструментом проверки.
  • Устранена ошибка клика по заполнению монтажной области.
  • Пересмотренные инструменты сборки для поддержки устаревших версий, гарантирующие отсутствие критических изменений.
Версия 3.0.5
  • Удалена функция щелчка из #base, которая по сути является монтажной областью и с которой нельзя взаимодействовать.
  • Добавлена ​​непрозрачность монтажной области #base, чтобы она больше напоминала неинтерактивный элемент.
Версия 3.0.6
  • Добавлены дополнительные функции для поддержки прыжка монтажной области в проектах RP9 и проектах с использованием собственного инструмента проверки.
Версия 3.0.7
  • Исправлена ​​конфигурация цвета фона монтажной области. Для неопределенных цветов фона монтажной области монтажная область отображается как прозрачно-белая. В противном случае используется пользовательский цвет.
  • В сценарий dev-live добавлены функции для поддержки обслуживания пользовательского URL-адреса.
Версия 3.1.0
  • Исправлено сопоставление названий цветов CSS — инструмент Redline поддерживает использование имен цветов CSS вместо значений hex/RGB. Алгоритм сопоставления, который отображает образец для данного цвета, частично соответствовал другим словам. Это означало, что если значение поля было скучно , применялся образец цвета красный .
  • Добавлена ​​поддержка проверки модальных окон. Инструмент неправильно считывал модальные окна или другие элементы, выходящие за рамки обычного потока страниц.С технической точки зрения это происходило на элементах с позицией : исправлено; .
  • Цвет границы
  • показан без рамки — в текстовых блоках инструмент считывал цвет границы без определения стиля границы. Нет причин отображать этот атрибут без определенного стиля границы .
  • Text Shadow Attribute — в список добавлен CSS-атрибут text-shadow .
  • Расширенная поддержка стилей отдельных слов. Если вы попытаетесь изменить стиль одного слова в текстовом блоке, применив, например, другой цвет или толщину шрифта, это приведет к тому, что стилизованное слово выйдет за пределы текстового блока.С технической точки зрения это произошло потому, что мы установили элемента на display: inline-block; . Это было сделано для того, чтобы мы могли точно измерить их высоту, ширину и положение. Теперь для этих элементов мы не будем показывать высоту, ширину или положение, потому что они не передают никакой информации. Вместо этого мы выбираем родительский контейнер, который обычно представляет собой тег

    .

  • Отключить концепцию монтажной области. Инструмент «красная линия» пытается имитировать концепцию монтажной области, используемую во многих других инструментах.Это представлено в виде плавающей, полупрозрачной, центрированной доски.

Добавить комментарий

Ваш адрес email не будет опубликован.