From 791b06d94a1513f359cd82f0e9d91eb06aace758 Mon Sep 17 00:00:00 2001 From: Gabriel Gomes Date: Fri, 16 Oct 2015 15:08:32 -0300 Subject: Added css.pt.html.markdown --- pt-br/css.pt.html.markdown | 257 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 257 insertions(+) create mode 100644 pt-br/css.pt.html.markdown diff --git a/pt-br/css.pt.html.markdown b/pt-br/css.pt.html.markdown new file mode 100644 index 00000000..8ffd8d62 --- /dev/null +++ b/pt-br/css.pt.html.markdown @@ -0,0 +1,257 @@ +--- +language: css +filename: learncss.css +contributors: + - ["Mohammad Valipour", "https://github.com/mvalipour"] + - ["Marco Scannadinari", "https://github.com/marcoms"] + - ["Geoffrey Liu", "https://github.com/g-liu"] + - ["Connor Shea", "https://github.com/connorshea"] + - ["Deepanshu Utkarsh", "https://github.com/duci9y"] +translators: + - ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"] +lang: pt-br +--- + +Nos primeiros dias da web não havia elementos visuais, apenas texto puro. Mas com maior desenvolvimento de navegadores da web, páginas web totalmente visuais também se tornou comum. + +CSS ajuda a manter a separação entre o conteúdo (HTML) e o look-and-feel de uma página web. + +CSS permite atingir diferentes elementos em uma página HTML e atribuir diferentes propriedades visuais para eles. + +Este guia foi escrito para CSS2, embora CSS3 está rapidamente se tornando popular. + +**NOTA:** Porque CSS produz resultados visuais, a fim de aprender, você precisa tentar de tudo em um playground CSS como [dabblet](http://dabblet.com/). +O foco principal deste artigo é sobre a sintaxe e algumas dicas gerais. + +```css +/* Comentários aparecem dentro do slash-asterisk, tal como esta linha! + não há "comentários de uma linha"; este é o único estilo de comentário * / + +/* #################### + ## SELETORES + #################### */ + +/* O seletor é usado para direcionar um elemento em uma página. + seletor { propriedade: valor; / * Mais propriedades ... * / } + +/* +Abaixo um elemento de exemplo: + +
+*/ + +/* Você pode direciona-lo usando uma das suas classes CSS */ +.class1 { } + +/* ou ambas as classes! */ +.class1.class2 { } + +/* ou o seu nome */ +div { } + +/* ou o seu id */ +#anID { } + +/* ou utilizando o fator de que tem um atributo!*/ +[attr] { font-size:smaller; } + +/* ou que o atributo tem um valor específico */ +[attr='value'] { font-size:smaller; } + +/* começa com um valor (CSS 3) */ +[attr^='val'] { font-size:smaller; } + +/* ou terminando com um valor (CSS 3) */ +[attr$='ue'] { font-size:smaller; } + + +/* Ou contém um valor em uma lista separada por espaços */ +[otherAttr ~ = 'foo'] {} +[otherAttr ~ = 'bar'] {} + +/* Ou contém um valor em uma lista separada por hífen, ou seja, "-" (U + 002D) */ +[otherAttr | = 'en'] {font-size: smaller; } + + +/* Você pode concatenar diferentes seletores para criar um seletor mais estreito. Não +   colocar espaços entre eles. */ +classe div.some [attr $ = 'ue'] {} + +/* Você pode selecionar um elemento que é filho de outro elemento */ +div.some-parent> .class-name {} + +/* Ou um descendente de um outro elemento. As crianças são os descendentes diretos de +   seu elemento pai, apenas um nível abaixo da árvore. Pode ser qualquer descendentes +   nivelar por baixo da árvore. */ +div.some-parent class-name {} + +/* Atenção: o mesmo seletor sem espaço tem um outro significado. +   Você consegue adivinhar o que? */ +div.some-parent.class-name {} + +/* Você também pode selecionar um elemento com base em seu irmão adjacente */ +.i am just-antes + .Este elemento {} + +/* Ou qualquer irmão que o precede */ +.i am-qualquer-elemento antes ~ .Este elemento {} + +/* Existem alguns selectores chamado pseudo classes que podem ser usados para selecionar um +   elemento quando ele está em um determinado estado */ + +/* Por exemplo, quando o cursor passa sobre um elemento */ +seletor:hover {} + +/* Ou um link foi visitado */ +seletor:visited {} + +/* Ou não tenha sido visitado */ +seletor:link {} + +/* Ou um elemento em foco */ +seletor:focus {} + +/* Qualquer elemento que é o primeiro filho de seu pai */ +seletor:first-child {} + +/* Qualquer elemento que é o último filho de seu pai */ +seletor:last-child {} + +/* Assim como pseudo classes, pseudo elementos permitem que você estilo certas partes de um documento */ + +/* Corresponde a um primeiro filho virtual do elemento selecionado */ +seletor::before {} + +/* Corresponde a um último filho virtual do elemento selecionado */ +seletor::after {} + +/* Nos locais apropriados, um asterisco pode ser utilizado como um curinga para selecionar todos +   elemento */ +* {} /* */ Todos os elementos +.parent * {} /* */ todos os descendentes +.parent> * {} /* */ todas as crianças + +/* #################### +   ## PROPRIEDADES +   #################### */ + +seletor { + +    /* Unidades de comprimento pode ser absoluta ou relativa. */ + +    /* Unidades relativas */ +    width: 50%; /* Percentagem de largura elemento pai */ +    font-size: 2em; /* Múltiplos de font-size original de elemento */ +    font-size: 2rem; /* Ou do elemento raiz font-size */ +    font-size: 2vw; /* Múltiplos de 1% da largura da janela de exibição (CSS 3) */ +    font-size: 2vh; /* Ou a sua altura */ +    font-size: 2vmin; /* Qualquer um de VH ou um VW é menor */ +    font-size: 2vmax; /* Ou superior */ + +    /* Unidades absolutas */ +    width: 200px; /* píxeis */ +    font-size: 20pt; /* Pontos */ +    width: 5cm; /* Centímetros */ +    min-width: 50mm; /* Milímetros */ +    max-width: 5 polegadas; /* Polegadas */ + +    /* Cores */ +    color: # F6E; /* Formato hexadecimal curto */ +    color: # FF66EE; /* Formato hexadecimal longo */ +    color: tomato; /* Uma cor nomeada */ +    color: rgb (255, 255, 255); /* Como valores rgb */ +    cor: RGB (10%, 20%, 50%); /* Como porcentagens rgb */ +    cor: rgba (255, 0, 0, 0,3); /* Como valores RGBA (CSS 3) NOTA: 0 . Isto é o +     método recomendado. Consulte http://stackoverflow.com/questions/8284365 --> + + + + + + +
+
+``` + +## Precedência ou Cascata + +Um elemento pode ser alvo de vários seletores e pode ter um conjunto de propriedades em que mais de uma vez. Nestes casos, uma das regras tem precedência sobre os outros. Geralmente, uma regra em um seletor mais específico têm precedência sobre um menos específico, e uma regra que ocorre mais tarde na folha de estilo substitui uma anterior. + +Este processo é chamado de cascata, portanto, as Fichas de nome de estilo em cascata. + +Dado o seguinte CSS: + +```css +/* UMA */ +p.class1[attr="value"] + +/* B */ +p.class1 {} + +/* C */ +p.class2 {} + +/* D */ +p { } + +/* E */ +p { property: value !important; } +``` + +e a seguinte marcação: + +```xml +

