Movatterモバイル変換


[0]ホーム

URL:


Pereiti prie turinio
VikipedijaLaisvoji enciklopedija
Paieška

CSS

Straipsnis iš Vikipedijos, laisvosios enciklopedijos.
Kitos reikšmės –CSS (reikšmės).

CSS (angl.Cascading Style Sheets – pakopiniai stilių šablonai) –pakopinių stilių aprašo kalba, skirtaHTML kalba rašomų dokumentų stiliams aprašyti.[1] Nors įprastai CSS kalba aprašomas HTML dokumentų pateikimas, be to ją galima taikyti ir įvairiems kitomis kalbomis parašytiems dokumentams (pvz.,XML paremtiemsSVG irXUL).

Pagrindinė sintaksė

[redaguoti |redaguoti vikitekstą]

Stiliaus taisyklė apibrėžiama šia sintakse:

 identifikatorius {savybė: reikšmė;}

Identifikatorius

[redaguoti |redaguoti vikitekstą]

CSS identifikatorium gali būti bet kuris HTML elementas, taip pat identifikatoriumi gali būt apibrėžta klasė. Pavyzdžiui,

p {text-align: center;} aprašo stilių HTML pastraipos elementuip (<p>). Stilius gali būti sudaromas aprašant keletą savybių (atskirtų kabliataškiu):
 p {text-align:center; color:red;}

Internetinio puslapio pastraipų tekstas bus centruotas, raudonas.

  • Klasės (class) atributas

HTML elementui galima priskirti klasės atributą, o tai leidžia tam pačiam elementui turėti skirtingus stilius. Pavyzdžiui, norima, kad dvi pastraipos būtų skirtingai lygiuojamos:

p.desineje {text-align: right;}p.centruoti {text-align: center;}

HTML dokumente norimos pastraipos aprašomos taip:

<p>Ši pastraipa bus lygiuota dešinėje.</p>

ir

<p>Ši pastraipa bus centruota.</p>

Elementui galima priskirti keletą klasių vienu metu, tačiau persidengiantys stiliai bus perrašyti:

<p>Pastraipa su dviem klasėm.</p>

Labai patogu, kai klasės pavadinamos pagal tai, kokį stilių jos suteikia. Iš užrašop galima suprasti, kad pastraipa bus lygiuojama prie dešinės paraštės.

  • ID atributas

Galima aprašyti stilių pagal elemento identifikatorių:

#identifikatorius {text-align: right;}

Tada tik elementui su tuo identifikatorium bus taikomas aprašytas stilius:

<p>Ši pastraipa bus lygiuota dešinėje.</p>

CSS priskyrimas HTML puslapiui

[redaguoti |redaguoti vikitekstą]

Išoriniai CSS

[redaguoti |redaguoti vikitekstą]

CSS tekstas įrašomas atskirame faile, pvz.,stilius.css, o kelias iki failo nurodomas HTML dokumente <head> dalyje, naudojant <link> žymes:

<head><title>Susietas CSS</title><link rel="stylesheet" type="text/css" href="stilius.css"></head>

Šis variantas patogus, kai svetainę sudaro daug failų. Tokiu būdu galima pakartotinai panaudoti tą patį stilių skirtinguose tinklalapiuose nedubliuojant jo teksto, o stiliaus pataisymai iš karto paveikia visus tinklalapius, kuriuose jis yra naudojamas.

Vidiniai CSS

[redaguoti |redaguoti vikitekstą]

Toks stilius aprašomas antraštinėje HTML dokumento dalyje. Štai toks tinklalapio išeities tekstas nupieš Lietuvos Respublikos vėliavą.

<html><head>   <meta http-equiv="content-type" content="text/html; charset=UTF-8">   <title> Lietuvos vėliava, nupiešta CSS </title>   <style type="text/css">   body {     margin:0;         padding:0;   }   #veliava {     margin: 0 auto 0 auto;     height: 300px;     width: 450px;   }   #geltona {     background-color: rgb(253, 185, 19); /* arba background-color: #FDB913; */   }   #zalia {     background-color: rgb(0, 106, 68); /* arba background-color: #006A44; */   }   #raudona {     background-color: rgb(193, 39, 45); /* arba background-color: #C1272D; */   }   #geltona, #zalia, #raudona {     height: 100px;   }   </style></head><body><div>      <div>      </div>      <div>      </div>      <div>      </div>    </div></body></html>

Šaltiniai

[redaguoti |redaguoti vikitekstą]
  1. CSS kalbaV. Dagienė,G. Grigas, T. Jevsikova. Enciklopedinis kompiuterijos žodynas. 4-as leidimas. Vilnius: VU MII, 2014 //EKŽ, 2021, nuolat atnaujinamas.ISBN 978-9986-680-52-9.

Nuorodos

[redaguoti |redaguoti vikitekstą]


Nebaigta  Šis straipsnis apiekompiuterių tinklus yranebaigtas. Jūs galite prisidėti prie Vikipedijospapildydami šį straipsnį.
Vikižodynas
Rodomas puslapis "https://lt.wikipedia.org/w/index.php?title=CSS&oldid=7365006"
Kategorijos:
Paslėpta kategorija:

[8]ページ先頭

©2009-2026 Movatter.jp