Блог

Главная - Вопросы по программированию - Может ли кто-нибудь помочь мне с моим CSS для оформления формы, которая, похоже, не вносит никаких изменений в исходный обычный формат HTML? (новый вопрос для начинающих)

Может ли кто-нибудь помочь мне с моим CSS для оформления формы, которая, похоже, не вносит никаких изменений в исходный обычный формат HTML? (новый вопрос для начинающих)

#html #css

Вопрос:

Я очень новичок в HTML и CSS (начал вчера). Я следил за ускоренным курсом CSS Traversy Media, когда некоторые CSS не работали так, как должно было быть в видео. Это касалось формы, и я попытался убедиться, что код был таким же, и убедиться, что он был сохранен, но страница Chrome показала, что форма по-прежнему имеет тот же макет, как если бы она была сделана только с помощью обычного HTML. Все остальное в CSS работало идеально. Я пытался найти решения в Интернете, но не был слишком уверен, будут ли ситуации других людей применимы к моим.

Это конкретный CSS, который не работал:

 .my-form{
    padding:20px;
}

.my-form .form-group{
    padding-bottom:15px;
}

.my-form label{
    display:block;
}

.my-form input[type="text"], .my-form textarea{
    padding:8px;
    width:100%;
}

.my-form input[type="submit"]{
    background-color:#333;
    color:#fff;
    padding:10px 15px;
    border:none;
}

Вот мой полный HTML-код:

 <!DOCTYPE html>
<html>
<head>
    <title>CSS Cheat Sheet</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="box-1">
            <h1>Hello World</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="box-2">
            <h1>Goodbye World</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="categories">
            <h2>Categories</h2>
            <ul>
                <li><a href="#">Category 1</a></li>
                <li><a href="#">Category 2</a></li>
                <li><a href="#">Category 3</a></li>
                <li><a href="#">Category 4</a></li>
                <li><a href="test.html">Category 5</a></li>
            </ul>
        </div>

        <form class="my-form">
            <div class="form-group">
                <label>Name: </label>
                <input type="text" name="name">
            </div>
            <div class="form-group">
                <label>Email: </label>
                <input type="text" name="email">
            </div>
            <div class="form-group">
                <label>Message: </label>
                <textarea name="message"></textarea>
            </div>
            <input class="button" type="submit" value="Submit" name="">
        </form>
    </div><!-- ./container -->
</body>
</html>

Вот мой полный CSS:

 /*
*{
    margin:0;
    padding:0;
}
*/

body{
    background-color:#f4f4f4;
    color:#555555;

    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:normal;
    /* Same as above*/
    font:normal 16px Arial, Helvetica, sans-serif;

    line-height:1.6em;
    margin:0;
}

a{
    text-decoration: none;
    color:#000;
}

a:hover{
    color:red;
}

a:active{
    color:green;
}

a:visited{
    color:black;
}

.container{
    width:80%;
    margin:auto;
}

.box-1{
    background-color:#333;
    color:#fff;

    border-right:5px red solid;
    border-left:5px red solid;
    border-top:5px red solid;
    border-bottom:5px red solid;
    border-bottom-width:10px;
    border-top-style:dotted;

    border:5px red solid;

    padding-top:20px;
    padding-bottom:20px;
    padding-right:20px;
    padding-left:20px;

    /* Same as above */
    padding:20px;

    margin-top:20px;
    margin:20px 0;
}

.box-1 h1{
    font-family:Tahoma;
    font-weight:800;
    font-style:italic;
    text-decoration:underline;
    text-transform:uppercase;
    letter-spacing:0.2em;
    word-spacing:1em;
}

.box-2{
    border:3px dotted #ccc;
    padding:20px;
    margin:20px 0;
}

.categories{
    border:1px #ccc solid;
    padding:10px;
    border-radius:15px;
}

.categories h2{
    text-align:center;
}

.categories ul{
    padding:0;
    padding-left:20px;
    list-style:square;
    list-style:none;
}

.categories li{
    padding-bottom:6px;
    border-bottom:dotted 1px #333;
    list-style-image: url("../images/check.png");
}

.my-form{
    padding:20px;
}

.my-form .form-group{
    padding-bottom:15px;
}

.my-form label{
    display:block;
}

.my-form input[type="text"], .my-form textarea{
    padding:8px;
    width:100%;
}

.my-form input[type="submit"]{
    background-color:#333;
    color:#fff;
    padding:10px 15px;
    border:none;
}

Любая помощь была бы очень признательна. Заранее спасибо!

Редактировать: Спасибо всем за вашу помощь, я попытался открыть его снова сегодня, и он был просто исправлен, вчера он выглядел как голый HTML, должно быть, что-то не так с моим браузером или что-то в этом роде. Извините, что отнимаю у всех время, но спасибо всем вам за то, что вы еще раз проявили такое терпение!

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

1. Применяются ли другие изменения стиля к вашей странице? например: цвет фона тела

2. Вы уверены, что включаете CSS? Я вижу, что у вас есть ссылка на «css/style.css» в HTML, но есть ли ваш стиль также относительно вашего HTML-файла? (должно быть в папке «css» с именем «style.css»)

