| Autor | Zpráva | ||
|---|---|---|---|
| Milan Sobotka Profil |
#1 · Zasláno: 1. 7. 2014, 13:19:10
Dobrý den.
Potřeboval bych poradit s @import CSS. Vím že se to tu už řešilo i jsem se koukal na https://developer.mozilla.org/en-US/docs/Web/CSS/@import ale moc mi to nejde. Nikdy jsem o tom nic neslysel. Jde mi o to, ze mám soubor style1.css a v nem jsou vsechny styly stranky ale jelikoz chci mit ten web jednoduse ovladatelny, tak chi mit vsechny vedouci barvy v textaku. Kazda barva tedy bude jen v textaku sama a bude to dobre menitelny takze kdyz ji zmenim v tom jednom souboru, tak to bude v style1.css vsude menit. neco jako php include. Akorat jsem nepochopil kterou z techto moznosti zvolit... 1 @import url("fineprint.css") print; 2 @import url("bluish.css") projection, tv; 3 @import 'custom.css'; 4 @import url("chrome://communicator/skin/"); 5 @import "common.css" screen, projection; 6 @import url('landscape.css') screen and (orientation:landscape); |
||
| Kubo2 Profil |
#2 · Zasláno: 1. 7. 2014, 13:27:05
Milan Sobotka:
„Akorat jsem nepochopil kterou z techto moznosti zvolit...“ Úplne stačí @import 'adresa-css-suboru'; či @import url(adresa-css-suboru); (to druhé je normálny zápis URL adresy v CSS ako ho poznáš napríklad pri zapisovaní background-image).
Tie ostatné nejakým spôsobom ovplyvňujú prostredie, v ktorom sa daný štýl bude aplikovať (napríklad pri použití print sa budú štýly aplikovať len na tlačený dokument, tj. na papieri).
|
||
| Milan Sobotka Profil |
#3 · Zasláno: 1. 7. 2014, 13:30:28 · Upravil/a: Milan Sobotka
No presne tak to mam:
body {
font-family:arial;
font-size:100px;
@import '/styles/style2.css';
}a tady je /styles/style2.css: color:red; no ale cerveny pismo to neudela... no a tady je home.php : <!DOCTYPE>
<HTML>
<HEAD>
<META name="autor" content="">
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="/styles/style1.css">
<TITLE></TITLE>
<style>
</style>
</HEAD>
<BODY>
</BODY>
</HTML> |
||
| juriad Profil |
To proto, že @import nepatří dovnitř pravidla, ale ven.
Tedy: @import '/styles/style2.css';
body {
font-family:arial;
font-size:100px;
}a v style2.css budeš mít: body {
color: #aabbcc;
}A navíc: The @import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, it cannot be used inside conditional group at-rules. To musí být na začátku, před vším ostatním v CSS souboru. Takže to neslouží k tomu, co od toho očekaváš. |
||
| Milan Sobotka Profil |
#5 · Zasláno: 1. 7. 2014, 13:35:42 · Upravil/a: Milan Sobotka
No takže když budu mit mnoho pozadi a barev tak to vlastne musim myt v mnoho stylech protze se mi tohle vztahuje na celej soubor css. a neexistuje neco jinyho ze by to bylo jak jsem psal dovnitr pravidla?
Proste neco jako include treba jen na barvu v css? |
||
| Plaváček Profil |
#6 · Zasláno: 1. 7. 2014, 13:40:37
Milan Sobotka:
Nejspíš hledáš něco jako CSS preprocesor, ne? Viz http://www.zdrojak.cz/clanky/css-preprocesory-mene-psani-vyssi-efektivita/ |
||
| juriad Profil |
V CSS zatím ne, je návrh na CSS proměnné, ale to ještě nikde nefunguje.
Ale existují CSS preprocesory, které to umožňují. Nepíšeš vlastně CSS, ale něco jako CSS, které se do CSS zkompiluje. Jedním z nich je například less. |
||
| Milan Sobotka Profil |
Ehm. moc nechapu.
|
||
| Plaváček Profil |
#9 · Zasláno: 1. 7. 2014, 13:47:42
Milan Sobotka:
„Ehm. moc nechapu.“ No, ona je to už "vyšší dívčí". Nejdřív musíš znát důkladně CSS samotné. |
||
| Milan Sobotka Profil |
No tak jako css znam krome transitions atak. s timhle jsem se proste jeste nepotkal.
|
||
| juriad Profil |
Vytvoříš si soubor (třeba pro ten less): styly.less
do něj napíšeš: @pekna-modra: #5B83AD;
@skoro-bila: #010203;
body {
font-family:arial;
font-size:100px;
color: @pekna-modra;
}
.lista {
background-color: @pekna-modra;
color: @skoro-bila;
}Pak v příkazové řádce spustíš příkaz less, který ti vytvoří soubor styly.css, jehož obsahem bude: body {
font-family:arial;
font-size:100px;
color: #5B83AD;
}
.lista {
background-color: #5B83AD;
color: #010203;
}Výhoda je zřejmá - kompaktnější zápis, nevýhodou je ale naopak nemožnost přímé úpravy css, musíš upravit zdroják (třeba ten less) a pak zkompilovat. Úprava v css souboru by se totiž příště přepsala. Těch preprocesorů existují mraky, každý umí něco trochu jiného a každý má trochu jiný zápis. Najdi si nějaká porovnání a vyber si takový, který tě osloví. |
||
| Milan Sobotka Profil |
Jdu to zkusit.
|
||
| juriad Profil |
#13 · Zasláno: 1. 7. 2014, 14:02:24
Milan Sobotka:
Využití preprocesorů vyžaduje, abys vyvíjel u sebe a všechny soubory na web kopíroval přes FTP. A ideálně, abys to měl nějak zautomatizované. V praxi je opravdu nevhodné vyvíjet na ostrém serveru - když něco pokazíš, může trvat minuty či hodiny než to spravíš a během té doby můžeš propásnout pár zákazníků a přijdeš o tisíce. Pokud někdo tvorbu webu myslí vážné, vytváří web u sebe na počítači a až je přesvědčený, že funguje, nakopíruje jej na server. |
||
| Milan Sobotka Profil |
#14 · Zasláno: 1. 7. 2014, 14:04:27
Akorat jak to zadat do toho prikazoveho radku? s nim jsem nikdy nedelsal. kdyz dam prochazet a najdu styly.less tak mi je to odevre..
|
||
| juriad Profil |
Nainstaluj si třeba http://winless.org/ v něm zadáš, které soubory má zpracovat a jakmile se změní, rovnou z nich vygeneruje css.
To ohledně příkazové řádky (zapomeň na ní) se týká situace, kdy bys chtěl less používat v rámci Node.js, nebo si vývoj nějak naskriptovat. Tobě stačí nejzákladnější způsob použití. |
||
| Milan Sobotka Profil |
#16 · Zasláno: 1. 7. 2014, 14:12:30 · Upravil/a: Milan Sobotka
Jj. Jdu instalovat. :D
Akorat proc mi to pri vlozeni souboru rika ze nazev styly.less neni spravny... a vzdy kdyz tam nahraju teda celou slozku tak ten program prestane fungovat... No tak ted uz se to povedlo a vyhodilo to toto : body{font-family:arial;font-size:100px;color:#5b83ad} a co s tim??????? |
||
| juriad Profil |
#17 · Zasláno: 1. 7. 2014, 14:27:42
To je tvé výsledné CSS. To přilinkuješ ke své stránce a nahraješ na web. Less se zároveň snaží šetřit místem proto zbytečné mezery, tabulátory a odřádkování vynechává. Ale ty bys nikdy neměl mít potrebu se přímo hrabat v tom CSS souboru.
|
||
| Milan Sobotka Profil |
#18 · Zasláno: 1. 7. 2014, 14:33:41
hm. tak dekuji za pomoc. :D a jenom neexistuje jeste nejaka jina moznost? tohle je dobry ale kdyby se to dalo delat rovnou v kodu, bylo by to lepsi.
|
||
| juriad Profil |
#19 · Zasláno: 1. 7. 2014, 14:43:26
Současný návrh proměnný je zhruba v tomto stavu: http://www.zdrojak.cz/clanky/nebylo-aneb-promenne-css-prichazeji/. Takže za takových pět, deset let to bude použitelné v potom aktuálních prohlížečích.
|
||
| Milan Sobotka Profil |
#20 · Zasláno: 1. 7. 2014, 15:00:37
Skoda ze jeste neexistujou... :(
|
||
| Radek9 Profil |
#21 · Zasláno: 1. 7. 2014, 15:06:23
Milan Sobotka:
Jestli to nechceš kompilovat přes command-linu, sežeň si vhodný editor. Např. Brackets s pluginem Fi Compiler umí automaticky po uložení kompilovat LESS soubory do CSS souboru. |
||
| Milan Sobotka Profil |
#22 · Zasláno: 1. 7. 2014, 15:42:54
JJ. Zkusim. Vsem vam moc dekuju za rady.
|
||
|
Časová prodleva: 10 let
|
|||
0