03:45 Урок 4 - <style> в html. Примеры стилей в html. Таблица стилей CSS | |
Тег <style> в htmlВ третьем уроке HTML мы рассмотрели все самые распространенные html теги. К каждому из них можно было также подставить параметр style и мы постоянно ссылались на это. Настало время поговорить о том, что именно можно прописать в этом параметре, но для начала расскажу о теге <style>. Вообще для чего он нужен и почему так важен. Синтаксис тега <STYLE> <head> ... <style type="text/css"> ... описание стилей ... </style> ... </head> Между <style> и </style> прописываются стили (размер шрифта, цвет, фон, отступы, шрифт и т.п.). Это написание равносильно таблице стилей CSS. Кстати описывать стиль можно в любом месте на странице (не обязательно в заголовочных тегах head), но по хорошему тону, стили располагаются именно там. Новый стиль класса описываются в формате точка, далее название класса. В фигурных скобках описывается стиль: .NAME_STYLE{ ... ... ... } В таком формате мы создаем глобальный стиль, который можно использовать в любом теге. Чтобы сделать стиль отдельно для какого тега нужно указать его перед точкой: b.style1{ ... ... ... } В таком формате, мы можем применять его только для тега <b> Кстати, чтобы не прописывать всегда класс (class="") часто употребляемым тегам, мы можем задать стиль по умолчанию любому тегу. Например, чаще всего для популярного тега <p> задается стиль по умолчанию следующим образом: .p{ font-size: 12px; color: #CCC; font-family: Arial; ... } Чаще всего по умолчанию прописывают стили ссылкам, таблицам, спискам ul. Если мы используем вложенные конструкции (иерархию тегов), то стиль нужно задавать напрямую. Например: <head> <style type="text/css"> .cen a { стиль для link1; } .cen a.class2 { стиль для link2; } .cen .inblock a { стиль для link3; } .cen .inblock a.class4 { стиль для link4; } </style> </head> <body> <div class="cen"> ... <a href="">LINK_1</a> <a class="class_2" href="">LINK_2</a> <div class="inblock"> <a href="">LINK_3</a> <a class="class_4" href="">LINK_4</a> </div> ... </div> </body> Например, .cen a говорит о том, что этот стиль будет использован только в блоке с классом cen. Чаще всего, этот блок является <div>. Рассмотрим более практичный пример <style> Например. Html код: <head> <style type="text/css"> .styletest { color: blue; font-size:12px; font-family:Arial } </style> </head> <body> <font class="styletest">Этот текст будет синим, шрифт Arial и размером 12 пикселей</font> </body> Преобразуется на странице в следующее: Этот текст будет синим, шрифт Arial и размером 12 пикселей Обратите внимание, что в class мы указали styletest - потому что именно так называется наш стиль. Поскольку в style мы не указали конкретно для какого тега он сделан, то мы может применять его не только для тегов <font>, но и для других. Например, для <b>, <u> и т.д. - для всех тегов, которые поддерживают параметр class. Выше разобранный пример можно сделать по-другому (не используя class): <font style="color: blue; font-size:12px; font-family:Arial"> Этот текст будет синим</font> Результат будет таким же как и предыдущий пример. В чем же тогда разница? Давайте проведем сравнение. Допустим, у Вас есть на сайте 50 страниц (это считается маленьким сайтом). На всех 50 страницах у Вас для какого-то текста в тегах прописано style="color: blue; font-size:12px; font-family:Arial". Теперь представим такую ситуацию, что синий цвет Вам больше не по душе и Вы захотели сменить его на черный. В этом случае Вам нужно будет редактировать 50 страниц. Но 50 страниц это ещё не так уж и много. Тем не менее это все равно лишняя работа, которую можно было не делать. Поэтому я советую пользоваться классами (class="какой-то класс"). В этом случае Вам бы пришлось поменять всего лишь в одном месте цвет и на всех страницах бы все поменялось. Таблица стилей CSSЧтобы упростить работу со стилями, создают специальную "таблицу стилей CSS", которая представляет из себя просто сборник стилей. Подключается она с помощью тега link в заголовочных тегах <head> ... <link rel="stylesheet" type="text/css" href="style.css"/> ... </head> В данном случае таблица стилей (назовем её style.css) должна содержать следующее: .styletest { color: blue; font-size:12px; font-family:Arial; } Теперь вернемся к первому примеру, который можно сделать более универсально, подключив в заголовке таблицу стилей. <head> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <font class="styletest">Этот текст будет синим, шрифт Arial и размером 12 пикселей</font> </body> Результат будет таким же: Этот текст будет синим, шрифт Arial и размером 12 пикселей Надеюсь, что Вы поняли всю прелесть таблиц стилей. Стиль нужно написать только в таблице стилей .css, а там где нужно его применить писать class="имя стиля". Использование стилей html через IDТеперь рассмотрим как можно использовать стили через ID. Для начала, необходимо в таблице стилей (назовем её primerid.css) написать следующее: font#yellow{color:yellow} font#orange{color:orange} b#niz{font-size:12px;} b#verh{font-size:11px;} b#slash{color:blue} p#center{text-align:center} b#map{font-size:18px; color:navy} Обратите внимание, что сначала пишется название тега, далее #, далее название ID и потом аргументы стиля. Для использования ID, код html страницы должен содержать примерно следующее: <head> <link rel="stylesheet" type="text/css" href="primerid.css"/> </head> <body> <font id="yellow">Желтый текст через ID</font> <b id="verh">Этот текст имеет размер 11 пикселей</b> </body> Вместо class нужно всего лишь написать id. Теперь расскажу о том, какие аргументы можно задавать в стилях. Их довольно много. Аргументы в style1) background: цвет - задает цвет фона. Цвет можно выбрать любым. Аналогом является: background-color: цвет. Цвет может быть задан в виде шестизначного кода (например, #53A32B;) или конкретное название цвета (например, red). Выбрать подходящий цвет можно на странице: коды и названия html цветов. 2) background-image: url('images/bg.png'); - фоном будет картинка. В скобках указывается адрес фона изображения. 3) background-repeat: repeat - использовать фоновую картинку многократно. Другие возможные параметры:
4) border: 1px solid red; - вся область объекта будет в красной рамке, ширина которой 1 пиксель. Возможны и другие параметры вместо solid:
5) color: #fc0ab1; - задает цвет текста. Цвет можно выбрать любым. С этим аргументом Вы уже были знакомы. 6) font-family: Arial; - задает шрифт текста. Существует очень много различных шрифтов. Например, самые распространенные шрифты:
Советую также прочесть: Какой выбрать шрифт для сайта » 7) font-size: 15px; - задает размер текса, в данном примере 15px. Можете вместо px так же писать другие единицы размерности em, om. 8) font-weight: bold; - задает толщину текста (насыщенность). Возможные значения:
можно и просто цифрами: 100, 200, 300, 400, 500, 600, 700, 800, 900. 9) height: 100%; - задает высоту. Можно задавать в %, а можно в пикселях (px). 10) padding-top: 5px; - отступ сверху. Возможно задать значение auto. Аналогичный тег: margin-top с разницей, что padding - отступ внутри элемента, а margin - от других элементов. 11) padding-right: 4px; - отступ справа. Возможно задать значение auto. Аналогичный тег: margin-right. 12) padding-bottom: 5px; - отступ снизу. Возможно задать значение auto. Аналогичный тег: margin-bottom. 13) padding-left: 4px; - отступ слева. Возможно задать значение auto. Аналогичный тег: margin-left. 13) width: 100%; - задает ширину. Можно задавать в %, а можно в пикселях (px). 14) overflow: scroll; - область видимости содержания блочного элемента, которое не помещается в нем. Возможные значения параметра:
15) text-align: left; - выравнивание текста. Возможные значения параметра:
16) float: left; - определяет сторону, по которой будет выравниваться какой-то элемент, а остальные элементы будут обтекать его с других сторон. Возможные значения параметра:
17) line-height: 22px; - устанавливает межстрочный интервал в пикселях. 18) white-space: nowrap; - задает отображение между пробелами. Возможные значения:
19) display: block; - определяет способ показа элемента. Имеет довольно много параметров:
20) text-decoration: none; - опция для редактирования внешнего вида текста. Имеет несколько параметров:
21) text-transform: capitalize; - преобразование текста в заглавные или прописные буквы.
22) letter-spacing: 2px; - задает расстояние между буквами. Так же стоит обратить внимание на возможности стилей для тега <a>, но они будут рассмотрены отдельно здесь: HTML тег а. Уважаемый читатель, теперь Вы имеете представление о стилях в html. Вы можете делать Ваши странички более красивыми. Рассмотренные выше возможности стилей являются поверхностными и для профессионального использования Вам понадобятся более глубокие знания. В следующих уроках мы рассмотрим самые важные из этих тегов во всех подробностях. Теперь советую перейти к следующему уроку. Ссылка на следующий урок: Урок 5. HTML тег а - подробное описание с примерами | |
| Категория: Все о сайтах | Просмотров: 397 | | |
| Всего комментариев: 0 | |