+``` + +A precedência de estilo é a seguinte. Lembre-se, a precedência é para cada **propriedade**, não para todo o bloco. + +* `E` tem a precedência mais alta por causa de uma palavra-chave`!important`. É recomendável que você evitar seu uso. +* `F` é a próxima, porque é um estilo interno. +* `A` é a próxima, porque é mais" específico "do que qualquer outra coisa. Tem 3 especificadores: O nome do elemento `p`, o seu `class1` classe, um atributo `attr='value'`. +* `C` está próximo, mesmo que ele tenha a mesma especificidade que `B`. Isso é porque ele aparece depois de `B`. +* `B` é o próximo. +* `D` é a última. + +## Compatibilidade + +A maior parte dos recursos do CSS 2 (e muitos em CSS 3) estão disponíveis em todos os navegadores e dispositivos. Mas é sempre boa prática para verificar antes de usar um novo recurso. + +## Recursos + +* Para executar uma verificação de compatibilidade rápida, [CanIUse](http://caniuse.com). +* CSS Playground [Dabblet](http://dabblet.com/). +* [Documentação CSS Mozilla Developer Rede](https://developer.mozilla.org/en-US/docs/Web/CSS) +* [Codrops 'Referência CSS](http://tympanus.net/codrops/css_reference/) + +## Leitura adicional + +* [Entendendo Estilo Precedência em CSS: Especificidade, Herança, eo Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [Selecionando elementos usando atributos](https://css-tricks.com/almanac/selectors/a/attribute/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - O empilhamento context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) +* [SASS](http://sass-lang.com/) e [menos](http://lesscss.org/) para CSS pré-processamento +* [CSS-Tricks](https://css-tricks.com) -- cgit v1.2.3 From 123f8ce1e00354cc966ed0a8e84a99f0a8a0995f Mon Sep 17 00:00:00 2001 From: Gabriel Gomes Date: Fri, 16 Oct 2015 15:16:40 -0300 Subject: Added css.pt.html.markdown --- pt-br/css.pt.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pt-br/css.pt.html.markdown b/pt-br/css.pt.html.markdown index 8ffd8d62..fdf65b80 100644 --- a/pt-br/css.pt.html.markdown +++ b/pt-br/css.pt.html.markdown @@ -1,6 +1,6 @@ --- language: css -filename: learncss.css +filename: learncss.css-pt contributors: - ["Mohammad Valipour", "https://github.com/mvalipour"] - ["Marco Scannadinari", "https://github.com/marcoms"] -- cgit v1.2.3 From 99daab78adb52d8878a2ed51aa49a6dd278dbea1 Mon Sep 17 00:00:00 2001 From: Gabriel Gomes Date: Fri, 16 Oct 2015 15:25:05 -0300 Subject: Added css-pt.html.markdown --- pt-br/css-pt.html.markdown | 257 +++++++++++++++++++++++++++++++++++++++++++++ pt-br/css.pt.html.markdown | 257 --------------------------------------------- 2 files changed, 257 insertions(+), 257 deletions(-) create mode 100644 pt-br/css-pt.html.markdown delete mode 100644 pt-br/css.pt.html.markdown diff --git a/pt-br/css-pt.html.markdown b/pt-br/css-pt.html.markdown new file mode 100644 index 00000000..fdf65b80 --- /dev/null +++ b/pt-br/css-pt.html.markdown @@ -0,0 +1,257 @@ +--- +language: css +filename: learncss.css-pt +contributors: + - ["Mohammad Valipour", "https://github.com/mvalipour"] + - ["Marco Scannadinari", "https://github.com/marcoms"] + - ["Geoffrey Liu", "https://github.com/g-liu"] + - ["Connor Shea", "https://github.com/connorshea"] + - ["Deepanshu Utkarsh", "https://github.com/duci9y"] +translators: + - ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"] +lang: pt-br +--- + +Nos primeiros dias da web não havia elementos visuais, apenas texto puro. Mas com maior desenvolvimento de navegadores da web, páginas web totalmente visuais também se tornou comum. + +CSS ajuda a manter a separação entre o conteúdo (HTML) e o look-and-feel de uma página web. + +CSS permite atingir diferentes elementos em uma página HTML e atribuir diferentes propriedades visuais para eles. + +Este guia foi escrito para CSS2, embora CSS3 está rapidamente se tornando popular. + +**NOTA:** Porque CSS produz resultados visuais, a fim de aprender, você precisa tentar de tudo em um playground CSS como [dabblet](http://dabblet.com/). +O foco principal deste artigo é sobre a sintaxe e algumas dicas gerais. + +```css +/* Comentários aparecem dentro do slash-asterisk, tal como esta linha! + não há "comentários de uma linha"; este é o único estilo de comentário * / + +/* #################### + ## SELETORES + #################### */ + +/* O seletor é usado para direcionar um elemento em uma página. + seletor { propriedade: valor; / * Mais propriedades ... * / } + +/* +Abaixo um elemento de exemplo: + +

+*/ + +/* Você pode direciona-lo usando uma das suas classes CSS */ +.class1 { } + +/* ou ambas as classes! */ +.class1.class2 { } + +/* ou o seu nome */ +div { } + +/* ou o seu id */ +#anID { } + +/* ou utilizando o fator de que tem um atributo!*/ +[attr] { font-size:smaller; } + +/* ou que o atributo tem um valor específico */ +[attr='value'] { font-size:smaller; } + +/* começa com um valor (CSS 3) */ +[attr^='val'] { font-size:smaller; } + +/* ou terminando com um valor (CSS 3) */ +[attr$='ue'] { font-size:smaller; } + + +/* Ou contém um valor em uma lista separada por espaços */ +[otherAttr ~ = 'foo'] {} +[otherAttr ~ = 'bar'] {} + +/* Ou contém um valor em uma lista separada por hífen, ou seja, "-" (U + 002D) */ +[otherAttr | = 'en'] {font-size: smaller; } + + +/* Você pode concatenar diferentes seletores para criar um seletor mais estreito. Não +   colocar espaços entre eles. */ +classe div.some [attr $ = 'ue'] {} + +/* Você pode selecionar um elemento que é filho de outro elemento */ +div.some-parent> .class-name {} + +/* Ou um descendente de um outro elemento. As crianças são os descendentes diretos de +   seu elemento pai, apenas um nível abaixo da árvore. Pode ser qualquer descendentes +   nivelar por baixo da árvore. */ +div.some-parent class-name {} + +/* Atenção: o mesmo seletor sem espaço tem um outro significado. +   Você consegue adivinhar o que? */ +div.some-parent.class-name {} + +/* Você também pode selecionar um elemento com base em seu irmão adjacente */ +.i am just-antes + .Este elemento {} + +/* Ou qualquer irmão que o precede */ +.i am-qualquer-elemento antes ~ .Este elemento {} + +/* Existem alguns selectores chamado pseudo classes que podem ser usados para selecionar um +   elemento quando ele está em um determinado estado */ + +/* Por exemplo, quando o cursor passa sobre um elemento */ +seletor:hover {} + +/* Ou um link foi visitado */ +seletor:visited {} + +/* Ou não tenha sido visitado */ +seletor:link {} + +/* Ou um elemento em foco */ +seletor:focus {} + +/* Qualquer elemento que é o primeiro filho de seu pai */ +seletor:first-child {} + +/* Qualquer elemento que é o último filho de seu pai */ +seletor:last-child {} + +/* Assim como pseudo classes, pseudo elementos permitem que você estilo certas partes de um documento */ + +/* Corresponde a um primeiro filho virtual do elemento selecionado */ +seletor::before {} + +/* Corresponde a um último filho virtual do elemento selecionado */ +seletor::after {} + +/* Nos locais apropriados, um asterisco pode ser utilizado como um curinga para selecionar todos +   elemento */ +* {} /* */ Todos os elementos +.parent * {} /* */ todos os descendentes +.parent> * {} /* */ todas as crianças + +/* #################### +   ## PROPRIEDADES +   #################### */ + +seletor { + +    /* Unidades de comprimento pode ser absoluta ou relativa. */ + +    /* Unidades relativas */ +    width: 50%; /* Percentagem de largura elemento pai */ +    font-size: 2em; /* Múltiplos de font-size original de elemento */ +    font-size: 2rem; /* Ou do elemento raiz font-size */ +    font-size: 2vw; /* Múltiplos de 1% da largura da janela de exibição (CSS 3) */ +    font-size: 2vh; /* Ou a sua altura */ +    font-size: 2vmin; /* Qualquer um de VH ou um VW é menor */ +    font-size: 2vmax; /* Ou superior */ + +    /* Unidades absolutas */ +    width: 200px; /* píxeis */ +    font-size: 20pt; /* Pontos */ +    width: 5cm; /* Centímetros */ +    min-width: 50mm; /* Milímetros */ +    max-width: 5 polegadas; /* Polegadas */ + +    /* Cores */ +    color: # F6E; /* Formato hexadecimal curto */ +    color: # FF66EE; /* Formato hexadecimal longo */ +    color: tomato; /* Uma cor nomeada */ +    color: rgb (255, 255, 255); /* Como valores rgb */ +    cor: RGB (10%, 20%, 50%); /* Como porcentagens rgb */ +    cor: rgba (255, 0, 0, 0,3); /* Como valores RGBA (CSS 3) NOTA: 0 . Isto é o +     método recomendado. Consulte http://stackoverflow.com/questions/8284365 --> + + + + + + +
+
+``` + +## Precedência ou Cascata + +Um elemento pode ser alvo de vários seletores e pode ter um conjunto de propriedades em que mais de uma vez. Nestes casos, uma das regras tem precedência sobre os outros. Geralmente, uma regra em um seletor mais específico têm precedência sobre um menos específico, e uma regra que ocorre mais tarde na folha de estilo substitui uma anterior. + +Este processo é chamado de cascata, portanto, as Fichas de nome de estilo em cascata. + +Dado o seguinte CSS: + +```css +/* UMA */ +p.class1[attr="value"] + +/* B */ +p.class1 {} + +/* C */ +p.class2 {} + +/* D */ +p { } + +/* E */ +p { property: value !important; } +``` + +e a seguinte marcação: + +```xml +

