Jak najít název CSS u objektu na webu?

Zápisy barev: Barvy v HTML

„jak zjistím název něčeho“

Tomu nerozumím. Chceš se v html dopátrat něčeho, cos našla v css? To asi nejde nijak chytřeji, než ručně. Jestli naopak koukáš do html a chceš najít v css všechno, co má na daný prvek nějaký vliv, k tomu použij nástroje v prohlížeči. Jmenuje se to v různých prohlížečích různě, spouští se to většinou ctrl+shift +i.



edit: Přečetl jsem si tu otázku ještě jednou a došlo mi, že jde o druhý případ z těch, co jsem psal. V opeře ctrl+shift+i, klik na první řádek a vpravo vidím:

twentyfifteen.css:76

mc-main th {
background: rgba(0, 0, 0, 0.804);

zatržítkem ověřím, ano, je to ono.

Když se podíváš pomocí zkontrolovat prvek na ten kalendář, taksi všimneš, jak je konstruován:

Pak si najdeš vlastnost, kterou chceš změnit a kde je v CSS definovaná, může to být přímo na abbr, spanu, th, tr, thead, kdekoli. Prostě budeš klikat od toho <abbr title="Pondělí">P</abbr> postupně nahoru, dokud to nenajdeš.
Ta černá barva pozadí je třeba definovaná pravidlem:
V něm tedy změníš background na tvou požadovanou barvu. Přímo v prohlížeči si můžeš vyzkoušet, co ta změna udělá.
Pokud nenajdeš vhodnou existující definici, je potřeba si vymyslet vlastní pravidlo (selektor), to už je těžší, ale můžeš se řidit podle pravidel, která se týkají okolních elementů v tom kalendáříku.

Nesmíš o tom uvažovat jako o názvech, ale o pravidlech, kterým elementy vyhovují. Přečti si Vlastní styly (hlavně pak Složené deklarace). Pak pochopíš jak jednotlivé prvky na stránce zacílit.


Barva se v CSS zadává u mnoha vlastností: color (barva textu), background (případně backgound-color - barva pozadí), border (border-color - barva rámečku) a dalších.
Stejně jako u ostatních CSS vlastností vypadá zápis:
Název si vybereš z výše vyjmenovaných. Hodnota je v jejich případě barva, která se zapisuje několika způsby:
* slovem - red, green
* s křížkem - #ff0000, #00ff00 (je to po dvojicích znaků přítomnost červené, zelené a modré, každá z těch tří složek může být od 00 do ff, kde ff je nejvíc; přečti si něco o šestnáctkové soustavě, pak pochopíš proč jsou v barvách písmenka a až f)
* s křížkem zkráceně #xyz je zkratka za #xxyyzz, tedy naše oblíbené barvy lze zapsat jako: #f00, #0f0
* funkce rgb - rgb(255, 0, 0), rgb(0, 255, 0), zase tři složky tentokrát v rozsahu 0 - 255 (klasická celá čísla)
* funkce rgba a další funkce pracují s průhledností a jinými barevnými modely než RGB

Oprava rgb funkce, původně bylo: * funkce rgb - rgb(1.0, 0.0, 0.0), rgb(0.0, 1.0, 0.0), zase tři složky tentokrát v rozsahu 0.0 - 1.0 (klasická desetinná čísla)

juriad:
RGB ide od 0 do 255. Priehľadnosť vo formáte RGBA sa udáva v číslach od 0 do 1.

Vendy:
Môžeš si o tom prečítať v článku Spriehľadnenie prvku pomocou CSS.

Tomáš123:
Jo, máš pravdu. S čím jsem si tom mohl splést?
V tom článku máš však chybu. rgb(45, 234, 19%) není platný zápis, procenta a celá čísla nelze míchat dohromady.

juriad:
Buď som pri úprave zjednotil dva príklady do jedného, alebo som sa si vymyslel novú funkcionalitu (nepamätám si, že by tam niekedy bolo tých príkladov viac). Ďakujem, opravím to a pridám aj upozornenie na kombinovaný zápis.

Reaguji na Tomáše123:
„Formát zápisu priehľadnej farby RGBA respektíve HSLA je teda o niečo použiteľnejší, avšak za cenu o niečo nižšej podpory naprieč najpoužívanejšími prehliadčmi (RGBA je podporované až od deviatej verzie IE, opacity od šiestej).“
Ze všeho uvedeného je jen rgb podporované starými verzemi. Zápisy rgba, hsl a hsla a vlastnost opacity podporuje Explorer až od verze 9. Od verze 4 ovšem podporoval filter: alpha(opacity=50) a od verze 5.5 šlo dělat poloprůhledná pozadí filtrem gradient, kde se udávaly barvy hexadecimálně osmi znaky.

Chamurappi:
Teraz neviem čo s tým. Opraviť to parafrázovaním tvojho príspevku a hrať sa akože nič ako pri juriadovom postrehu? Ponechať súčasný obsah (preškrnúť nesprávne informácie) a vhodne zvýrazniť citáciu tvojho príspevku? Stiahnuť článok z obehu? Zničiť web? :-)

