Содержание

Встроенные стили, атрибут style — Основы CSS — HTML Academy

Загрузка…
Через несколько секунд всё будет готово

  • index.html
  • style.css

HTML

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»utf-8″> <title>Сайт начинающего верстальщика</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <header> <h2>Сайт начинающего верстальщика</h2> </header> <main> <img src=»img/raccoon.svg» alt=»Аватарка»> <nav> <h3>Записи в блоге</h3> <ul> <li><a href=»day-1.html»>День первый. Как я забыл покормить кота</a></li> <li><a href=»day-2.html»>День второй. Хочу быть верстальщиком</a></li> <li><a href=»day-3.html»>День третий. Мой кот на меня обиделся</a></li> <li><a href=»day-4.html»>День четвёртый. Как я чуть не заболел</a></li> <li><a href=»day-5.html»>День пятый. Отдыхаю</a></li> <li><a href=»day-6.html»>День шестой. Как я ничего не понял</a></li> <li><a href=»day-7.html»>День седьмой. Кекс выдал мне задание</a></li> <li><a href=»day-8.html»>День восьмой. Очень серьёзный</a></li> <li><a href=»day-9.html»>День девятый. Точнее ночь</a></li> <li><a href=»day-10.html»>День десятый. Подведение итогов</a></li> <li><a href=»day-11.html»>День одиннадцатый. Без фанатизма</a></li> <li><a href=»day-12.html»>День двенадцатый. Все любят печенье</a></li> <li><a href=»day-13.html»>День тринадцатый.

Нашёл статью</a></li> <li><a href=»day-14.html»>День четырнадцатый. Новый формат</a></li> <li><a href=»day-15.html»>День пятнадцатый. Галерея селфи</a></li> </ul> </nav> <section> <p>Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл <a href=»https://htmlacademy.ru/courses»>тренажёры по HTML и CSS</a> и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.</p> <p>Моё первое задание — вести дневник и честно писать обо всех своих свершениях.</p> </section> <section> <h3>Навыки</h3> <dl> <dt>HTML</dt> <!— Добавьте атрибуты style тегам div ниже —> <dd><div>60%</div></dd> <dt>CSS</dt> <dd><div>20%</div></dd> <dt>JS</dt> <dd><div>10%</div></dd> </dl> </section> </main> <footer> Подвал сайта </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: «Arial», sans-serif; color: #222222; background: #ffffff url(«img/bg-page. png») no-repeat top center; } h2 { font-size: 36px; line-height: normal; } h3 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; background-color: #4470c4; border: 5px solid #2d508f; color: #ffffff; } .blog-navigation h3 { margin-top: 0; } .blog-navigation ul { list-style: none; padding-left: 0; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } footer { margin-top: 30px; }

Что в задании вам не понравилось?

Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)

Другое (сейчас напишу)

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

ЗадачиВыполнено

  1. Первому диву с классом skills-level задайте атрибут style со значением width: 60%;,
  2. второму диву — со значением width: 20%;
    ,
  3. а третьему диву — со значением width: 10%;.

Статьи с тегом «css» — Веб-стандарты

