Home-theater-designers
Как только вы начнете увлекаться HTML, вы, вероятно, захотите добавить больше визуального эффекта на свои веб-страницы. CSS - лучший способ сделать это. CSS позволяет применять изменения ко всей странице, не полагаясь на встроенные стили.
Вот несколько простых примеров CSS, которые покажут вам, как внести некоторые базовые изменения стиля на вашу веб-страницу.
1. Базовый код CSS для простого форматирования абзацев
Стилизация с помощью CSS означает, что вам не нужно указывать стиль каждый раз при создании элемента. Вы можете просто сказать: «Все абзацы должны иметь этот конкретный стиль», и все готово.
Допустим, вам нужен каждый абзац (
, один из HTML-тегов, который должен знать каждый), чтобы он был немного больше обычного. Причем с темно-серым текстом вместо черного.
Связанный: Шпаргалка по HTML
Код CSS для этого:
p { font-size: 120%; color: dimgray; }Простой! Теперь, когда браузер отображает абзац, текст наследует его размер (120 процентов от обычного) и цвет (тускло-серый).
Если вам интересно, какие цвета обычного текста вы можете использовать, ознакомьтесь с этим Список цветов CSS из Mozilla.
2. Пример CSS для изменения регистра символов
Хотите создать обозначение для абзацев, которое должно быть маленькими заглавными буквами? Пример CSS для этого:
p.smallcaps { font-variant: small-caps; }Чтобы сделать абзац полностью маленьким заглавным, используйте немного другой тег HTML. Вот как это выглядит:
Your paragraph here.
Добавление точки и имени класса к элементу определяет подтип этого элемента, определенный классом. Вы можете сделать это с помощью текста, изображений, ссылок и всего остального.
Если вы хотите изменить набор текста для конкретного случая, используйте эти примеры кода CSS:
text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;Последняя заглавная буква каждого предложения.
3. Простой CSS для изменения цвета ссылок
Изменения стиля не ограничиваются абзацами. Ссылке можно присвоить четыре разных цвета: стандартный цвет, цвет посещения, цвет наведения и активный цвет (который отображается, когда вы нажимаете на нее). Используйте этот образец кода CSS:
a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }В ссылках за каждой буквой «а» ставится двоеточие, а не точка.
Каждое из этих объявлений меняет цвет ссылки в определенном контексте. Нет необходимости изменять класс ссылки, чтобы она изменила цвет.
4. Удалите подчеркивание ссылок с помощью этого образца CSS.
Хотя подчеркнутый текст явно указывает на ссылку, иногда лучше отказаться от этого подчеркивания. Это достигается с помощью атрибута text-decoration. В этом примере CSS показано, как удалить подчеркивание в ссылках:
a { text-decoration: none; }Все, что помечено тегом «ссылка» («а»), останется без подчеркивания. Хотите подчеркнуть его, когда пользователь наводит на него курсор? Просто добавьте:
a:hover { text-decoration: underline; }Вы также можете добавить это текстовое оформление к активным ссылкам, чтобы подчеркивание не исчезало при нажатии на ссылку.
5. Создайте кнопку ссылки с помощью кода CSS.
Хотите привлечь больше внимания к своей ссылке? Кнопка ссылки - отличный способ сделать это. Для этого потребуется еще несколько строк:
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; }Давайте объясним этот пример кода CSS.
Включение всех четырех состояний ссылки гарантирует, что кнопка не исчезнет, когда пользователь наведет на нее курсор или щелкнет по ней. Вы также можете установить разные параметры для наведенных и активных ссылок, например, изменение цвета кнопки или текста.
Цвет фона устанавливается с помощью background-color, а цвет текста - с помощью color. Padding определяет размер поля - текст заполняется на 10 пикселей по вертикали и 25 пикселей по горизонтали.
Text-align гарантирует, что текст будет отображаться в центре кнопки, а не сбоку. Текстовое оформление, как и в последнем примере, убирает подчеркивание.
что делает кнопка wps
Код CSS display: inline-block немного сложнее. Короче говоря, он позволяет вам установить высоту и ширину объекта. Это также гарантирует, что при вставке начинается новая строка.
6. Пример кода CSS для создания текстового поля
Простой абзац не очень интересен. Если вы хотите выделить элемент на своей странице, вы можете добавить границу. Вот как это сделать с помощью строки простого кода CSS:
p.important { border-style: solid; border-width: 5px; border-color: purple; }Это просто. Он создает сплошную фиолетовую рамку шириной пять пикселей вокруг любого важного абзаца. Чтобы абзац унаследовал эти свойства, просто объявите его следующим образом:
Your important paragraph here.
Это будет работать независимо от размера абзаца.
Вы можете применить множество различных стилей границ; вместо «сплошной» попробуйте «пунктирная» или «двойная». Между тем, ширина может быть «тонкой», «средней» или «толстой». Код CSS может даже определять толщину каждой границы индивидуально, например:
border-width: 5px 8px 3px 9px;В результате получается верхняя граница из пяти пикселей, правая граница из восьми, нижняя из трех и размер левой границы в девять пикселей.
7. Выровняйте элементы по центру с помощью базового кода CSS.
Для обычной задачи центрирование элементов с помощью кода CSS на удивление не интуитивно понятно. Но если вы проделаете это несколько раз, это станет намного проще. У вас есть несколько разных способов центрировать вещи.
Для блочного элемента (обычно изображения) используйте атрибут margin:
.center { display: block; margin: auto; }Это гарантирует, что элемент отображается в виде блока и что поля с каждой стороны устанавливаются автоматически. Если вы хотите центрировать все изображения на данной странице, вы даже можете добавить 'margin: auto' к тегу img:
img { margin: auto; }Чтобы узнать, почему это работает, ознакомьтесь с Объяснение блочной модели CSS на W3C .
Но что, если вы хотите центрировать текст с помощью CSS? Используйте этот образец CSS:
.centertext { text-align: center; }Хотите использовать класс centertext для центрирования текста в абзаце? Просто добавьте этот класс в
ярлык:
This text will be centered.
8. Примеры CSS для настройки заполнения.
Заполнение элемента указывает, сколько места должно быть с каждой стороны. Например, если вы добавите 25 пикселей отступа к нижней части изображения, следующий текст будет сдвинут на 25 пикселей вниз. Многие элементы могут иметь отступы, а не только изображения.
Допустим, вы хотите, чтобы каждое изображение имело 20 пикселей заполнения слева и справа и 40 пикселей сверху и снизу. Самый простой код CSS для этого:
img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }Однако есть более короткая инструкция CSS, которая представляет всю эту информацию в одной строке:
img { padding: 40px 25px 40px 25px; }Это устанавливает верхнее, правое, нижнее и левое отступы на правое число. Благодаря использованию всего двух значений (40 и 25) вы можете сделать его еще короче:
img { padding: 40px 25px }Когда вы используете только два значения, первое значение устанавливается для верхнего и нижнего, а второе - для левого и правого.
9. Выделите строки таблицы с помощью CSS-кодирования.
Код CSS делает таблицы намного лучше, чем сетки по умолчанию. Добавить цвета, отрегулировать границы и настроить таблицу, адаптирующуюся к экранам мобильных устройств, очень просто. Этот простой пример CSS показывает, как выделять строки таблицы при наведении на них указателя мыши.
tr:hover { background-color: #ddd; }Теперь всякий раз, когда вы наводите указатель мыши на ячейку таблицы, эта строка меняет цвет. Чтобы узнать о других интересных вещах, которые вы можете сделать, ознакомьтесь с Страница W3C о причудливых таблицах CSS .
10. Пример CSS для переключения изображений между прозрачным и непрозрачным
Код CSS также может помочь вам делать интересные вещи с изображениями. Вот пример CSS для отображения изображений с меньшей непрозрачностью, поэтому они выглядят слегка «белыми». Когда вы наводите курсор на изображения, они становятся полностью непрозрачными:
img { opacity: 0.5; filter: alpha(opacity=50); }Атрибут «фильтр» выполняет то же действие, что и «непрозрачность», но Internet Explorer 8 и более ранние версии не распознают измерение непрозрачности. Для старых браузеров рекомендуется включить его.
Теперь, когда изображения немного прозрачны, вы можете сделать их полностью непрозрачными при наведении курсора мыши:
img:hover { opacity: 1.0; filter: alpha(opacity=100); }10 примеров CSS с исходным кодом
С этими примерами кода CSS вы должны иметь гораздо лучшее представление о том, как работает CSS. CSS шаблоны может помочь, но понимание необработанных элементов жизненно важно.
Вот 10 простых примеров кода CSS:
- Простое форматирование абзаца
- Изменить регистр букв
- Изменить цвета ссылок
- Убрать подчеркивание ссылок
- Сделать кнопку ссылки
- Создать текстовое поле
- Выровнять элементы по центру
- Отрегулируйте заполнение
- Выделить строки таблицы
- Сделайте изображения непрозрачными
Просматривая их еще раз, вы заметите несколько шаблонов, которые можно применить к будущему коду. И тогда вы знаете, что действительно начали становиться мастером CSS. Но помнить об этом бывает сложно. Вы можете добавить эту страницу в закладки для дальнейшего использования.
Делиться Делиться Твитнуть Эл. адрес Шпаргалка по основным свойствам CSS3Освойте необходимый синтаксис CSS с помощью нашей шпаргалки по свойствам CSS3.
Читать далее Похожие темы- Программирование
- Веб-дизайн
- CSS
- Сценарии
Заместитель редактора по безопасности, Linux, DIY, программированию и техническому объяснению, а также производитель действительно полезных подкастов с большим опытом поддержки настольных компьютеров и программного обеспечения. Автор журнала Linux Format, Кристиан - мастер Raspberry Pi, любитель Lego и фанат ретро-игр.
Ещё от Christian CawleyПодписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!
Нажмите здесь, чтобы подписаться