Text decoration пунктир: text-decoration-style | htmlbook.ru

Leave a Comment / Разное / By /

Как создать фиксированный футер с помощью CSS

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

Что такое footer 

Футер — это объект, который находится внизу сайта. Иногда такой элемент закрепляют на странице, чтобы при прокрутке он всегда был на виду. Эффект при этом будет такой же, как, например, у блока с чатом на сайте cloud.timeweb.com. При скроллинге он всегда остается на месте:

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

Пример 1

Создадим простой футер сайта в виде цветного блока с одним словом. 

Шаг 1. Напишем HTML-код с большим количеством абзацев, чтобы при прокрутке показать зафиксированный элемент: 

<html>
<head>
<style>
</style>
</head>
<body>
<h2>Простой пример зафиксированного подвала</h2>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<div>
  <p>Footer</p>
</div>
</body>
</html>

Шаг 2. При помощи CSS-кода выберем шрифт текста на странице и цвет фона, а также настроим расположение элемента:

<style>
body {
  font-family: PT Astra Sans;
   background-color: #e9e9f0;
   }
.footer {
  background-color: #2e34e5;
   position: fixed;
   right: 0;
   bottom: 0;
   text-align: center; 
   width: 99%;   
   font-size: 19px;
font-weight: bold;
  color: #fafaff;  
 }
</style>

В итоге получится синий футер на сайте, который при прокрутке страницы всегда остается внизу. Такой объект с текстом растянут по всей ширине окна. 

Пример 2

Как сделать подвал сайта так, чтобы в нем были ссылки на внешние ресурсы? Об этом мы расскажем во втором примере: ссылки будут на фотографии бесплатного фотостока. 

Шаг 1. Добавим ссылки на три разных изображения, чтобы потом добавить их в footer HTML: 

<html>
<head>
<style> </style>
</head>
<body>
<h3>Пример зафиксированного подвала со ссылками на изображения</h3>
<div>
<div>
  <p>
    <a href="https://images. unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=876&q=80">Фото1</a>
    <a href="https://images.unsplash.com/photo-1570092178365-4cd46034bb19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80">Фото2</a> 
    <a href="https://images.unsplash.com/photo-1604231751678-3f2b03928c10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80">Фото3</a>
  </p>
</div>
</div>
</body>
</html> 

Шаг 2. При помощи CSS-кода настроим размеры сайта и футер с тремя ссылками:

.wrapper {
  height: 1111px;
}
.footer {
 background-color: #aac5fa;
  position:fixed;
   right:0;
  bottom:0;
  width:99%;
  height: 101px; 
}
. text {
  float:none;
  font-size:29px;
  word-spacing:40px;
  padding-left:29px;
}
</style>

Шаг 3. Сделаем так, чтобы при наведении на ссылки менялся размер текста и цвет заливки: 

<style>
a:active {
  text-decoration: none;
}
a:link {
 text-decoration: none;
}
a.menu:hover {
  font-size:29px;
  background-color:#8eff8c;
}
</style>

В итоге получится такой footer HTML CSS: 

Пример 3

Теперь рассмотрим вариант, как сделать подвал сайта HTML с изображениями-ссылками на два популярных сайта в России. Тег footer не понадобится. 

Шаг 1. Напишем код с большим абзацем, добавим значки соцсетей «ВКонтакте» и «Одноклассники», а также укажем ссылки на их сайты: 

<html>
 <head>
  <style></style>
 </head>
 <body>
  <div>
   Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга.  Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга.    
  </div>
  <div>
  <div>
  <a href="https://vk.com/feed"><img src="https://cdn-icons-png.flaticon.com/512/25/25684.png" alt="VK icon"></a>
  <a href="https://ok.ru/"><img src="https://cdn-icons-png.flaticon.com/512/48/48971.png" alt="OK icon"></a>
</div>
  </div>
 </body>
</html>

Шаг 2. С помощью CSS-кода закрепим footer внизу страницы и выберем параметры по цвету и не только. Фон страницы будет серым, а объекта со значками — синим. 

<style>
   #wrapper {
    margin: 344 auto 433px; 
    width: 399px;
      }