+``` + +A precedência de estilo é a seguinte. Lembre-se, a precedência é para cada **propriedade**, não para todo o bloco. + +* `E` tem a precedência mais alta por causa de uma palavra-chave`!important`. É recomendável que você evitar seu uso. +* `F` é a próxima, porque é um estilo interno. +* `A` é a próxima, porque é mais" específico "do que qualquer outra coisa. Tem 3 especificadores: O nome do elemento `p`, o seu `class1` classe, um atributo `attr='value'`. +* `C` está próximo, mesmo que ele tenha a mesma especificidade que `B`. Isso é porque ele aparece depois de `B`. +* `B` é o próximo. +* `D` é a última. + +## Compatibilidade + +A maior parte dos recursos do CSS 2 (e muitos em CSS 3) estão disponíveis em todos os navegadores e dispositivos. Mas é sempre boa prática para verificar antes de usar um novo recurso. + +## Recursos + +* Para executar uma verificação de compatibilidade rápida, [CanIUse](http://caniuse.com). +* CSS Playground [Dabblet](http://dabblet.com/). +* [Documentação CSS Mozilla Developer Rede](https://developer.mozilla.org/en-US/docs/Web/CSS) +* [Codrops 'Referência CSS](http://tympanus.net/codrops/css_reference/) + +## Leitura adicional + +* [Entendendo Estilo Precedência em CSS: Especificidade, Herança, eo Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [Selecionando elementos usando atributos](https://css-tricks.com/almanac/selectors/a/attribute/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - O empilhamento context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) +* [SASS](http://sass-lang.com/) e [menos](http://lesscss.org/) para CSS pré-processamento +* [CSS-Tricks](https://css-tricks.com) diff --git a/pt-br/css.pt.html.markdown b/pt-br/css.pt.html.markdown deleted file mode 100644 index fdf65b80..00000000 --- a/pt-br/css.pt.html.markdown +++ /dev/null @@ -1,257 +0,0 @@ ---- -language: css -filename: learncss.css-pt -contributors: - - ["Mohammad Valipour", "https://github.com/mvalipour"] - - ["Marco Scannadinari", "https://github.com/marcoms"] - - ["Geoffrey Liu", "https://github.com/g-liu"] - - ["Connor Shea", "https://github.com/connorshea"] - - ["Deepanshu Utkarsh", "https://github.com/duci9y"] -translators: - - ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"] -lang: pt-br ---- - -Nos primeiros dias da web não havia elementos visuais, apenas texto puro. Mas com maior desenvolvimento de navegadores da web, páginas web totalmente visuais também se tornou comum. - -CSS ajuda a manter a separação entre o conteúdo (HTML) e o look-and-feel de uma página web. - -CSS permite atingir diferentes elementos em uma página HTML e atribuir diferentes propriedades visuais para eles. - -Este guia foi escrito para CSS2, embora CSS3 está rapidamente se tornando popular. - -**NOTA:** Porque CSS produz resultados visuais, a fim de aprender, você precisa tentar de tudo em um playground CSS como [dabblet](http://dabblet.com/). -O foco principal deste artigo é sobre a sintaxe e algumas dicas gerais. - -```css -/* Comentários aparecem dentro do slash-asterisk, tal como esta linha! - não há "comentários de uma linha"; este é o único estilo de comentário * / - -/* #################### - ## SELETORES - #################### */ - -/* O seletor é usado para direcionar um elemento em uma página. - seletor { propriedade: valor; / * Mais propriedades ... * / } - -/* -Abaixo um elemento de exemplo: - -

-*/ - -/* Você pode direciona-lo usando uma das suas classes CSS */ -.class1 { } - -/* ou ambas as classes! */ -.class1.class2 { } - -/* ou o seu nome */ -div { } - -/* ou o seu id */ -#anID { } - -/* ou utilizando o fator de que tem um atributo!*/ -[attr] { font-size:smaller; } - -/* ou que o atributo tem um valor específico */ -[attr='value'] { font-size:smaller; } - -/* começa com um valor (CSS 3) */ -[attr^='val'] { font-size:smaller; } - -/* ou terminando com um valor (CSS 3) */ -[attr$='ue'] { font-size:smaller; } - - -/* Ou contém um valor em uma lista separada por espaços */ -[otherAttr ~ = 'foo'] {} -[otherAttr ~ = 'bar'] {} - -/* Ou contém um valor em uma lista separada por hífen, ou seja, "-" (U + 002D) */ -[otherAttr | = 'en'] {font-size: smaller; } - - -/* Você pode concatenar diferentes seletores para criar um seletor mais estreito. Não -   colocar espaços entre eles. */ -classe div.some [attr $ = 'ue'] {} - -/* Você pode selecionar um elemento que é filho de outro elemento */ -div.some-parent> .class-name {} - -/* Ou um descendente de um outro elemento. As crianças são os descendentes diretos de -   seu elemento pai, apenas um nível abaixo da árvore. Pode ser qualquer descendentes -   nivelar por baixo da árvore. */ -div.some-parent class-name {} - -/* Atenção: o mesmo seletor sem espaço tem um outro significado. -   Você consegue adivinhar o que? */ -div.some-parent.class-name {} - -/* Você também pode selecionar um elemento com base em seu irmão adjacente */ -.i am just-antes + .Este elemento {} - -/* Ou qualquer irmão que o precede */ -.i am-qualquer-elemento antes ~ .Este elemento {} - -/* Existem alguns selectores chamado pseudo classes que podem ser usados para selecionar um -   elemento quando ele está em um determinado estado */ - -/* Por exemplo, quando o cursor passa sobre um elemento */ -seletor:hover {} - -/* Ou um link foi visitado */ -seletor:visited {} - -/* Ou não tenha sido visitado */ -seletor:link {} - -/* Ou um elemento em foco */ -seletor:focus {} - -/* Qualquer elemento que é o primeiro filho de seu pai */ -seletor:first-child {} - -/* Qualquer elemento que é o último filho de seu pai */ -seletor:last-child {} - -/* Assim como pseudo classes, pseudo elementos permitem que você estilo certas partes de um documento */ - -/* Corresponde a um primeiro filho virtual do elemento selecionado */ -seletor::before {} - -/* Corresponde a um último filho virtual do elemento selecionado */ -seletor::after {} - -/* Nos locais apropriados, um asterisco pode ser utilizado como um curinga para selecionar todos -   elemento */ -* {} /* */ Todos os elementos -.parent * {} /* */ todos os descendentes -.parent> * {} /* */ todas as crianças - -/* #################### -   ## PROPRIEDADES -   #################### */ - -seletor { - -    /* Unidades de comprimento pode ser absoluta ou relativa. */ - -    /* Unidades relativas */ -    width: 50%; /* Percentagem de largura elemento pai */ -    font-size: 2em; /* Múltiplos de font-size original de elemento */ -    font-size: 2rem; /* Ou do elemento raiz font-size */ -    font-size: 2vw; /* Múltiplos de 1% da largura da janela de exibição (CSS 3) */ -    font-size: 2vh; /* Ou a sua altura */ -    font-size: 2vmin; /* Qualquer um de VH ou um VW é menor */ -    font-size: 2vmax; /* Ou superior */ - -    /* Unidades absolutas */ -    width: 200px; /* píxeis */ -    font-size: 20pt; /* Pontos */ -    width: 5cm; /* Centímetros */ -    min-width: 50mm; /* Milímetros */ -    max-width: 5 polegadas; /* Polegadas */ - -    /* Cores */ -    color: # F6E; /* Formato hexadecimal curto */ -    color: # FF66EE; /* Formato hexadecimal longo */ -    color: tomato; /* Uma cor nomeada */ -    color: rgb (255, 255, 255); /* Como valores rgb */ -    cor: RGB (10%, 20%, 50%); /* Como porcentagens rgb */ -    cor: rgba (255, 0, 0, 0,3); /* Como valores RGBA (CSS 3) NOTA: 0 . Isto é o -     método recomendado. Consulte http://stackoverflow.com/questions/8284365 --> - - - - - - -
-
-``` - -## Precedência ou Cascata - -Um elemento pode ser alvo de vários seletores e pode ter um conjunto de propriedades em que mais de uma vez. Nestes casos, uma das regras tem precedência sobre os outros. Geralmente, uma regra em um seletor mais específico têm precedência sobre um menos específico, e uma regra que ocorre mais tarde na folha de estilo substitui uma anterior. - -Este processo é chamado de cascata, portanto, as Fichas de nome de estilo em cascata. - -Dado o seguinte CSS: - -```css -/* UMA */ -p.class1[attr="value"] - -/* B */ -p.class1 {} - -/* C */ -p.class2 {} - -/* D */ -p { } - -/* E */ -p { property: value !important; } -``` - -e a seguinte marcação: - -```xml -