a11y, css, design, education, fonts, html, js, performance, podcast, satire, security, svg, typography

  • Пути в ка­стом­ных свой­ствах. Ис­то­рия од­но­го бага

    Сергей Артёмов

  • Лип­кая шап­ка таб­ли­цы на CSS

    Григорий Коваленко

  • Как ор­га­ни­зо­ва­на веб-плат­фор­ма

    Виталий Зюзин

  • CSS-нестинг — боль­ше, чем са­хар

    Роман Дворнов

  • Я со­всем за­был про сти­ли для пе­ча­ти

    Мануэль Матузович

  • Во­ди­тель или ме­ха­ник?

    Питер-Пол Кох

  • Объ­яс­не­ние клю­че­вых слов initial, inherit, unset и revert в CSS

    Элад Шехтер

  • Со­ве­ты по слож­ным CSS-ил­лю­стра­ци­ям

    Джи Томпкинс

  • Раз­ра­бот­чи­ка, ко­то­рый пи­сал на чи­стом HTML и CSS в «Б­лок­но­те», при­зна­ли кол­ду­ном

    Джей Квери

  • Ин­клю­зив­ные ком­по­нен­ты: сво­ра­чи­ва­е­мые сек­ции

    Хейдон Пикеринг

  • Из­вле­ка­ем кри­ти­че­ский CSS

    Милица Михайлия

  • Ин­клю­зив­ные ком­по­нен­ты: пе­ре­клю­ча­тель темы

    Хейдон Пикеринг

  • Ин­клю­зив­ные ком­по­нен­ты: спи­сок дел

    Хейдон Пикеринг

  • Но­вые ло­ги­че­ские свой­ства в CSS!

    Элад Шехтер

  • CSS и JS в со­сто­я­нии вой­ны: как это оста­но­вить

    Андрей Ситник

  • HTML, CSS и ис­че­за­ю­щие точ­ки вхо­да в ин­ду­стрию

    Рейчел Эндрю

  • Как на са­мом деле ра­бо­та­ет position: sticky в CSS

    Элад Шехтер

  • Text-transform и ко­пи­ро­ва­ние

    Игорь Шевченко

  • «Ис­прав­ле­ни­е» спис­ков

    Скотт О’Хара

  • Та же ис­то­рия, толь­ко с CSS

    Тоби Лангел

  • Ин­клю­зив­ные ком­по­нен­ты: пе­ре­клю­ча­те­ли

    Хейдон Пикеринг

  • Про­сто ис­поль­зуй­те сти­ли для :focus, чёрт возь­ми

    Крис Фердинанди

  • CSS: но­вый вид JavaScript

    Хейдон Пикеринг

  • Кри­ти­че­ский CSS + про­грес­сив­ный CSS = ?

    Даниил Оношко

  • Как со­здать адап­тив­ную сет­ку

    Зел Лью

  • Ар­хи­тек­ту­ра CSS

    Филип Уолтон

  • Культ кар­го CSS

    Бен Дарлоу

  • По­че­му Sass?

    Дэн Седерхольм

  • Ос­нов­ные спо­со­бы вёрст­ки. Часть вто­рая: бес­таб­лич­ная вёрст­ка

    Лев Солнцев

  • Ос­нов­ные спо­со­бы вёрст­ки. Часть пер­вая: таб­ли­ца

    Лев Солнцев

  • Раз­ме­ры бло­ков, или На­зад в бу­ду­щее

    Дэвид Стори

  • Ещё одна CSS-тех­ни­ка за­ме­ны тек­ста изоб­ра­же­ни­ем

    Николас Галлахер

  • Как я на­учил­ся лю­бить скуч­ные ме­ло­чи CSS

    Питер Гастон

  • Клю­че­вые сло­ва в ли­ней­ных гра­ди­ен­тах

    Эрик Мейер

  • Раз­би­ра­ем­ся с vertical-align

    Луис Лазарис

  • Как ра­бо­та­ет nth-child

    Крис Койер

  • По­че­му у нас нет се­лек­то­ра по ро­ди­те­лю

    Джонатан Снук

  • Нюансы CSS

    Лев Солнцев

  • Пре­иму­ще­ства мно­го­строч­но­го CSS

    Вячеслав Олиянчук

  • Ка­кой рас­клад?

    Вячеслав Олиянчук

  • Пре­фикс или по­стх­ак

    Эрик Мейер

Основы CSS | Основы современной верстки

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

Для визуального оформления WEB-страницы создан язык CSS. CSS переводится как каскадные таблицы стилей (Cascading Style Sheets). Именно этот язык отвечает за то, как наши HTML-элементы будут выведены пользователю в браузере.

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

Стили CSS

Любые стили CSS, будь то цвет текста или целая анимация, записываются по одной и той же формуле: название стиля: значение;.

Чтобы добавить стиль к элементу, необходимо использовать селектор. Он указывает, к какому именно элементу или элементам нужно добавить наши стили. Для примера возьмем следующую HTML-разметку:

