Как определить и использовать класс в CSS?

#html #css

#HTML #css

Вопрос:

Я почти никогда раньше не кодировал в CSS, и я видел это в power point моего класса веб-разработки (изначально он написан на французском, поэтому я не уверен, что мой перевод полностью точен):

 The <p> with the property class=indented and inside the element <td> will have the following CSS properties:
td p .indented {text-indent: 50px;}

Итак, я попытался использовать этот код, чтобы протестировать его, но он не работает:

     <body>
        this is the body of the document <br>
        <style>
            td p .indented {font-weight: bold; color:red}
            td {color:blueviolet}
        </style>
        <table>
            <tr>
                <th> 1 </th>
                <th> 2 </th>
                <th> 3 </th>
            </tr>
            <tr>
                <td><p>test</p></td>
                <td>test</td>
                <td><p class=indented>test</p></td>
            </tr>
        </table>
    </body>

все 3 test отображаются фиолетовым цветом, но ничего не отображается красным и жирным шрифтом. Я делаю что-то не так? Спасибо

1. Во-первых, вы должны иметь class="indented" кавычки, во-вторых, td p .indented это не то же самое, что td p.indented . В вашем примере вы ориентируетесь на элемент с классовым отступом внутри p, а не на p с классовым отступом.

Ответ №1:

У вас небольшая опечатка в вашем правиле CSS. td p .indented предназначен для элементов с классом, indented которые являются потомками p элементов, которые, в свою очередь, являются потомками td элемента.

То, что вы, вероятно, ищете, — это настроить таргетинг на p элементы с классом, indented которые являются дочерними элементами td элемента. Удалите пробел между p и .indented в определении вашего селектора:

     <body>
        this is the body of the document <br>
        <style>
            td p.indented {font-weight: bold; color:red}
            td {color:blueviolet}
        </style>
        <table>
            <tr>
                <th> 1 </th>
                <th> 2 </th>
                <th> 3 </th>
            </tr>
            <tr>
                <td><p>test</p></td>
                <td>test</td>
                <td><p class=indented>test</p></td>
            </tr>
        </table>
    </body>

Ответ №2:

Вы можете написать CSS 3 способами: внутренний CSS, записанный как style="" атрибут рядом с другими атрибутами вашего <p> тега, Другой способ — с помощью метода встроенных таблиц стилей, который вы выбрали в своем коде, предоставляя <style тег в <head> разделе <html> документа. Здесь единственный недостаток заключается в том, что вы указали пробел между p и .indented , из-за чего он читается так, как будто <p> содержит дочерний элемент, к которому был применен .indented класс, тогда как вы хотели применить класс к <p> самому себе и получить к нему доступ. И третий способ — это внешние таблицы стилей, которые поддерживают стили в отдельном файле, отличном от файла html. Итак, следующий код решит проблему за вас. Всего наилучшего!

 <body>
        this is the body of the document <br>
        <style>
            td p.indented {font-weight: bold; color:red}
            td {color:blueviolet}
        </style>
        <table>
            <tr>
                <th> 1 </th>
                <th> 2 </th>
                <th> 3 </th>
            </tr>
            <tr>
                <td><p>test</p></td>
                <td>test</td>
                <td><p class=indented>test</p></td>
            </tr>
        </table>
    </body>

Ответ №3:

Вы вполне справляетесь со своим кодом, td p .indented необходимо td p.indented устранить лишь незначительную ошибку при вводе текста, поскольку это меняет весь смысл теории выбора потомков CSS.

Ответ №4:

Используйте , . Ваш код должен быть похож

 <body>
        this is the body of the document <br>
        <style>
            td, p.indented {font-weight: bold; color:red}
            td {color:blueviolet}
        </style>
        <table>
            <tr>
                <th> 1 </th>
                <th> 2 </th>
                <th> 3 </th>
           </tr>
           <tr>
            <td><p>test</p></td>
            <td>test</td>
            <td><p class="indented">test</p></td>
          </tr>
       </table>
   </body>

Ответ №5:

Чтобы определить класс в HTML-тегах, вам придется использовать этот тип синтаксиса: class = "classname"

Поэтому попробуйте изменить class=indented на class = "indented"