Интересные возможности CSS

Есть различные варианты присвоения стилей, например:

<style type="text/css">
div#m {font-weight:bold}
#id_style {text-align: center;}
.myredclass {color:red}
</style>

<div id="m">Это мой уникальный полужирный Див!</div>
<p id="id_style">А это мой текст по середине!</p>
<p class="myredclass">А это мой красный параграф!</p>

Строка вида : div#m {font-weight:bold} - действует только если в теге <div> будет прописан id="m"

Строка вида : #id_style {text-align: center;} будет работать в любом теге, в котором прописан id="id_style"

Строка вида : .myredclass {color:red} создает класс и будет работать в любом теге, где прописан класс class="myredclass"

 C самым легким разобрались, а теперь примерчик посложнее:

<style type="text/css">
span.my_class {font-size: 300%;}
.red_border td {border-bottom: #FF3838 5px solid;}
</style>
<table border="1" width="90%" class="red_border">
    <tr>
        <td>1</td>
    </tr>
    <tr>
       <td>
        <span class="my_class">жирный текст</span>
       </td>
    </tr>
</table>

В вышеприведенном примере только у таблицы с классом red_border будут нижние границы ячеек td иметь крассный цвет а все элементы span, имеющие класс my_class, будут выделяться жирно.

Оцени публикацию:
  • 4,20
Оценили человек: 4

Похожие статьи:

Справочники и учебники:


Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » CSS »