body {
     background-color: e2e1eb;
   }
   #footer {
    background-color: #301fed; 
    position: fixed; 
    left: 0; 
    bottom: 0; 
    height: 70px;
    padding-left: 29px;
        color: #f3f2ff; 
    width: 99%; 
   }
   .all-symbols {
   float:left;
  margin-top:19px;
  padding-left:199px;
  }
. symbol {
  color: #fffcfc;
  margin-top:6px;
  margin-left:29px;
  height:29px;
}
</style>

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

<style>
.symbol:hover {
  padding:2px;
  background-color:#fffcfc;
  }
</style>

В результате получится страница, на которой футер будет со значками «ВКонтакте» и «Одноклассники»: по ним можно перейти на сайты соцсетей.

Пример 4

Теперь рассмотрим, как сделать footer внизу страницы HTML с необычным эффектом. Блок будет спрятан под страницей — чтобы его показать, нужно обратить внимание на другой объект. В этом случае таким элементом будет красный квадрат с пунктиром. 

Шаг 1. В HTML-код добавим много абзацев: будет удобнее проверить фиксацию футера на странице: 

<style> </style>
  <h2>Чтобы найти footer, наведите курсор на красный квадрат</h2>
  <h3><p><p>A simple paragraph is for example here. </p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p></p></h3>
<div>
<div>
  <div></div>
<div>
<div>
<div>
       <h2>Спрятанный футер</h2>
</div>
</div>
</div>
</div>

Шаг 2. Теперь добавим следующий CSS-код, в котором определим параметры фона, футера на сайте и не только. Шрифт выберем PT Astra Sans, а фон будет голубым.

<style>
.wrapper {
  height: 1111px;
}
body{
background-color:#8f85ff;
font-family: PT Astra Sans;
text-align:center;
color:#e8e6fc;
}
.footer #block{
position:relative;
margin-top:2px;
width:99,99%;
 height:99%;
background: #120f2b;
}
.footer #text{
  Position: relative;
  right:201px;
  width:123px;
margin:14 auto;
 top:-51px;
}
.footer1{
            float:left;
    width:499px;
    }
.footer h2{
   color: #ffc9c9;
   font-family: PT Astra Sans;
   margin-top:69px;
   margin-left:39px;  
}
</style>

Шаг 3. Теперь создадим красный квадрат, который будет показывать спрятанный блок. При помощи значения dashed сделаем такой объект пунктирным, чтобы он выделить его еще больше. 

<style>
…
.footer #knopka{
    width:50px;
    height:50px;
    border: #d41542 8px dashed;
    margin:-3 auto;
    position:center;
}
. footer #knopka:hover{
    width:50px;
    height:50px;
    border: #d41542 8px dashed;
}
.footer {
    position: fixed;
    right:0;
    bottom:0;
    width: 99%;
    height: 2em;
    overflow:hidden;
    transition: all 2s ease;
}
.footer:hover {
    transition: all 2s ease;
    height: 9em;
}
…
</style>

В итоге выйдет страница, на которой спрятанный footer CSS будет плавно появляться и исчезать в любом моменте прокрутки. Такой эффект доступен на любой части страницы. Футер появляется только тогда, когда курсор наведен вниз окна.  

Итоги 

Мы рассмотрели 4 способа, как зафиксировать подвал сайта HTML. В основном нам помогли следующие CSS-свойства со значениями:

  1. Position: fixed;
  2. Right: 0;
  3. Bottom: 0.

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

Metod_rekomendatsii_po_HTML — Стр 5

Приложение III

Параметры форматирования CSS

Описание параметра

Параметр

 

Возможные значения параметра

 

Работа с текстом

 

 

Межсимвольный интервал

letter-spacing

 

Задается в px (пикселях) или pt (пунк-

 

 

 

тах)

Междустрочный интервал

line-height

 

Задается в px, pt или %

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

text-align

 

left – по левому краю

 

 

 

right – по правому краю

 

 

 

center – по центру

 

 

 

justify – по ширине

Отступ первой строки

text-indent

 

Задается в px, pt или %

