Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!
Для создания красивого сайта иногда требуется закругление краев шаблона, тени, прозрачность, да и вообще еще много чего. Но в нашем уроке рассмотрим 5 наиболее используемых стилей разметки.
Напомню, что MS Internet Explorer старых версий и Opera не дружат с некоторыми стилями. Ну и на свалку их. Не понимаю тех разработчиков браузеров, которые не хотят или просто не могут идти в ногу со временем. Итак, давайте посмотрим на графический пример. Это именно то, что мы должны получить в оконцовке. Сделать это совсем не сложно, так что приступим к нашему уроку.
/* Копируем весь код в блокнот и сохраняем с расширением css */
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
/* Рисуем черный квадрат */
#round {
background-color: #000;
border: 1px solid #000;
}
/* Закругляем все углы */
#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
/* Закругляем только правые углы */
#indie {
background-color: #000;
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
/* Делаем прозрачность на 30% */
#opacity {
background-color: #000;
opacity: 0.3;
}
/* Создаем тень у объекта */
#shadow {
background-color: #fff;
border: 1px solid #000;
-webkit-box-shadow: 3px 5px 13px #f00; /* используются и отрицательные значения*/
}
/* Масштабируемость рисунка работает только в Safary */
#resize {
background-color: #fff;
border: 1px solid #000;
resize: both;
overflow: auto;
}
При округлении краев мы добавили две практически идентичные строки. Отличия только в префиксах: -moz и -webkit. МОZ ссылается на Mozilla Firefox, а WEBKIT на Safari / Google chrom. Таким образом расширяем работоспособность css для разных браузеров. Замечу еще раз, что никаких других префиксов Opera еще не придумала.
Создадим html-страницу. Для этого открываем блокнот и прописываем там следующий код (хочу заметить, что лучше пользоваться Notepad++):
<!-- Этот код копируем в блокнот и сохраняем с расширением html //--> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>5 примеров разметки на css</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="round"> </div> <div id="indie"> </div> <div id="opacity"> </div> <div id="shadow"> </div> <div id="resize"> </div> </div> </body> </html>
В получившемся документе мы можем заметить присутствие DIV-элементов с пятью разными идентификаторами. Каждый идентификатор разграничивает наши стили, для того, чтобы дивы не накладывались друг на друга.
5 примеров разметки на CSS (74.5 KB, 0 скачиваний)
Файл залит 08.08.2010 в 9:58
Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!
страничка с таким css не пройдет валидатор, если использовать данные конструкции несколько раз. убираем все в class’ы. ;)
Я думаю, классы нужны не каждому, у всех структура сайтов разная, поэтому кто-то может использовать и ID. Но все равно классы – лучшее решение для многих сайтов, это верно подмечено :)