Содержание страницы
- Жесткая HTML & CSS верстка блоками
- Жесткая HTML & CSS верстка блоками в три колонки
- Резиновая HTML & CSS верстка блоками
- Резиновая + жесткая HTML & CSS верстка блоками
- Жесткая HTML & CSS верстка таблицами
- Резиновая HTML & CSS верстка таблицами
Жесткая HTML & CSS верстка блоками
Пример блочной верстки сайта:
| <html> <head> <title>Жесткая HTML & CSS верстка блоками</title> <style type="text/css"> div#block {width:600px; margin:0 auto; background-color:#dddddd} div.header {width:600px; height:100px; background-color:#717dc9} div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9} div.right_col {width:450px; float:left} div.footer {width:600px; height:70px; background-color:#717dc9; clear:both} </style> </head> <body> <div id="block"> <div class="header"><h1 align="center">Верстка сайта</h1></div> <div class="left_col"><p align="center">Меню</p></div> <div class="right_col"> <h2 align="center">CSS верстка сайта</h2> <h4 align="center">Жесткая верстка блоками</h4> </div> <div class="footer"><p>© 2010</p></div> </div> </body> </html>
|
Результат: жесткая HTML & CSS верстка блоками
Атрибуты и значения
- background-color: – определяет цвет фона.
- margin:0 auto – определяет центрирование блока.
- width: – определяет ширину в пикселях или в процентах.
- height: – определяет высоту.
- float:left – определяет обтекание слева.
- border-right: – определяет свойства правой границы.
- clear:both – отменяет обтекание с обеих сторон.
Обратите внимание на пунктирную границу левой колонки, которая почему-то не доходит до низа. Подобные ньюансы легко устраняются с помощью атрицательного значения атрибута margin. Например, margin-bottom:-15px обрежет лишнее (смотрите следующий пример).
Жесткая HTML & CSS верстка блоками в три колонки
Пример жесткой блочной верстки сайта в три колонки:
| <html> <head> <title>Жесткая HTML & CSS верстка блоками в три колонки</title> <style type="text/css"> div#block {width:750px; margin:0 auto; background-color:#dddddd} div.header {width:750px; height:100px; background-color:#717dc9} div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9; margin-bottom:-15px} div.center_col {width:450px; float:left} div.right_col {width:148px; height:350px; float:left; border-left:2px dashed #717dc9; margin-bottom:-15px} div.footer {width:750px; height:70px; background-color:#717dc9; clear:both} </style> </head> <body> <div id="block"> <div class="header"><h1 align="center">Верстка сайта</h1></div> <div class="left_col"><p align="center">Меню</p></div> <div class="center_col"> <h2 align="center">CSS верстка сайта</h2> <h4 align="center">Жесткая верстка блоками</h4> </div> <div class="right_col"><p align="center">Ссылки</p></div> <div class="footer"><p>© 2010</p></div> </div> </body> </html>
|
Результат: жесткая HTML & CSS верстка блоками в три колонки
Блочная верстка предпочтительнее табличной верстки. Верстка сайта блоками предоставляет больше возможностей для форматирования и дизайна. Верстка блоками требует умения работать с атрибутами margin, padding, float, clear.
Например, атрибут float позволяет расположить несколько, следующих друг за другом, блоков по горизонтали, чтобы разделить web-страницу по вертикали.
Резиновая HTML & CSS верстка блоками
Пример резиновой верстки сайта с помощь блоков:
| <html> <head> <title>Резиновая HTML & CSS верстка блоками</title> <style type="text/css"> div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px} div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left} div.right_col {background-color:#dddddd; height:400px; min-width:380px; max-width:3800px; margin-left:200px; padding-left:20px} </style> </head> <body> <div class="header"><h1 align="center">Верстка сайта</h1></div> <div class="left_col"><p align="center">Меню</p></div> <div class="right_col"> <h2>CSS верстка сайта</h2> <h4>Резиновая верстка блоками</h4> </div> </body> </html>
|
Результат: HTML & CSS верстка сайта – резиновая верстка блоками
Мы видим, что правая колонка сползла вниз ⇒ добавим к селектору div.right_col параметр margin-top:-20px.
Результат: резиновая HTML & CSS верстка
Атрибуты и значения
- padding-left: – определяет внутренний отступ слева.
- margin-top: – определяет внешний отступ сверху.
- margin-left: – определяет внешний отступ слева.
- min-width: – определяет минимальную ширину.
- max-width: – определяет максимальную ширину.
Левая колонка с параметром float:left фактически накрывает собой правую, так как правая не содержит атрибут обтекания. В свою очередь, параметр margin-left:200px определяет отступ правой колонки, поэтому она не перекрывается. Мы не можем задать обтекание для правой колонки, потому что в таком случае будут недействительны min-width и max-width.
Обратите внимание на значение padding, на ширину пунктирной границы, на размеры.
Резиновая + жесткая HTML & CSS верстка блоками
Пример CSS верстки сайта блоками:
| <html> <head> <title>Резиновая + жесткая HTML & CSS верстка блоками</title> <style type="text/css"> div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px} div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left; padding:10px} div.right_col {background-color:#dddddd; width:500px; height:400px; float:left; padding:10px; } div.footer {background-color:#717dc9; min-width:600px; max-width:4000px; height:60px; clear:left} </style> </head> <body> <div class="header"><h1 align="center">Верстка сайта</h1></div> <div class="left_col"><p align="center">Меню</p></div> <div class="right_col"> <h2>CSS верстка сайта</h2> <h4>Резиновая верстка блоками</h4> </div> <div class="footer"><p>© 2010</p></div> </body> </html>
|
Результат: резиновая + жесткая HTML & CSS верстка блоками
Поместим левую и правую колонку в контейнер <div id="block"> </div>. Отцентрируем его с помощью margin:0 auto. Уберем пространство внизу блока параметром margin-bottom:-16px.
| <html> <head> <title>Резиновая + жесткая HTML & CSS верстка блоками</title> <style type="text/css"> #block {width:740px; height:420px; margin:0 auto; margin-bottom:-16px} div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px} div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left; padding:10px} div.right_col {background-color:#dddddd; width:500px; height:400px; float:left; padding:10px; } div.footer {background-color:#717dc9; min-width:600px; max-width:4000px; height:60px; clear:left} </style> </head> <body> <div class="header"><h1 align="center">Верстка сайта</h1></div> <div id="block"> <div class="left_col"><p align="center">Меню</p></div> <div class="right_col"> <h2>CSS верстка сайта</h2> <h4>Резиновая верстка блоками</h4> </div> </div> <div class="footer"><p>© 2010</p></div> </body> </html>
|
Результат: резиновая + жесткая HTML & CSS верстка блоками
Параметр padding:10px прибавляет по 10 пикселей к каждой из сторон, поэтому контейнеру <div id="block"> </div> была задана высота в 420 пикселей, а затем его низ был обрезан на 16 пикселей.
Оказывается не так все и сложно. Идем дальше...
Жесткая HTML & CSS верстка таблицами
Пример жесткой CSS верстки сайта с помощью таблицы:
| <head> <title>Жесткая HTML & CSS верстка таблицами</title> <style type="text/css">.header {width:100%; height:60px; background-color:#717dc9; padding:20px; text-align:center}.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}.center_col {width:500px; background-color:#ffffff; padding:15px; vertical-align:top}.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}.footer {width:100%; padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px} </style> </head> <body> <table cellpadding="0" cellspacing="0" width="860" align="center"> <tr> <td colspan="3" class="header">Мой сайт</td> </tr> <tr> <td class="left_col">Меню</td> <td class="center_col">Содержание</td> <td class="right_col">Ссылки</td> </tr> <tr> <td colspan="3" class="footer">© 2010</td> </tr> </table> </body>
|
Результат: жесткая HTML & CSS верстка таблицами
vertical-align выравнивает содержимое ячейки по верху, применяется только для ячеек.
Резиновая HTML & CSS верстка таблицами
Пример резиновой CSS верстки сайта с помощью таблицы:
| <head> <title>Резиновая HTML & CSS верстка таблицами</title> <style type="text/css">.header {height:60px; background-color:#717dc9; padding:20px; text-align:center}.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}.center_col {background-color:#ffffff; padding:15px; vertical-align:top}.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}.footer {padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px} </style> </head> <body> <table cellpadding="0" cellspacing="0" width="100%" align="center"> <tr> <td colspan="3" class="header">Мой сайт</td> </tr> <tr> <td class="left_col">Меню</td> <td class="center_col">Ширина ячейки в данном случае зависит от величины монитора или размера окна браузера.</td> <td class="right_col">Ссылки</td> </tr> <tr> <td colspan="3" class="footer">© 2010</td> </tr> </table> </body>
|
Результат: резиновая HTML & CSS верстка таблицами
Сегодня блочная верстка, жесткая или резиновая является наиболее распространенным видом верстки среди профессиональных сайтов.
CSS справочник | Свойства шрифта
font-family
— определяет вид и семейство шрифта:
- Verdana, Geneva, sans-serif
- Georgia, 'Times New Roman', Times, serif
- 'Courier New', Courier, monospace
- Arial, Helvetica, sans-serif
- 'Arial Black', Gadget, sans-serif
- 'Times New Roman', Times, serif
- 'Lucida Console', Monaco, monospace
- 'Comic Sans MS', cursive
font-family: Tahoma, Geneva, sans-serif → Tahoma или Geneva, или sans-serif.
font-weight
— устанавливает объем шрифта:
font-weight: bold → полужирный шрифт.
font-size
— устанавливает размер шрифта в пикселях или в процентах:
.paragraf {font-size: 14px}
h1 {font-size: 180%}
font-style
— определяет стиль шрифта:
font-style: italic → курсивный шрифт (наклонный).
font-variant
— также определяет стиль шрифта:
font-variant: small-caps → капитель – большие буквы маленького размера.
Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2010
CSS справочник | Свойства шрифта 
CSS справочник | Свойства текста
Поставить на страницу закладки: 
В Мой Мир 
Археология
Биология
Генетика
География
Информатика
История
Логика
Маркетинг
Математика
Менеджмент
Механика
Педагогика
Религия
Социология
Технологии
Физика
Философия
Финансы
Химия
Экология
