Как задать стиль текста в диве?

Question

Максим Головлёв @golovlevarts

CSS

Как задать стиль текста в диве?

.mail a {
    margin-left: 25px;
    font-weight: 700;
    text-decoration: none;
    color: #5b5b5b;
}

.mail a:hover {
    transition: 1s;
    color: #ff1e4f;
}

.telegram a {
    margin-left: 25px;
    font-weight: 700;
    text-decoration: none;
    color: #5b5b5b;
}

.telegram a:hover {
    transition: 1s;
    color: #ff1e4f;
}

Не реагирует никак

Вопрос задан более трёх лет назад
1348 просмотров

6 комментариев

Подписаться 1 Простой 6 комментариев

Vadim Bogomazov @bogomazov_vadim

А где html?

Написано более трёх лет назад

Максим Головлёв @golovlevarts Автор вопроса

Vadim Bogomazov,

<div class="nav">
    <div class="logo"></div>
    <div class="razdelitel"></div>
    <div class="social"></div>
        <a class="be" href="#"></a>
        <a class="insta" href="#"></a>
        <a class="vk" href="#"></a>
    <div class="contacts"></div>
        <a class="mail">PRIMER@GMAIL.COM</a>
        <a class="telegram">@PRIMER</a>
    </div>
    </body>

Написано более трёх лет назад

Иван В @verkhoturov
Максим Головлёв,
Ваш CSS код был бы валидным, если бы html имел вид типа
<div class="mail"> <a>PRIMER@GMAIL.COM</a> </div> <div class="telegram"> <a>PRIMER@GMAIL.COM</a> </div>

Т.е. CSS запись типа ".mail a { свойства }" означает, что некоторые свойства нужно добавить дочерним элементам (а) у класса "mail".
В вашем случае достаточно было написать ".mail { свойства }".

Срочно изучайте основы CSS, а точнее селекторы. Рано вам еще делать сайты, иначе будете постоянно спотыкаться о базовые вещи. Без обид.
Написано более трёх лет назад
Максим Головлёв @golovlevarts Автор вопроса

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

Написано более трёх лет назад

Максим Головлёв @golovlevarts Автор вопроса

Иван В, и получилось у меня:

вместо:

<!DOCTYPE html>
<html lang="rug">
<head>
	<meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="shortcut icon" type="image/x-icon" href="images/">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
	<title>WELOVEDESIGN</title>
</head>
<body>
<div class="nav">
    <div class="logo"></div>
    <div class="razdelitel"></div>
    <div class="social">
        <a class="be" href="#"></a>
        <a class="insta" href="#"></a>
        <a class="vk" href="#"></a>
    </div>
    <div class="contacts">
    <div class="mail">
  <a>PRIMER@GMAIL.COM</a>
</div>
<div class="telegram">
  <a>@PRIMER</a>
</div>
    </div>
</div>
    </body>
</html>

body {
    font-size: 10px;
    font-family: 'Open Sans', sans-serif;
	background: #000000;

}
.nav {
    width: 1720px;
    display: flex;
    margin: 80px auto 0 auto;
    flex-flow: row nowrap;
}

.logo {
    width: 287px;
    height: 28px;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
}

.razdelitel {
    margin-left:35px;
    width: 1px;
    height: 28px;
    background-color: #5b5b5b;
}

.be {
    margin-top: 6px;
    margin-left: 35px;
    width: 21px;
    height: 16px;
    background-image: url(../images/be.png);
    background-repeat: no-repeat;
    
}

.be:hover {
    transition: 1s;
    margin-top: 6px;
    margin-left: 35px;
    width: 21px;
    height: 16px;
    background-image: url(../images/behover.png);
    background-repeat: no-repeat;
    
}

.insta {
    margin-top: 6px;
    margin-left: 15px;
    width: 16px;
    height: 16px;
    background-image: url(../images/insta.png);
    background-repeat: no-repeat;
    
}

.insta:hover {
    transition: 1s;
    margin-top: 6px;
    margin-left: 15px;
    width: 16px;
    height: 16px;
    background-image: url(../images/instahover.png);
    background-repeat: no-repeat;
    
}

.vk {
    margin-top: 6px;
    margin-left: 15px;
    width: 21px;
    height: 16px;
    background-image: url(../images/vk.png);
    background-repeat: no-repeat;
    
}

.vk:hover {
    transition: 1s;
    margin-top: 6px;
    margin-left: 15px;
    width: 21px;
    height: 16px;
    background-image: url(../images/vkhover.png);
    background-repeat: no-repeat;
    
}

.mail {
    margin-top: 6px;
    margin-left: 900px;
    width: 20px;
    height: 16px;
    background-image: url(../images/mail.png);
    background-repeat: no-repeat;
}
 
.mail:hover {
    transition: 1s;
    margin-top: 6px;
    margin-left: 900px;
    width: 20px;
    height: 16px;
    background-image: url(../images/mailhover.png);
    background-repeat: no-repeat;
}
 
