Web Мастерская | Блог :: Страница: 32

Блог

Web Мастерская

Генераторы CSS

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

1) Colors Palette Gnerator имеет функцию генерации цветовых палитр. Данный инструмент позволяет удобно захватить основной цвет с любого изображения.

2) Visual CSS Gradient Generator пригодится для совместимости с браузерами. От других генераторов его отличает в первую очередь то, что он настроен на создание SVG-кодов и холстов.

3) Gradient Image Maker позволяет предварительно просматривать те изображения, которые созданы даным инструментом.

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

5) Facelift Image Replacement имеет скрипт замены текста на аналогичное изображение. Часто...

Жалоба

Атрибуты HTML тегов

Атрибут HTML тега - это свойство элемента страницы, у атрибута имеется значение:

<тег атрибут="значение"></тег>

Атрибуты тегов делятся на несколько групп, мы начнем с группы Глобальные атрибуты.

Глобальные атрибуты

Глобальные - потому что данную группу атрибутов можно использовать практически в любом теге. Данную группу атрибутов, можно ещё назвать - универсальная группа. В группу входят такие атрибуты, как (список далеко не весь):

title - Краткое описание элемента во всплывающей подсказке.
id - Задает идентификатор элементу (уникальное значение).
class - Задаёт стилевой класс, который позволяет связать определенный тег со стилевым оформлением.
style - Устанавливает стиль элемента.

Атрибуты указания пути (URL)

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

href - Атрибут для ссылки, указывает куда будет отправлен пользователь, при нажатии на

...

Жалоба

Введение в HTML (Урок)

Создание страниц производится с помощью языка гипертекстовой разметки HTML (Hyper Text Marker Language). Если открыть какую-нибудь страницу любого сайта с помощью текстового редактора, например, блокнота, то мы увидим непонятные коды. Эти коды называются тегами. Теги – отдают команды, которые пишутся между скобками < >. Теги бывают парные и непарные. Парные теги состоят из открывающего тега (пример: <html> - говорит компьютеру, что начитается html-страница). Данный тег всегда будет самый первый в Вашем документе и закрывающего тега (пример: </html> - говорит браузеру, что html-страница закончилась), данный тег всегда будет в конце документа. Заметили разницу между ними? У закрывающего тега добавлен элемент / после первой скобки. Непарные теги не нуждаются в закрывающем элементе / (пример: <br /> - говорит браузеру о переходе на следующею строку).
Скопируйте в чистый блокнот этот код:

<html> 
<head>
    <title>Главная</title>
</head>
<body>
    Наступил новый день!<br />

...

Жалоба

Продвинутые CSS-селекторы

CSS HTML

Чтобы задать стиль элементу, мы используем атрибут class и id, например, у нас есть два блока, один с классом class_block, второй с идентификатором id_block:

<div class="class_block">
    <!-- Содержимое блока -->
</div>

<div id="id_block">
    <!-- Содержимое блока -->
</div>

Зная этот класс и идентификатор, мы можем стилизовать оба блока, как нам вздумается:

.class_block {
    /* Свойства блока с классом class_block */
}

#id_block {
    /* Свойства блока с идентификатором id_block */ 
}

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

<div id="123_block">
    <!--

...

Жалоба

Как сделать текст жирным на HTML + CSS

Приведу пару примеров, как можно сделать текст жирным шрифтом. Для этого существует в HTML специальные теги <b> и <strong> - оба эти тега выполняют одну и туже задачу - выделяют текст жирным шрифтом. Пример:

<b>Текст жирным шрифтом</b>
<strong>Текст жирным шрифтом</strong>

Результат на экране:

Текст жирным шрифтом
Текст жирным шрифтом

Каким из этих тегов выделять текст, решать вам самим, можете использовать их оба, если это требуется.

Идем дальше, теперь пробуем выделить текст жирным, при помощи CSS, пишем такой класс:

.thick {
    font-weight: bold;
}

Теперь в документе выделяем текст так:

<span class="thick">Текст жирным шрифтом</span>

На экране получим тот же результат:

Текст жирным шрифтом

...

Жалоба