3. @J0R1AN да, все остальное в css работает

4. @Muhammedogz да, как в этой части: тело{ цвет фона:#f4f4f4;

5. Не могли бы вы, пожалуйста, правильно объяснить, что именно в этом не работает так, как вы хотели? Когда я возьму ваш код и создам скрипку, jsfiddle.net/qkh93Lvx , это выглядит как угодно, но не как «голая HTML-форма», и проверка, например, полей ввода с помощью инструментов разработки браузера также показывает, что ваши стили, похоже, применяются нормально.

Ответ №1:

Я думаю , что проблема здесь — удалите ввод[тип=»текст»] и напишите, как показано ниже

 .my-form .my-form textarea{
    padding:8px;
    width:100%;
}

.my-form {
    background-color:#333;
    color:#fff;
    padding:10px 15px;
    border:none;
}

Дайте мне знать, работает ли это для вас или нет

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

1. Базовый селектор атрибутов имеет очень хорошую поддержку браузера, поэтому я не понимаю, почему именно в этом должна быть проблема? developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

2. Спасибо всем за вашу помощь, я попытался открыть его снова сегодня, и он был просто исправлен, вчера он выглядел как голый HTML, должно быть, что-то не так с моим браузером или что-то в этом роде. Извините, что отнимаю у всех время, но спасибо всем вам за то, что вы еще раз проявили такое терпение!

Ответ №2:

Я добавляю ваш CSS непосредственно в HTML, и он работает. Вы можете попробовать использовать этот способ вместо разделения на другой CSS-файл.

Поэтому я удаляю <link rel="stylesheet" type="text/css" href="css/style.css"> строку. Пожалуйста, дайте мне знать, работает ли это.

Демонстрационная работа

 <!DOCTYPE html>
<html>
<head>
    <title>CSS Cheat Sheet</title>
</head>
<body>
    <div class="container">
        <div class="box-1">
            <h1>Hello World</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="box-2">
            <h1>Goodbye World</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="categories">
            <h2>Categories</h2>
            <ul>
                <li><a href="#">Category 1</a></li>
                <li><a href="#">Category 2</a></li>
                <li><a href="#">Category 3</a></li>
                <li><a href="#">Category 4</a></li>
                <li><a href="test.html">Category 5</a></li>
            </ul>
        </div>

        <form class="my-form">
            <div class="form-group">
                <label>Name: </label>
                <input type="text" name="name">
            </div>
            <div class="form-group">
                <label>Email: </label>
                <input type="text" name="email">
            </div>
            <div class="form-group">
                <label>Message: </label>
                <textarea name="message"></textarea>
            </div>
            <input class="button" type="submit" value="Submit" name="">
        </form>
    </div><!-- ./container -->
</body>

<style>
body{
    background-color:#f4f4f4;
    color:#555555;

    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:normal;
    /* Same as above*/
    font:normal 16px Arial, Helvetica, sans-serif;

    line-height:1.6em;
    margin:0;
}

a{
    text-decoration: none;
    color:#000;
}

a:hover{
    color:red;
}

a:active{
    color:green;
}

a:visited{
    color:black;
}

.container{
    width:80%;
    margin:auto;
}

.box-1{
    background-color:#333;
    color:#fff;

    border-right:5px red solid;
    border-left:5px red solid;
    border-top:5px red solid;
    border-bottom:5px red solid;
    border-bottom-width:10px;
    border-top-style:dotted;

    border:5px red solid;

    padding-top:20px;
    padding-bottom:20px;
    padding-right:20px;
    padding-left:20px;

    /* Same as above */
    padding:20px;

    margin-top:20px;
    margin:20px 0;
}

.box-1 h1{
    font-family:Tahoma;
    font-weight:800;
    font-style:italic;
    text-decoration:underline;
    text-transform:uppercase;
    letter-spacing:0.2em;
    word-spacing:1em;
}

.box-2{
    border:3px dotted #ccc;
    padding:20px;
    margin:20px 0;
}

.categories{
    border:1px #ccc solid;
    padding:10px;
    border-radius:15px;
}

.categories h2{
    text-align:center;
}

.categories ul{
    padding:0;
    padding-left:20px;
    list-style:square;
    list-style:none;
}

.categories li{
    padding-bottom:6px;
    border-bottom:dotted 1px #333;
    list-style-image: url("../images/check.png");
}

.my-form{
    padding:20px;
}

.my-form .form-group{
    padding-bottom:15px;
}

.my-form label{
    display:block;
}

.my-form input[type="text"], .my-form textarea{
    padding:8px;
    width:100%;
}

.my-form input[type="submit"]{
    background-color:#333;
    color:#fff;
    padding:10px 15px;
    border:none;
} 
</style>

</html>

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

1. Спасибо всем за вашу помощь, я попытался открыть его снова сегодня, и он был просто исправлен, вчера он выглядел как голый HTML, должно быть, что-то не так с моим браузером или что-то в этом роде. Извините, что отнимаю у всех время, но спасибо всем вам за то, что вы еще раз проявили такое терпение!

Метки: , , ,