.telegram {
    margin-top: 6px;
    margin-left: 150px;
    width: 20px;
    height: 16px;
    background-image: url(../images/telegram.png);
    background-repeat: no-repeat;
}
 
.telegram:hover {
    transition: 1s;
    margin-top: 6px;
    margin-left: 150px;
    width: 20px;
    height: 16px;
    background-image: url(../images/telegramhover.png);
    background-repeat: no-repeat;
}


.mail a {
    display: inline-block;
    margin-left: 25px;
    font-weight: 700;
    text-decoration: none;
    color: #5b5b5b;
}

.mail a:hover {
    display: inline-block;
    transition: 1s;
    color: #ff1e4f;
}

.telegram a {
    display: inline-block;
    margin-left: 25px;
    font-weight: 700;
    text-decoration: none;
    color: #5b5b5b;
}

.telegram a:hover {
    display: inline-block;
    transition: 1s;
    color: #ff1e4f;
}

Подскажете, что не так сделал?

Написано более трёх лет назад

Иван В @verkhoturov

Максим Головлёв,
Для .contacts задайте свойство "display: flex", тогда элементы выстроятся в ряд (сейчас выстраиваются один под другим).
У .mail и .telegram уберите высоту, ширину и задний фон. А иконки добавьте тегами img.

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 3

1 комментарий

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- 3 часа назад
- 73 просмотра
0

ответов
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 12 часов назад
- 79 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 23 часа назад
- 109 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 79 просмотров
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 68 просмотров
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 70 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 107 просмотров
0

ответов
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 18 дек.
- 104 просмотра
1

ответ
CSS

Простой
Как лучше отобразить создаваемый нажатием div в grid контейнере?
- 1 подписчик
- 17 дек.
- 58 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Дергается анимация снега, почему и как исправить?
- 1 подписчик
- 17 дек.
- 172 просмотра
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Добработать/переработать сайт на Modx Evolution (II)

23 дек. 2024, в 14:06

1000 руб./за проект

Написать программный код для обучения модели, анализирующей данные

23 дек. 2024, в 13:55

13000 руб./за проект

Выездной debian сисадмин - разовая акция в Нижнем Новгороде

23 дек. 2024, в 13:43

5000 руб./в час

Vadim Bogomazov,
<div class="nav"> <div class="logo"></div> <div class="razdelitel"></div> <div class="social"></div> <a class="be" href="#"></a> <a class="insta" href="#"></a> <a class="vk" href="#"></a> <div class="contacts"></div> <a class="mail">PRIMER@GMAIL.COM</a> <a class="telegram">@PRIMER</a> </div> </body>
Максим Головлёв,
Ваш CSS код был бы валидным, если бы html имел вид типа
<div class="mail"> <a>PRIMER@GMAIL.COM</a> </div> <div class="telegram"> <a>PRIMER@GMAIL.COM</a> </div>

Т.е. CSS запись типа ".mail a { свойства }" означает, что некоторые свойства нужно добавить дочерним элементам (а) у класса "mail".
В вашем случае достаточно было написать ".mail { свойства }".

Срочно изучайте основы CSS, а точнее селекторы. Рано вам еще делать сайты, иначе будете постоянно спотыкаться о базовые вещи. Без обид.
Иван В, спасибо за ответ
это разовая попытка сверстать сайт-портфолио для себя, вряд ли найду время учиться этому)
Максим Головлёв,
Для .contacts задайте свойство "display: flex", тогда элементы выстроятся в ряд (сейчас выстраиваются один под другим).
У .mail и .telegram уберите высоту, ширину и задний фон. А иконки добавьте тегами img.

Answer 1 · 2019-08-13 12:04:17

Vadim Bogomazov @bogomazov_vadim

upd.

Ответ написан более трёх лет назад

1 комментарий

Answer 2 · 2019-08-13 12:41:31

ну так в css ошибка
у вас написано ".mail a" = ссылка находится внутри < a>< div class="mail">
а в разметке написано так, соответственно и стиль будет: "a.mail" = < a class="mail">

Answer 3 · 2019-08-13 12:56:01

Чет я вобще в шоке с ответчиков.

Во первых у вас в html тэги не там закрыты.

<div class="nav">
    <div class="logo"></div>
    <div class="razdelitel"></div>
    <div class="social">
        <a class="be" href="#"></a>
        <a class="insta" href="#"></a>
        <a class="vk" href="#"></a>
    </div>
    <div class="contacts">
        <a class="mail">PRIMER@GMAIL.COM</a>
        <a class="telegram">@PRIMER</a>
    </div>
</div>

Валидный css:

.mail {
    margin-left: 25px;
    font-weight: 700;
    text-decoration: none;
    color: #5b5b5b;
}

.mail:hover {
    transition: 1s;
    color: #ff1e4f;
}

.telegram {
    margin-left: 25px;
    font-weight: 700;
    text-decoration: none;
    color: #5b5b5b;
}

.telegram:hover {
    transition: 1s;
    color: #ff1e4f;
}

Как задать стиль текста в диве?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт