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

Как только вы начали заниматься HTML

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

,

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

Если вы хотите немного более технического введения, обязательно ознакомьтесь с 5 Baby Steps для изучения CSS Становление Kick-Ass CSS Волшебник

,

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

Каждый документ HTML содержит тег. В этом главном разделе находится ваша встроенная таблица стилей CSS. Вот как это будет выглядеть:


All of your CSS declarations.

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

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

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

Допустим, вы хотите каждый абзац (это все с

HTML-тег

) на вашей странице, чтобы быть немного больше, чем обычно. И темно-серый, а не черный. Вот как вы могли бы сделать это с помощью CSS:

p {
font-size: 120%;
color: dimgray;
}

Это все, что нужно сделать. Теперь, когда браузер отображает

абзац, текст будет наследовать размер (120 процентов от нормального) и цвет («димгрей»).

Если вам интересно, какие цвета обычного текста вы можете использовать, ознакомьтесь с этим списком цветов CSS от Mozilla.

2. Изменить регистр букв

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

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

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

Your paragraph here.

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

Если вы хотите изменить регистр набора текста в конкретный регистр, вы можете использовать эти строки CSS:

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

Последняя заглавная первая буква каждого предложения.

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

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

a:link {
color: gray;
}
a:visited {
color: green;
}
a:hover {
color: rebeccapurple;
}
a:active {
color: teal;
}

Обратите внимание, что за каждым «а» следует двоеточие, а не точка.

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

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

Несмотря на то, что подчеркнутый текст довольно четко указывает на ссылку, иногда кажется, что лучше отказаться от этого подчеркивания. Это достигается с помощью атрибута «text-painting». Вот как мы избавимся от подчеркиваний в ссылках:

a {
text-decoration: none;
}

Все с тегом link («a») останется без подчеркивания. Хотите подчеркнуть это, когда пользователь наводит на него курсор? Просто добавьте это ниже:

a:hover {
text-decoration: underline;
}

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

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

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

a:link, a:visited, a:hover, a:active {
background-color: green;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

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

Цвет фона задается цветом фона, а цвет текста — цветом. Отступ определяет размер поля — текст дополняется на 10 пикселей по вертикали и 25 пикселей по горизонтали. Выравнивание текста гарантирует, что текст отображается в центре кнопки, а не с одной стороны. Текстовое оформление, как мы видели в последнем примере, удаляет подчеркивание.

makeuseof кнопка ссылки

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

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

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

p.important {
border-style: solid;
border-width: 5px;
border-color: purple;
}

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

Your important paragraph here.

Это будет работать независимо от размера вашего абзаца; одна строка получит границу ширины страницы, высоту на одну строку, а длинный абзац будет окружен большей границей.

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

border-width: 5px 8px 3px 9px;

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

7. Центрирующие элементы

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

Для элемента блока (обычно изображения) мы будем использовать атрибут margin:

.center {
display: block;
margin: auto;
}

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

img {
margin: auto;
}

Чтобы узнать, почему это работает таким образом, ознакомьтесь с объяснением блочной модели CSS на W3C. Вот короткая графическая версия:

модель css box

Но что, если мы хотим центрировать текст? У CSS есть особый способ сделать это:

.centertext {
text-align: center;
}

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

тег:

This text will be centered.

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

8. Регулировка заполнения

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

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

img {
padding-top: 40px;
padding-right: 25px;
padding-bottom: 40px;
padding-left: 25px;
}

Мы можем использовать короткую руку для представления всей этой информации:

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

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

img {
padding: 40px 25px
}

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

9. Выделите строки таблицы

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

Вот код, который вам понадобится для этого:

tr:hover {
background-color: #ddd;
}

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

необычный стол css

10. Сдвиг изображений между прозрачным и непрозрачным

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

img {
opacity: 0.5;
filter: alpha(opacity=50);
}

Атрибут «filter» делает то же самое, что и «opacity», но Internet Explorer 8 и более ранние версии не распознают измерение непрозрачности, поэтому рекомендуется включить его.

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

img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}

Стать мастером CSS

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

, И именно тогда вы знаете, что действительно стали мастером CSS.

И если все это звучит слишком сложно, помните, что вы просто берете некоторые шаблоны CSS

и изменить их.

Что вы делаете с CSS? Какие примеры вы хотели бы видеть в будущем? Поделитесь своими мыслями в комментариях ниже!

Ссылка на основную публикацию
Adblock
detector