Коли таблиць стилів ще не існувало, для завдання розміру та гарнітури шрифту використовувався тег 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; колір: білий; 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; ) : 20%; ) ul.footer-links ( list-style: none; ) ul.footer-links li ( float: left ; 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 + на свій комп'ютер Тільки завантажувача для нього не передбачено і відновлювати коментарі вам можна лише вручну досить кривим способом. Добре, що я свого часу вчасно. Як замінити профіль Google плюс профілем Блоггер Якщо ви ведете блог на Blogspot, то доцільно зараз повернутися з профілю Google Плюс на профіль Blogger (для тих, хто переключився на Google плюс свого часу). Рекомендую зробити це прямо зараз, щоб уникнути непередбачених ситуацій, які можуть відбуватися при видаленні облікових записів Google Plus. Як повернути профіль Blogger Зробити це просто в налаштуваннях адмінки Blogger:
Установки –> Налаштування користувача –> Профіль користувача – тут виберіть Blogger
Збережіть зміни.
Підтвердьте перехід на і задайте своє ім'я або нікнейм.
Не забудьте завантажити аватар у вашому профілі Blogger.
Як видалити профіль гугл плюс Якщо ви вирішили раз і назавжди позбавитися профілю Г+, то перейдіть на свою сторінку гугл плюс –> Налаштування –> прокрутіть сторінку до кінця вниз –> видалити акаунт гугл плюс:
Сьогодні розповім, що таке CSS3, з чим його їдять, де його шукати, як правильно його прописувати. Попереджаю, розповідатиму від себе, спрощено для широкої публіки, як я це бачу + приклади. Отже, почнемо здалеку.
CSS – це стилі, у яких прописуються властивості об'єкта. Значить, вони є у всіх існуючих двигунах, якщо ви їх не можете знайти, значить або не там дивіться, або їх дійсно немає кривий сайт). Де вони зазвичай знайти? Зазвичай це корінь сайту, назва файлу style.css, хоча, в принципі, назва не така важлива, як розширення.css, якщо файл з таким розширенням - це файл стилів.
Дивіться також на моєму блозі.