Priznám sa, hoci som článok písal dávnejšie, ani teraz som si nemyslel, že sú tam nejaké chyby. Chcel som publikovať kvalitný obsah, ale zatiaľ je článok o vysúvacom menu nekompletný, na pätu vždy dole existujú aspoň dve lepšie riešenia a pri priehľadnosti mám chyby. Asi naozaj stiahnem web z obehu a vrátim ho až na novej doméne. Potom si dám lepší pozor na správne informácie.

Ďakujem, že som sa to dozvedel od teba.

Možno ten web až tak skoro nepoložím. Nedarí sa mi presmerovávať.
Dočasne som preškrtol svoje tvrdenie a uviedol tvoju opravu s odkazom na toto vlákno.

Vendy:
Súbor, ktorý potrebuješ zmeniť je na tejto adrese:
http://zivot-s-rs.cz/zivot-s-sm/wp-content/plugins/my-calendar/styles/twentyfifteen.css
Keď ho otvoríš, na 76 riadku je selektor, ku ktorému sa viažu nejaké deklarácie. Celé to vyzerá takto:
Toto je cesta vyhľadania požadovaného súboru a tvrdej editácie. S administráciou systému, ktorý používaš to nemá nič spoločné.

Vendy:
„nebo musím nějak měnit i ten kód rgba?“

Musíš zmeniť iba rgba. Vlastnosť color má na starosti farbu písma, ty potrebuješ hýbať s pozadím takto:


Prvé tri čísla zodpovedajú #ff4500.

Vendy:
Když vidíš ve vývojářských nástrojích to pravidlo .mc-main th, tak vpravo od něj máš napsaný název souboru a číslo řádku. Nejsem si jistý, že změnu chceš dělat přes FTP (neznám však WordPress, ani jak se s ním pracuje).

V připadě toho "Října" je to pravidlo .ftop .widget caption ve style.css na řádku 473. Můžeš si všimnout, že je tam ještě pravidlo .mc-main caption, které také udává barvu pozadí, ale to první zmíněné má přednost.

Tu průhlednost řešit nemusíš, prostě si nastav barvu jakýmkoli způsobem, který ti vyhovuje. Všimneš si ale, že nadpis je podrtžený dvakrát, za to může pravidlo abbr, acronym, dfn ve style.css na řádku 82.

Prostě si tím chvíli klikej a měň si vlastnosti a koukej, co to dělá.

Vendy:
V súvislosti s vlastnosťou color som upozornil iba na nesprávnosť zápisu. Akoby tam ani nebol. Ty potrebuješ meniť riadok s farbou pozadia (background-color). Ako bolo už vyššie spomenuté, na farbu pozadia môžeš využiť akýkoľvek valídny formát zápisu: Správne bude aj: background-color: #FF4500; (Aj #ff4500, aj rgb(255, 69, 0), prípadne aj rgba(255, 69, 0, 0)).

Vendy:
Tučnosť zabezpečuje vlastnosť font-weight s hodnotou bold. Vieš kam tú deklaráiu pridať? Nepopísala si presne, kde to chceš zmeniť, takže neviem poradiť konkrétnejšie...

Vendy:
Ten rozdiel nie je až tak výrazný. Na stránke nevidím žiadne pokusy niečo nastaviť.
Pridaj do CSS súboru tento riadok:
Pokojne aj na úplný koniec.

EDIT: Pardón, nevšimol som si, že víkendy majú inú triedu. Mám rešpekt pred tvrdým upravovaním súborov redakčných systémov. Uviedol som konkrétnejší selektor ako bolo potrebné, aby sa neobjavil niekde nejaký iný zápis, ktorý by to prebil, alebo, aby nebol zápis natoľko všeobecný, že prebije vlastnosti nejakému inému prvku.

Vendy, Tomáš123:
Většina fontů obsahuje jen pár tučných variant (často jen jednu). V takovém případě se prostě zobrazí tučný text stejně bez ohledu na číslo, které uvedeš.
Pak ti už jen zbývá zvětšit písmo (font-size: 120%; například).

Vendy:
„A v tomto případě mi nejde ani najít, z kterého řádku v css pochází užité písmo k této konkrétní části.“

To je jedno, prostě tam tu vlastnost můžeš přidat (do .mc-main th). Říká, že se písmo má zobrazovat velikostí o 20% větší než dosud. Je to stejné jako bys uvedla 1.2em.

Velikost písma je definovaná ve style.css, 17. řádek pro skoro všechny elementy (font-size: 100%;). Tam to rozhodně neměň (ale můžeš to zkusit a zkus vysvětlit, proč to dopadlo tak špatně :-))

Tomáš123:
Ten selektor tr.mc-row th.day-heading je chybně, týká se jen pracovních dnů.

Vendy:
Prostě tomu .mc-main th přidej font-weight: bold (tučnějšího stejně nedosáhneš) a budeš-li chtít, zvětš ten font, jak jsem zmínil.