CSS-elektilo kaj ĝia rolo en formato html-dokumentoj

Kreante vian retejon kaj plenigante ĝin per iuj elementoj de retpaĝo, ĉiuj certe konceptos koncepton kiel CSS-elektilo. Ĝi utilas por precize difini ĉiujn elementojn de la html-dosiero, ilian dezajnon kaj lokon sur la paĝo. Por fari tion, kreu CSS-dokumenton, kiu preskribas tiujn aŭ aliajn elektilojn kaj parametrojn por ilia formato: koloro, grandeco, pozicio kaj aliaj. Ĉiu retejo-dezajno devus koni kaj povi ĝuste eniri la deziritajn elektilojn. Ili estas dividitaj per specoj, kies ĉefaj ni konsideros sube.

Tipoj de elektiloj en CSS

Depende de tiu html-elemento la formato aplikiĝas al la elektilo, la CSS povas raporti al unu el la sekvaj grupoj:

• La elektilo de etikedoj;
• Klaso selector;
• Id-elektilo;
• Atributa elektilo.

Elektilo Tag

Ĝi ankaŭ estas nomita "tipo selector" aŭ "per elemento", ĝi estas la plej simpla kaj plej ofta. Kiel ĝia nomo en la CSS-dokumento estas la nomoj de tiuj elementoj de la html-dosiero, kiun ni priskribas. Ekzemple, se ni devas specifi alinean stilon, ni specifas la propraĵojn kaj iliajn valorojn por la p {fono: x; Koloro: y; Grandeco: z}. En ĉi tiu kazo, ĉiuj alineoj de la retpaĝo havos la saman formaton (fonkoloro, teksto grandeco, kaj tiel plu. D.).

Klaso elektilo

Kaj kio se vi bezonas difini vian propran stilon por aliaj por ĉiu alineo? Por tio, estas klaso-elektilo.

La dokumento de CSS en ĉi tiu kazo enhavos la jenan eniron: p.first {color: x; Tipara grandeco: y}. Tiel, ni starigas la proprietojn "koloro" kaj "grandeco" nur por la alineo de klaso unue.

En la html-dokumento en ĉi tiu kazo, vi eniras la klasan atributon kun la nomo de la unua stilo. Klasoj povas esti tiom multaj kiel la stiloj, kiujn vi volas apliki al elementoj de retpaĝaro.

Elektanto per id

Ofte estas necese difini la stilon eĉ pli precize, ekzemple, al unuopa elemento de la paĝo aŭ al ilia specimeno. En ĉi tiu situacio, la id-selector venas al la rekupero. En la html-dosiero, ni atribuas la nomon al la dezirata elemento, identigante ĝin inter la aliaj. Ekzemple, la elemento, kiun ni volas difini de la alia stilo, estos la titolo de la artikolo.

Tiam en la html-dokumento ni atribuas la identigilon h1 al la kaplinio, ekzemple articlename. Kaj en la CSS-dosiero, agordu la stilon aldonante kradon antaŭ la nomo de la identigilo: #articlename {koloro: blua; Teksto-aligno: centro}. Nun nia kaplinio havos la koloron blua kaj centra alineo.

Ĉiu el la supraj tipoj povas esti nomita "simpla CSS-elektilo". Ili difinas la formatadon por aparta parametro de html-dokumento: kolekto de similaj elementoj (ekzemple ĉiuj alineoj de artikolo), unu klaso (ekzemple nur la unua alineo) aŭ specifa elemento (ekzemple la titolo de artikolo).

Atributa elektilo

Krom la supre, estas CSS-atribuaj elektiloj - pli kompleksa maniero de apliki stilojn. Ĝi permesas al vi formatigi html-elementojn per la elektita atributo aŭ ĝia valoro. Estas pluraj varioj de ĉi tiu elektilo:

• Per la ĉeesto de atributo;
• Per ĝia preciza valoro;
• Per parta atributa valoro;
• Per ĝia specifa signifo.

Ni konsideru detale ĉiun ĉi tiujn variojn:

1. La unua kazo. Formado estas uzata se ekzistas specifa atributo en la html-kodo (ili povas esti p, div, kaplinio, ktp). Se ĝi mankas, tiam oni uzas universalan stilon por ĉiuj elementoj. Ekzemple, por la elementoj havas la titolon (ŝpruchelpilo).
2. La dua kazo. La stilo aplikas nur al tiuj html-elementoj, kiuj havas ĝustajn matĉojn de atributaj valoroj. Ekzemple, al tiuj enaj elementoj kies valoro de la tipo-atributo estas egala al submeti.
3. La tria kazo. Formado estas limigita al eroj kun specifa vorto en la listo de valoroj. Ekzemple, sideBar en la "klaso" atributo de div elementoj.
4. La kvara kazo. La stilo estas precizigita nur por tiuj elementoj de la html-dokumento, por kiu aparta atributo havas certan valoron kaj komencas kun ĝi. Ekzemple, aplikante la specifitan koloron al ĉiuj elementoj kies lingvo de atributoj estas angla (ĉi tio povas esti en, en-rus, en-au, ktp).

Tiel, uzante aparta CSS-elektilo, vi povas plej bone desegni kaj la tutan retpaĝon, kaj priskribu ĝiajn individuajn elementojn.