Вертикальное выравнивание

vertical-align

 

baseline – по образцу родительского

элемента

 

 

элемента

 

 

 

super – надстрочный

 

 

 

sub – подстрочный

 

 

 

text-top – по верху текста

 

 

 

text-bottom – по низу текста

 

 

 

top – по самому верху

 

 

 

bottom – по самому низу

Начертание текста

text-decoration

 

underline – подчеркнутый

 

 

 

overline – надчеркнутый

 

 

 

line-through – перечеркнутый

Изменение текста

text-transform

 

сapitalize – начинает с прописных

 

 

 

uppercase – все прописные

 

 

 

lowercase – все строчные

 

Работа с фоном и цветом

 

Цвет фона или текста

color

 

Любой способ задания цвета

Цвет фона элемента

backgroung-color

 

Любой способ задания цвета

Фоновый рисунок

background-image

 

Путь к рисунку

Прокручивание фонового

background-attachment

 

fixed – не прокручивается

рисунка

 

 

scroll – прокручиваться

Повтор фонового рисунка

background-repeat

 

repeat-x – по горизонтали

 

 

 

repeat-y – по вертикали

 

 

 

repeat – по всем направлениям

 

 

 

no-repeat – не повторяется

 

Работа со шрифтом

 

Тип шрифта

font-family

 

Название типа шрифта

Стиль начертания

font-style

 

normal – без изменений

 

 

 

italic – курсив

Прописные буквы

font-variant

 

normal – без изменений

 

 

 

small-caps – все буквы прописные

Полужирное начертание

font-weight

 

normal – без изменений

 

 

 

bold – полужирный

 

 

 

любое значение от 100 до 900

Размер шрифта

font-size

 

smaller

 

 

 

larger

 

 

 

числовое значение (в pх, pt или %)

 

Работа с рамкой

 

 

Толщина верхней, правой,

border-top-width;

 

Задается в px или %

нижней или левой рамки

border-right-width;

 

 

 

 

border-bottom-width;

 

 

 

 

border-left-width

 

 

 

 

 

 

41

Описание параметра

Параметр

Возможные значения параметра

Стиль рамки

border-style

none – отсутствует

 

 

dotted – мелкий пунктир

 

 

dashed – крупный пунктир

 

 

solid – сплошная рамка

 

 

double – двойная сплошная

 

 

groove – вдавленная рамка

 

 

ridge – выпуклая рамка

Работа с отступом

 

Отступ у блочных элементов

margin-top,

Задается в px или %

 

(таблицы, слоя, картинки,

margin-right,

 

 

 

 

тэга <BODY>)

margin-bottom,

 

 

 

 

 

margin-left.

 

 

 

 

Отступ у любого элемента

padding-top,

Задается в px или %

 

(таблицы, слоя, параграфа

padding-right,

 

 

 

 

и др.)

padding-bottom,

 

 

 

 

 

padding-left

 

 

 

 

 

Работа с размером элемента

 

 

 

Ширина элемента

width

Задается в px или %

 

Высота элемента

height

Задается в px или %

 

 

Позиционирование элемента (слоя)

 

 

 

Определяет способ положе-

position

absolute – координаты вычисляются от

 

ния элемента на странице

 

верхнего левого угла страницы

 

 

 

relative – координаты вычисляются от

 

 

 

верхнего левого угла родительского

 

 

 

элемента

 

 

 

static – элемент не прокручивается при

 

 

 

прокручивании страницы

 

Вертикальная координата

top

Задается в px или % от высоты роди-

 

элемента относительно верх-

bottom

тельского элемента

 

него, нижнего, левого и пра-

left

 

 

 

 

вого края

right

 

 

 

 

 

Видимость элемента (слоя)

 

 

 

Видимость элемента

visibility

visible – виден

 

 

 

hidden – не виден

 

Порядок перекрытия элемен-

z-index

Задается числом (возможны отрица-

 

тов

 

тельные значения). Элементы с более

 

 

 

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

 

 

 

элементы с более низким

42

Учебно-методическое издание

Исупова Татьяна Николаевна Караваев Никита Леонидович

