Rambler's Top100

ТИПЫ СЕЛЕКТОРОВ В CSS

Селектор по id

В отличие от селектора по классу, где перед название ставится точка, в селекторе ID перед названием ставится решётка   #container{width:1036px; height:100%; }

Селекторы ID лучше всего применять к тегу блочной верстки div, ID удобен для создания структуры сайта, допустим такая структура, где есть общий блок-контейнер, назовём его - container, в котором размещены шесть блоков - header, top_menu, левый, правый и центральный блоки блоки

В файле CSS прописываем для каждого из этих блоков свойства в селекторе по ID

#container {margin:0 auto; text-align:left; width:1036px; height:100%; background-color:#f3f3f3; }

#header {background-color:#1BA3DF; background-image: url(images/header.jpg); width:1036px; height:228px; }

#top_menu {background-color:#1BA3DF; background-image: url(images/top_menu.jpg); width:1036px; height:40px;}

#left {background-color:#f3f3f3; width:225px; height:362px; float:left; }

#right {width:225px; height:362px; background-color:#f3f3f3; float:right; }

#content{ background-color:#f3f3f3; height:100%; margin-left:227px; margin-right:227px; }

#footer{ background-color:#d292bc; background-image: url(images/footer.jpg); width:1036px; height:30px; }

В CSS-файле мы указали все свойства для блоков, цвета, размеры, шрифт и так далее, а в HTML-файле каждому блоку указываем только ID, где-то так:

<div id="header"></div>
<div id="top_menu"></div>
<div id="left"></div>


И так далее для всех блоков, подробно о создании блоков в html-документе, описано в теме по Создание сайта

Каждому блоку можно создавать свои стили, например в разных блоках текст может быть разных размеров и цветов или картинки нужно расположить в крайних колонках по центру, а в центральной блоке картинку прижать к правому или левому краю и сделать обтекание текстом

#left p { font-family: arial,verdana; text-align:left; font-size: 12px; color: #000000; }
#left h1 { font-family: arial,verdana; text-align:center; font-size: 16px; color: #8B0000; }

#content p { font-family: arial,verdana; text-align:justify; font-size: 14px; color: #000000; }
#content h1 { font-family: arial,verdana; text-align:center; font-size: 25px; color: #2F4F4F; }
#content img{margin: 0 auto; }

Таким образом заголовки и текст в левом и центральном блоках, будут разными, согласно заданных им параметрам

Для удобства в файле css, для себя, можно делать комментарии, на отображении сайта комментарии не влияют, зато позволяют легче ориентироваться в записях, делается это так - слэш, затем звёздочка, затем сам комментарий и опять звёздочка и слэш закрывают комментарий
/*------------------------Здесь комментарий------------------------------*/

/*-------------------------Левый блок------------------------------*/

#left {background-color:#f3f3f3; width:225px; height:362px; float:left; }
#left p {font-family: arial,verdana; text-align:left; font-size: 12px; color: #000000; }
#left h1 {font-family: arial,verdana; text-align:center; font-size: 16px; color: #8B0000; }

/*-------------------------Правый блок------------------------------*/

#right {width:225px; height:362px; background-color:#f3f3f3; float:right; }
#right img {margin-right:2px; }

/*-------------------------Центральный блок------------------------------*/

#content{ background-color:#f3f3f3; height:100%; margin-left:227px; margin-right:227px; }
#content p { font-family: arial,verdana; text-align:justify; font-size: 14px; color: #000000; }
#content h1 { font-family: arial,verdana; text-align:center; font-size: 25px; color: #2F4F4F; }
#content img {margin: 0 auto; }

Такие комментарии делайте для всех блоков. Если же например в центральном блоке нужно какой-то параграф отобразить иначе чем уже указано для тега <p>, то вписываем класс для него, сначала решётка, затем селектор, потом элемент (тег), затем точка, затем имя класса

#content p. green { font-family: arial,verdana; text-align:justify; font-size: 16px; color: green; }

В HTML-соде, в теге <p> прописываете класс <p class="green">Здесь текст</p> и так для любого элемента (тега)

Чтобы всё это понять и освоить, не достаточно просто читать правила оформления CSS, обязательно нужно применять на практике, поэтому создавайте тестовые страницы и применяйте различные варианты стилей

Следующий тип селекторов - "Псевдоселекторы", нажмите кнопку 9

 

 

Rambler's Top100 Яндекс цитирования