Полезные сервисы
Поделись с друзьями
Помощник для тех, кто хочет научиться создавать сайты.
Вам понадобятся терпение и желание.
Всего за пять уроков Вы сможете сделать сайт-визитку, а освоив следующие уроки - сделаете первый шаг к профессионализму
Таблица стилей CSS
CSS - это язык, содержащий набор свойств для определения внешнего вида документа. Если стили находится во внешнем файле, то на него делается ссылка в виде:
<link rel="stylesheet" href="style.css" type="text/css"/> Эта ссылка размещается в зоне тега <head>
Зачем нужно выносить стили в отдельный файл? - это сокращает время на модернизацию сайта.
Например, на Вашем сайте есть 5 страниц и Вы решили переделать цветовую гамму (ну надоели вам розовые оттенки). Если стили будут находиться внутри страничек, то вам нужно переделывать все 5.
А вот если стили лежат в отдельном файле, то достаточно поменять цветовую гамму только в файле стилей и все 5 страниц сразу изменятся.
Кроме того, вынесение стилей во внешний файл упрощает код страницы.
На предыдущем уроке "Дизайн" мы попробовали изменять цвет фона и букв, однако использование атрибута font не относится к строгим правилам.
Поэтому сейчас я научу вас использовать таблицу стилей, где появляются громадные возможности для красивого оформления сайта.
Создаем файл стилей
Открываем в Блокноте новый документ и копируем в него следующие строки:
body {
background: #333333;
color: #449944;
}
/* Блок_1 - это комментарий */
#blok_1 {
width:80%;
margin: auto auto; /*размещает в середине*/
background: #aaffff;
color: #0044dd;
padding:20px;
}
background: #333333;
color: #449944;
}
/* Блок_1 - это комментарий */
#blok_1 {
width:80%;
margin: auto auto; /*размещает в середине*/
background: #aaffff;
color: #0044dd;
padding:20px;
}
Сохраняем файл в нашу папку my_sajt с именем style.css (в дальнейшем я буду называть его файл или таблица стилей).
Открываем нашу страничку-заготовку (index.htm) после тега <head> вставляем
<link rel="stylesheet" href="style.css" type="text/css"/>
- это указание на то, где искать файл стилей.
Все что мы ранее добавляли в тег body (а именно bgcolor...) нужно удалить, теперь это не нужно и оставить просто <body>. Если вы использовали атрибут font - он тоже не нужен, т.к. все указано в файле стилей.
Клацаем по файлу index.htm (открываем страничку). Если Вы все правильно сделали, то на экране получаем следующее:
Заголовок
Первая строка
Вторая строка
Пояснения
Если Вы помните, то на первом уроке (меню "Начало") мы имели такой же результат, но цвет фона был белым, а буквы черными. На втором уроке "Дизайн" мы также пробовали изменять цвет фона добавляя в тег body атрибут bgcolor=#цвет_фона.
Используя файл стилей мы изменяем цвет фона окна не трогая html-заготовку. В файле index.htm тег <body> оставляем без атрибутов, т.к. мы описали стили для тега body в файле стилей.
Теперь для изменения фона или цвета букв достаточно внести изменения в файл стилей.
Рассмотрим этот файл подробнее, т.к. именно через него мы будем менять дизайн сайта.
body {
background: #333333;
color: #449944;
}
А как же быть, если в середине страницы нужно изменить и фон и цвет и размер символов?
Все просто. Для этого достаточно вставить новый блок.
Наконец пришло время познакомить Вас с главным тегом. Это тег <div>. Он описывает блок. Начало блока <div> и конец блока </div> Чем он хорош - внутри него может быть все: текст, картинки, другие блоки, внутри которых тоже есть блоки.
А теперь изменим нашу html-заготовку.
Перед текстом "Первая строка " ставим <div id="blok_1"> а после текста закроем блок вставив </div>
Т.е. получим:
<div id="blok_1">
Первая строка
</div>
Теперь при запуске страницы получим:
Заголовок
Первая строка
Вторая строка
Т.е. мы текст "Первая строка" поместили внутрь блока. Причем у этого блока есть id="blok_1".
А в таблице стилей у нас есть описание блока с идентификатором blok_1.
Обратите внимание, что в файле стилей перед тегом body ничего нет, а перед описанием #blok_1 стоит символ решетки.
Это потому, что body - это тег. Точно также можно описать свойства всех изображений (img {свойства...}.
Мы же придумали свой идентификатор и назвали его blok_1.
В файле стилей можно задавать стили для определенной комбинации тегов. Например, div p {color:#ff0000;} - отобразит красными буквами все, что будет после тега p, которому предшествовал тег div (...<div> черный текст <p> красный </p> </div>...).
Это не какое-то специальное имя,
можно было задать другое, но конечно не совпадающее с именами тегов (head, link, meta, table, td, tr и т.д.).
Во всех случаях, когда на html страничке вы ссылаетесь на элемент через id="имя" - в таблице стилей этот элемент
начинается с символа решетки.
В файле стилей можно задавать стили для определенной комбинации тегов. Например, div p {color:#ff0000;} - отобразит красными буквами все, что будет после тега p, которому предшествовал тег div (...<div> черный текст <p> красный </p> </div>...).
Давайте подробнее рассмотрим описание идентификатора blok_1 в таблице стилей. Вернемся к нему:
#blok_1 {
width:80%;
margin: auto auto; /*размещает в середине*/
background: #aaffff;
color: #0044dd;
padding:20px;
}
width:80%;
margin: auto auto; /*размещает в середине*/
background: #aaffff;
color: #0044dd;
padding:20px;
}
width:80%; - задана ширина блока в 80% (от ширины окна, в котором находится этот блок.)
Свойство background и color мы рассмотрели выше, в описании тега body.
padding:20px; - аналогично свойству margin только для внутреннего отступа.
Поскольку наш div не был помещен внутрь другого div (который мог иметь другие размеры), то 80% берется от ширины основного окна
margin: auto auto; - задается внешний отступ для блока.В более общем случае это свойство описывают так:
margin: 10px 20px 15px 50px;
или так:
margin: 30px;
или так:
margin-top: 25px;
В первом случае задано 4 значения пикселей. Это отступ сверху (10) - справа (20) - снизу (15) - слева (50)
Во втором случае (одно значение 20px) - означает, отступить со всех сторон на 30 пикселей.
В третьем случае - отступ сверху = 25px
Свойство background и color мы рассмотрели выше, в описании тега body.
padding:20px; - аналогично свойству margin только для внутреннего отступа.
Именно из-за этого свойства наш текст "Первая строка" имеет отступ сверху, снизу и слева в 20 пикселей
В CSS еще существует понятие класса (class). Так, наш блок может быть описан и вот так:
<div id="blok_1" class="zakrugli">
Здесь имя тоже любое, я написал ЗАКРУГЛИ. Теперь этот блок <div> получит дополнительные свойства, описанные в классе zakrugli.
Для этого добавим в таблицу стилей описание этого класса. При этом перед его именем ставится не решетка, а точка.
.zakrugli {
border:5px solid #ffffff;
/* Закругление бордюра */
border-radius:10px;
-o-border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius: 10px;
}
Теперь при запуске страницы получим:
Заголовок
Первая строка
Вторая строка Как видите вид блока изменился, появилась белая закругленная рамочка (бордюр). Рассмотрим подробнее свойства добавленного класса zakrugli.
border:5px solid #ffffff; Замечательное свойство, которое, в данном случае описывает не только
ширину бордюра (5 пикселей), но и вид линии бордюра, и его цвет.
solid - это тип линии бордюра - сплошная, а может быть двойная - double и еще пунктирная и т.д. Все это потом найдете в Интернете (border CSS).
Далее идет комментарий, обрамленный комбинацией /* текст */ и свойство border-radius:10px; - которое, задает радиус закругления бордюра. А вот дальше - практически тоже самое, но для разных браузеров.
Здесь любой верстальщик сайта сталкивается с проблемой, которая называется кроссбраузерность.
А именно, мы должны описать свойство так, чтобы оно одинаково отобразилось во всех браузерах.
А создатели браузеров, каждый по своему описали синтаксис свойства закругление бордюра.
Не трудно догадаться, что стиль -o-border-radius... вставлен нами для того, чтобы пользователи, работающие с браузером "Опера" могли увидеть закругление, а -moz-border-radius... - пользователи Mozilla.Надеюсь, Вы поняли, что теперь, применив класс zakrugli, например, к тексту "Вторая строка" мы получим его окантовку в виде закругленной белой рамки. При этом фон и цвет букв останется неизменным, т.к. наш класс zakrugli описывает только изменение бордюра. Итак пробуем. Меняем в файле index.htm строку "Вторая строка" на такую:
<p class="zakrugli"> Вторая строка </p>
Теперь при запуске страницы текст Вторая строка тоже будет в рамке.
Здесь еще один новый тег <p>. Он определяет текстовый абзац. Т.е текст, помещенный внутрь будет выделен в отдельный абзац с переносом строки в конце (аналогично тегу <br>). Однако мы не только поместили свой текст "Вторая строка" внутрь тега <p>, но еще добавили ему свойства класса zakrugli. Как результат - текст обведен закругленной рамкой.
Читая этот текст, вы, наверное заметили, что речь идет об абзаце. А мы привыкли, что абзац всегда начинается с красной строки.
Обратите внимание на читаемый текст. У меня есть абзацы, а красной строки нет. Это потому, что я не использовал тег <p>, а просто набирал текст и для перевода строки использовал тег <br>. Для того, чтобы каждый абзац начинался с красной строки я обрамлю его тегом <p> задав ему свойство <p style="text-indent: 1.5em;">
Вот еще что-то новое. Вместо количества пикселей px мы видим некое 1.5em. Это тоже количество пикселей, только
вычисленное и равно размеру текущего шрифта умноженному на 1.5. Т.е. абзац будет меняться при изменении
размера шрифта. Но можно было написать и text-indent: 20px; - тогда отступ будет равен всегда 20 пикселей.
Этот стиль я добавил к форматированию текста ниже (см. Подведем итоги), где абзацы идут с красной строки
Этот стиль я добавил к форматированию текста ниже (см. Подведем итоги), где абзацы идут с красной строки
В заключение я хочу Вас познакомить еще с одним приемом в CSS. Мы сделаем так, чтобы при наведении мышкой на блок изменялись его свойства. Для этого в таблицу стилей добавим строки:
#blok_1:hover {
background: #aa0000;
cursor: pointer;
color: #ffff00;
}
Здесь id тоже самое, но есть добавочка :hover. Это псевдокласс. Он срабытывает при наведении курсора на этот элемент. Другими словами, стили элемента blok_1 при наведении на него курсора - изменятся на указанные.
В нашем случае это целый блок div, внутри которого текст "Первое слово".
При наведении курсора на этот блок, цвет фона с голубого измениться на красный, буквы станут желтыми
и добавится стиль cursor: pointer (курсор в виде руки)
Смотрим результат:
Заголовок
Первая строка
Вторая строка
Использование псевдоэлементов
Мы ознакомились с псевдоклассом :hover. Кроме псевдоклассов еще есть псевдоэлементы. Ниже я привожу красивые примеры их использования.
Привет
Здесь в центре - #titleСлева фигура - использован псевдокласс :after
Справа - :before
Вот как это реализовано в файле стилей:
#title { width: 200px;
text-align: center;
color: #ffffff;
height: 10px;
line-height: 10px;
padding: 10px 0px;
position: relative;
box-shadow: rgba(20,30,10,0.5) 0px 5px 10px 1px;
margin: auto;
border-radius: 0px 6px 0px 6px;
top:-20px;
}
#title:after {
content: '';
left: -20px;
bottom: 15px;
position: absolute;
border: 10px solid #2d5e0f;
border-left: 10px solid transparent;
}
#title:before {
bottom: 0px;
content: '';
right: -10px;
position: absolute;
border-top: 10px solid #2d5e0f;
border-right: 10px solid transparent;
}
text-align: center;
color: #ffffff;
height: 10px;
line-height: 10px;
padding: 10px 0px;
position: relative;
box-shadow: rgba(20,30,10,0.5) 0px 5px 10px 1px;
margin: auto;
border-radius: 0px 6px 0px 6px;
top:-20px;
}
#title:after {
content: '';
left: -20px;
bottom: 15px;
position: absolute;
border: 10px solid #2d5e0f;
border-left: 10px solid transparent;
}
#title:before {
bottom: 0px;
content: '';
right: -10px;
position: absolute;
border-top: 10px solid #2d5e0f;
border-right: 10px solid transparent;
}
В html страничке достаточно вставить <div id="title">Привет</div>
Еще один пример
Отогнутые уголки в CSS -
это красиво
Бордюр с изменением радиуса, а также создание искаженных и развернутых теней на псевдоклассах after и before создает объемность листка.
Вот как это реализовано в файле стилей:
.corner2 {
float:left;
margin:7px;
width: 250px;
position:relative;
padding: 1em;
border: 1px solid #ccc;
border-radius: 60px 60px 50px 0 / 25px 5px 12px 0;
background: linear-gradient(102deg, rgba(0,0,0,.0.5), rgba(0,0,0,.1) 10px, rgba(0,0,0,0) 20px), linear-gradient(-102deg, rgba(0,0,0,.2), rgba(0,0,0,.1) 10px, rgba(0,0,0,0) 20px);
background: #ffddcc;
}
.corner2 {
width: 180px;
position: relative;
padding: 1em;
border: 1px solid #ccc;
border-radius: 60px 60px 50px 0 / 25px 5px 12px 0;
background: linear-gradient(102deg, rgba(0,0,0,.1), rgba(0,0,0,.05) 10px, rgba(0,0,0,0) 20px), linear-gradient(-102deg, rgba(0,0,0,.1), rgba(0,0,0,.05) 10px, rgba(0,0,0,0) 20px);
background: #ffffff;
}
.corner2:before, .corner2:after {
content: '';
position:absolute;
top: 25px;
z-index:-1;
width: 50px;
height: 50px;
}
.corner2:before {
right: 10px;
box-shadow: 10px -10px 10px rgba(0,0,0,.5);
-webkit-transform: rotate(-2deg) skew(-20deg);
transform: rotate(-2deg) skew(-20deg);
}
.corner2:after{
left: 10px;
box-shadow: -10px -10px 10px rgba(0,0,0,.5);
-webkit-transform: rotate(2deg) skew(20deg);
transform: rotate(2deg) skew(20deg);
}
float:left;
margin:7px;
width: 250px;
position:relative;
padding: 1em;
border: 1px solid #ccc;
border-radius: 60px 60px 50px 0 / 25px 5px 12px 0;
background: linear-gradient(102deg, rgba(0,0,0,.0.5), rgba(0,0,0,.1) 10px, rgba(0,0,0,0) 20px), linear-gradient(-102deg, rgba(0,0,0,.2), rgba(0,0,0,.1) 10px, rgba(0,0,0,0) 20px);
background: #ffddcc;
}
.corner2 {
width: 180px;
position: relative;
padding: 1em;
border: 1px solid #ccc;
border-radius: 60px 60px 50px 0 / 25px 5px 12px 0;
background: linear-gradient(102deg, rgba(0,0,0,.1), rgba(0,0,0,.05) 10px, rgba(0,0,0,0) 20px), linear-gradient(-102deg, rgba(0,0,0,.1), rgba(0,0,0,.05) 10px, rgba(0,0,0,0) 20px);
background: #ffffff;
}
.corner2:before, .corner2:after {
content: '';
position:absolute;
top: 25px;
z-index:-1;
width: 50px;
height: 50px;
}
.corner2:before {
right: 10px;
box-shadow: 10px -10px 10px rgba(0,0,0,.5);
-webkit-transform: rotate(-2deg) skew(-20deg);
transform: rotate(-2deg) skew(-20deg);
}
.corner2:after{
left: 10px;
box-shadow: -10px -10px 10px rgba(0,0,0,.5);
-webkit-transform: rotate(2deg) skew(20deg);
transform: rotate(2deg) skew(20deg);
}
Обратите внимание какие возможности предоставляет нам CSS. Как хитро задано закругление бордюра
border-radius: 60px 60px 50px 0 / 25px 5px 12px 0;
(меньший и больший радиус) - создается эффект искаженного закругления.
И не менее замысловато описан стиль фона background
с градиетном, прозрачностью и разворотом.
Как сделать красивый комментарий
Это текст комментария. Для создания уголка использую псевдоэлемент :after.
Такой комментарий всегда украсит любой текст.
Первую букву выделил используя свой класс .abz p:first-letter (см. ниже).
Уголок сделал подобно тому как было выше, но все-таки немного не так (выделено красным).
Вот как это реализовано:
В файле стилей
.comm { /* придумал имя классу от слова коммент */
float:left;
width:220px;
margin-right: 20px;
position:relative;
padding:15px 30px;
color:#fff;
background:#9AC31C; /*если браузер не поддерживает градиент*/
background:-webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#5a8f00));
background:-moz-linear-gradient(#b8db29, #5a8f00);
background:-o-linear-gradient(#b8db29, #5a8f00);
background:linear-gradient(#b8db29, #5a8f00);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.comm:after {
content:"";
position:absolute;
top:13px;
left:50px;
border-width:20px 0px 0px 30px; /* левый-верх-справа-низ */
border-style:solid;
border-color:transparent #9AC31C;
}
В html страничке
<blockquote class="abz">
<p class="comm">Это текст комментария...</p>
</blockquote>
Как легко и красиво пронумеровать параграфы
Что такое HTML и CSS
Языки разметки
Таблицы стилей
Структура HTML-документа
Определение типа документа
Структура собственно документа
Разделы документа
Основы CSS
Позиционирование с помощью CSS
Здесь слова "Глава" и нумерация проставляется автоматически (идет четкое разделение как на главы, так и на параграфы внутри глав).
Слово "Глава" - растянуто.
Для первой буквы "Г" используется картинка.
Вот как это реализовано:
В файле стилей
.paragraf {
counter-reset:item
}
#paragraf span {
display:block;
font-size:10pt
}
#paragraf span:before { /* 1-й уровень */
letter-spacing:3px;
font-weight:bold;
content:url("images/g.png") /* буква Г */
"лава "
counters(item,".") ". ";
counter-increment:item
}
#paragraf span div span:before { /* 2-й уровень */
letter-spacing:0;
padding-left:30px;
content:"\A7" /* символ параграфа */
counters(item,".") ". ";
counter-increment:item
}
В html страничке
<div id="paragraf">
<span>Что такое HTML и CSS
<div id="paragraf">
<span>Языки разметки</span>
<span>Таблицы стилей</span>
</div>
</span>
<span>Структура HTML-документа
<div id="paragraf">
<span>Определение типа документа</span>
<span>Структура собственно документа</span>
<span>Разделы документа</span>
</div>
</span>
<span>Основы CSS</span>
<span>Позиционирование с помощью CSS</span>
</div>
Я не буду разъяснять как это работает. Моя цель показать возможности.
А вот как можно сделать начало каждого абзаца с красной строки и красивой первой буквой используя псевдокласс first-letter:
.abz p:first-letter{
margin: -1px 0 0 20px;
float:left;
color:#770000;
font-size:15px;
font-weight:bold;
font-family:Georgia;
}
margin: -1px 0 0 20px;
float:left;
color:#770000;
font-size:15px;
font-weight:bold;
font-family:Georgia;
}
А как это работает смотрите ниже после слов "Подведем итоги".
Здесь p:first-letter означает - применить стиль ко всем местам html страницы, где есть <p>...
А теперь немного про перспективу
CSS продолжает активно развиваться. На его смену пришел CSS2 и сейчас CSS3.
Если Ваш браузер поддерживает CSS3, то на экране увидите кубики с моим логотипом, которые вращаются при наведении на них мышкой. Но самое интересное не это, а то, что можно контролировать скорость применения свойства.
Для этого используется свойство "Трансформация" (transition). Оно позволяет одновременно задать свойство, к изменению которого будет применен плавный переход, время, в течение которого этот переход будет совершаться, способ расчета промежуточных значений перехода и задержку перед переходом.
m z n n
Вот код, который я подсмотрел на http://tympanus.net/Tutorials/TypographyStyles/index6.html
В файле стилей
.cs-text {
width: 100%;
}
.cs-text:before, .cs-text:after {
content: " ";
}
.cs-text:after {
}
.cs-text span{
position: relative;
}
.cs-text > span {
background: #aa8822;
float: left;
width: 90px;
height:90px;
margin: 20px;
}
.cs-text span span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0px;
background: rgba(55,155,255,0.3);
box-shadow: 0px 0px 18px rgba(0,0,0,0.5);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.cs-text span span:last-child{
font-size: 40px;
line-height: 90px;
text-align: center;
color: rgba(255,255,255,0.8);
font-family: 'Michroma', sans-serif;
text-shadow:
1px 1px 1px rgba(0,0,0,0.1),
-1px -1px 1px rgba(0,0,0,0.1),
5px 5px 0 rgba(216,65,40,0.6),
-5px -5px 0 rgba(37,166,164,0.6);
background: -moz-linear-gradient(45deg, rgba(249,249,249,0.08) 0%, rgba(234,234,234,0.5) 49%, rgba(255,255,255,0.51) 50%, rgba(244,244,244,0.94) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(249,249,249,0.08)), color-stop(49%,rgba(234,234,234,0.5)), color-stop(50%,rgba(255,255,255,0.51)), color-stop(100%,rgba(244,244,244,0.94)));
background: -webkit-linear-gradient(45deg, rgba(249,249,249,0.08) 0%,rgba(234,234,234,0.5) 49%,rgba(255,255,255,0.51) 50%,rgba(244,244,244,0.94) 100%);
background: -o-linear-gradient(45deg, rgba(249,249,249,0.08) 0%,rgba(234,234,234,0.5) 49%,rgba(255,255,255,0.51) 50%,rgba(244,244,244,0.94) 100%);
background: -ms-linear-gradient(45deg, rgba(249,249,249,0.08) 0%,rgba(234,234,234,0.5) 49%,rgba(255,255,255,0.51) 50%,rgba(244,244,244,0.94) 100%);
background: linear-gradient(45deg, rgba(249,249,249,0.08) 0%,rgba(234,234,234,0.5) 49%,rgba(255,255,255,0.51) 50%,rgba(244,244,244,0.94) 100%);
}
/*** Дополнительные слои **********/
.cs-text > span:nth-child(odd) span:first-child {
-webkit-transform: rotate(5deg) skewY(-14deg);
-moz-transform: rotate(5deg) skewY(-14deg);
-o-transform: rotate(5deg) skewY(-14deg);
-ms-transform: rotate(5deg) skewY(-14deg);
transform: rotate(5deg) skewY(-14deg);
}
.cs-text > span:nth-child(even) span:first-child {
-webkit-transform: rotate(-35deg) skewY(-5deg);
-moz-transform: rotate(-35deg) skewY(-5deg);
-o-transform: rotate(-35deg) skewY(-5deg);
-ms-transform: rotate(-35deg) skewY(-5deg);
transform: rotate(-35deg) skewY(-5deg);
}
.cs-text > span:nth-child(odd) span:nth-child(2) {
-webkit-transform: rotate(45deg) skewY(-10deg);
-moz-transform: rotate(45deg) skewY(-10deg);
-o-transform: rotate(45deg) skewY(-10deg);
-ms-transform: rotate(45deg) skewY(-10deg);
transform: rotate(45deg) skewY(-10deg);
}
.cs-text > span:nth-child(even) span:nth-child(2) {
-webkit-transform: rotate(27deg) skewY(-12deg);
-moz-transform: rotate(27deg) skewY(-12deg);
-o-transform: rotate(27deg) skewY(-12deg);
-ms-transform: rotate(27deg) skewY(-12deg);
transform: rotate(27deg) skewY(-12deg);
}
.cs-text > span:nth-child(odd) span:nth-child(3) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.cs-text > span:nth-child(even) span:nth-child(3) {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
/****** при наведении курсора возвращаем в 0 градусов ****/
/*Если в этом блоке вместо rotate(0deg) дать вращение на 360 градусов,
то получим еще эффектнее*/
#cs-text > span:hover span {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg) skewY(0deg);
-o-transform: rotate(0deg) skewY(0deg);
-ms-transform: rotate(0deg) skewY(0deg);
transform: rotate(0deg) skewY(0deg);
text-shadow: 5px -5px 0 rgba(100,20,10,0.5), -5px 5px 0 rgba(37,166,255,0.5);
}
В html страничке
<h1 class="cs-text" id="cs-text">
<span>
<span></span><span></span><span></span>
<span>m</span></span><span><span></span><span></span><span></span>
<span>z</span></span><span><span></span><span></span><span></span>
<span>n</span></span><span><span></span><span></span><span></span>
<span>n</span>
</span></h1>
И на последок повторяем
Если вы хотите придерживаться правильного стиля, то все, что касается внешнего вида: цвет, положение, отступ, смещение, размеры и т.д. - все описываем через style="...." или в файле стилей.
Так, если хотите разместить картинку слева и при этом, чтобы текст обтекал ее справа, то при описании картинки, НЕ ВЕРНО писать
<img src="images/5.png" align="left">
А ПРАВИЛЬНО ТАК, используя стиль
<img src="images/5.png" style="float:left;">
Подведем итоги
Теперь Вы поняли, что можно использовать id, классы и псевдоклассы. Что-то из стилей можно задавать прямо в html страничке, (см. зеленым цветом выше), а можно и выносить в таблицу стилей.
Изменение в таблице стилей приводит к мгновенному изменению содержания всех страниц сайта, где есть ссылки на эти классы и id.
Комбинируя классы и id можно добавлять количество свойств.
Большую часть стилей (цвет, шрифт, окаймление, заливка, отступы и т.д.) выносим в файле стилей, а в html файле только блоки и текст.
Как правильно разбить страницу на блоки читаем в разделе Верстка
Мысли вслух
- Программист - это не тот, кто пишет программы, а тот, чьи программы работают
- Для программиста монитор - это реальный рабочий стол, системный блок - журнальный, а клавиатура - обеденный
- Конфеты программиста: 'Мишка на сервере'
- А знаете ли Вы, что в 1 килобайте не 1000 байт, а 1024 (2 в степени 10)
Синтаксис такой:
Сначала пишется имя тега, которому мы хотим задать свойства, затем в фигурных скобках идет описание стилей: имя стиля, двоеточие, значение стиля и точка с запятой.
В отличие от bgcolor=, который мы использовали ранее для изменения фона, в CSS цвет фона задается стилем background: а далее как и раньше #цвет.
Стиль color: - определяет цвет символов.
Таким образом мы задали для тега body цвет фона и цвет букв. Поскольку этот тег начинается в начале и заканчивается в конце html страницы, то эти свойства распостранились на все содержимое нашей страницы.