Компьютерные сети и Интернет

Часть II

Редактор Т. Н. Котельникова

Компьютерная верстка Н. Л. Караваева

Подписано в печать 31.05.2012 г.

Формат 60×841/16.

Бумага офсетная.

Усл. печ. л. 2,75.

Тираж 100 экз. Заказ № 142.

Издательство Вятского государственного гуманитарного университета,

610002, г. Киров, ул. Красноармейская, 26, т. (8332) 673-674 www.vggu.ru

Отпечатано в полиграфическом цехе Издательства ВятГГУ,

610002, г. Киров, ул. Ленина, 111, т. (8332) 673-674

xml — Подчеркивание точками в XSL-FO

Я хотел бы, чтобы слова подчеркивались точками при использовании XSL-FO.

Я могу подчеркивать слова с помощью шаблона, но не делаю линию пунктирной.

Вот шаблон, который я использую:

И вот как я применяю это к своим словам:

 Политика

Есть ли параметр для подчеркивания пунктиром в XSL-FO?

  • xml
  • xslt
  • xsl-fo

2

Значения, поддерживаемые для text-decoration , не включают ничего для пунктирных линий:

 нет |
  [ [ подчеркнуть | без подчеркивания] ||
    [ над чертой | без надчеркивания ] ||
    [ сквозной | не сквозной ] ||
    [ мигать | не мигает ] ] |
наследовать

Вы можете приблизиться к желаемому эффекту с помощью border-bottom-style :

Примечание: Обязательно правильно учитывайте пространства имен — ваш шаблон соответствует db:link , но показанный вами пример — link . В зависимости от используемых пространств имен по умолчанию и определения префикса пространства имен db у вас может возникнуть соответствующая проблема, которую необходимо решить.

Вот так:

 
       У меня ничего нет. 
       О, смотрите! пунктирное подчеркивание! 
        Расширения не требуются.
        И должен работать с любым средством форматирования!

Результат:

Протестировано с FOP, RenderX и AHF без каких-либо расширений.

При использовании axf:text-line-style стилизованное подчеркивание находится в том же положении, что и обычное сплошное подчеркивание, а не смещается после заднего края fo:inline (хотя вы можете измените положение подчеркивания на axf:text-underline-position , если хотите). axf:text-line-style стилизует подчеркивание (или зачеркнутую линию или надчеркивание) с использованием любого из расширенных стилей границ, поддерживаемых AH Formatter.

 

  
    
      
    
  
  
    
      
    
    
    
      
        
          axf:text-line-style
        
        
          border-bottom
        
      
    
    
      
         5em">
          
        Сплошное подчеркивание
          
        
        
          
            Сплошное подчеркивание
          
        
      
      
        
          
        Подчеркивание пунктиром
          
        
        
          
            Подчеркивание пунктиром
          
        
      
      
        
          
        Подчеркивание пунктиром
          
        
         5em">
          
            Подчеркивание пунктиром

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css — Как избавиться от пунктирной линии на содержимом

Иногда я вижу границу с черными точками, например, линию вокруг текста или содержимого при нажатии. В основном это происходит с Firefox. Я пытался поставить граница: нет; , чтобы избавиться от него безуспешно.

Вот пример кода:

 

    <дел>
<диапазон> <кнопка> Нажмите

Вот CSS:

 кнопка {
    контур: 0;
    граница: 0;
    текст-украшение: 0;
    -moz-контурный стиль: 0;
}
.styled-кнопка {
    цвет: #fff;
    фон: зеленый;
    высота: 36 пикселей;
    ширина: 145 пикселей;
    отступ: 2px 25px;
    поле: 10 пикселей;
    контур: нет;
    граница: нет;
    текстовое оформление: нет;
   -moz-контурный стиль: нет;
}
охватывать {
    контур: 0;
    граница: 0;
    текст-украшение: 0;
}

Может ли кто-нибудь предложить мне решение этой проблемы? Почему оно появляется на первом месте?

Обновление :

Я думал, что в какой-то момент смог это исправить. Но у части моего контента все еще есть проблема, и это в Mozilla Firefox .