Когда таблиц стилей еще не существовало, для задания размера и гарнитуры шрифта применялся тег font . Однако, в данный момент использование данного тега не рекомендуется. Ниже приведены примеры использования данного тега:
Минимальный размер текста
Макс-й размер текста
Helvetica
Arial
Красный
Как выглядит:
Минимальный размер текстаМакс-й размер текста
Helvetica
Arial
Красный
Гораздо удобнее и правильнее для этих целей воспользоваться листом стилей. Во всяком случае, вы будете уверены, что ваш сайт будет правильно отображаться во всех браузерах.
Поскольку, файл CSS является текстовым документом, то, при отсутствии специализированных программ, можно его написать в простом текстовом редакторе, например, в Блокноте.
Создадим файл с названием 03.css и разместим его в том же каталоге, что и наш файл примера (поскольку, примеров будет много, то, каждому файлу примера будет соответствовать свой лист стилей). В таблице стилей определим размер, цвет и гарнитуру шрифта для всей HTML-страницы - в теге BODY
Как выглядит страница без CSS: Пример №2
Как выглядит страница с CSS: Пример №3
Фрагмент измененного HTML-кода страницы (добавлен только МЕТА-тег, подключающий файл таблицы стилей; в саму же страницу изменения не вносились):
Untitled
body {font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif; color: gray; font-size: 8pt;}
Как говорится, почувствуйте разницу! Всего одна строчка файла таблицы стилей мигом изменила весь вид HTML-страницы (если бы сайт содержал десятки, сотни, тысячи страниц, то, все равно, изменения бы отобразились на всех страницах сайта).
Разберем подробнее строку CSS-файла:
- BODY - указывает браузеру, что форматирование относится ко всему телу HTML-страницы (т.е., все, что находится между тегами и );
- {} (фигурные скобки) - все атрибуты форматирования стиля описываются внутри фигурных скобок и разделяются между собой точкой с запятой (; );
- font-family: - задает гарнитуру шрифта (названия шрифтов перечисляются после двоеточия через запятые). При этом браузер пытается отобразить первый шрифт (Verdana), если такого шрифта нет на компьютере пользователя, то браузер пытается отобразить следующий шрифт (Tahoma) и т.д.;
- color: - указывает цвет шрифта (при этом возможны различные варианты написания: gray; #808080);
- font-size: - указывает размер шрифта (также возможны различные варианты: pt, px, pc, mm...);
"Поиграйте" с различными параметрами значений и посмотрите как мгновенно преображается ваша страница.
При помощи стилей можно делать небольшие "фокусы", которые будут видны пользователям, посещающим ваш сайт, но "незаметны" поисковым системам (по крайней мере, на время написания данного материала). Как известно, поисковики довольно высоко ранжируют текст, заключенный в заголовок первого уровня (тег ). Но, текст, заключенный в этот тег выглядит не всегда приемлемо - он очень крупный и жирный. Это можно изменить, например, при помощи атрибута style :
Форматирование заголовка первого уровня: Пример №4 - первый заголовок отображается "по умолчанию", второй, отформатирован при помощи атрибута style .
HTML-код страницы :
Untitled Золотое кольцо России Золотое кольцо России
«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.
Тот же эффект, но с применением внешнего листа стилей (в вышеприведенный код страницы никаких изменений не вносилось; менялся CSS-файл) Пример №5
Содержание файла CSS:
body {font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif; color: gray; font-size: 8pt;} H1 {color: green; font-size: 130%;}
Нетрудно понять, что лист стилей задал заголовку первого уровня зеленый цвет и установил размер шрифта 130% от основного размера, который был задан в 8pt .
С помощью атрибута font-size (размер шрифта) можно задавать размер шрифта в следующих единицах:
- % (в процентах, относительная величина);
- cm (в сантиметрах, абсолютная величина);
- em (высота символа данного шрифта, отн. в-на);
- ex (высота символа "х" данного шрифта, отн. в-на);
- in (дюйм, абс. в-на);
- mm (миллиметр, абс. в-на);
- pc (цицеро, абс. в-на);
- pt (точка, абс. в-на);
- px (пиксел, абс. в-на)
У вебмастеров "ходу" последние два варианта. Обратите внимание, что при задании нецелого значения необходимо в качестве разделительно знака ставить точку, а не запятую - 2.2 mm .
При задании гарнитуры шрифтов (атрибут font-family: ), можно задавать любые шрифты, но для подстраховки (на случай, если на компьютере пользователя не окажется нужного шрифта) рекомендуют включать стандартные типы гарнитур:
- cursive (курсив);
- fantasy (экстравагантная гарнитура);
- monospace (стандартная гарнитура пишущей машинки);
- sans-serif (гарнитура с засечками);
- serif (гарнитура без засечек).
Цвет шрифта (атрибут color: ) можно задавать в шестнадцатиричном виде (#FCD34F), либо английским названием стандартного цвета (red). Следует аккуратно подходить к заданию цвета в шестнадцатиричном виде, т.к. далеко не каждый цвет, заданный подобным образом, будет отображаться одинаково на разных мониторах. Гораздо предпочтительнее пользоваться безопасной палитрой цветов, которая одинаково отображается на всех мониторах.
У меня проблема, когда я установил размер шрифта тела в 11px, но таблицы отображают шрифт в 16px. Я понятия не имею, что вызывает это - я снова и снова перебирал CSS и вывод (источник при переходе на страницу). Настройка размера шрифта стола до 11px явно имеет желаемый эффект, но мне не нужно устанавливать его где-либо отдельно от стиля тела.
У меня есть следующий CSS:
Body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; margin: 0px; background-color: #E7D2B8; color: #863F2B; } img.headerImg { width: 100%; } .menu-strip { float: left; width: 20%; } .main-content { float: left; width: 80%; } .clear { clear: both; } ul.menu { margin: 0px; margin-left: 10px; padding: 0px; list-style: none; } ul.menu li { margin: 0px; padding: 0px; padding-top: 10px; padding-bottom: 10px; } div.footer { width: 60%; margin-left: 20%; } ul.footer-links { list-style: none; } ul.footer-links li { float: left; padding: 20px; } ul.footer-links li:last { clear: right; } table { width: 100%; border-collapse: collapse; } td { vertical-align: top; }
И вывод следующий:
| Code | Forename | Surname | Address | Postcode | Telephone | Fax | Edit |
| Create | |||||||
| code4 | James | Blue | address11 address24 address32 town5 |
postcode4 | fone4 | fone2 | Edit |
| code5 | Fred | White | address13 address24 address31 town1 |
postcode2 | fone5 | fone3 | Edit |
Я серьезно не вижу ничего, что могло бы установить размер шрифта в 16 пикселей в таблице. Это происходит для всех трех разделов (thead, tfoot, tbody). Также кажется, что Netbeans 6.9 не будет правильно отформатировать таблицу, но остальная часть документа (до и после). Его почти как будто что-то не так с таблицей, но я не вижу, что. Это происходит в Firefox и Opera (самые последние версии обоих). Я не тестировал его в IE, потому что он никогда не будет использоваться в IE.
Вы конечно же видели на некоторых сайтах запрет на использование правой кнопки мыши. Эта функция прежде всего борется с теми, кто хочет украсть ваш контент. Полностью от воровства вас не защитит эта мера, но от ручного копирования вполне. Другие варианты .
Не рекомендую отключать правую кнопку мыши, если вы выкладываете в своем блоге материалы, предназначенные для копирования. Это могут быть коды, скрипты, кулинарные рецепты, справочные материалы и другое. Запрет на копирование в данном случае отвернет от вас посетителей, и ваш блог станет менее полезным для посетителей. Если вам важна защита от плагиата, то тогда лучше используйте добавление вашего url в конце копии. Тогда вы будете уверены, что если кто-то захочет опубликовать в другом месте в интернете, скопированное у вас, то копипастер с большей вероятностью поделится ссылкой на ваш блог.
Этот рецепт подходит для любого веб-сайта. Вам нужно лишь вставить код на все страницы вашего блога:
В Blogger добавьте код в гаджет HTML/Javascript во вкладке “Дизайн”. Если вы используете одну из последних тем на вашем блоге (Emporio, Contempo, Soho, Notable), то не забудьте активировать видимость виджета (галочка напротив “Виден всем”, “Показать виджет " HTML/JavaScript "”).
На Wordpress добавьте код в виджет “Текст”.
Приближается праздник - Международный женский день. Подготовимся заранее к нему. Вы можете оригинально поздравить девушек и женщин, воспользовавшись сервисами открыток, о которых пойдет речь ниже.
Создать открытку 8 марта онлайн
Воспользуйтесь следующими сервисами, чтобы создать открытку практически с нуля.
Я надеюсь, что воспользовавшись одним из этих генераторов, вы сможете достойно поздравить своих дам с 8 марта!
Содержание статьи:
Google Plus закрывается Платформа Google Plus не оправдала надежд разработчиков и будет удалена полностью уже 2 апреля 2019 года. Вместе с ней исчезнут связанные с ней альбомы в Google Фото, станут недоступными авторизации на сайтах с аккаунтом Google Plus. Уже с 4 февраля стала недоступной функция создания профилей Google Plus, каналов и страниц. Если на вашем аккаунте хранился ценный контент, то вы можете скачать резервную копию .Больше всех изменения коснутся блогеров, ведущих свои блога на Blogspot. Станут недоступны некоторые виджеты G+, комментарии G+, а также профиль Google +. Об этом сказано в уведомлении в админке Blogger:
После объявления о прекращении работы API Google+, которое запланировано на март 2019 года, 4 февраля будет внесен ряд изменений в интеграцию Blogger с Google+.
Виджеты Google+. В дизайне блогов больше не будут поддерживаться виджеты "Кнопка +1", "Подписчики Google+" и "Значок Google+". Из вашего блога будут удалены все экземпляры этих виджетов.
Кнопки +1. Будут удалены кнопки +1 и G+, а также ссылки "Опубликовать в Google+" под записями в блоге и на панели навигации.
Обратите внимание, что, если вы используете пользовательский шаблон, в котором есть функции Google+, его может быть необходимо изменить. Обратитесь за рекомендациями к тому, кто предоставил вам этот шаблон.
Google+ Комментарии. Будет прекращена поддержка комментариев с использованием Google+, а для всех блогов, которые используют эту функцию, будут восстановлены стандартные комментарии Blogger. К сожалению, комментарии, размещенные через Google+, невозможно перенести в Blogger, поэтому они больше не будут отображаться в вашем блоге. Удаление комментариев Google Plus К сожалению, комментарии, которые были опубликованы в системе будут удалены безвозвратно. Вы лишь можете воспользоваться тем же инструментом https://takeout.google.com , чтобы сказать резервную копию комментариев от Google + на свой компьютер. Только загрузчика для него не предусмотрено и восстанавливать комментарии вам можно только вручную достаточно кривым способом. Хорошо, что я в свое время вовремя .Как заменить профиль гугл плюс профилем Блоггер Если вы ведете блог на Blogspot, то целесообразно сейчас вернуться с профиля Гугл Плюс на профиль Blogger (для тех, кто переключился на гугл плюс в своё время). Рекомендую сделать это прямо сейчас во избежании непредвиденных ситуаций, которые могут происходить при удалении аккаунтов Google Plus. Как вернуть профиль Blogger Сделать это просто в настройках админки Blogger:
Настройки –> Пользовательские настройки –> Профиль пользователя – здесь выберите Blogger
Сохраните изменения.
Подтвердите переход на и задайте свое имя или никнейм.
Не забудьте загрузить аватар в вашем профиле Blogger.
Как удалить профиль гугл плюс Если вы решили раз и навсегда избавиться от профиля Г+, то перейдите на свою страницу гугл плюс –> Настройки –> прокрутите страницу до конца вниз –> удалить аккаунт гугл плюс:
Сегодня расскажу что такоеCSS3, с чем его едят, где его искать, как правильно его прописывать. Предупреждаю, буду рассказывать от себя, упрощенно для широкой публики, как я это вижу + примеры. Итак, начнем издалека.
CSS – это стили, в которых прописываются свойства объекта. Значит, они есть во всех существующих движках, если вы их не можете найти, значит либо не там смотрите, либо их действительно нет (кривой сайт
). Где же они обычно найти? Обычно это корень сайта, название файла style.css, хотя, в принципе, название не так важно, как расширение.css, если файл с таким расширением – это файл стилей.
Смотрите также на моём блоге.