Программы
Музыка
Игры
Заработок и Раскрутка
GPS навигация
» » Замена атрибутов HTML средствами CSS
Информация к новости
  • Просмотров: 366
  • Автор: hazardcd
  • Дата: 19-12-2016, 09:18
  • Не нравится
  • 0
  • Нравится
19-12-2016, 09:18

Замена атрибутов HTML средствами CSS

Категория: Вебмастер / Оптимизация сайтов / Статьи

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

Для блочных элементов атрибут align аналогичен стилю text-align, для строчных - атрибуту float. Атрибут valign, который можно писать как align, при отсутствии такового, заменяет свойство vertical-align, только с немного другими значениями.

Не надо забывать, что элемент <p> является блочным, т.е. для форматирования текста в нём достаточно применять style text-align.

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

Ранее, например, для того чтобы центрировать какой-то элемент, использовани элемент <center>, потом такой простой и понятный элемент запретили в пользу <div align="center">, потом запретили и атрибут align, в пользу css свойств text-align, float и margin.

Важно помнить, что text-align - в правильных браузерах не влияет на дочерние блоковые элементы!
Т.е. <div align="right"> и <div style="text-align:right"> не одно и тоже. Свойство text-align не окажет влияния на дочернюю таблицу или div, тогда как align="right" расположит все дочерние элементы справа, даже блочные.

 

Таблица перевода атрибутов в CSS:

HTML Аналог в CSS  
align="center" text-align:center Строчный элемент
align="left" text-align:left  
align="right" text-align:right  
align="middle" нет аналогов в CSS  
<div align="center"><table> <table style="margin: 0 auto;"> блочный элемент
<img align="right"> <img style="float: right;"> inline-block элемент
align="bottom" vertical-align:baseline; значение по умолчанию, выравнивает базовые линии текста и картинки
align="baseline" vertical-align:baseline; то же самое
align="absbottom" vertical-align:bottom; выравнивает базовую линию картинки по низу текста
align="absmiddle" vertical-align:middle; выравнивает середину текста с серединой картинки
valign="absmiddle" vertical-align:middle; то же самое
align="top" vertical-align:top; выравнивает по высоте самого высокого текста
valign="top" vertical-align:top то же самое
align="texttop" vertical-align:text-top; выравнивает по высоте шрифта элемента родителя.

 

Стоит отметить что <div style="text-align:center"> и <table style="text-align:center"> не во всех браузерах работают правильно, это недочеты их производителей, поэтому я часто применяю более универсальный альбернативный способ реализации <div style="text-align:center">:

1. Задаем значения выравнимания в файле стилей:

.center {
	display: table;
	margin: 0 auto;
	text-align: center;
}

2. Универсальность данного способа позволяет использовать его фактически с любыми атрибутами, например:

<div class='center'>
или
<table class='center'>

Чтобы понимать вышеизложенное, отдельно остановимся на свойстве vertical-align в CSS, которое применяется для вертикального выравнивания. Рассмотрим строку текста и названия различных вертикальных позиций на ней.

На самом деле позиций которых может иметь своство vertical-align гораздо больше. Можно даже задать точное значение в пикселях или процентах. Главное что нужно помнить, что для всех inline-элементов в строке одна базовая линия (baseline).

Базовая линия по-умолчанию является значением для всех inline-элементов, включая элемент img. Поэтому если вы верстаете таблицу в стандартном режиме и в её ячейке вы поставите только картинку, то останется зазор между границей ячейки и границей картинки снизу, избавиться от него можно задав стиль картинки vertical-align:bottom или стиль ячейки font-size:0px.

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

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

Таблица перевода в CSS популярных атрибутов:

HTML Аналог в CSS  

width="100%"
width="100"

width:100%;
width:100px;

Устанавливает ширину элемента

height="100%"
height="100"

height:100%;
height:100px;

Устанавливает высоту элемента

border="0"

border:none;

Не отображает границу элемента

cellspacing="0"

border-spacing:0;

Задает расстояние между внешними границами ячеек 

cellpadding="0"

padding:0;

Определяет расстояние между границей ячейки и ее содержимым 

 

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

Синтаксис:

border: border-width || border-style || border-color

border-width

-

Толщина границы: thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов). Для более точного значения, можно указывать в пикселах или других единицах, inherit наследует значение родителя.

border-style

-

Стиль границы вокруг элемента:

border-color

-

Цвет границы элемента. transparent - прозрачный цвет.

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

border: 4px double black;

Для установки границы только на определённых сторонах элемента, используйте свойства border-top, border-bottom, border-left, border-right.

Теперь рассмотрим как с помощью CSS сделать так, чтобы отображались все рамки таблицы, т.е. рамки и самой таблицы и ячеек, и чтобы рамки не удваивали друг друга. Для этого необходимо применить правила CSS как table так и к td и th, также необходимо установить свойство border-collapse: collapse, для того, чтобы избежать удваивания рамок:

table1, table1 td {
border: 1px solid blue;
border-collapse: collapse;
}

 

Об использовании универсального свойства background читайте здесь.

Об использовании универсального свойства font читайте здесь.

 

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

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
HTML-cсылка:
BB-cсылка:
Прямая ссылка:
  1. <
    newJS

    23 марта 2017 12:50

    Информация к комментарию
    • Группа: Гости
    • Регистрация: --
    • Статус:
    • Публикаций: 0
    • Комментариев: 0
    чем заменить это? именно так, как работал сей атрибут
    img src="" alt="" align="left"
    1. <
      hazardcd

      23 марта 2017 17:39

      Информация к комментарию
      • Группа: Администраторы
      • Регистрация: 16.01.2014
      • Статус: Пользователь offline
      • Публикаций: 266
      • Комментариев: 11
      По умолчанию всё выравнивается по левому краю, но если требуется сделать это внутри center, то для выравнивания изображений правильней будет использовать выравнивание в блочных элементах: div, p или table и т.п., например:
      <p style="text-align:left;"><img ... /></p>
      или попробуйте так, но не во всех браузерах может корректно отображаться:
      <img src="" alt="" style="float: left;" />

      --------------------

Добавление комментария

Имя:*
E-Mail:
Комментарий:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Подтвердите что вы не робот: *

^
 
Рейтинг сайтов HazardCD Studio Рейтинг@Mail.ru Push 2 Check Web100kz.com - каталог сайтов Траст. Анализ сайта hi-cd.ru Goon Каталог сайтов