Asterial уеб дизайн - създаване на сайтове
В последната част на урока за създаване на HTML страници, помислете за използването на Cascading Style Sheets - Cascading Style Sheets, съкращение CSS. Основната цел е да се разделят CSS външна страница регистрация на неговата структура, така CSS свързан в отделен файл и файла се определя главно от структурата (в този случай, файла index.html), има само HTML-тагове, които отговарят за оформлението на страницата.
Създаване на папка в Test новия файл, наречен style.css. Първо трябва да се свържете на CSS файла в основната ни index.html файл. След като се направи позоваване на стилове, HTML-файл вече е бил в състояние да заеме стилове от него. Свързване на CSS-файлове е в процес на
. В първия урок, вече бе споменато, че този раздел е невидим, и е необходим за свързване на стилове, скриптове и да посочите заглавието на страницата, мета таговете и другите елементи на страницата. Просто напишете таговете на следния ред:раздел
Сега ще изглежда така:
Този път ще работи само ако стил лист файл е в папката с досието на index.html, ако той е в друга папка, връзката ще трябва да укажете пълния път до него.
Така че, CSS свързан сега прехвърлят съществуващите стилове във файла style.css. Index.html отново ще изглежда почти като втората част на урока. с изключение на една линия, която свързва CSS.
Съдържанието на файла index.html:
Съдържанието на style.css файла. Както можете да видите, всички стилове сега са обявени за него:
#header височина: 200px;
>
#content височина: 300px;
фон-цвят: # B0E0E6;
граница: 1px твърдо # 999;
шрифта: 12pt;
>
#footer височина: 200px;
текст-приравни: център;
шрифта: 14pt;
>
В началото на файла се връща таг
, тъй като много елементи са предварително зададените граници, а в различни браузъри могат да бъдат показвани по различни начини.Css синтаксис е проста - първо отива име на HTML тагове, която описва оформлението, а след това се подготвя - пряко дизайнерския стил винаги с точка и запетая в края на всеки имот. Глобални тагове като тялото, HTML, написани без никакви белези, ако ние се опише един елемент, който е записан като
Ако сега ви спаси двата файла и отворете файла index.html в браузъра, можем да видим, че той не се е променило. Това може да се очаква, тъй като дизайнът не се е променила, и това е просто се премества в отделен файл. За да получите краката си мокри с Cascading Style Sheets питат фон за горния и долния колонтитул. Предписват за #header нов имот в рамките на фигурните скоби:
фон: URL ( "header.jpg") многократно х;
header.jpg файл може да бъде изтеглена от тук. след изтеглянето трябва да се постави в папката Test.
Също така определят основата за долната част на страницата. Свръзките #footer пиши:
фон: URL ( "footer.jpg") многократно х;
footer.jpg файл люлка тук и също така да сложите в папка с проекта.
В непосредствена близост до пътя към файла е параметър повторение-х, което означава, че на фона ще се повтори хоризонтално.
В резултат на това style.css файла ще бъде, както следва:
#header височина: 200px;
фон: URL ( "header.jpg") многократно х;
>
#content височина: 300px;
фон-цвят: # B0E0E6;
граница: 1px твърдо # 999;
шрифта: 12pt;
>
#footer височина: 200px;
фон: URL ( "footer.jpg") многократно х;
текст-приравни: център;
шрифта: 14pt;
>
Сега на страницата е почти готова, но текста в съдържанието блок е твърде близо до лявата граница на блока, така че е най-добре да го помоли да се отдръпнат. Тъй като текстът, сключено през таг
, следователно е необходимо да се регистрирате стил тагове
. Когато този маркер
Разположен на съдържанието на блока, и ще бъде описано, както следва:
#content р марж: 20px;
>
Спасете style.css файла, опреснете страницата в браузъра си, и ако всичко е направено правилно, ще видите следното:
Разбира се, на страницата изглежда много проста, и неговата структура е примитивен, но тя може вече да е страница от сайта, тъй като тя има всичко необходимо за това. Ако продължим да се подобри неговата структура и да провежда с помощта на CSS, той може да получи нещо много добро.
В края на урока, който се разпространява в архива с всички файлове, необходими за нейното прилагане, с цел да бъде в състояние да се консултира с тях и да се коригират грешки, ако е необходимо.
В първата част на урока - Отидете
Във втората част на урока - Отидете
Свързани статии