Definícia dizajnu vlastnosti CSS

Čo sú vlastnosti CSS a ako ich používať?

ObsahRozbaliť

• Časti pravidla CSS
• Základy vlastností CSS
• Niektoré vlastnosti CSS
• Vlastnosti vyžadujú hodnoty

Vizuálny štýl a rozloženie webovej stránky sú dané CSS alebo kaskádové štýly . Ide o dokumenty, ktoré formujú označenie HTML webovej stránky a poskytujú webovým prehliadačom pokyny, ako zobraziť stránky, ktoré sú výsledkom tohto označenia. CSS zvláda rozloženie stránky, ako aj farbu, obrázky na pozadí, typografiu a oveľa viac.

Ak sa pozriete na súbor CSS, uvidíte, že ako každý značkovací alebo kódovací jazyk, aj tieto súbory majú špecifickú syntax. Každá šablóna štýlov pozostáva z niekoľkých pravidiel CSS. Tieto pravidlá, keď sa zoberú v plnom rozsahu, určujú štýl stránky.

Časti pravidla CSS

Pravidlo CSS sa skladá z dvoch odlišných častí – selektora a deklarácie. Selektor určuje, čo je na stránke štylizované, a deklarácia je spôsob, akým by to malo byť štylizované. Napríklad:

|_+_|

Toto je pravidlo CSS. The selektor časť je p , čo je selektor prvkov pre „odseky“. Vyberie teda VŠETKY odseky na lokalite a poskytne im tento štýl (pokiaľ neexistujú odseky, na ktoré sa inde vo vašom dokumente CSS zameriavajú konkrétnejšie štýly).

Časť pravidla, ktorá hovorí: farba: #000; “ je to, čo je známe ako vyhlásenie. Toto vyhlásenie sa skladá z dvoch častí – z nehnuteľnosť a hodnotu .

The nehnuteľnosť je farba časť tohto vyhlásenia. Určuje, ktorý aspekt voliča sa bude vizuálne meniť.

The hodnotu je to, na čo sa zvolená vlastnosť CSS zmení. V našom príklade používame hexadecimálnu hodnotu #000 , čo je skratka CSS pre „čierna“.

Takže pomocou tohto pravidla CSS by naša stránka mala odseky zobrazené v čiernej farbe písma.

Základy vlastností CSS

Keď píšete vlastnosti CSS, nemôžete ich jednoducho vytvoriť tak, ako uznáte za vhodné. Napríklad „color“ je skutočná vlastnosť CSS, takže ju môžete použiť. Táto vlastnosť určuje farbu textu prvku. Ak by ste sa pokúsili použiť 'text-color' alebo 'font-color' ako vlastnosti CSS, zlyhali by, pretože nie sú skutočnými časťami jazyka CSS.

Ďalším príkladom je vlastnosť „obrázok na pozadí“. Táto vlastnosť nastavuje obrázok, ktorý možno použiť ako pozadie, ako je tento:

|_+_|

Ak by ste sa pokúsili použiť „obrázok na pozadí“ alebo „grafické pozadie“ ako vlastnosť, zlyhali by, pretože to opäť nie sú skutočné vlastnosti CSS.

Niektoré vlastnosti CSS

Existuje množstvo vlastností CSS, ktoré môžete použiť na úpravu štýlu lokality. Niektoré príklady:

• orámovanie (vrátane štýlu orámovania, farby orámovania a šírky orámovania)
• Výplň (vrátane čalúnenia hore, čalúnenia vpravo, čalúnenia dole a čalúnenia vľavo)
• Okraje (vrátane okraja hore, okraja doprava, okraja dole a vľavo)
• Rodina písiem
• Veľkosť písma
• Farba pozadia
• šírka
• Výška

Tieto vlastnosti CSS sú skvelé na použitie ako príklady, pretože sú všetky veľmi jednoduché a aj keď CSS nepoznáte, pravdepodobne môžete uhádnuť, čo robia na základe ich názvov.

Existujú aj ďalšie vlastnosti CSS, s ktorými sa stretnete, a ktoré nemusia byť také zrejmé, ako fungujú na základe ich názvov:

• Plavák
• jasný
• Pretečenie
• Text-transformácia
• Z-index

Keď sa dostanete hlbšie do webdizajnu, stretnete sa (a využijete) všetky tieto vlastnosti a ešte viac!

Vlastnosti vyžadujú hodnoty

Zakaždým, keď použijete vlastnosť, musíte jej dať hodnotu – a určité vlastnosti môžu akceptovať iba určité hodnoty.

V našom prvom príklade vlastnosti „color“ musíme použiť hodnotu farby. Môže to byť hexadecimálna hodnota, hodnota RGBA alebo dokonca farebné kľúčové slová . Akákoľvek z týchto hodnôt by fungovala, ak by ste však s touto vlastnosťou použili slovo „pochmúrny“, neurobilo by to nič, pretože akokoľvek je toto slovo popisné, v CSS nie je uznávanou hodnotou.

Náš druhý príklad „obrázku na pozadí“ vyžaduje, aby ste použili cestu obrázka získať skutočný obrázok zo súborov vášho webu. Toto je požadovaná hodnota/syntax.

Všetky vlastnosti CSS majú hodnoty, ktoré očakávajú. Napríklad:

• Border-color očakáva hodnotu farby.
• Border-size očakáva hodnotu veľkosti, napríklad pixely alebo percentá.
• Štýly orámovania očakávajú jeden z vyhradených štýlov používaných pre túto vlastnosť, napríklad „pevný“.

Ak si prejdete zoznam vlastností CSS, zistíte, že každá z nich má špecifické hodnoty, ktoré použije na vytvorenie štýlov, pre ktoré je určená.