<p>
  Хекслет — практические курсы по программированию. Мы помогаем новичкам стать
  профессиональными программистами, а опытным разработчикам получать новые
  знания и расти профессионально.
</p>

Изменим размер и цвет шрифта в этом предложении. Это можно сделать следующей CSS-записью:

p {
  color: red;
  font-size: 20px;
}

Что означает эта таинственная запись выше? Ее можно условно разбить на три основные составляющие:

  1. p — это селектор. Здесь мы говорим, чтобы браузер выбрал все параграфы на странице. О том, какие бывают селекторы, мы поговорим чуть позже.
  2. Фигурные скобки { }. Они отделяют селектор от правил. Все правила записываются уже внутри этих фигурных скобок.
  3. Свойства. Они записываются по схеме, которая представлена ниже. Чем больше у вас будет практики, тем больше различных свойств и их значений вы будете знать.
    Не пытайтесь выучить их все сразу. Всегда используйте документацию. Даже опытные разработчики прибегают к ней, чтобы вспомнить правильные значения того или иного свойства.

Разберем некоторые свойства, которые помогут вам оформлять текст:

  • font-size. Это свойство позволяет задать размер шрифта. Со временем вы узнаете множество различных единиц, в которых можно записать значение. На начальном этапе используйте значения в пикселях. Это достаточно простая и понятная единица измерения, которая не зависит от того, какие еще стили указаны у текста.
  • color. Это свойство поможет вам установить новое значение цвета для выбранного текста. Цвет может записываться разными способами. Помимо этого есть большой набор цветов, которые можно записать словами. Это отличный способ познакомиться со свойством color. Посмотреть на все такие записи можно здесь.
  • text-align. Свойство, устанавливающее положение текста. Может принимать одно из следующих значений: left, right, center, justify.

Подключение CSS

Использовать CSS на странице можно с помощью нескольких способов:

  • использование специального файла
  • использование тега <style> внутри HTML-разметки
  • записывая стили непосредственно у нужного тега. Этот способ называется инлайн (inline) записью.

Разберемся с каждым способом отдельно.

Использование отдельного CSS-файла.

Данный способ один из самых удобных в реальной разработке. Так как стилей в проекте обычно много, то держать их в HTML-файле не очень удобно. Связано это с тем, что HTML-файл становится очень большим и ориентироваться в нем становится невозможно. Чтобы этого избежать, можно создать отдельный CSS-файл. Этот файл будет иметь расширение .css, имя же может быть произвольным.

Представим, что на компьютере создана отдельная директория с проектом. Она может выглядеть следующим образом:

site/
├── css/
│   ├── main.css
├── html/
│   ├── index.html

Добавим основную информацию в файл index.html:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
  </head>
  <body></body>
</html>

Теперь необходимо подключить файл main.css в наш файл index.html. Для этого используется специальный тег <link>. У данного тега необходимо указать атрибут

href, значением которого будет путь до файла main.css. Тег <link> указывается в секции <head>.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
    <link rel="stylesheet" href="../css/main.css">
  </head>
  <body></body>
</html>

Дополнительно разберем эту запись: . ./css/main.css. Ее можно условно разбить на три составляющие:

  1. ../ — переход в директорию выше. Изначально файл index.html находится в директории html/, поэтому мы «выходим» из нее в директорию site/.
  2. css/ — переход в директорию css/.
  3. main.css — указание имени и расширения файла, который мы хотим подключить.

Если бы наши файлы index.html и main.css находились в одной директории, то подключение выглядело бы следующим образом: href="main.css".

После подключения файла мы можем записывать все нужные стили именно в файле main.css. Они автоматически подключатся на наш сайт.

Использование тега style

