01-тен 10-ке дейін
CSS мәнер кестесін жасаңыз
HTML үшін бөлек мәтіндік файлды жасағанымыздай, сіз CSS үшін мәтіндік файл жасайсыз. Егер сізге осы процестің көрнекі құралдары қажет болса, онда бірінші оқулықты қараңыз. Блокнотта CSS мәнер кестесін жасау қадамдары:
- Бос терезені алу үшін Файл> Жаңадан Блокнот тармағын таңдаңыз
- Файлды Файл ретінде сақтау <Басқаша сақтау ...
- Қатты дискідегі my_website қалтасына өтіңіз
- «Басқаша сақтау түрі:» дегенді «Барлық файлдарға» өзгертіңіз
- Файлыңызды «styles.css» деп атаңыз (тырнақшаларды қалдырыңыз) және Сақтау түймешігін басыңыз
02-тен 10-ға дейін
CSS мәнер кестесін HTML-ға байланыстырыңыз
Веб-сайтыңызға арналған стиль кестесін алғаннан кейін, оны веб-бетке өзіңізбен байланыстырған жөн. Ол үшін сілтеме тегін қолданасыз. Pets.htm құжаттың
тегтерінің кез келген жерінде келесі сілтеме тегін орналастырыңыз:03 10
Бет шеттерін түзету
Сіз әртүрлі браузерлер үшін XHTML жазғанда, бір нәрсені үйренесіз, олар бәрібір әртүрлі жолдар мен ережелерді көрсету үшін ережелер бар сияқты. Көптеген браузерлерде сіздің сайтыңыздың бірдей екеніне көз жеткізудің ең жақсы жолы браузер таңдауына шектеу сияқты жолдарға жол бермеу.
Мен парақтарды жоғарғы сол жақ бұрышта бастауға тырысамын, ешқандай қосымша толтырмай немесе мәтінді қоршап тұрған жоқпын. Мазмұнды толтыратын болсам да, мен сол бос шрифтпен басталатындай етіп, шеттерімді нөлге орнаттым. Мұны істеу үшін styles.css құжатын келесіге қосыңыз:
html, body {
маржа: 0px;
толтыру: 0px;
шекара: 0px;
сол: 0px;
жоғарғы жағы: 0px;
}
04 of 10
Бетіндегі қаріпті өзгерту
Қаріп жиі веб-бетте өзгерткіңіз келетін бірінші нәрсе. Веб-беттегі әдепкі қаріп күлкілі болуы мүмкін және ол шын мәнінде веб-шолғыштың өзі болып табылады, сондықтан егер қаріпті анықтамасаңыз, онда сіздің беттің қалай көрінетінін шынымен білмейсіз.
Әдетте параграфтардағы қаріпті немесе кейде бүкіл құжаттың өзінде өзгерте аласыз. Бұл сайт үшін біз тақырыпты және параграф деңгейінде қаріпті анықтаймыз. Styles.css құжатын келесіге қосыңыз:
p, li {
қаріп: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
шрифт: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
қаріп: 1.25em Arial, Helvetica, sans-serif;
}
Мен абзацтар мен тізім элементтерінің негізгі өлшемі ретінде бастадым, сосын бұл менің тақырыптарымның өлшемін белгілеу үшін қолданды. Мен тақырыбын h4-ден қарағанда тереңірек пайдалануды күтпеймін, бірақ егер сіз оны жоспарласаңыз, оны да стильдендіргіңіз келеді.
05 of 10
Сілтемелерді қызықты ету
Сілтемелерге арналған әдепкі түстер сәйкесінше және келмейтін сілтемелер үшін көк және күлгін болады. Бұл стандартты болса да, сіздің беттеріңіздің түс схемасына сәйкес келмеуі мүмкін, сондықтан оны өзгерте берейік. Styles.css файлында төмендегілерді қосыңыз:
a: сілтеме {
font-family: Arial, Helvetica, sans-serif;
түсі: # FF9900;
мәтінді безендіру: астын сызу;
}
a: барған {
түсі: # FFCC66;
}
a: hover {
фон: #FFFFCC;
қаріптің салмағы: қалың;
}
Мен үш сілтеме мәнерлерін орнаттым: a: әдепкі параметр ретінде сілтеме, a: ол барған кезде кіргенде, мен түсімді өзгерте аламын: hover. Сілтеме арқылы: hover Менде сілтеме фондық түс алу және оны басу үшін сілтеме екенін көрсету үшін батыл болып шығады.
06-дан 10-ке дейін
Навигация бөлігін сәндеу
Навигацияны (id = «nav») бірінші бөлікке қойсақ, алдымен оны стильдендірейік. Бастапқы мәтіннің оған қарсы шықпауы үшін оң жақта неғұрлым кең болуы керек және оны кеңейту керек екенін көрсету керек. Сондай-ақ, мен оған шекарасын қойдым.
Styles.css құжатына келесі CSS қосыңыз:
#nav {
ені: 225px;
margin-right: 15px;
шекара: орташа қатты # 000000;
}
#nav li {
list-style: none;
}
.footer {
қаріп өлшемі: .75em;
анық: екеуі де;
ені: 100%;
мәтінді туралау: орталық;
}
Тізім стилінің сипаты ешқандай таңбалауыштар немесе сандар болмау үшін навигация бөлімі ішіндегі тізімді орнатады, және .footer авторлық құқық бөлігін кішігірім және бөлім ішінен ортаға салады.
07 ішіндегі 10
Негізгі бөлімді орналастыру
Негізгі бөліміңізді абсолютті орналастыру арқылы орналастыра отырып, ол сіздің Веб-бетте қалғыңыз келген жерде қалатынына сенімді бола аласыз. Мен 800 пиксельді кеңірек мониторлармен қамтамасыз ету үшін жасадым, бірақ егер сізде кішігірім монитор болса, онда оны азайтқыңыз келуі мүмкін.
Styles.css құжатыңызда төмендегілерді орналастырыңыз:
#main {
ені: 800px;
жоғарғы жағы: 0px;
лауазымы: абсолютті;
сол: 250px;
}
08-тен 10-ға дейін
Сіздің параграфтарыңызды сәндеу
Жоғарыдағы абзацтың қарпін қойғандықтан, әрбір абзацты жақсарту үшін біраз қосымша «соққы» беруді қаладым. Мен мұны тек қана бейнені ғана емес, параграфты белгілейтін жоғарғы жағына қою арқылы жасадым.
Styles.css құжатыңызда төмендегілерді орналастырыңыз:
.topline {
шекарасы: қалың қатты # FFCC00;
}
Мен мұны барлық абзацтарды дәл осы жолмен анықтағаннан гөрі «topline» деп атайтын сабақ ретінде қабылдауға бел будым. Осылайша, егер мен жоғарғы сары сызықсыз абзацты алуды шешсем, абзац белгісіндегі class = «topline» -тен шығып кетуге болады және жоғарғы шекара болмайды.
09-дан 10-ке дейін
Кескіндерді бейнелеу
Суреттер әдетте айналасында шекарасы бар, бұл кескін сілтеме болмаса, әрдайым көрінбейді, бірақ мен шекараны автоматты түрде өшіретін CSS мәнерлер кестесіндегі сыныпты ұнатамын. Бұл стиль кестесінде мен «noborder» сыныбын құрдым және құжаттағы суреттердің көпшілігі осы сыныптың бір бөлігі болып табылады.
Осы бейнелердің басқа ерекше бөлігі - олардың бетінде орналасуы. Мен оларды кестелерді оларды туралау үшін қолданбай тұрған параграфтың бөлігі болғым келеді. Мұны істеудің қарапайым жолы - float CSS сипатын пайдалану.
Styles.css құжатыңызда төмендегілерді орналастырыңыз:
#main img {
float: сол;
margin-right: 5px;
margin-bottom: 15px;
}
.noborder {
border: 0px none;
}
Көріп отырғаныңыздай, суреттегі маржа сипаттары бар, олар параграфтардағы жан-жақты мәтінге қарсы соқпайтынына көз жеткізу үшін.
10-дан 10-ға дейін
Қазір аяқталған бетіңізге қараңыз
CSS-ді сақтағаннан кейін веб-браузерде pets.htm бетін қайта жүктеуге болады. Сіздің бетіңіз осы суретте көрсетілгендей көрінуі тиіс, суреттер тураланған және навигация беттің сол жағында дұрыс орналастырылған.
Осы тораптың барлық ішкі беттеріне арналған осы қадамдарды орындаңыз. Навигациядағы әрбір бет үшін бір бетке ие болғыңыз келеді.