Блог

Главная - Вопросы по программированию - Возникли проблемы с подключением CSS к HTML

Возникли проблемы с подключением CSS к HTML

#html #css

#HTML #css

Вопрос:

У меня возникли проблемы с подключением CSS к моей HTML-странице, по какой-то причине мои настройки .btn, .post-image, .read-more, .post-preview не работают. Я следую этому руководству — https://youtu.be/zAjDc1HPgYM похоже, мой код идентичен, но, возможно, я что-то пропустил, тем более что я новичок. Вот мой HTML

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Блог</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
    <div class="logo">
        <h1 class="logo-text"><span>Комюнити</span> Веб</h1>
    </div>
<ul class="nav">
    <li><a href="#">Домой</a></li>
    <li><a href="#">Про нас</a></li>
    <li><a href="#">Услуги</a></li>
    <!-- li><a href="#">Подписатся</a></li>
    <li><a href="#">Войти</a></li -->
    <li>
        <a href="#">Илья Админ</a>
        <ul>
            <li><a href="#">Дашборд</a></li>
            <li><a href="#" class="logout">Выйти</a></li>
        </ul>
    </li>
</ul>
</header>
<div class="content clearfix">
    <div class="main-content">
        <h1 class="recent-post-title">Недавние посты</h1>
        <div class="post">
            <img src="img/about-me.jpg" alt="" class="post-image">
            <div class="post-preview">
                <h2><a href="single.html">Название потом придумаю</a> </h2>
                <i class="far fa-user">Илья Дерий</i>
                amp;nbsp;
                <i class="far calendar">Окт 13, 2020</i>
                <p class="preview-text">
                    Название Название Название Название Название Название Название Название Название Название Название Название Название Название Название
                </p>
                <a href="single.html" class="btn read-more">Открыть полностью</a>
            </div>
        </div>
    </div>
    <div class="sidebar"></div>
</div>
</body>
</html>

И вот мой CSS

 * {
    box-sizing: border-box;
}
body{
    padding: 0px;
    margin: 0px;
    background-color: #CCCCCC;
    font-family: Beirut, Serif;
}
header{
    background: #a94442;
    height: 66px;
}
header * {
    color: white;
}
header .logo {
    float: left;
    height: inherit;
    margin-left: 2em;
    font-family: Avenir, Serif;
}
header .logo-text{
margin: 9px;
}
header .logo-text span{
    color: #283121;
}
header ul {
    float: right;
    margin: 0px;
    padding: 0px;
    list-style: none;
}
header ul li{
    float: left;
    position: relative;
}
header ul li  ul{
position: absolute;
    top: 66px;
    right: 0px;
    width: 180px;
    display: none;
}
header ul li:hover ul{
display: block;
}
header ul li  ul li{
    width: 100%;
}
header ul li  ul li a{
    padding: 10px;
    background-color: #F6F7F9;
    color: #333333;
}
header ul li  ul li a.logout{
    color: #a94442;
}
header ul li  ul li a:hover{
background-color: #8D8D8D;
}
header ul li  a:hover {
    background: darkred;
    transition: 0.5s;
}
header ul li a {
    display: block;
    padding: 21px;
    font-size: 1.1em;
    text-decoration: none;
}
.content{
    width: 90%;
    margin: 30px auto 30px;
    border: 1px solid red;
}
.content .main-content{
    width: 70%;
    float: left;
    border: 1px solid blue;
}
.content .main-content. .post{
    width: 95%;
    height: 270px;
    margin: 20px auto;
    border-radius: 5px;
    background: white;
    position: relative;
}
.content .main-content. .post .read-more{
    position: absolute;
    bottom: 10px;
    right: 10px;
    border: 1px solid #a94442;
    background: transparent;
    border-radius: 0px;
    color: #a94442 !important;

}
.content .main-content. .post .read-more{
    background: #a94442;
    color: white !important;
    transition: .25s;
}
.content .main-content .post .post-image{
    width: 40%;
    height: 100%;
    float: left;
}
.content .main-content. .post .post-preview{
    width: 60%;
    padding: 10px;
    float: right;

}
.content .sidebar{
    width: 30%;
    float: left;
    border: 1px dashed green;height: 300px;
}
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.btn{
    padding: .5rem 1rem;
    background: #a94442;
    color: white;
    border: 1px solid transparent;
    border-radius: .25rem;
}
.btn:hover{
    color: white !important;
    background: darkred;
}
.content .main-content .recent-post-title{
    margin: 20px;
}

Комментарии:

1. Находится ли код style.css в папке ‘css’?

2. Привет! Не могли бы вы быть немного более конкретным? Чего вы пытаетесь достичь с помощью упомянутых вами занятий и с какой именно проблемой вы столкнулись?

3. Откройте инструмент разработки вашего браузера (если в вашем браузере нет инструмента разработки, используйте другой в списке для разработки) и проверьте сетевую панель. Там вы увидите, какие файлы загружены или нет

Ответ №1:

Избавьтесь от всех вторых точек в .main-content. — это неправильный синтаксис. Вы хотите использовать точечную нотацию только при указании селекторов на том же уровне глубины. Этот div тег, например:

 <div class="content red"></div>

Может быть выбран с .content.red помощью, но следующий p тег не может:

 <div class="content">
  <p class="red"></p
</div>

Вместо этого вам нужно будет использовать .content .red .