Вторым способом использования CSS является использование стилей в специальном теге <style>. Для этого нет необходимости создавать отдельный файл и подключать его к HTML. В этом случае тег <style> обычно указывается внутри секции <head>. Хоть это и не обязательное правило, но желательно придерживаться именно такой структуры.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
    <style>
      p {
        color: red;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.</p>
  </body>
</html>

Данный способ не является основным, хотя и рекомендуется для некоторых стилей. Это позволит отобразить некоторые стили еще до того, как загрузится CSS-файл. Какие стили рекомендовано так выносить, вы сможете узнать в процессе становления вас как профессионала.

Inline-стили

Последним вариантом использования CSS являются инлайн-стили. Они подключаются с помощью атрибута style у любого тега в разметке. Это наименее предпочтительный способ. Его тяжело читать, особенно если у тега десяток стилей. К тому же вы не сможете записать стили для всех одинаковых тегов. Придется для каждого указывать отдельно. Это приведет к постоянному копированию стилей.

Возьмем прошлый пример и добавим inline стили:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
  </head>
  <body>
    <p>
      Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.
    </p>
  </body>
</html>

Селекторы

Селекторы — краеугольный камень всего CSS.

«Не так важны стили, как то, к чему они применяются» © Народная мудрость

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

Разбор каждого селектора — это тема для целого курса. Сейчас нас интересуют три основных селектора, которые можно назвать базовыми:

  1. Селектор по тегу. Такой селектор мы применяли на протяжении всего урока. Цель простая — просто указать тег, для которого будут применяться стили.
  2. Селектор по классу. Если нужно выбрать только конкретные элементы в HTML, то можно дать тегу произвольный класс и, используя конструкцию .название-класса, добавить стили.
  3. Селектор по идентификатору. Еще один случай выборки по дополнительному атрибуту тега. Главная разница заключается в самом HTML — идентификатор не может повторяться в рамках одной страницы. Одно имя может использоваться только один раз. В связи с этим нет возможности задать стили для идентификатора и использовать его на других элементах. Для выбора идентификатора используется конструкция #имя-идентификатора.

Рассмотрим все три селектора на реальном примере:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Основной файл index. html</title>
    <link rel="stylesheet" href="../css/main.css">
  </head>
  <body>
    <main>
      <h2>Заголовок с идентификатором</h2>
      <p>Просто параграф без класса или идентификатора</p>
    </main>
  </body>
</html>

#main-title {
  color: white;
  font-size: 20px;
  text-align: center;
}
.content {
  background-color: black;
}
p {
  color: white;
}

После применения этих стилей получится следующая картина:

  • Черный фон секции <main>. Для этого использовали класс content и селектор .content;
  • Заголовок первого уровня имеет белый цвет, размер шрифта 20 пикселей и расположение по центру. У заголовка есть идентификатор main-title, поэтому для добавления стилей мы смогли использовать селектор по идентификатору #main-title;
  • Все параграфы будут иметь белый цвет текста. Для этого использовался селектор по тегу.

Вложенность селекторов

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

<section>
  <h3>Новости</h3>
  <article>
    <h3>Новость 1</h3>
    <p>Текст новости</p>
  </article>
  <article>
    <h3>Новость 2</h3>
    <p>Текст новости</p>
  </article>
</section>
<section>
  <h3>Интересные истории</h3>
  <article>
    <h3>История 1</h3>
    <p>Текст истории</p>
  </article>
  <article>
    <h3>История 2</h3>
    <p>Текст истории</p>
  </article>
</section>

Как добиться того, чтобы заголовки новостей были больше? Можно для каждого заголовка в новости добавить свой класс. Это хорошее решение, если новостей немного или нет необходимости для каждой такой секции вводить новые стили для заголовков.

Более простым решением станет использование вложенности селекторов. Вначале посмотрим, как решить нашу задачу:

.news article h3 {
  font-size: 32px;
}

Этот селектор комбинирует два уже известных типа:

  1. Селектор по классу .news
  2. Селекторы по тегу article и h3

Разделив их пробелом, мы сказали браузеру: «Возьми все заголовки <h3> из <article>, который лежит внутри элемента с классом news. В примере это элемент <section>.

Читать селекторы стоит именно таким образом — справа налево. Такой подход называется вложенностью селекторов. Можно комбинировать что угодно и с какой угодно глубиной.

Важно: для удобной работы не стоит использовать очень большую вложенность. Старайтесь использовать комбинацию не более 2 или 3 селекторов

Важно понимать, что такая запись .news article h3 выберет все заголовки второго уровня во всех <article>, которые лежат внутри блока <section>. Давайте немного видоизменим верстку, чтобы это проверить.

<section>
  <h3>Новости</h3>
  <article>
    <h3>Новость 1</h3>
    <p>Текст новости</p>
  </article>
  <article>
    <h3>Новость 2</h3>
    <p>Текст новости</p>
    <section>
      <h3>Похожие новости</h3>
      <article>
        <h3>Похожая новость 1</h3>
        <p>Текст новости</p>
      </article>
    </section>
  </article>
</section>

Ко второй новости мы добавили блок «Похожие новости». Самое интересное, что наше правило font-size: 32px; применится и к заголовку «Похожие новости», и к заголовку «Похожая новость 1». Так как оба заголовка так или иначе лежат внутри <article>, которые находятся в блоке с классом .news.

Такой тип селекторов называется контекстным или селектор потомков. С его помощью мы выбираем всех потомков, которые встречаются внутри самого левого селектора.

Как же нам выбрать только те заголовки, которые относятся непосредственно к новостям, а не к похожим новостям или заголовкам других секций? Здесь нам на помощь придет дочерний селектор. Его суть в выборе только тех элементов, которые непосредственно лежат внутри нужного нам блока. Без учета всех остальных вложенностей. Чтобы указать такой селектор, используется символ >. Укажем, что нам нужны только те <article>, которые лежат внутри .news. И нам нужны заголовки, которые находятся внутри этих <article>. Это делается следующим образом:

.news > article > h3 {
  font-size: 24px;
}

Теперь размер шрифта для заголовков «Похожие новости» и «Похожая новость 1» не будет увеличен, так как мы указали более конкретный, или как его еще называют, более специфичный селектор.

Самостоятельная работа
  • Создайте у себя на компьютере файлы index.html и style. css. Подключите файл стилей. Создайте разметку любого текста и используя свойства, которые мы изучили в этом уроке, оформите текст.
  • Попробуйте скопировать примеры из этого урока.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

CSS | Ссылки — GeeksforGeeks

Посмотреть обсуждение

Улучшить статью

