Міністерство освіти і науки України Кіровоградський національний технічний університет Кафедра програмування та захисту інформації Дисципліна : Web-програмування Лабораторна робота №2 Тема: Основи СSS Ціль: Познайомитися із синтаксисом та основними елементами мови СSS. Знати: Способи створення різних дизайнів сайту за допомогою СSS. Уміти: Встановлювати стилі для HTML-елементів за допомогою селекторів СSS. Завдання: Продумайте та створіть дизайн для свого сайту з лабораторної роботи №1. Ідея для дизайну сайта повинна бути зображена у вигляді ескізу (схематичного або детального, на Ваш розсуд) на папері, або у графічному редакторі. Всі стилі сайту мають бути прописані у файлі style.css. Варіант 29 - Сайт спортивного клубу
CSS /* Основной стиль */ html, body { margin: 0; height: 100%; color: #8a9dc9; font-family: Arial, Tahoma, Vernada; font-size: 12px; background: #212637 url(../design_img/center_bg.jpg) center top repeat-y; } .wrapper { height: auto !important; width: 1000px; margin-left: auto; margin-right: auto; } h1 { margin-bottom: 30px; margin-top: 0px; font-size: 24px; font-family: 'times new roman'; text-align: center; font-weight: normal; } img { border: 0px; } a:link { color: #f7af59; text-decoration: none; } a:visited { color: #f7af59; text-decoration: none; } a:hover { color: #f7af59; text-decoration: underline; } table { width: 100%; border-collapse: collapse; } #top_panel { height: 40px; background: url(../design_img/top_panel_bg.jpg) repeat-x; padding-top: 10px; padding-left: 85px; } #login_title { height: 31px; width: 90px; background: url(../design_img/login_title.jpg) no-repeat; float: left; margin-right: 8px; } #top_panel input { width: 134px; height: 29px; background: none; border: none; font-family: Arial; font-size: 12px; color: #a8aeb5; outline: none; } #login_f, #password_f { float: left; width: 142px; height: 31px; padding-left: 30px; margin-left: 6px; } #login_f { background: url(../design_img/login_f.gif) no-repeat; } #login_f:hover { background: url(../design_img/login_f.gif) left 100%; } #password_f { background: url(../design_img/password_f.gif) no-repeat; } #password_f:hover { background: url(../design_img/password_f.gif) left 100%; } #login_button { display: block; float: left; width: 90px; height: 28px; background: url(../design_img/login_button.jpg) no-repeat; text-align: center; color: #f7af59; text-shadow: 0px -1px #410e07; padding-top: 9px; font-size: 14px; margin-top: -3px; margin-left: 4px; padding-right: 4px; } #login_button:hover { background: url(../design_img/login_button.jpg) left 100%; text-decoration: none; } #remember { font-family: 'times new roman'; font-size: 14px; float: left; margin-left: 12px; padding-top: 5px; } #remember a { text-decoration: underline; } #remember a:hover { text-decoration: none; color: #fff; } #top_bg { background: url(../design_img/top_bg.jpg) center top no-repeat; } #bottom_bg { background: url(../design_img/bottom_bg.jpg) center bottom no-repeat; } #header { height: 177px; padding-left: 328px; padding-top: 170px; background: url(../design_img/header_bg.jpg); } #buttons { background: url(../design_img/buttons_bg.jpg) no-repeat; height: 74px; } #reg_button { display: block; float: left; margin-left: 83px; background: url(../design_img/reg_button.jpg) no-repeat; width: 213px; height: 74px; } #reg_button:hover { background: url(../design_img/reg_button.jpg) left 100%; } #vk_button { width: 191px; height: 53px; display: block; float: right; background: url(../design_img/vk_button.jpg) no-repeat; margin-top: 21px; } #vk_button:hover { background: url(../design_img/vk_button.jpg) left 100%; } #help_button { width: 67px; height: 53px; display: block; float: right; background: url(../design_img/help_button.jpg) no-repeat; margin-top: 21px; margin-right: 68px; } #help_button:hover { background: url(../design_img/help_button.jpg) left 100%; } #menu { height: 100px; background: url(../design_img/menu_bg.jpg) no-repeat; padding-left: 45px; } #menu_main { display: block; width: 129px; height: 79px; background: url(../design_img/menu_main.jpg) no-repeat; } #menu_main:hover { background: url(../design_img/menu_main.jpg) left 100%; } #menu_start { display: block; width: 130px; height: 79px; background: url(../design_img/menu_start.jpg) no-repeat; } #menu_start:hover { background: url(../design_img/menu_start.jpg) left 100%; } #menu_forum { display: block; width: 130px; height: 79px; background: url(../design_img/menu_forum.jpg) no-repeat; } #menu_forum:hover { background: url(../design_img/menu_forum.jpg) left 100%; } #menu_rules { display: block; width: 130px; height: 79px; background: url(../design_img/menu_rules.jpg) no-repeat; } #menu_rules:hover { background: url(../design_img/menu_rules.jpg) left 100%; } #menu_about { display: block; width: 130px; height: 79px; background: url(../design_img/menu_about.jpg) no-repeat; } #menu_about:hover { background: url(../design_img/menu_about.jpg) left 100%; } #menu_help { display: block; width: 130px; height: 79px; background: url(../design_img/menu_help.jpg) no-repeat; } #menu_help:hover { background: url(../design_img/menu_help.jpg) left 100%; } #menu_more { display: block; width: 130px; height: 79px; background: url(../design_img/menu_more.jpg) no-repeat; } #menu_more:hover { background: url(../design_img/menu_more.jpg) left 100%; } #content_center { background: url(../design_img/content_center_bg.jpg) repeat-y; } #content_bottom { background: url(../design_img/content_bottom_bg.jpg) center bottom no-repeat; } #footer { height: 216px; background: url(../design_img/footer_bg.jpg) no-repeat; padding-top: 69px; padding-left: 103px; } #copyright { width: 276px; float: left; } #copyright a { color: #8a9dc9; text-decoration: underline; } #copyright a:hover { color: #fff; text-decoration: none; } #copyright span { display: block; color: #d3e0ff; margin-bottom: 10px; } #copyright span a { color: #d3e0ff; } .counter { border: 1px solid #2d3b52; width: 88px; height: 31px; padding: 1px; float: left; margin-top: 20px; margin-right: 5px; } #f_menu_1 { width: 175px; float: left; } #f_menu_2 { width: 220px; float: left; } #dkarts { float: left; padding-top: 21px; } #dkarts a { display: block; width: 121px; height: 35px; background: url(../design_img/dkarts1.png) no-repeat; } #dkarts a:hover { background: url(../design_img/dkarts2.png) no-repeat; -webkit-transition: all 0.5s ease; } .f_menu { line-height: 24px; } .f_menu a { color: #8a9dc9; background: url(../design_img/f_menu_row.gif) left 5px no-repeat; padding-left: 16px; } .f_menu a:hover { color: #fff; } #right_block { width: 344px; float: right; background: url(../design_img/right_bg.jpg) right top no-repeat; } #left_block { margin-right: 344px; background: url(../design_img/left_bg.jpg) no-repeat; padding-left: 45px; } #content_padding { background: url(../design_img/content_top.jpg) no-repeat; padding: 58px; padding-bottom: 100px; color: #46342c; min-height: 1040px; } #content_padding a { color: #792b1c; } .form { } .form input, .form textarea { background: #cec2a4 url(../design_img/input_bg.png) repeat-x; border: 1px solid #af9173; -moz-border-radius: 2px; -webkit-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; padding: 6px; color: #46342c; font-size: 14px; font-family: Arial; outline: none; width: 250px; } .form select { background: #cec2a4; border: 1px solid #af9173; -moz-border-radius: 2px; -webkit-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; padding: 6px; color: #46342c; font-size: 14px; font-family: Arial; outline: none; width: 264px; } .news { margin-bottom: 20px; } .news_title { height: 46px; width: 444px; background: url(../design_img/nt_bg.jpg) no-repeat; font-family: 'times new roman'; font-size: 18px; padding-top: 10px; padding-left: 52px; margin-bottom: 8px; } .news_date { float: right; color: #76635b; font-family: Arial; font-size: 12px; margin-right: 15px; margin-top: 4px; } /* .news_img { width: 135px; height: 106px; float: left; } .news_img img { z-index: 0; position: relative; width: 120px; height: 90px; } */ .news_text { margin-left: 25px; /*margin-left: 145px;*/ min-height: 106px; } .ni_border { width: 135px; height: 106px; background: url(../design_img/img_border.png) no-repeat; margin-top: -100px; margin-left: -8px; z-index: 1; position: relative; } .more_button { margin-top: 10px; } .more_button a { display: block; width: 89px; height: 24px; background: url(../design_img/more_button_bg.png) no-repeat; text-align: center; padding-right: 3px; padding-top: 6px; color: #605547 !important; text-shadow: 1px 1px #cbba9a; } .more_button a:hover { background: url(../design_img/more_button_bg.png) left 100%; text-decoration: none; } .pages { text-align: center; margin-top: 10px; } .pages1 a { background: url(../design_img/page_bg.png) center top no-repeat; display: inline-block; padding-top: 6px; width: 29px; height: 28px; font-family: 'times new roman'; font-size: 14px; } .pages1 a:hover { opacity: 0.5; text-decoration: none; } .p_prev a{ padding-top: 0; display: inline-block; padding-top: 0px !important; width: 30px !important; height: 30px !important; background: url(../design_img/p_prev.png) no-repeat !important; margin-bottom: -11px; margin-right: 10px; } .p_prev a:hover { background: url(../design_img/p_prev.png) left 100% no-repeat !important; opacity: 1 !important; } .p_prev1 a{ padding-top: 0; display: inline-block; padding-top: 0px !important; width: 30px !important; height: 30px !important; margin-bottom: -11px; margin-right: 10px; } .p_prev1 a:hover { background: url(../design_img/p_prev.png) left 100% no-repeat !important; opacity: 1 !important; } .p_next a{ display: inline-block !important; padding: 0px !important; width: 30px !important; height: 30px !important; background: url(../design_img/p_next.png) no-repeat !important; margin-bottom: -11px; margin-left: 10px; } .p_next a:hover { background: url(../design_img/p_next.png) left 100% no-repeat !important; opacity: 1 !important; } .p_next1 a{ display: inline-block !important; padding: 0px !important; width: 30px !important; height: 30px !important; margin-bottom: -11px; margin-left: 10px; } .p_next1 a:hover { background: url(../design_img/p_next.png) left 100% no-repeat !important; opacity: 1 !important; } #video_block { height: 172px; background: url(../design_img/video_bg.jpg) no-repeat; padding-left: 50px; padding-top: 32px; } #video_block a { display: block; width: 213px; height: 146px; background: url(../design_img/video1.jpg) no-repeat; } #video_block a:hover { display: block; width: 213px; height: 146px; background: url(../design_img/video2.jpg) no-repeat; -webkit-transition: all 0.5s ease; } .admin_name { font-size: 18px; color: #445eff; } .admin_name span { color: #f1f6ff; font-size: 12px; } #admin_table td { padding-bottom: 20px; } .button { background: url(../design_img/button_bg.png) repeat-x; border: 1px solid #300905; text-align: center; padding: 5px 15px; color: #f7af59 !important; text-shadow: 0px -1px #300905; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; } .button:hover { text-decoration: none; color: #fff; opacity: 0.8; } .server { width: 174px; height: 82px; padding-left: 126px; font-size: 11px; color: #f1f6ff; padding-top: 20px; } .server span { color: #61677c; } .server_title { height: 20px; } #more_serv { height: 106px; background: url(../design_img/more_serv_bg.jpg) no-repeat; padding-left: 125px; padding-top: 5px; } #more_serv a { display: block; width: 105px; height: 49px; background: url(../design_img/more_serv.png) no-repeat; } #more_serv a:hover { background: url(../design_img/more_serv.png) left 100%; } #forum { min-height: 69px; background: url(../design_img/forum_bg.jpg) no-repeat; padding-left: 50px; padding-top: 75px; } .f_theme { width: 216px; border-bottom: 1px solid #2f3339; padding-bottom: 12px; margin-bottom: 20px; } .f_title { font-family: 'times new roman'; font-size: 18px; line-height: 16px; margin-bottom: 8px; } .f_info { color: #67707c; } .f_info a { color: #a8aeb5; } /** Стили select **/ .lineForm { float: left; margin-left: 6px; } .cusel, .cuselFrameRight, .jScrollPaneDrag, .jScrollArrowUp, .jScrollArrowDown { background: url(../design_img/selects-3.png) no-repeat; } .cusel { /* общий вид селекта включая стрелку справа */ height: 31px; background-position: left top; display: inline-block; position: relative; cursor: pointer; font-size: 12px; z-index: 1; } .cuselFrameRight { /* левая чсть селект. обыно скругление и левая граница */ position: absolute; z-index: 2; top: 0; right: 0; height: 100%; width: 42px; background-position: right top; } #city2, #city3 { width: 172px; } .lineForm { color: #a8aeb5; } .cuselText { /* контейнер для отображенного текста селект */ height: 19px; padding: 8px 0 0 10px; /* подбираем отступы и высоту для видимого текста в селекте */ cursor: pointer; overflow: hidden; position: relative; z-index: 1; font: 12px Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* шрифты */ position: absolute; top: 0; left: 0; } * html .cuselText { /* высота блока для текста для ие6 */ height: 22px; } .cusel span { /* оформление оптиона */ display: block; cursor: pointer; white-space: nowrap; padding: 8px; /* паддинг справа - это отступ текста от ползунка */ zoom: 1; } .cusel span:hover, .cusel .cuselOptHover { /* реакция оптиона на наведение */ background: #393f48; color: #fff; } .cusel .cuselActive { /* оформление активного оптиона в списке */ background: #16191e; color: #fff; cursor: default; } Контрольні питання: Що таке СSS? Для чого використовується? Спеціальна мова, що використовується для опису сторінок, написаних мовами розмітки даних. Які існують способи вставки CSS у документ? -Інлайн / In-line (атрибут style) -Внутрішній (тег style) -Зовнішній (посилання на таблицю стилів) Який синтаксис CSS записів? [Селектор {Властивість1: значення;Властивість2: значення; ...}] Які бувають типи селекторів? Селектор визначає елементи HTML, до яких застосовуватиметься правило, яке визначається реальною назвою елемента, наприклад, body, або іншими засобами, такими як значення атрибуту class. Для чого необхідні класи та як її визначати? «Клас» - це деяке ім'я, яке ми можемо застосувати до будь-яких HTML-тегів