Преглед на каскадни стилски плочи со пробен стилски лист
Кога ќе се изгради веб-страница од нула, тоа е паметно да се започне со основните стилови дефинирани. Тоа е како почнувајќи со чиста платно и свежи четки. Еден од првите проблеми со кои се соочуваат веб-дизајнерите е дека сите интернет прелистувачи се различни. Стандардната големина на фонтот е различна од платформата до платформа, стандардното семејство на фонтови е различно, некои прелистувачи ги дефинираат маргините и пасусите на телото, додека други не, и така натаму. Добијте околу овие недоследности со дефинирање на стандардните стилови за вашите веб-страници.
CSS и карактер сет
Прво, прво поставете ги карактерите на вашите CSS документи на utf-8 . Иако е веројатно дека повеќето од страните што ги дизајнирате се напишани на англиски јазик, некои може да бидат локализирани - прилагодени за различен лингвистички и културен контекст. Кога се, UTF-8 го поедноставува процесот. Поставувањето на наместениот лик во надворешниот стилски лист нема да има предност над HTTP заглавието , но во сите други ситуации тоа ќе го направи.
Лесно е да го поставите карактерот. За првата линија на документот CSS напишете:
@charset "utf-8";На овој начин, ако користите меѓународни знаци во сопственост на содржината или како имиња на класа и идентификација, стилскиот лист сè уште ќе работи правилно.
Стилизирање на страната на телото
Следното нешто што е потребно за стандардниот стилски лист се стилови до нула од маргините, рамнините и границите. Ова осигурува дека сите прелистувачи ја поставуваат содржината на истото место и нема скриени простори помеѓу прелистувачот и содржината. За повеќето веб-страници, ова е премногу блиску до работ за текстот, но важно е да започнете таму, така што сликите во позадината и распоредот на распоред се правилно поставени.
html, body {margin: 0px; Соочувајќи се: 0px; граница: 0px; }Поставете го зададеното преден план или бојата на фонтот во црно и стандардната боја на позадина да биде бела. Иако ова најверојатно ќе се промени за повеќето дизајни на веб-страници, имајќи ги овие стандардни бои поставени на телото и HTML тагот , прво ја прави страницата полесна за читање и работа.
html, тело (боја: # 000; позадина: #fff; }Стандардни стилови на фонт
Големината на фонтот и семејството на фонтови се нешто што неизбежно ќе се промени откако дизајнот ќе застане, но започнете со стандардна големина на фонт од 1 em и стандардно фонт на семејството Arial, Geneva или некој друг sans-serif фонт. Употребата на ems ја задржува страницата што е можно подостапна, а фонтот sans-serif е повеќе читлив на екранот.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Може да има и други места каде што може да најдете текст, но p , th , td , li , dd и dt се добар почеток за дефинирање на основниот фонт. Вклучете HTML и тело за секој случај, но многу прелистувачи ги пребришуваат изборите за фонт ако ги дефинирате само вашите фонтови за HTML или телото.
Наслови
Заглавувањето со HTML е важно да се користи за да им помогне на вашиот сајт преглед и нека пребарувачите се подлабоко во вашиот сајт. Без стилови, сите тие се прилично грди, па поставете стандардни стилови на сите нив и дефинирајте го семејството на фонтот и големината на фонтот за секоја од нив.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {фонт-големина: 2em; } h2 {големина на фонтот: 1.5em; } h3 {фонт-големина: 1.2е; } h4 {font-size: 1.0em; } h5 {големина на фонтот: 0.9еме; } h6 {големина на фонтот: 0.8em; }Не заборавајте да ги заборавите линковите
Стилизирањето на боите на линковите е речиси секогаш критичен дел од дизајнот, но ако не ги дефинирате во стандардните стилови, шансите се дека ќе заборавите барем една од псевдокласите. Дефинирајте ги со некои мали варијации на сино, а потоа ги промените кога ќе ја имате палетата на бои за дефинираната локација.
За да ги поставите врските во нијанси на сино, поставете:
- линкови како сини
- ги посети линковите како темно сини
- ливчињата врски како светло сина
- активни врски како уште бледа сина
како што е прикажано во овој пример:
a: link {color: # 00f; } a: посетени {боја: # 009; } a: лебдат {боја: # 06f; } a: активен {боја: # 0cf; } Со стајлинг на врските со прилично едноставна шема на бои, осигурува дека нема да заборавам ниту една од класите, а исто така ги прави малку помалку гласни од стандардните сини, црвени и виолетови.Целосен стилски лист
Еве го целиот стилски лист:
@charset "utf-8"; html, body {margin: 0px; Соочувајќи се: 0px; граница: 0px; боја: # 000; позадина: #fff; } html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {фонт-семејство: Arial, Helvetica, sans-serif; } h1 {фонт-големина: 2em; } h2 {големина на фонтот: 1.5em; } h3 {фонт-големина: 1.2е; } h4 {font-size: 1.0em; } h5 {големина на фонтот: 0.9еме; } h6 {големина на фонтот: 0.8em; } а: врската {боја: # 00f; } a: посетени {боја: # 009; } a: лебдат {боја: # 06f; } a: активен {боја: # 0cf; }