15.12.2011
В предыдущем разделе, при рассмотрении тегов привязки, вы узнали о таких атрибутах, которые описывают поведение элемента, а так же опробовали управление атрибутами тега H1 напрямую (внутри тега). Результат был достигнут, однако это является не очень хорошим решением. Помимо приведённых в конце предыдущей статьи аргументов, я хотел бы так же отметить, что такое использование стилей усложняет чтение кода разработчиком. При передаче проекта новому сотруднику вы встретитесь с определёнными трудностями у него. И чем больше код, чем больше там стилей, тем сложнее человеку будет разобраться. Для единичного решения это приемлемый способ, однако, для крупного проекта все стили таким образом задавать не стоит.
К счастью, существует другой способ. Он заключается в использовании таблицы стилей на вашей странице. Таблицы стилей определяются, используя понятие Cascading Style Sheets, где набор стиля на элементе может быть наследован дочерним элементом исходного элемента. Так, например если вы поместите стиль в <div>, и если у <div> есть дочерние элементы <ol> и <li>, то тогда стиль также применится к ним, пока вы как разработчик не отмените это. Чтобы узнать больше о CSS посетите сайт w3cschools: http://w3schools.com/css/default.asp.
Убедимся в том, что это работает, чтобы определить стиль на эти <h1> тег, не используя много встроенного кода на атрибуте стиля.
Так, вместо того, чтобы поместить весь код моделирования в эти <11> тег непосредственно, мы только определим, что он является атрибутом class, как показано здесь:
<h1 class="Title">A list of my Favorite Movies</h1>
Теперь, когда у тега есть атрибут class, мы можем сообщить браузеру, что необходимо использовать определенный стиль для всего, у чего есть этот class. Это делается при помощи синтаксиса кода CSS как показано здесь:
.Title {font-size: xx-large;font-weight: normal;padding: 0px;margin: 0px;}
Стиль ‘language’ состоит из списка атрибутов, разделенных точками с запятой и содержавшийся в пределах фигурных скобок ({..}). Если его надо применить к классу, то класс определяет использование 'точечного' синтаксиса, который сводится к имени класса, которому предшествует точка.
Данный код помещается в тег <style> в заголовке страницы. Ваша разметка страницы должна быть похожей на следующую:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
<title>My Favorite Movies</title> <style type="text/css">
.Title { font-size: xx-large; font-weight: normal; padding: 0px; margin: 0px; }
</style></head> <body> <header> <h1 class="Title">A list of my Favorite Movies</h1> </header>
<div id="movieslist"> <ol>
<li><a href="#">It's a wonderful life</a></li> <li><a href="#">Lord of the Rings</a></li>
<li><a href="#">The Fourth World</a></li> <li><a href="#">The Lion King</a></li> </ol> </div>
<footer> This site was built using Microsoft WebMatrix.
<a href="http://web.ms/webmatrix">Download it now.</a> </footer> </html>
Когда вы выполните это, стиль измениться, и перед вами отобразится что-то типа этого:
Помните, что у <h1> класс Title, который был установлен в заголовке. Вы можете установить стиль для каждого элемента, у которого есть тот же самый класс.
Когда вы захотите разместить на странице определенный элемент, можно или использовать уже имеющийся класс для этого элемента, зная, что есть только один экземпляр этого класса, или можно назвать элемент, используя идентификатор, и затем установить класс для этого идентификатора. Если вы посмотрите на получившийся HTML-код, то заметите, что список фильмов сохранен в пределах <div>, который получил идентификатор ‘moviesList’. Для него вы можете установить стиль, поставив перед ним # в определении таблицы стилей, как показано здесь:
#movieslist{ }
Так определяется стиль для <div>, потому что таблицы стилей располагаются каскадом (получая имя). Каждый элемент также применяется к этому стилю в пределах div. Даже при том, что я специально не установил стиль для элемента <li>, к содержащемуся тексту будет применен стиль:
Помните, что по умолчанию браузер выводит объекты <li> в списке <ol>, как пронумерованные элементы. Можно избавиться от этого эффекта, установив стиль. Поскольку эти объекты которые мы назвали ‘movieslist’, находятся внутри div, то можно легко переадресовать их, чтобы изменить их стиль.
Вот такой синтаксис:
#movieslist ol { list-style: none; margin: 0; padding: 0; border: none;}
This simply states that for each <ol> within #movieslist, set the style to be not a list (i.e. no bullets), no margin, no border, no padding.
Это просто подтверждение того, что для каждого элемента <ol> в пределах #movieslist, устанавливается стиль, чтобы не получилось никакого списка(никаких маркеров), никакого поля, никакой границы, никакого дополнения.
Вот результат:
Как видно, чисел теперь нет.
Текст каждого из элементов списка был сохранен в пределах тега <a>. Теперь можно определить появление каждого тега <a> в пределах каждого тега <li> в пределах #movieslist по данному синтаксису:
#movieslist li a { font-size: large; color: #000000; display: block; padding: 5px;}
Настройки говорят за себя, так что давайте посмотрим, что получится, когда мы теперь загрузим страницу.
Что касается тега <a>, у него другое поведение, которое проявляется, когда курсор мыши задерживается на ссылке. Вы можете применить это для ‘hot track’ мыши и изменить стиль элемента. CSS также поддерживает это, используя следующий синтаксис:
#movieslist li a:hover{}
Так, теперь мы можем определить, что делать, когда мышь задерживается над тегом:
#movieslist li a:hover { border-left: 10px solid #94c9d4; padding-left: 10px; background-color: #e7f5f8; text-decoration: none; }
К тексту добавится 10 пиксельных границ слева и цвет фона для выделения текста.
Можно увидеть, что будет, когда мышь выполнит одну из перечисленных опций:
Забавно экспериментировать с CSS, а с WebMatrix это так просто. Поскольку вы долго работали, то, вероятно, вам приходила в голову следующая мысль: «Материал по CSS очень хорош, но что, если у моего сайта будет больше одной страницы?»
Это важный вопрос, потому что здесь CSS был интегрирован в область <head> конкретной страницы с использованием блока <style>. Однако хорошая новость заключаются в том, что блок <style> должен не обязан использовать стиль внутри - в нем можно указать на внешний файл. Любая страница, которая указывает на этот файл, сможет использовать те же самые стили.
С WebMatrix это легко сделать. В панели инструментов «Files» нажмите кнопку «New» и выберете «New File …»
Откроется диалоговое окно New Files. Выберите «CSS» как тип файла и дайте имя ‘movies.css’.
Нажмите OK, и файл movies.css будет создан. В нем будет содержаться пустое тег <body>, как показано здесь:
body { }
Замените его на CSS, написанный ниже. Я убрал ту часть CSS, которую вы использовали, когда работали вначале, и вместо него создал CSS для заголовка с использованием атрибута Class в <h1>. HTML становится более понятным.
body {width: 85%;margin: 20px auto; }
header {padding: 10px;border-bottom: 1px solid #e5e5e5;}
header h1 {font-size: xx-large;font-weight: normal;padding: 0px;margin: 0px; }
#movieslist{margin: 20px 0; }
#movieslist ul {list-style: none;margin: 0;padding: 0; }
#movieslist li a {font-size: large;color: #000000;display: block;padding: 5px; }
#movieslist li a:hover {border-left: 10px solid #94c9d4;padding-left: 10px;background-color: #e7f5f8;text-decoration: none; }
Вернитесь к своей странице, и удалите все теги <style>, и замените их вот этим:
<link rel="stylesheet" type="text/css" href="movies.css" />
Браузер получает команду загружать вашу таблицу стилей вместо того, чтобы получить стили непосредственно в пределах страницы. Ваша разметка страницы должна теперь выглядеть примерно следующим образом. Я уверен, что вы согласились бы с тем, что это очень экономит место:
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>My Favorite Movies</title>
<link rel="stylesheet" type="text/css" href="movies.css" /></head> <body> <header>
<h1>A list of my Favorite Movies</h1> </header> <div id="movieslist"> <ol>
<li><a href="#">It's a wonderful life</a></li> <li><a href="#">Lord of the Rings</a></li>
<li><a href="#">The Fourth World</a></li> <li><a href="#">The Lion King</a></li> </ol></div><footer>
This site was built using Microsoft WebMatrix. <a href="http://web.ms/webmatrix">Download it now.</a> </footer> </html>
Нижний колонтитул выглядит немного неаккуратным, так что давайте добавим некоторые стили к файлу CSS, чтобы заставить его выглядеть лучше.
footer {font-size: smaller;color: #ccc;text-align: center;padding: 20px 10px 10px 10px;border-top: 1px solid #e5e5e5; }
Так к тексту применяется форматирование по центру, и применяется маленький шрифт серого цвета. Одну вещь, которую стоит отметить, это то, что новый тег HTML5 <footer> не является совместимым со многими браузерами. Стиль css будет правильно отображаться только в определенном браузере, в то время как в других этого не произойдет из-за несовместимости многих браузеров с HTML5. В более старых браузерах тег нижнего колонтитула не будет представлен правильно (например в IE8). Чтобы правильно применить к нашему css тег <footer>, можно просто заключить его в тег <div> с id="footer"...
Запустите файл прямо сейчас. Вы заметите, что не все css были применены правильно к нашему нижнему колонтитулу.
Давайте теперь заключим наш нижний колонтитул тегом <div>, таким образом, наш css будет правильно оформлен. В файле default.cshtml добавьте <div>, и код станет похож на:
<div id="footer"> <footer>This site was built using Microsoft WebMatrix. <a href="http://web.ms/webmatrix">Download it now.</a> </footer> </div>
Теперь мы должны обновить наш css. В файле movies.css найдите нижний колонтитул и добавьте # перед ним. Измените наш css, работающий от нашего тега нижнего колонтитула до элемента с идентификатором "footer". В css знаком # обозначается идентификатор. Ваш стиль нижнего колонтитула должен теперь быть похож на:
#footer {font-size: smaller;color: #ccc;text-align: center;padding: 20px 10px 10px 10px;border-top: 1px solid #e5e5e5; }
Теперь наша страница будет представлена в нашем стиле правильно. Вы можете увидеть результат здесь:
Заключение
В этой статье вы увидели, как использовать CSS в WebMatrix, чтобы добавить информацию о моделировании к своей странице. Вы научились писать CSS так, чтобы он мог совместно использоваться несколькими страницами, в том числе то, как установить класс CSS, который позволяет вам разрабатывать многократные элементы, как использовать CSS, чтобы установить проект для определенного элемента, используя его ID, и как расположить каскадом информацию о проекте от контейнерных элементов вниз к их дочерним элементам, а так же как позволить дочерним элементам переопределить стиль их родителей.
В части 4 этой статьи вы научитесь тому, как использовать Layout, чтобы управлять общим контентом через все ваши страницы.
15 декабря
Задойный А.В.