-``` - -A precedência de estilo é a seguinte. Lembre-se, a precedência é para cada **propriedade**, não para todo o bloco. - -* `E` tem a precedência mais alta por causa de uma palavra-chave`!important`. É recomendável que você evitar seu uso. -* `F` é a próxima, porque é um estilo interno. -* `A` é a próxima, porque é mais" específico "do que qualquer outra coisa. Tem 3 especificadores: O nome do elemento `p`, o seu `class1` classe, um atributo `attr='value'`. -* `C` está próximo, mesmo que ele tenha a mesma especificidade que `B`. Isso é porque ele aparece depois de `B`. -* `B` é o próximo. -* `D` é a última. - -## Compatibilidade - -A maior parte dos recursos do CSS 2 (e muitos em CSS 3) estão disponíveis em todos os navegadores e dispositivos. Mas é sempre boa prática para verificar antes de usar um novo recurso. - -## Recursos - -* Para executar uma verificação de compatibilidade rápida, [CanIUse](http://caniuse.com). -* CSS Playground [Dabblet](http://dabblet.com/). -* [Documentação CSS Mozilla Developer Rede](https://developer.mozilla.org/en-US/docs/Web/CSS) -* [Codrops 'Referência CSS](http://tympanus.net/codrops/css_reference/) - -## Leitura adicional - -* [Entendendo Estilo Precedência em CSS: Especificidade, Herança, eo Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) -* [Selecionando elementos usando atributos](https://css-tricks.com/almanac/selectors/a/attribute/) -* [QuirksMode CSS](http://www.quirksmode.org/css/) -* [Z-Index - O empilhamento context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) -* [SASS](http://sass-lang.com/) e [menos](http://lesscss.org/) para CSS pré-processamento -* [CSS-Tricks](https://css-tricks.com) -- cgit v1.2.3 From aa48d900c7c91249898f92d8ffa63716b366248a Mon Sep 17 00:00:00 2001 From: Dreanor Date: Fri, 16 Oct 2015 20:32:56 +0200 Subject: fixed broken web matrix link --- de-de/csharp-de.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/de-de/csharp-de.html.markdown b/de-de/csharp-de.html.markdown index 8ad7d71f..78bb0a6b 100644 --- a/de-de/csharp-de.html.markdown +++ b/de-de/csharp-de.html.markdown @@ -883,7 +883,7 @@ zur nächsten Zeile, ""Wahnsinn!"", die Massen waren kaum zu bändigen"; * [LINQ](http://shop.oreilly.com/product/9780596519254.do) * [MSDN Library](http://msdn.microsoft.com/en-us/library/618ayhy6.aspx) * [ASP.NET MVC Tutorials](http://www.asp.net/mvc/tutorials) - * [ASP.NET Web Matrix Tutorials](http://www.asp.net/web-pages/tutorials) + * [ASP.NET Web Matrix Tutorials](http://www.asp.net/web-pages/overview/exploring-webmatrix) * [ASP.NET Web Forms Tutorials](http://www.asp.net/web-forms/tutorials) * [Windows Forms Programming in C#](http://www.amazon.com/Windows-Forms-Programming-Chris-Sells/dp/0321116208) -- cgit v1.2.3 From 6305ec5aecf256a69d490b0e7571c51edc0b3116 Mon Sep 17 00:00:00 2001 From: Gabriel Gomes Date: Fri, 16 Oct 2015 15:36:05 -0300 Subject: Change filename for learncss-pt.css --- pt-br/css-pt.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pt-br/css-pt.html.markdown b/pt-br/css-pt.html.markdown index fdf65b80..ed6f6c4c 100644 --- a/pt-br/css-pt.html.markdown +++ b/pt-br/css-pt.html.markdown @@ -1,6 +1,6 @@ --- language: css -filename: learncss.css-pt +filename: learncss-pt.css contributors: - ["Mohammad Valipour", "https://github.com/mvalipour"] - ["Marco Scannadinari", "https://github.com/marcoms"] -- cgit v1.2.3 From 80bb3a0642c88f70c695c93ccb72c33f9667b4fb Mon Sep 17 00:00:00 2001 From: bharathkkb Date: Fri, 16 Oct 2015 11:41:52 -0700 Subject: Added backticks for a keyword. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added backticks for the “this” keyword. --- javascript.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascript.html.markdown b/javascript.html.markdown index 6ea0b0bb..34ba9b47 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -413,7 +413,7 @@ var doubler = product.bind(this, 2); doubler(8); // = 16 // When you call a function with the `new` keyword, a new object is created, and -// made available to the function via the this keyword. Functions designed to be +// made available to the function via the `this` keyword. Functions designed to be // called like that are called constructors. var MyConstructor = function(){ -- cgit v1.2.3 From 109616d2201709e2dd2665095daf66fc094a318c Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:06:59 +0300 Subject: Greek CSS file Greek translation for the CSS --- css-gr.html.markdown | 242 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 242 insertions(+) create mode 100644 css-gr.html.markdown diff --git a/css-gr.html.markdown b/css-gr.html.markdown new file mode 100644 index 00000000..78fb02be --- /dev/null +++ b/css-gr.html.markdown @@ -0,0 +1,242 @@ +--- +language: css +contributors: + - ["Kostas Bariotis", "http://kostasbariotis.com"] +filename: css-gr.html.markdown +--- + +Η αρχική μορφή του Παγκόσμιου Ιστού αποτελούταν απο καθαρό κείμενο, χωρίς οπτικά αντικείμενα. Με το πέρας +του χρόνου και την εξέλιξη των Φυλλομετρητών, οι πλούσιες, σε οπτικά και πολυμεσικά αντικείμενα, σελίδες +γίναν καθημερινότητα. + +Η CSS μας βοηθάει να διαχωρήσουμε το περιεχόμενο της σελίδας μας (HTML) απο την οπτική της περιγραφή. + +Με την CSS ορίζουμε οπτικές ιδιότητες (χρώμα, μέγεθος, κλπ) σε HTML αντικείμενα (H1, div, κλπ). + +```css +/* Σχόλια εμφανίζονται εντός καθέτου-αστερίσκου, όπως εδώ. + Δεν υπάρχουν σχόλια μια γραμμής και πολλών. */ + +/* #################### + ## ΚΑΝΟΝΕΣ + #################### */ + +/* ένας κανόνας χρησιμοποιείτε για να στοχεύσουμε ένα αντικείμενο (selector). +selector { property: value; /* περισσότερες ιδιότητες...*/ } + +/* +Αυτό είναι ενα παράδειγμα αντικειμένου¨ + +

+*/ + +/* Μπορούμε να το στοχεύσουμε με την χρήση CSS κλάσεων */ +.class1 { } + +/* Ή και με τις δύο κλάσεις! */ +.class1.class2 { } + +/* Και με το όνομα του */ +div { } + +/* Ή με το id του */ +#anID { } + +/* Ή με το γεγονός ότι περιέχει ενα attribute */ +[attr] { font-size:smaller; } + +/* Ή οτι το attribute αυτό έχει μια συγκεκριμένη τιμή */ +[attr='value'] { font-size:smaller; } + +/* Ξεκινάει απο το λεκτικό (CSS 3) */ +[attr^='val'] { font-size:smaller; } + +/* Καταλήγει σε αυτο το λεκτικό (CSS 3) */ +[attr$='ue'] { font-size:smaller; } + +/* Περιέχει κάποιο λεκτικό */ +[otherAttr~='foo'] { } +[otherAttr~='bar'] { } + +/* περιέχει το λεκτικό σε λίστα χωρισμένη με παύλες, δηλαδή: "-" (U+002D) */ +[otherAttr|='en'] { font-size:smaller; } + + +/* Μπορούμε να προσθέσουμε μεταξύ τους selectors για να δημιουργήσουμε πιο αυστηρούς. + Δεν βάζουμε κενά ανάμεσα. */ +div.some-class[attr$='ue'] { } + +/* Μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται μέσα σε άλλα. */ +div.some-parent > .class-name { } + +/* Ή κάποιο αντικείμενο απόγονο ανεξαρτήτου του βάθους της σχέσης τους. */ +div.some-parent .class-name { } + +/* ΠΡΟΣΟΧΗ: ο ίδιος selector χωρίς κενά έχει άλλο νόημα. (Άσκηση προς τον αναγνώστη) */ +div.some-parent.class-name { } + +/* Μπορούμε να επιλέξουμε αντικείμενα με βάση το αμέσως επόμενο αντικείμενο στο ίδιο επίπεδο. */ +.i-am-just-before + .this-element { } + +/* Ή οποιοδήποτε αντικείμενο που προηγείτε */ +.i-am-any-element-before ~ .this-element { } + +/* Με την βοήθεια των ψευδο-κλάσεων μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται σε μια + ορισμένη κατάασταση. */ + +/* π.χ. όταν ο κέρσορας είναι πάνω απο ένα αντικείμενο */ +selector:hover { } + +/* ή ένας υπερσύνδεσμος που πατήθηκε */ +selector:visited { } + +/* ή που δεν πατήθηκε */ +selected:link { } + +/* ή ένα αντικείμενο που επιλέχθηκε */ +selected:focus { } + +/* οποιοδήποτε αντικείμενο είναι το πρώτο παιδί των γονέων του */ +selector:first-child {} + +/* οποιοδήποτε αντικείμενο είναι το πρώτοτελευταίο παιδί των γονέων του */ +selector:last-child {} + +/* Όπως και με τις ψευδο-κλάσεις, τα ψευδο-αντικείμενα μας επιτρέπουν τα τροποοιήσουμε συγκεκριμένα + κομμάτια της σελίδας */ + +/* επιλέγει το ψευδο-αντικείμενο ακριβώς πριν απο το αντικείμενο */ +selector::before {} + +/* επιλέγει το ψευδο-αντικείμενο ακριβώς μετά απο τον αντικείμενο */ +selector::after {} + +/* Σε σωστά σημεία (όχι πολύ ψηλά στην ιεραρχεία) ο αστερίσκος μπορείς να χρησιμοποιηθεί για να + επιλέξουμε όλα τα αντικείμενα */ +* { } /* όλα τα αντικείμενα της σελίδας */ +.parent * { } /* όλους τους απόγονους */ +.parent > * { } /* όλους τους απόγονους πρώτου επιπέδου */ + +/* #################### + ## Ιδιότητες + #################### */ + +selector { + + /* Οι μονάδες μπορούν να είναι είτε απόλυτες είτε σχετικές */ + + /* Σχετικές μονάδες */ + width: 50%; /* ποσοστό επί του πλάτους του γονέα */ + font-size: 2em; /* πολλαπλασιαστής της αρχικής τιμής του αντικειμένου */ + font-size: 2rem; /* ή της τιμής του πρώτου αντικειμένου στην ιεραρχεία */ + font-size: 2vw; /* πολλαπλαστιαστής του 1% του οπτικού πλάτους */ + font-size: 2vh; /* ή τους ύψους */ + font-size: 2vmin; /* οποιοδήποτε απο αυτα τα δύο είναι το μικρότερο */ + font-size: 2vmax; /* ή το μεγαλύτερο */ + + /* Απόλυτες μονάδες */ + width: 200px; /* pixels */ + font-size: 20pt; /* points */ + width: 5cm; /* εκατοστά */ + min-width: 50mm; /* χιλιοστά */ + max-width: 5in; /* ίντσες */ + + /* Χρώματα */ + color: #F6E; /* σύντομη δεκαεξαδική μορφή */ + color: #FF66EE; /* δεκαεξαδική μορφή */ + color: tomato; /* χρώμα με το όνομα του (συγκεκριμένα χρώματα) */ + color: rgb(255, 255, 255); /* τιμή RGB */ + color: rgb(10%, 20%, 50%); /* τιμή RGB με ποσοστά */ + color: rgba(255, 0, 0, 0.3); /* τιμή RGBA (CSS3) σσ. 0 < a < 1 */ + color: transparent; /* όπως και το παραπάνω με a = 0 */ + color: hsl(0, 100%, 50%); /* τιμή hsl με ποσοστά (CSS 3) */ + color: hsla(0, 100%, 50%, 0.3); /* τιμή hsla με ποσοστά και a */ + + /* Εικόνες μπορούν να τοποθετηθούν στον φόντο ενός αντικειμένου */ + background-image: url(/img-path/img.jpg); + + /* Γραμματοσειρές */ + font-family: Arial; + /* εάν η γραμματοσειρα περιέχει κενά */ + font-family: "Courier New"; + /* εάν η πρώτη γραμματοσειρα δε βρεθεί εγκατεστημένη στο Λειτουργικό Σύστυμα, αυτόματα + επιλέγετε η δεύτερη, κ.κ.ε. */ + font-family: "Courier New", Trebuchet, Arial, sans-serif; +} +``` + +## Χρήση + +Αποθηκεύουμε ένα αρχείο CSS με την επέκταση `.css`. + +```xml + + + + + + + +
+
+``` + +## Ειδικότητα των κανόνων (Cascading απο το αγγλικό τίτλο Cascading Style Sheets) + +Ένα αντικείμενο μπορεί να στοχευθεί απο πολλούς κανόνες και μπορεί η ίδια ιδιότητα να +περιλαμβάνετε σε πολλούς κανόνες. Σε αυτές της περιπτώσεις υπερισχύει πάντα ο πιο ειδικός +κανόνας και απο αυτούς, αυτός που εμφανίζετε τελευταίος. + +```css +/* A */ +p.class1[attr='value'] + +/* B */ +p.class1 { } + +/* C */ +p.class2 { } + +/* D */ +p { } + +/* E */ +p { property: value !important; } +``` + +```xml +

