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

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;
}

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

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

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 подписчик
- 6 часов назад
- 46 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 6 часов назад
- 29 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 10 часов назад
- 45 просмотров
0

ответов
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 18 часов назад
- 85 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- вчера
- 63 просмотра
1

ответ
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- 20 нояб.
- 100 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 85 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 72 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 106 просмотров
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

move2usajobs LLC • Лос-Анджелес

от 2 000 до 4 000 $

Сделать бэкап сайта(форума) и установить его на сервер

23 нояб. 2024, в 04:31

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

Смонтировать видео

23 нояб. 2024, в 01:31

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

Настроить сайт

23 нояб. 2024, в 00:16

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

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;
}

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

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

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

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