Сохранить статью

  • Уровень сложности: Easy
  • Последнее обновление: 19 янв, 2022

  • Читать
  • Обсудить

    • Посмотреть обсуждение

    Улучшить статью

    Сохранить статью

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

    • a:link => Это обычная, непосещаемая ссылка.
    • a:visited => Это ссылка, которую пользователь посетил хотя бы один раз
    • a:hover => Это ссылка, когда на нее наводится указатель мыши
    • a:active => Это ссылка, по которой только что щелкнули.

    Синтаксис:  
     

     a:ссылка {
    цвет: имя_цвета;
}

    имя_цвета может быть задано в любом формате, таком как имя цвета (зеленый), значение HEX (#5570f0) или значение RGB rgb (25, 255, 2). Существует еще одно состояние «a: focus», которое используется для фокусировки, когда пользователь использует клавишу табуляции для перехода по ссылкам.
    Значение ссылок по умолчанию:  
     

    • По умолчанию созданные ссылки подчеркнуты.
    • Когда мышь находится над ссылкой, она меняется на значок руки.
    • Нормальные/непосещенные ссылки выделены синим цветом.
    • Посещенные ссылки окрашены в фиолетовый цвет.
    • Активные ссылки окрашены в красный цвет.
    • Когда ссылка находится в фокусе, вокруг нее появляется контур.

    Example  
     

    html

    < html >

         < head >

             < title >CSS links title >

             < style >

    p {

                     размер шрифта: 25 пикселей;

                     text-align: center;

                 }

              

             style >

         head >

     

         < корпус >

         корпус >   

    HTML >

    Выход:

    . text-decoration

  • background-color

    • color: Это свойство CSS используется для изменения цвета текста ссылки.
    Синтаксис:  
     

     а {
    цвет: имя_цвета;
}

    Example:  
     

    html

    < html >

         < head >

    < title >Свойства цвета ссылки title >

             < стиль >

                 p {

                             размер шрифта: 20;

                     text-align:center;

    }

    /*БЕЗВЕДЕННАЯ СВЯЗАЯ0                  цвет:красный;

                 }

              

                 /*visited link will appear blue*/

                 a:visited{

                     color:blue;

    }

    /*Когда мышь зависят над ссылкой, она появится оранжевый* /

                 a:hover{

                     цвет:оранжевый;

                 }

              

                 /*when the link is clicked, it will appear black*/

                 a:active{

                     color:black ;

                 }

              

             style >

         head >

          

         < body >

              Эта ссылка будет менять цвет в зависимости от состояния. p >

         body >   

    html >

    Output:  
     

    font-family: This property is used чтобы изменить тип шрифта ссылки, используя свойство font-family.
    Синтаксис:  
     

     а {
    font-family: "фамилия";
}

    Пример:  
     

    html

    < html >

         < head >

             < style >

    /*Первоначальная ссылка семейство шрифт Arial* /

    A {

    семейство шрифтов: Arial;

    }

    P {

    Font-Size: 30px;

                     text-align:center;

    }

    /*БЕСПЛАТНАЯ СЕМЕЙ FONT* /

    a:ссылка{

                     цвет: Arial;

                 }

              

                 /*visited link font family*/

                 a:visited{

                     font-family:Arial;

                 }

              

    /*Когда мышь будет зависеть от нее на время новой римской* /

    A: Hover {

    Font-family: Times New Romman;

    }

    /*Когда ссылка будет нажати0091 a:active{

                    семейство шрифтов: Comic Sans MS;

                 }

             style >

         head >

     

         < body >

             id="link">Гики для гиков A > А компьютерная наука

    Портал для фанатов. >

    Выход:

    .
    Синтаксис:  
     

     а {
    текстовое оформление: нет;
}

    Example:  
     

    html

    < html >

         < head >

             < title >Оформление текста в ссылке title >

             < style >

              

                 /*Set the font size for better visibility*/

                 p {

                     размер шрифта: 2rem;

                 }

                  

               /*Удаление подчеркивания с помощью text-decoration*/

                 a{

                                              text;

    }

    /*Подчеркнуть может быть добавлен с использованием

    Текстовый декорация: подчеркивание;

                 */

             style >

         head >

         < body >

             Portal for Geeks. P >

    Body >

    HTML > 9003 HTML >

    .0213

    Вывод:

    background-color: Это свойство используется для установки цвета фона ссылки.
    Синтаксис:  
     

     а {
    цвет фона: имя_цвета;
}

    Example:  
     

    html

    < html >

         < head >

             < title >background color title >

             < style >

                 /*Установка размера шрифта для лучшей видимости*/

                 p{

                     размер шрифта: 2rem;

                 }

                 /*Designing unvisited link button*/

                 a:link{

                     background-color: powderblue;

                     цвет:зеленый;

                     padding:5px 5px;

                     украшение текста: нет;

                     дисплей: встроенный блок;

    }

    /*Кнопка для конструкции. зеленый;

                     цвет:белый;

                     padding:5px 5px;

                     text-align: center;

                     украшение текста: нет;

                     дисплей: встроенный блок;

                        }

             стиль

    8 > голова >

    < Body >

    GEKSFOREEEEEECEEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEKEEE с >

    Body >

    HTML >

    . 0213

    Вывод:  
     

    Кнопка ссылки CSS: Ссылки CSS также можно стилизовать с помощью кнопок/полей. В следующем примере показано, как ссылки CSS могут быть оформлены в виде кнопок.
    Example:  
     

    html

    < html >

         < head >

             < title >Link button title >

             < style >

                 /*Setting font size для лучшей видимости*/

                 p{

                            font-size: 2rem;

                 }

                 a {

                         

                     цвет:белый;

                     padding:5px 5px;

                     border-radius:5px;

                     text-align: center;

                     украшение текста: нет;

                     дисплей: встроенный блок;

                 }

             style >

         head >

         < body >

          Компьютерщики для компьютерщиков A > Портал компьютерных наук для гиков.

    Вывод:


    Рекомендуемые статьи

    Страница :

    Дизайн-система для воссоздания старых пользовательских интерфейсов0001

    Дизайн-система для воссоздания старых интерфейсов.

    Введение

    98.css — это библиотека CSS для создания интерфейсов, похожих на Windows 98. Подробнее см. на GitHub.

    Моя первая программа VB4

    Привет, мир!

    Эта библиотека основана на использовании семантического HTML . Для изготовления кнопки вам понадобится использовать <кнопка> . Элементы ввода требуют меток. Кнопки со значками полагаются на ария-метка . Эта страница проведет вас через этот процесс, но доступность является основным цель этого проекта.

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

    Эта библиотека не содержит JavaScript , она просто стилизует ваш HTML с помощью CSS. Это означает, что 98.css совместим с выбранным вами интерфейсным фреймворком.

    Вот пример 98.css, используемого с React, и пример с ванильным JavaScript. Самый быстрый способ использовать 98.css — это импортировать его из unpkg.

     <ссылка
  отн = "таблица стилей"
  href="https://unpkg.com/98.css"
>

    Вы можете установить 98.css со страницы релизов GitHub или из npm.

     нпм установить 98.css

    Компоненты

    Кнопка

    Командная кнопка , также называемая нажимной кнопкой, представляет собой элемент управления. это заставляет приложение выполнять какое-то действие, когда пользователь щелкает его. — Взаимодействие с пользователем Microsoft Windows с. 160

    Стандартная кнопка имеет ширину 75 пикселей и высоту 23 пикселя с приподнятой внешней и внутренней границей. По умолчанию им дается 12px горизонтального отступа.

    Показать код
     
<тип ввода = "отправить" />
<тип ввода = "сброс" />

    При нажатии кнопок приподнятые границы становятся вдавленными. Следующая кнопка моделируется в нажатом (активном) состоянии.

    Показать код

    Отключенные кнопки сохраняют ту же приподнятую границу, но имеют «размытый» цвет. внешний вид на их этикетке.

    Показать код
     <кнопка отключена>На меня нельзя нажать

    Фокус кнопки передается пунктирной рамкой, установленной на 4 пикселя внутри содержимого кнопки. Следующий пример моделируется для фокусировки.

    Показать код

    Флажок

    Флажок представляет независимый или неисключительный выбор. — Взаимодействие с пользователем Microsoft Windows с. 167

    Флажки представлены в виде утопленной панели, заполненной значком «флажок», когда выбрано рядом с меткой, указывающей на выбор.

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

    Это флажок

    Показать код

    Флажки могут быть выбраны и отключены со стандартными проверенными и отключенными атрибуты.

    При группировании входных данных оберните каждый ввод в контейнер с классом field-row . Это гарантирует постоянное расстояние между входами.

    Я проверен

    Я неактивен

    Я неактивен, но все еще проверен

    Показать код
     
    
  <введите проверенный тип="флажок">
  

    
<дел>
  <тип ввода отключен = "флажок">
    <дел> <ввод отмечен отключенным типом = "флажок">

    Кнопка Опциона

    Кнопка опции , также называемая радиокнопкой, представляет один выбор из ограниченного набора взаимоисключающих вариантов. То есть пользователь может выбрать только один набор опций. — Взаимодействие с пользователем Microsoft Windows с. 164

    Кнопки опций можно использовать через радиомодуль типа на элементе ввода.

    Кнопки выбора можно сгруппировать, указав общий имя атрибут на каждом вход. Как и раньше: при группировании входных данных каждый входной поток помещается в контейнер с field-row class, чтобы обеспечить постоянное расстояние между входными данными.

    Да

    Нет

    Показать код
     
    
  
  

    
<дел>

    Кнопки опций также могут быть проверены и отключены с соответствующими Атрибуты HTML.

    Арахисовое масло должно быть однородным

    Я понимаю, почему людям нравится хрустящее арахисовое масло

    Хрустящее арахисовое масло полезно

    Показать код
     
    
  
  

    
<дел>