+``` + +Η σειρά θα είναι: + +* `E` έχει μεγαλύτερο βάρος λόγο του `!important`. Κάλες πρακτικές λένε να το αποφεύγουμε. +* `F` επόμενο λόγο του inline κανόνα. +* `A` επόμενο λόγο του το οτι είναι πιο ειδικό. Περιέχει τρεις selectors. +* `C` επόμενο, λόγο του οτι εμφανίζετε μετα το Β και ας έχει την ίδια ειδικότητα. +* `B` επόμενο. +* `D` is the last one. + +## Συμβατικότητα + +Τα περισσότερα απο τα παραπάνω ήδη υποστηρίζονται απο τους γνωστούς φυλλομετρητές. Άλλα θα πρέπει +πάντα να ελεγχουμέ πρωτου τους χρησιμοποιήσουμε. + +## Περισσότερα + +* Έλεγχος συμβατικότητας, [CanIUse](http://caniuse.com). +* CSS Playground [Dabblet](http://dabblet.com/). +* [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) +* [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/) + +## Μελέτη + +* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [Selecting elements using attributes](https://css-tricks.com/almanac/selectors/a/attribute/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) +* [SASS](http://sass-lang.com/) and [LESS](http://lesscss.org/) for CSS pre-processing +* [CSS-Tricks](https://css-tricks.com) -- cgit v1.2.3 From 46cf508e10f286fd78ea94384e79737627ed1d06 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:07:49 +0300 Subject: Update css-gr.html.markdown --- css-gr.html.markdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-gr.html.markdown b/css-gr.html.markdown index 78fb02be..daedfd2c 100644 --- a/css-gr.html.markdown +++ b/css-gr.html.markdown @@ -218,12 +218,12 @@ p { property: value !important; } * `A` επόμενο λόγο του το οτι είναι πιο ειδικό. Περιέχει τρεις selectors. * `C` επόμενο, λόγο του οτι εμφανίζετε μετα το Β και ας έχει την ίδια ειδικότητα. * `B` επόμενο. -* `D` is the last one. +* `D` τελευταίο. ## Συμβατικότητα Τα περισσότερα απο τα παραπάνω ήδη υποστηρίζονται απο τους γνωστούς φυλλομετρητές. Άλλα θα πρέπει -πάντα να ελεγχουμέ πρωτου τους χρησιμοποιήσουμε. +πάντα να ελέγχουμε πρωτου τους χρησιμοποιήσουμε. ## Περισσότερα -- cgit v1.2.3 From 461c5ccfa6e2347ea517ca73b518a352cc40c39e Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:09:45 +0300 Subject: Update css-gr.html.markdown --- css-gr.html.markdown | 1 + 1 file changed, 1 insertion(+) diff --git a/css-gr.html.markdown b/css-gr.html.markdown index daedfd2c..8198ae83 100644 --- a/css-gr.html.markdown +++ b/css-gr.html.markdown @@ -3,6 +3,7 @@ language: css contributors: - ["Kostas Bariotis", "http://kostasbariotis.com"] filename: css-gr.html.markdown +lang: el-gr --- Η αρχική μορφή του Παγκόσμιου Ιστού αποτελούταν απο καθαρό κείμενο, χωρίς οπτικά αντικείμενα. Με το πέρας -- cgit v1.2.3 From 2a2dd3abcd5439719a1a353dae9a645fe9921a39 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:13:41 +0300 Subject: Update css-gr.html.markdown --- css-gr.html.markdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-gr.html.markdown b/css-gr.html.markdown index 8198ae83..5d8f3454 100644 --- a/css-gr.html.markdown +++ b/css-gr.html.markdown @@ -221,14 +221,14 @@ p { property: value !important; } * `B` επόμενο. * `D` τελευταίο. -## Συμβατικότητα +## Συμβατότητα Τα περισσότερα απο τα παραπάνω ήδη υποστηρίζονται απο τους γνωστούς φυλλομετρητές. Άλλα θα πρέπει πάντα να ελέγχουμε πρωτου τους χρησιμοποιήσουμε. ## Περισσότερα -* Έλεγχος συμβατικότητας, [CanIUse](http://caniuse.com). +* Έλεγχος συμβατότητας, [CanIUse](http://caniuse.com). * CSS Playground [Dabblet](http://dabblet.com/). * [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) * [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/) -- cgit v1.2.3 From 1308f73e706b6d68144dc54b0f23e6ebc497e19f Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:16:11 +0300 Subject: Update css-gr.html.markdown --- css-gr.html.markdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-gr.html.markdown b/css-gr.html.markdown index 5d8f3454..240d372f 100644 --- a/css-gr.html.markdown +++ b/css-gr.html.markdown @@ -112,7 +112,7 @@ selector::before {} /* επιλέγει το ψευδο-αντικείμενο ακριβώς μετά απο τον αντικείμενο */ selector::after {} -/* Σε σωστά σημεία (όχι πολύ ψηλά στην ιεραρχεία) ο αστερίσκος μπορείς να χρησιμοποιηθεί για να +/* Σε σωστά σημεία (όχι πολύ ψηλά στην ιεραρχία) ο αστερίσκος μπορείς να χρησιμοποιηθεί για να επιλέξουμε όλα τα αντικείμενα */ * { } /* όλα τα αντικείμενα της σελίδας */ .parent * { } /* όλους τους απόγονους */ @@ -129,7 +129,7 @@ selector { /* Σχετικές μονάδες */ width: 50%; /* ποσοστό επί του πλάτους του γονέα */ font-size: 2em; /* πολλαπλασιαστής της αρχικής τιμής του αντικειμένου */ - font-size: 2rem; /* ή της τιμής του πρώτου αντικειμένου στην ιεραρχεία */ + font-size: 2rem; /* ή της τιμής του πρώτου αντικειμένου στην ιεραρχία */ font-size: 2vw; /* πολλαπλαστιαστής του 1% του οπτικού πλάτους */ font-size: 2vh; /* ή τους ύψους */ font-size: 2vmin; /* οποιοδήποτε απο αυτα τα δύο είναι το μικρότερο */ -- cgit v1.2.3 From 0f8165d0c8c5f02c6829771edfddc4dd4a2caf01 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:16:56 +0300 Subject: Update css-gr.html.markdown --- css-gr.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-gr.html.markdown b/css-gr.html.markdown index 240d372f..325fb435 100644 --- a/css-gr.html.markdown +++ b/css-gr.html.markdown @@ -7,7 +7,7 @@ lang: el-gr --- Η αρχική μορφή του Παγκόσμιου Ιστού αποτελούταν απο καθαρό κείμενο, χωρίς οπτικά αντικείμενα. Με το πέρας -του χρόνου και την εξέλιξη των Φυλλομετρητών, οι πλούσιες, σε οπτικά και πολυμεσικά αντικείμενα, σελίδες +του χρόνου και την εξέλιξη των Φυλλομετρητών, οι πλούσιες σελίδες, σε οπτικά και πολυμεσικά αντικείμενα, γίναν καθημερινότητα. Η CSS μας βοηθάει να διαχωρήσουμε το περιεχόμενο της σελίδας μας (HTML) απο την οπτική της περιγραφή. -- cgit v1.2.3 From 51f523c29df9547fbbb0ec0915813fcc629f419a Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:27:30 +0300 Subject: Update css-gr.html.markdown --- css-gr.html.markdown | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/css-gr.html.markdown b/css-gr.html.markdown index 325fb435..764a17cf 100644 --- a/css-gr.html.markdown +++ b/css-gr.html.markdown @@ -79,7 +79,7 @@ div.some-parent.class-name { } /* Μπορούμε να επιλέξουμε αντικείμενα με βάση το αμέσως επόμενο αντικείμενο στο ίδιο επίπεδο. */ .i-am-just-before + .this-element { } -/* Ή οποιοδήποτε αντικείμενο που προηγείτε */ +/* Ή οποιοδήποτε αντικείμενο που προηγείται */ .i-am-any-element-before ~ .this-element { } /* Με την βοήθεια των ψευδο-κλάσεων μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται σε μια @@ -189,7 +189,7 @@ selector { Ένα αντικείμενο μπορεί να στοχευθεί απο πολλούς κανόνες και μπορεί η ίδια ιδιότητα να περιλαμβάνετε σε πολλούς κανόνες. Σε αυτές της περιπτώσεις υπερισχύει πάντα ο πιο ειδικός -κανόνας και απο αυτούς, αυτός που εμφανίζετε τελευταίος. +κανόνας και απο αυτούς, αυτός που εμφανίζεται τελευταίος. ```css /* A */ @@ -214,10 +214,10 @@ p { property: value !important; } Η σειρά θα είναι: -* `E` έχει μεγαλύτερο βάρος λόγο του `!important`. Κάλες πρακτικές λένε να το αποφεύγουμε. -* `F` επόμενο λόγο του inline κανόνα. -* `A` επόμενο λόγο του το οτι είναι πιο ειδικό. Περιέχει τρεις selectors. -* `C` επόμενο, λόγο του οτι εμφανίζετε μετα το Β και ας έχει την ίδια ειδικότητα. +* `E` έχει μεγαλύτερο βάρος λόγω του `!important`. Κάλες πρακτικές λένε να το αποφεύγουμε. +* `F` επόμενο λόγω του inline κανόνα. +* `A` επόμενο λόγω του το οτι είναι πιο ειδικό. Περιέχει τρεις selectors. +* `C` επόμενο, λόγω του οτι εμφανίζεται μετα το Β και ας έχει την ίδια ειδικότητα. * `B` επόμενο. * `D` τελευταίο. -- cgit v1.2.3 From 8908c07652b56033173a0328abd2090583418e79 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:30:50 +0300 Subject: css translation file moved to appropriate folder --- css-gr.html.markdown | 243 --------------------------------------------- el-gr/css-gr.html.markdown | 243 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 243 insertions(+), 243 deletions(-) delete mode 100644 css-gr.html.markdown create mode 100644 el-gr/css-gr.html.markdown diff --git a/css-gr.html.markdown b/css-gr.html.markdown deleted file mode 100644 index 764a17cf..00000000 --- a/css-gr.html.markdown +++ /dev/null @@ -1,243 +0,0 @@ ---- -language: css -contributors: - - ["Kostas Bariotis", "http://kostasbariotis.com"] -filename: css-gr.html.markdown -lang: el-gr ---- - -Η αρχική μορφή του Παγκόσμιου Ιστού αποτελούταν απο καθαρό κείμενο, χωρίς οπτικά αντικείμενα. Με το πέρας -του χρόνου και την εξέλιξη των Φυλλομετρητών, οι πλούσιες σελίδες, σε οπτικά και πολυμεσικά αντικείμενα, -γίναν καθημερινότητα. - -Η CSS μας βοηθάει να διαχωρήσουμε το περιεχόμενο της σελίδας μας (HTML) απο την οπτική της περιγραφή. - -Με την CSS ορίζουμε οπτικές ιδιότητες (χρώμα, μέγεθος, κλπ) σε HTML αντικείμενα (H1, div, κλπ). - -```css -/* Σχόλια εμφανίζονται εντός καθέτου-αστερίσκου, όπως εδώ. - Δεν υπάρχουν σχόλια μια γραμμής και πολλών. */ - -/* #################### - ## ΚΑΝΟΝΕΣ - #################### */ - -/* ένας κανόνας χρησιμοποιείτε για να στοχεύσουμε ένα αντικείμενο (selector). -selector { property: value; /* περισσότερες ιδιότητες...*/ } - -/* -Αυτό είναι ενα παράδειγμα αντικειμένου¨ - -

-*/ - -/* Μπορούμε να το στοχεύσουμε με την χρήση CSS κλάσεων */ -.class1 { } - -/* Ή και με τις δύο κλάσεις! */ -.class1.class2 { } - -/* Και με το όνομα του */ -div { } - -/* Ή με το id του */ -#anID { } - -/* Ή με το γεγονός ότι περιέχει ενα attribute */ -[attr] { font-size:smaller; } - -/* Ή οτι το attribute αυτό έχει μια συγκεκριμένη τιμή */ -[attr='value'] { font-size:smaller; } - -/* Ξεκινάει απο το λεκτικό (CSS 3) */ -[attr^='val'] { font-size:smaller; } - -/* Καταλήγει σε αυτο το λεκτικό (CSS 3) */ -[attr$='ue'] { font-size:smaller; } - -/* Περιέχει κάποιο λεκτικό */ -[otherAttr~='foo'] { } -[otherAttr~='bar'] { } - -/* περιέχει το λεκτικό σε λίστα χωρισμένη με παύλες, δηλαδή: "-" (U+002D) */ -[otherAttr|='en'] { font-size:smaller; } - - -/* Μπορούμε να προσθέσουμε μεταξύ τους selectors για να δημιουργήσουμε πιο αυστηρούς. - Δεν βάζουμε κενά ανάμεσα. */ -div.some-class[attr$='ue'] { } - -/* Μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται μέσα σε άλλα. */ -div.some-parent > .class-name { } - -/* Ή κάποιο αντικείμενο απόγονο ανεξαρτήτου του βάθους της σχέσης τους. */ -div.some-parent .class-name { } - -/* ΠΡΟΣΟΧΗ: ο ίδιος selector χωρίς κενά έχει άλλο νόημα. (Άσκηση προς τον αναγνώστη) */ -div.some-parent.class-name { } - -/* Μπορούμε να επιλέξουμε αντικείμενα με βάση το αμέσως επόμενο αντικείμενο στο ίδιο επίπεδο. */ -.i-am-just-before + .this-element { } - -/* Ή οποιοδήποτε αντικείμενο που προηγείται */ -.i-am-any-element-before ~ .this-element { } - -/* Με την βοήθεια των ψευδο-κλάσεων μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται σε μια - ορισμένη κατάασταση. */ - -/* π.χ. όταν ο κέρσορας είναι πάνω απο ένα αντικείμενο */ -selector:hover { } - -/* ή ένας υπερσύνδεσμος που πατήθηκε */ -selector:visited { } - -/* ή που δεν πατήθηκε */ -selected:link { } - -/* ή ένα αντικείμενο που επιλέχθηκε */ -selected:focus { } - -/* οποιοδήποτε αντικείμενο είναι το πρώτο παιδί των γονέων του */ -selector:first-child {} - -/* οποιοδήποτε αντικείμενο είναι το πρώτοτελευταίο παιδί των γονέων του */ -selector:last-child {} - -/* Όπως και με τις ψευδο-κλάσεις, τα ψευδο-αντικείμενα μας επιτρέπουν τα τροποοιήσουμε συγκεκριμένα - κομμάτια της σελίδας */ - -/* επιλέγει το ψευδο-αντικείμενο ακριβώς πριν απο το αντικείμενο */ -selector::before {} - -/* επιλέγει το ψευδο-αντικείμενο ακριβώς μετά απο τον αντικείμενο */ -selector::after {} - -/* Σε σωστά σημεία (όχι πολύ ψηλά στην ιεραρχία) ο αστερίσκος μπορείς να χρησιμοποιηθεί για να - επιλέξουμε όλα τα αντικείμενα */ -* { } /* όλα τα αντικείμενα της σελίδας */ -.parent * { } /* όλους τους απόγονους */ -.parent > * { } /* όλους τους απόγονους πρώτου επιπέδου */ - -/* #################### - ## Ιδιότητες - #################### */ - -selector { - - /* Οι μονάδες μπορούν να είναι είτε απόλυτες είτε σχετικές */ - - /* Σχετικές μονάδες */ - width: 50%; /* ποσοστό επί του πλάτους του γονέα */ - font-size: 2em; /* πολλαπλασιαστής της αρχικής τιμής του αντικειμένου */ - font-size: 2rem; /* ή της τιμής του πρώτου αντικειμένου στην ιεραρχία */ - font-size: 2vw; /* πολλαπλαστιαστής του 1% του οπτικού πλάτους */ - font-size: 2vh; /* ή τους ύψους */ - font-size: 2vmin; /* οποιοδήποτε απο αυτα τα δύο είναι το μικρότερο */ - font-size: 2vmax; /* ή το μεγαλύτερο */ - - /* Απόλυτες μονάδες */ - width: 200px; /* pixels */ - font-size: 20pt; /* points */ - width: 5cm; /* εκατοστά */ - min-width: 50mm; /* χιλιοστά */ - max-width: 5in; /* ίντσες */ - - /* Χρώματα */ - color: #F6E; /* σύντομη δεκαεξαδική μορφή */ - color: #FF66EE; /* δεκαεξαδική μορφή */ - color: tomato; /* χρώμα με το όνομα του (συγκεκριμένα χρώματα) */ - color: rgb(255, 255, 255); /* τιμή RGB */ - color: rgb(10%, 20%, 50%); /* τιμή RGB με ποσοστά */ - color: rgba(255, 0, 0, 0.3); /* τιμή RGBA (CSS3) σσ. 0 < a < 1 */ - color: transparent; /* όπως και το παραπάνω με a = 0 */ - color: hsl(0, 100%, 50%); /* τιμή hsl με ποσοστά (CSS 3) */ - color: hsla(0, 100%, 50%, 0.3); /* τιμή hsla με ποσοστά και a */ - - /* Εικόνες μπορούν να τοποθετηθούν στον φόντο ενός αντικειμένου */ - background-image: url(/img-path/img.jpg); - - /* Γραμματοσειρές */ - font-family: Arial; - /* εάν η γραμματοσειρα περιέχει κενά */ - font-family: "Courier New"; - /* εάν η πρώτη γραμματοσειρα δε βρεθεί εγκατεστημένη στο Λειτουργικό Σύστυμα, αυτόματα - επιλέγετε η δεύτερη, κ.κ.ε. */ - font-family: "Courier New", Trebuchet, Arial, sans-serif; -} -``` - -## Χρήση - -Αποθηκεύουμε ένα αρχείο CSS με την επέκταση `.css`. - -```xml - - - - - - - -
-
-``` - -## Ειδικότητα των κανόνων (Cascading απο το αγγλικό τίτλο Cascading Style Sheets) - -Ένα αντικείμενο μπορεί να στοχευθεί απο πολλούς κανόνες και μπορεί η ίδια ιδιότητα να -περιλαμβάνετε σε πολλούς κανόνες. Σε αυτές της περιπτώσεις υπερισχύει πάντα ο πιο ειδικός -κανόνας και απο αυτούς, αυτός που εμφανίζεται τελευταίος. - -```css -/* A */ -p.class1[attr='value'] - -/* B */ -p.class1 { } - -/* C */ -p.class2 { } - -/* D */ -p { } - -/* E */ -p { property: value !important; } -``` - -```xml -

-``` - -Η σειρά θα είναι: - -* `E` έχει μεγαλύτερο βάρος λόγω του `!important`. Κάλες πρακτικές λένε να το αποφεύγουμε. -* `F` επόμενο λόγω του inline κανόνα. -* `A` επόμενο λόγω του το οτι είναι πιο ειδικό. Περιέχει τρεις selectors. -* `C` επόμενο, λόγω του οτι εμφανίζεται μετα το Β και ας έχει την ίδια ειδικότητα. -* `B` επόμενο. -* `D` τελευταίο. - -## Συμβατότητα - -Τα περισσότερα απο τα παραπάνω ήδη υποστηρίζονται απο τους γνωστούς φυλλομετρητές. Άλλα θα πρέπει -πάντα να ελέγχουμε πρωτου τους χρησιμοποιήσουμε. - -## Περισσότερα - -* Έλεγχος συμβατότητας, [CanIUse](http://caniuse.com). -* CSS Playground [Dabblet](http://dabblet.com/). -* [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) -* [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/) - -## Μελέτη - -* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) -* [Selecting elements using attributes](https://css-tricks.com/almanac/selectors/a/attribute/) -* [QuirksMode CSS](http://www.quirksmode.org/css/) -* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) -* [SASS](http://sass-lang.com/) and [LESS](http://lesscss.org/) for CSS pre-processing -* [CSS-Tricks](https://css-tricks.com) diff --git a/el-gr/css-gr.html.markdown b/el-gr/css-gr.html.markdown new file mode 100644 index 00000000..764a17cf --- /dev/null +++ b/el-gr/css-gr.html.markdown @@ -0,0 +1,243 @@ +--- +language: css +contributors: + - ["Kostas Bariotis", "http://kostasbariotis.com"] +filename: css-gr.html.markdown +lang: el-gr +--- + +Η αρχική μορφή του Παγκόσμιου Ιστού αποτελούταν απο καθαρό κείμενο, χωρίς οπτικά αντικείμενα. Με το πέρας +του χρόνου και την εξέλιξη των Φυλλομετρητών, οι πλούσιες σελίδες, σε οπτικά και πολυμεσικά αντικείμενα, +γίναν καθημερινότητα. + +Η CSS μας βοηθάει να διαχωρήσουμε το περιεχόμενο της σελίδας μας (HTML) απο την οπτική της περιγραφή. + +Με την CSS ορίζουμε οπτικές ιδιότητες (χρώμα, μέγεθος, κλπ) σε HTML αντικείμενα (H1, div, κλπ). + +```css +/* Σχόλια εμφανίζονται εντός καθέτου-αστερίσκου, όπως εδώ. + Δεν υπάρχουν σχόλια μια γραμμής και πολλών. */ + +/* #################### + ## ΚΑΝΟΝΕΣ + #################### */ + +/* ένας κανόνας χρησιμοποιείτε για να στοχεύσουμε ένα αντικείμενο (selector). +selector { property: value; /* περισσότερες ιδιότητες...*/ } + +/* +Αυτό είναι ενα παράδειγμα αντικειμένου¨ + +

+*/ + +/* Μπορούμε να το στοχεύσουμε με την χρήση CSS κλάσεων */ +.class1 { } + +/* Ή και με τις δύο κλάσεις! */ +.class1.class2 { } + +/* Και με το όνομα του */ +div { } + +/* Ή με το id του */ +#anID { } + +/* Ή με το γεγονός ότι περιέχει ενα attribute */ +[attr] { font-size:smaller; } + +/* Ή οτι το attribute αυτό έχει μια συγκεκριμένη τιμή */ +[attr='value'] { font-size:smaller; } + +/* Ξεκινάει απο το λεκτικό (CSS 3) */ +[attr^='val'] { font-size:smaller; } + +/* Καταλήγει σε αυτο το λεκτικό (CSS 3) */ +[attr$='ue'] { font-size:smaller; } + +/* Περιέχει κάποιο λεκτικό */ +[otherAttr~='foo'] { } +[otherAttr~='bar'] { } + +/* περιέχει το λεκτικό σε λίστα χωρισμένη με παύλες, δηλαδή: "-" (U+002D) */ +[otherAttr|='en'] { font-size:smaller; } + + +/* Μπορούμε να προσθέσουμε μεταξύ τους selectors για να δημιουργήσουμε πιο αυστηρούς. + Δεν βάζουμε κενά ανάμεσα. */ +div.some-class[attr$='ue'] { } + +/* Μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται μέσα σε άλλα. */ +div.some-parent > .class-name { } + +/* Ή κάποιο αντικείμενο απόγονο ανεξαρτήτου του βάθους της σχέσης τους. */ +div.some-parent .class-name { } + +/* ΠΡΟΣΟΧΗ: ο ίδιος selector χωρίς κενά έχει άλλο νόημα. (Άσκηση προς τον αναγνώστη) */ +div.some-parent.class-name { } + +/* Μπορούμε να επιλέξουμε αντικείμενα με βάση το αμέσως επόμενο αντικείμενο στο ίδιο επίπεδο. */ +.i-am-just-before + .this-element { } + +/* Ή οποιοδήποτε αντικείμενο που προηγείται */ +.i-am-any-element-before ~ .this-element { } + +/* Με την βοήθεια των ψευδο-κλάσεων μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται σε μια + ορισμένη κατάασταση. */ + +/* π.χ. όταν ο κέρσορας είναι πάνω απο ένα αντικείμενο */ +selector:hover { } + +/* ή ένας υπερσύνδεσμος που πατήθηκε */ +selector:visited { } + +/* ή που δεν πατήθηκε */ +selected:link { } + +/* ή ένα αντικείμενο που επιλέχθηκε */ +selected:focus { } + +/* οποιοδήποτε αντικείμενο είναι το πρώτο παιδί των γονέων του */ +selector:first-child {} + +/* οποιοδήποτε αντικείμενο είναι το πρώτοτελευταίο παιδί των γονέων του */ +selector:last-child {} + +/* Όπως και με τις ψευδο-κλάσεις, τα ψευδο-αντικείμενα μας επιτρέπουν τα τροποοιήσουμε συγκεκριμένα + κομμάτια της σελίδας */ + +/* επιλέγει το ψευδο-αντικείμενο ακριβώς πριν απο το αντικείμενο */ +selector::before {} + +/* επιλέγει το ψευδο-αντικείμενο ακριβώς μετά απο τον αντικείμενο */ +selector::after {} + +/* Σε σωστά σημεία (όχι πολύ ψηλά στην ιεραρχία) ο αστερίσκος μπορείς να χρησιμοποιηθεί για να + επιλέξουμε όλα τα αντικείμενα */ +* { } /* όλα τα αντικείμενα της σελίδας */ +.parent * { } /* όλους τους απόγονους */ +.parent > * { } /* όλους τους απόγονους πρώτου επιπέδου */ + +/* #################### + ## Ιδιότητες + #################### */ + +selector { + + /* Οι μονάδες μπορούν να είναι είτε απόλυτες είτε σχετικές */ + + /* Σχετικές μονάδες */ + width: 50%; /* ποσοστό επί του πλάτους του γονέα */ + font-size: 2em; /* πολλαπλασιαστής της αρχικής τιμής του αντικειμένου */ + font-size: 2rem; /* ή της τιμής του πρώτου αντικειμένου στην ιεραρχία */ + font-size: 2vw; /* πολλαπλαστιαστής του 1% του οπτικού πλάτους */ + font-size: 2vh; /* ή τους ύψους */ + font-size: 2vmin; /* οποιοδήποτε απο αυτα τα δύο είναι το μικρότερο */ + font-size: 2vmax; /* ή το μεγαλύτερο */ + + /* Απόλυτες μονάδες */ + width: 200px; /* pixels */ + font-size: 20pt; /* points */ + width: 5cm; /* εκατοστά */ + min-width: 50mm; /* χιλιοστά */ + max-width: 5in; /* ίντσες */ + + /* Χρώματα */ + color: #F6E; /* σύντομη δεκαεξαδική μορφή */ + color: #FF66EE; /* δεκαεξαδική μορφή */ + color: tomato; /* χρώμα με το όνομα του (συγκεκριμένα χρώματα) */ + color: rgb(255, 255, 255); /* τιμή RGB */ + color: rgb(10%, 20%, 50%); /* τιμή RGB με ποσοστά */ + color: rgba(255, 0, 0, 0.3); /* τιμή RGBA (CSS3) σσ. 0 < a < 1 */ + color: transparent; /* όπως και το παραπάνω με a = 0 */ + color: hsl(0, 100%, 50%); /* τιμή hsl με ποσοστά (CSS 3) */ + color: hsla(0, 100%, 50%, 0.3); /* τιμή hsla με ποσοστά και a */ + + /* Εικόνες μπορούν να τοποθετηθούν στον φόντο ενός αντικειμένου */ + background-image: url(/img-path/img.jpg); + + /* Γραμματοσειρές */ + font-family: Arial; + /* εάν η γραμματοσειρα περιέχει κενά */ + font-family: "Courier New"; + /* εάν η πρώτη γραμματοσειρα δε βρεθεί εγκατεστημένη στο Λειτουργικό Σύστυμα, αυτόματα + επιλέγετε η δεύτερη, κ.κ.ε. */ + font-family: "Courier New", Trebuchet, Arial, sans-serif; +} +``` + +## Χρήση + +Αποθηκεύουμε ένα αρχείο CSS με την επέκταση `.css`. + +```xml + + + + + + + +
+
+``` + +## Ειδικότητα των κανόνων (Cascading απο το αγγλικό τίτλο Cascading Style Sheets) + +Ένα αντικείμενο μπορεί να στοχευθεί απο πολλούς κανόνες και μπορεί η ίδια ιδιότητα να +περιλαμβάνετε σε πολλούς κανόνες. Σε αυτές της περιπτώσεις υπερισχύει πάντα ο πιο ειδικός +κανόνας και απο αυτούς, αυτός που εμφανίζεται τελευταίος. + +```css +/* A */ +p.class1[attr='value'] + +/* B */ +p.class1 { } + +/* C */ +p.class2 { } + +/* D */ +p { } + +/* E */ +p { property: value !important; } +``` + +```xml +

+``` + +Η σειρά θα είναι: + +* `E` έχει μεγαλύτερο βάρος λόγω του `!important`. Κάλες πρακτικές λένε να το αποφεύγουμε. +* `F` επόμενο λόγω του inline κανόνα. +* `A` επόμενο λόγω του το οτι είναι πιο ειδικό. Περιέχει τρεις selectors. +* `C` επόμενο, λόγω του οτι εμφανίζεται μετα το Β και ας έχει την ίδια ειδικότητα. +* `B` επόμενο. +* `D` τελευταίο. + +## Συμβατότητα + +Τα περισσότερα απο τα παραπάνω ήδη υποστηρίζονται απο τους γνωστούς φυλλομετρητές. Άλλα θα πρέπει +πάντα να ελέγχουμε πρωτου τους χρησιμοποιήσουμε. + +## Περισσότερα + +* Έλεγχος συμβατότητας, [CanIUse](http://caniuse.com). +* CSS Playground [Dabblet](http://dabblet.com/). +* [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) +* [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/) + +## Μελέτη + +* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [Selecting elements using attributes](https://css-tricks.com/almanac/selectors/a/attribute/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) +* [SASS](http://sass-lang.com/) and [LESS](http://lesscss.org/) for CSS pre-processing +* [CSS-Tricks](https://css-tricks.com) -- cgit v1.2.3 From ece01620be7c688e86d7fcbbfe59adde8d77e7d0 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Fri, 16 Oct 2015 22:32:54 +0300 Subject: Update css-gr.html.markdown --- el-gr/css-gr.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/el-gr/css-gr.html.markdown b/el-gr/css-gr.html.markdown index 764a17cf..327dc1a0 100644 --- a/el-gr/css-gr.html.markdown +++ b/el-gr/css-gr.html.markdown @@ -137,7 +137,7 @@ selector { /* Απόλυτες μονάδες */ width: 200px; /* pixels */ - font-size: 20pt; /* points */ + font-size: 20pt; /* στιγμες */ width: 5cm; /* εκατοστά */ min-width: 50mm; /* χιλιοστά */ max-width: 5in; /* ίντσες */ -- cgit v1.2.3 From 1593873e29a01454aa3b0cfdf7e156e9a9530615 Mon Sep 17 00:00:00 2001 From: Gabriel Gomes Date: Fri, 16 Oct 2015 17:33:57 -0300 Subject: Added sass-pt-html.markdown --- pt-br/sass-pt.html.markdown | 477 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 477 insertions(+) create mode 100644 pt-br/sass-pt.html.markdown diff --git a/pt-br/sass-pt.html.markdown b/pt-br/sass-pt.html.markdown new file mode 100644 index 00000000..105896b2 --- /dev/null +++ b/pt-br/sass-pt.html.markdown @@ -0,0 +1,477 @@ +--- +language: sass +filename: learnsass-pt.scss +contributors: + - ["Laura Kyle", "https://github.com/LauraNK"] + - ["Sean Corrales", "https://github.com/droidenator"] +translators: + - ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"] +lang: pt-br +--- + +Sass é uma linguagem de extensão CSS que adiciona recursos, como variáveis, aninhamento, mixins e muito mais. +Sass (e outros pré-processadores, como [Less](http://lesscss.org/)) ajudam os desenvolvedores a escrever código de fácil manutenção e DRY (Do not Repeat Yourself). + +Sass tem duas opções de sintaxe diferentes para escolher. SCSS, que tem a mesma sintaxe de CSS, mas com os recursos adicionais de Sass. Ou Sass (a sintaxe original), que usa o recuo, em vez de chaves e ponto e vírgula. +Este tutorial é escrito usando SCSS. + +Se você já está familiarizado com CSS3, você será capaz de pegar Sass de forma relativamente rápida. Ele não fornece quaisquer novas opções de estilo, mas sim as ferramentas para escrever sua CSS de forma mais eficiente e fazer a manutenção mais fácilmente. + +```scss + + +// Comentários de linha única são removidos quando Sass é compilado para CSS. + +/* Comentários multi-line são preservados. */ + + + +/*Variáveis +==============================*/ + + + +/* É possível armazenar um valor CSS (tais como a cor) de uma variável. +Use o símbolo "$" para criar uma variável. */ + +$primary-color: #A3A4FF; +$secondary-color: #51527F; +$body-font: 'Roboto', sans-serif; + +/* Você pode usar as variáveis em toda a sua folha de estilo. +Agora, se você quer mudar a cor, você só tem que fazer a mudança uma vez. */ + +body { + background-color: $primary-color; + color: $secondary-color; + font-family: $body-font; +} + +/* Quando compilar ficaria assim: */ +body { + background-color: #A3A4FF; + color: #51527F; + font-family: 'Roboto', sans-serif; +} + + +/ * Este é muito mais fácil de manter do que ter de mudar a cor +cada vez que aparece em toda a sua folha de estilo. * / + + + + +/*Mixins +==============================*/ + + + +/* Se você achar que você está escrevendo o mesmo código para mais de um +elemento, você pode querer armazenar esse código em um mixin. + +Use a diretiva '@mixin', além de um nome para o seu mixin. */ + +@mixin center { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; +} + +/* Você pode usar o mixin com '@include' e o nome mixin. */ + +div { + @include center; + background-color: $primary-color; +} + +/* Apoś compilar ficaria assim: */ +div { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + background-color: #A3A4FF; +} + + +/* Você pode usar mixins para criar uma propriedade estenográfica. */ + +@mixin size($width, $height) { + width: $width; + height: $height; +} + +/* O que você pode invocar passando argumentos de largura e altura. */ + +.rectangle { + @include size(100px, 60px); +} + +.square { + @include size(40px, 40px); +} + +/* Isso compilado ficará assim: */ +.rectangle { + width: 100px; + height: 60px; +} + +.square { + width: 40px; + height: 40px; +} + + + +/*Funções +==============================*/ + + + +/* Sass fornece funções que podem ser utilizados para realizar uma variedade de +    tarefas. Considere o seguinte */ + +/* Funções pode ser chamado usando seu nome e passando o +    argumentos necessários */ +body { + width: round(10.25px); +} + +.footer { + background-color: fade_out(#000000, 0.25) +} + +/* Compiles to: */ + +body { + width: 10px; +} + +.footer { + background-color: rgba(0, 0, 0, 0.75); +} + +/* You may also define your own functions. Functions are very similar to + mixins. When trying to choose between a function or a mixin, remember + that mixins are best for generating CSS while functions are better for + logic that might be used throughout your Sass code. The examples in + the Math Operators' section are ideal candidates for becoming a reusable + function. */ + +/* This function will take a target size and the parent size and calculate + and return the percentage */ + +/* Você também pode definir suas próprias funções. As funções são muito semelhantes aos +   mixins. Ao tentar escolher entre uma função ou um mixin, lembre- +   que mixins são os melhores para gerar CSS enquanto as funções são melhores para +   lógica que pode ser usado em todo o seu código Sass. Os exemplos +   seção Operadores Math 'são candidatos ideais para se tornar um reutilizável +   função. */ + +/* Esta função terá um tamanho de destino eo tamanho do pai e calcular +   e voltar a percentagem */ + +@function calculate-percentage($target-size, $parent-size) { + @return $target-size / $parent-size * 100%; +} + +$main-content: calculate-percentage(600px, 960px); + +.main-content { + width: $main-content; +} + +.sidebar { + width: calculate-percentage(300px, 960px); +} + +/* Compila para: */ + +.main-content { + width: 62.5%; +} + +.sidebar { + width: 31.25%; +} + + + +/* Extend (Herança) +============================== */ + + + +/*Extend é uma maneira de compartilhar as propriedades de um seletor com outro. */ + +.display { + @include size(5em, 5em); + border: 5px solid $secondary-color; +} + +.display-success { + @extend .display; + border-color: #22df56; +} + +/* Compiles to: */ +.display, .display-success { + width: 5em; + height: 5em; + border: 5px solid #51527F; +} + +.display-success { + border-color: #22df56; +} + +/* Ampliando uma declaração CSS é preferível a criação de um mixin +   por causa da maneira agrupa as classes que todos compartilham +   o mesmo estilo base. Se isso for feito com um mixin, a largura, +   altura, e a borda seria duplicado para cada instrução que +   o chamado mixin. Enquanto isso não irá afetar o seu fluxo de trabalho, será +   adicionar inchaço desnecessário para os arquivos criados pelo compilador Sass. */ + + + +/*Assentamento +==============================*/ + + + +/ * Sass permite seletores ninhos dentro seletores * / + +ul { + list-style-type: none; + margin-top: 2em; + + li { + background-color: #FF0000; + } +} + +/* '&' será substituído pelo selector pai. */ +/* Você também pode aninhar pseudo-classes. */ +/* Tenha em mente que o excesso de nidificação vai fazer seu código menos sustentável. +Essas práticas também recomendam não vai mais de 3 níveis de profundidade quando nidificação. +Por exemplo: */ + + +ul { + list-style-type: none; + margin-top: 2em; + + li { + background-color: red; + + &:hover { + background-color: blue; + } + + a { + color: white; + } + } +} + +/* Compila para: */ + +ul { + list-style-type: none; + margin-top: 2em; +} + +ul li { + background-color: red; +} + +ul li:hover { + background-color: blue; +} + +ul li a { + color: white; +} + + + +/*Parciais e Importações +==============================*/ + + +/* Sass permite criar arquivos parciais. Isso pode ajudar a manter seu Sass +   código modularizado. Arquivos parciais deve começar com um '_', por exemplo, _reset.css. +   Parciais não são geradas em CSS. */ + + + +/* Considere o seguinte CSS que nós vamos colocar em um arquivo chamado _reset.css */ + +html, +body, +ul, +ol { + margin: 0; + padding: 0; +} + +/* Sass offers @import which can be used to import partials into a file. + This differs from the traditional CSS @import statement which makes + another HTTP request to fetch the imported file. Sass takes the + imported file and combines it with the compiled code. */ + +/* Sass oferece @import que pode ser usado para importar parciais em um arquivo. +   Isso difere da declaração CSS @import tradicional, que faz +   outra solicitação HTTP para buscar o arquivo importado. Sass converte os +   importadas arquivo e combina com o código compilado. */ + +@import 'reset'; + +body { + font-size: 16px; + font-family: Helvetica, Arial, Sans-serif; +} + +/* Compiles to: */ + +html, body, ul, ol { + margin: 0; + padding: 0; +} + +body { + font-size: 16px; + font-family: Helvetica, Arial, Sans-serif; +} + + + +/*Placeholder Selectors +==============================*/ + + + +/* Placeholders are useful when creating a CSS statement to extend. If you + wanted to create a CSS statement that was exclusively used with @extend, + you can do so using a placeholder. Placeholders begin with a '%' instead + of '.' or '#'. Placeholders will not appear in the compiled CSS. */ + +/* Os espaços reservados são úteis na criação de uma declaração CSS para ampliar. Se você +   queria criar uma instrução CSS que foi usado exclusivamente com @extend, +   Você pode fazer isso usando um espaço reservado. Espaços reservados começar com um '%' em vez +   de '.' ou '#'. Espaços reservados não aparece no CSS compilado. * / + +%content-window { + font-size: 14px; + padding: 10px; + color: #000; + border-radius: 4px; +} + +.message-window { + @extend %content-window; + background-color: #0000ff; +} + +/* Compilado para: */ + +.message-window { + font-size: 14px; + padding: 10px; + color: #000; + border-radius: 4px; +} + +.message-window { + background-color: #0000ff; +} + + + +/*Operações Math +============================== * / + + +/* Sass provides the following operators: +, -, *, /, and %. These can + be useful for calculating values directly in your Sass files instead + of using values that you've already calculated by hand. Below is an example + of a setting up a simple two column design. */ + +/* Sass fornece os seguintes operadores: +, -, *, /, e %. estes podem +   ser úteis para calcular os valores diretamente no seu Sass arquivos em vez +   de usar valores que você já calculados pela mão. Abaixo está um exemplo +   de uma criação de um projeto simples de duas colunas. * / + +$content-area: 960px; +$main-content: 600px; +$sidebar-content: 300px; + +$main-size: $main-content / $content-area * 100%; +$sidebar-size: $sidebar-content / $content-area * 100%; +$gutter: 100% - ($main-size + $sidebar-size); + +body { + width: 100%; +} + +.main-content { + width: $main-size; +} + +.sidebar { + width: $sidebar-size; +} + +.gutter { + width: $gutter; +} + +/* Compiles to: */ + +body { + width: 100%; +} + +.main-content { + width: 62.5%; +} + +.sidebar { + width: 31.25%; +} + +.gutter { + width: 6.25%; +} + + +``` + + + +## SASS ou Sass? +Alguma vez você já se perguntou se Sass é um acrônimo ou não? Você provavelmente não tem, mas vou dizer-lhe de qualquer maneira. O nome do idioma é uma palavra, "Sass", e não uma sigla. +Porque as pessoas estavam constantemente a escrevê-lo como "SASS", o criador da linguagem de brincadeira chamou de "StyleSheets Sintaticamente Incríveis". + + +## Prática Sass +Se você quiser jogar com Sass em seu navegador, vá para [SassMeister](http://sassmeister.com/). +Você pode usar uma sintaxe, basta ir para as configurações e selecionar Sass ou SCSS. + + +## Compatibilidade + +Sass pode ser usado em qualquer projeto, desde que você tenha um programa para compilá-lo +em CSS. Você vai querer verificar se o CSS que você está usando é compatível +com os seus navegadores de destino. + +[QuirksMode CSS](http://www.quirksmode.org/css/) e [CanIUse](http://caniuse.com) são ótimos recursos para verificação de compatibilidade. + + +## Leitura +* [Official Documentation](http://sass-lang.com/documentation/file.SASS_REFERENCE.html) +* [The Sass Way](http://thesassway.com/) fornece tutoriais (iniciante avançados) e artigos. -- cgit v1.2.3 From 79008d76c9d6016bdb80d789a4ed0269105a7aab Mon Sep 17 00:00:00 2001 From: Chaitya Shah Date: Fri, 16 Oct 2015 20:49:00 -0400 Subject: Fix Spacing Inconsistency --- java.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/java.html.markdown b/java.html.markdown index 35ec57d8..2395ed0b 100644 --- a/java.html.markdown +++ b/java.html.markdown @@ -250,7 +250,7 @@ public class LearnJava { // If statements are c-like int j = 10; - if (j == 10){ + if (j == 10) { System.out.println("I get printed"); } else if (j > 10) { System.out.println("I don't"); -- cgit v1.2.3 From 9f822a0a25776f1c3d384da31970fa33301f3b3c Mon Sep 17 00:00:00 2001 From: Akshay Kalose Date: Fri, 16 Oct 2015 21:03:46 -0400 Subject: Add For Loop Label Breaking in Java --- java.html.markdown | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/java.html.markdown b/java.html.markdown index 35ec57d8..6aff5b6f 100644 --- a/java.html.markdown +++ b/java.html.markdown @@ -285,7 +285,18 @@ public class LearnJava { // Iterated 10 times, fooFor 0->9 } System.out.println("fooFor Value: " + fooFor); - + + // Nested For Loop Exit with Label + outer: + for (int i = 0; i < 10; i++) { + for (int j = 0; j < 10; j++) { + if (i == 5 && j ==5) { + break outer; + // breaks out of outer loop instead of only the inner one + } + } + } + // For Each Loop // The for loop is also able to iterate over arrays as well as objects // that implement the Iterable interface. -- cgit v1.2.3 From d04d93cf0383ecd871a395e819e82de6d720aacf Mon Sep 17 00:00:00 2001 From: Gloria Dwomoh Date: Sat, 17 Oct 2015 15:06:28 +0300 Subject: Update ocaml.html.markdown --- ocaml.html.markdown | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ocaml.html.markdown b/ocaml.html.markdown index 02435e4d..8faab297 100644 --- a/ocaml.html.markdown +++ b/ocaml.html.markdown @@ -196,7 +196,7 @@ let (~/) x = 1.0 /. x ;; ~/4.0 (* = 0.25 *) -(*** Built-in datastructures ***) +(*** Built-in data structures ***) (* Lists are enclosed in square brackets, items are separated by semicolons. *) @@ -341,10 +341,10 @@ let say x = say (Cat "Fluffy") ;; (* "Fluffy says meow". *) -(** Traversing datastructures with pattern matching **) +(** Traversing data structures with pattern matching **) (* Recursive types can be traversed with pattern matching easily. - Let's see how we can traverse a datastructure of the built-in list type. + Let's see how we can traverse a data structure of the built-in list type. Even though the built-in cons ("::") looks like an infix operator, it's actually a type constructor and can be matched like any other. *) let rec sum_list l = -- cgit v1.2.3