10 простых кодов CSS, которые можно изучить за 10 минут

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

Мы покажем вам, как создать встроенную таблицу стилей, чтобы вы могли практиковать свои навыки работы с CSS, а затем 10 простых примеров, которые покажут вам, как делать некоторые основные вещи. Оттуда вы сможете делать больше на своем сайте с помощью CSS!

  1. Самые важные языки программирования в эпоху Интернета вещей
  2. Стоит ли изучать много языков программирования или только один?

Встроенная таблица стилей

Все HTML-документы содержат теги. В головной части находится встроенная таблица стилей, она будет выглядеть так:

Объявления CSS будут здесь.

Поместите его в начало файла HTML, добавьте его в CSS, и все готово к запуску.

1. Простой формат абзацев.

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

Предположим, вы хотите, чтобы каждый сегмент (начинающийся с тега

) на вашей странице будет немного больше обычного, темно-серым, а не черным. Вот как вы это сделаете с помощью CSS:
п {размер шрифта: 120%; цвет: тускло-серый; }

Тогда, теперь любой абзац

То, что отображается в браузере, будет иметь размер шрифта на 20% больше и цвет «тускло-серый».

2. Измените слово

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

Сначала назовите абзац, здесь я хочу, чтобы абзац был маленькими буквами, поэтому всегда устанавливайте имя маленькими буквами:

p .smallcaps {font-option: small-caps;
}

Чтобы создать полный абзац маленькими буквами, мы будем использовать немного другой тег HTML:

«smallcaps»> Ваш абзац здесь.

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

Если вы хотите изменить стиль текста для конкретного случая, вы можете использовать следующие строки CSS:

преобразование текста: прописные буквы; текст-преобразование: нижний регистр; текст-преобразование: заглавные буквы; преобразование текста: прописные буквы; текст-преобразование: нижний регистр; текст-преобразование: заглавные буквы; преобразование текста: прописные буквы; текст-преобразование: нижний регистр; текст-преобразование: заглавные буквы;

3. Измените цвет ссылки.

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

a: ссылка {цвет: серый; } a: посетил {цвет: зеленый; } a: hover {цвет: rebeccapurple; } a: active {цвет: бирюзовый; }

Обратите внимание, что каждая буква «a» будет иметь двоеточие (:), а не точку.

Каждое объявление изменит цвет ссылки в определенном контексте. Нет необходимости изменять класс ссылки, чтобы она меняла цвет. Цвет будет определяться пользователем и статусом ссылки.

4. Удалите подчеркнутые ссылки:

Чтобы идентифицировать определенный фрагмент текста как ссылку, он часто сопровождается подчеркиванием, но иногда лучше подчеркнуть его. Это было сделано с помощью атрибута «text-decoration». Вот как удалить подчеркивание:

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

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

a: hover {украшение текста: подчеркивание; }

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

5. Создайте кнопку ссылки.

Если вы хотите, чтобы ваши ссылки привлекали больше внимания, то использование кнопок ссылок — отличный способ сделать это. Требуется больше строк кода, но не очень сложно:

a: ссылка, a: посещено, a: hover, a: active {background-color: green; цвет белый ; отступ: 10px 25px; выравнивание текста: центр; текстовое оформление: нет; дисплей: встроенный блок; }

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

Цвет фона устанавливается с помощью background-color, цвет текста — с цветом. Padding определяет расстояние от текста до границы поля, верх и низ — 10 пикселей, а слева и справа — 25 пикселей. Text-align гарантирует, что текст будет отображаться посередине кнопки, а не смещаться в одну сторону. text-decoration, как мы видели в приведенном выше примере, удаляет подчеркивание.

«Display: inline-block» немного сложнее. Короче говоря, он позволяет вам установить высоту и ширину объекта и убедиться, что он начинает новую строку при вставке.

6. Создайте текстовое поле.

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

p.important {стиль границы: твердый; ширина границы: 5 пикселей; цвет границы: фиолетовый; }

Этот код создает фиолетовую рамку шириной 5 пикселей вокруг любого важного абзаца. Чтобы создать абзац, наследующий эти атрибуты, просто объявите следующее:

«important»> Вставьте сюда важный текст.

Приведенный выше код будет применен к каждому фрагменту текста, который вы хотите, независимо от количества строк этого абзаца.

Есть много разных типов бордюров на выбор. Вместо «сплошной» попробуйте «пунктирная» или «двойная». А ширина может быть «тонкой», «средней» или «толстой». Вы даже можете определить толщину каждой границы отдельно следующим образом:

ширина границы: 5px 8px 3px 9px;

В результате верхняя граница составляет 5 пикселей, правая граница — 8 пикселей, нижняя часть — 3 пикселей, а левая граница — 9 пикселей.

7. Выровняйте элементы на странице.

В CSS есть 2 способа центрировать элемент:

Для блочных элементов, таких как изображения, вы можете использовать свойства полей:

.center {дисплей: блок; маржа: авто; }

Этот код гарантирует, что элемент отображается как блок и что поля с каждой стороны устанавливаются автоматически (делая их равными). Если вы хотите центрировать все изображения на данной странице, вы можете добавить «margin: auto» к тегу img:

img {маржа: авто; }

Что делать, если объект нужно центрировать, это текст? CSS делает это так:

.centertext {выравнивание текста: центр; }

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

:

«centertext»> Текст будет центрирован.

8. Настроить заполнение.

Отступ элемента определяет пространство вокруг этого элемента. Например, если вы добавите 25 пикселей к отступу в конце изображения, текст под изображением будет смещен до 25 пикселей. Многие элементы могут иметь отступы, но в качестве примера мы будем использовать изображение.

Предположим, вы хотите, чтобы каждое изображение имело отступ слева и справа по 20 пикселей, сверху и снизу по 40 пикселей. Есть несколько способов сделать это. Самый простой способ:

img {padding-top: 40 пикселей; отступ справа: 25 пикселей; padding-bottom: 40 пикселей; отступ слева: 25 пикселей; }

Короче:

img {padding: 40px 25px 40px 25px; }

Это устанавливает для верхнего, правого, нижнего и левого полей нужное вам число. Но мы можем сделать его еще короче:

img {padding: 40px 25px}

Когда вы используете два значения, первое значение устанавливается в начало и конец, а второе — влево и вправо.

9. Отметьте строки в таблице.

CSS может многое сделать, чтобы сделать таблицу красивее. Добавьте цвета, отрегулируйте контур и с легкостью сделайте свой стол гибким, чтобы он соответствовал вашему мобильному экрану. Здесь мы рассмотрим «крутой» эффект: выделяйте строки таблицы при наведении на них курсора. Его код здесь:

tr: hover {цвет фона: #ddd; }

А теперь при наведении курсора на строки в таблице это будет выглядеть так:

Изображение 1 из 10 простых кодов CSS, которые вы можете изучить за 10 минут

10. Переключение между прозрачным и прозрачным изображениями.

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

img {непрозрачность: 0,5; фильтр: альфа (непрозрачность = 50); }

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

А вот код для перехода от слегка прозрачного изображения к нормальному:

img.hover {непрозрачность: 1.0; фильтр: альфа (непрозрачность = 100); }

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *