From c32682b053bad2602a8c910cc7e4106acaefade1 Mon Sep 17 00:00:00 2001 From: MDN Date: Fri, 18 Mar 2022 00:13:02 +0000 Subject: [CRON] sync translated content --- files/de/_redirects.txt | 1 + files/de/_wikihistory.json | 14 +-- .../web/api/window/devicemotion_event/index.html | 57 +++++++++++ files/de/web/api/window/ondevicemotion/index.html | 56 ----------- files/es/_redirects.txt | 3 +- files/es/_wikihistory.json | 2 +- .../styling_a_biography_page/index.html | 101 ++++++++++++++++++++ .../using_your_new_knowledge/index.html | 101 -------------------- files/fr/_redirects.txt | 1 + files/fr/_wikihistory.json | 2 +- .../first_steps/styling_a_biography_page/index.md | 100 ++++++++++++++++++++ .../first_steps/using_your_new_knowledge/index.md | 99 ------------------- files/ja/_redirects.txt | 6 ++ files/ja/_wikihistory.json | 54 +++++------ .../web/api/mediastreamtrack/mute_event/index.html | 58 ++++++++++++ .../api/mediastreamtrack/unmute_event/index.html | 54 +++++++++++ .../web/api/window/devicemotion_event/index.html | 60 ++++++++++++ .../styling_a_biography_page/index.html | 101 ++++++++++++++++++++ .../using_your_new_knowledge/index.html | 100 -------------------- .../api/mediastreamtrack/ended_event/index.html | 58 ++++++++++++ .../ja/web/api/mediastreamtrack/onended/index.html | 57 ----------- .../ja/web/api/mediastreamtrack/onmute/index.html | 57 ----------- .../mediastreamtrack/onoverconstrained/index.html | 55 ----------- .../web/api/mediastreamtrack/onunmute/index.html | 53 ----------- .../overconstrained_event/index.html | 56 +++++++++++ files/ja/web/api/window/ondevicemotion/index.html | 59 ------------ files/ko/_redirects.txt | 1 + files/ko/_wikihistory.json | 2 +- .../styling_a_biography_page/index.html | 97 +++++++++++++++++++ .../using_your_new_knowledge/index.html | 96 ------------------- files/pt-br/_redirects.txt | 1 + files/pt-br/_wikihistory.json | 2 +- .../styling_a_biography_page/index.html | 97 +++++++++++++++++++ .../using_your_new_knowledge/index.html | 96 ------------------- files/ru/_redirects.txt | 2 + files/ru/_wikihistory.json | 14 +-- .../api/window/deviceorientation_event/index.html | 39 ++++++++ .../styling_a_biography_page/index.html | 105 +++++++++++++++++++++ .../using_your_new_knowledge/index.html | 104 -------------------- .../web/api/window/ondeviceorientation/index.html | 38 -------- files/zh-cn/_redirects.txt | 4 + files/zh-cn/_wikihistory.json | 40 ++++---- .../api/window/deviceorientation_event/index.html | 48 ++++++++++ .../styling_a_biography_page/index.html | 105 +++++++++++++++++++++ .../using_your_new_knowledge/index.html | 104 -------------------- .../web/api/window/devicemotion_event/index.html | 58 ++++++++++++ .../deviceorientationabsolute_event/index.html | 36 +++++++ .../zh-cn/web/api/window/ondevicemotion/index.html | 57 ----------- .../web/api/window/ondeviceorientation/index.html | 47 --------- .../window/ondeviceorientationabsolute/index.html | 35 ------- 50 files changed, 1313 insertions(+), 1280 deletions(-) create mode 100644 files/de/web/api/window/devicemotion_event/index.html delete mode 100644 files/de/web/api/window/ondevicemotion/index.html create mode 100644 files/es/learn/css/first_steps/styling_a_biography_page/index.html delete mode 100644 files/es/learn/css/first_steps/using_your_new_knowledge/index.html create mode 100644 files/fr/learn/css/first_steps/styling_a_biography_page/index.md delete mode 100644 files/fr/learn/css/first_steps/using_your_new_knowledge/index.md create mode 100644 files/ja/conflicting/web/api/mediastreamtrack/mute_event/index.html create mode 100644 files/ja/conflicting/web/api/mediastreamtrack/unmute_event/index.html create mode 100644 files/ja/conflicting/web/api/window/devicemotion_event/index.html create mode 100644 files/ja/learn/css/first_steps/styling_a_biography_page/index.html delete mode 100644 files/ja/learn/css/first_steps/using_your_new_knowledge/index.html create mode 100644 files/ja/web/api/mediastreamtrack/ended_event/index.html delete mode 100644 files/ja/web/api/mediastreamtrack/onended/index.html delete mode 100644 files/ja/web/api/mediastreamtrack/onmute/index.html delete mode 100644 files/ja/web/api/mediastreamtrack/onoverconstrained/index.html delete mode 100644 files/ja/web/api/mediastreamtrack/onunmute/index.html create mode 100644 files/ja/web/api/mediastreamtrack/overconstrained_event/index.html delete mode 100644 files/ja/web/api/window/ondevicemotion/index.html create mode 100644 files/ko/learn/css/first_steps/styling_a_biography_page/index.html delete mode 100644 files/ko/learn/css/first_steps/using_your_new_knowledge/index.html create mode 100644 files/pt-br/learn/css/first_steps/styling_a_biography_page/index.html delete mode 100644 files/pt-br/learn/css/first_steps/using_your_new_knowledge/index.html create mode 100644 files/ru/conflicting/web/api/window/deviceorientation_event/index.html create mode 100644 files/ru/learn/css/first_steps/styling_a_biography_page/index.html delete mode 100644 files/ru/learn/css/first_steps/using_your_new_knowledge/index.html delete mode 100644 files/ru/web/api/window/ondeviceorientation/index.html create mode 100644 files/zh-cn/conflicting/web/api/window/deviceorientation_event/index.html create mode 100644 files/zh-cn/learn/css/first_steps/styling_a_biography_page/index.html delete mode 100644 files/zh-cn/learn/css/first_steps/using_your_new_knowledge/index.html create mode 100644 files/zh-cn/web/api/window/devicemotion_event/index.html create mode 100644 files/zh-cn/web/api/window/deviceorientationabsolute_event/index.html delete mode 100644 files/zh-cn/web/api/window/ondevicemotion/index.html delete mode 100644 files/zh-cn/web/api/window/ondeviceorientation/index.html delete mode 100644 files/zh-cn/web/api/window/ondeviceorientationabsolute/index.html diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt index 0bdaf0f0ef..6bc5c87499 100644 --- a/files/de/_redirects.txt +++ b/files/de/_redirects.txt @@ -453,6 +453,7 @@ /de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden /de/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL /de/docs/Web/API/WebSocket/onclose /de/docs/Web/API/WebSocket/close_event /de/docs/Web/API/Window.alert /de/docs/Web/API/Window/alert +/de/docs/Web/API/Window/ondevicemotion /de/docs/Web/API/Window/devicemotion_event /de/docs/Web/API/Window/performance /de/docs/Web/API/performance_property /de/docs/Web/API/Window/setTimeout /de/docs/Web/API/setTimeout /de/docs/Web/API/WindowBase64 /de/docs/Web/API/WindowOrWorkerGlobalScope diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json index 0303027ece..0cee929ea0 100644 --- a/files/de/_wikihistory.json +++ b/files/de/_wikihistory.json @@ -4018,6 +4018,13 @@ "AndreasWebdev" ] }, + "Web/API/Window/devicemotion_event": { + "modified": "2019-03-18T21:15:10.920Z", + "contributors": [ + "clepsydra", + "m9898" + ] + }, "Web/API/Window/dump": { "modified": "2019-03-23T23:34:35.263Z", "contributors": [ @@ -4068,13 +4075,6 @@ "AdamNiezielinski" ] }, - "Web/API/Window/ondevicemotion": { - "modified": "2019-03-18T21:15:10.920Z", - "contributors": [ - "clepsydra", - "m9898" - ] - }, "Web/API/Window/openDialog": { "modified": "2020-11-15T17:34:16.679Z", "contributors": [ diff --git a/files/de/web/api/window/devicemotion_event/index.html b/files/de/web/api/window/devicemotion_event/index.html new file mode 100644 index 0000000000..8eccaab765 --- /dev/null +++ b/files/de/web/api/window/devicemotion_event/index.html @@ -0,0 +1,57 @@ +--- +title: Window.ondevicemotion +slug: Web/API/Window/devicemotion_event +tags: + - API + - Ausrichtung + - Beschleunigungssensor + - Bewegung + - Eigenschaft + - Firefox OS + - Geräteausrichtung +translation_of: Web/API/Window/ondevicemotion +original_slug: Web/API/Window/ondevicemotion +--- +

{{ ApiRef() }}

+ +

Zusammenfassung

+ +

Ein Eventhandler für das {{ event("devicemotion")}} Event, welches an das Fenster gesendet wird.

+ +

Syntax

+ +
window.ondevicemotion = funcRef;
+
+ +

Die Funktion funcRef ist eine Referenz für eine Funktion. Diese Funktion erhält ein {{ domxref("DeviceMotionEvent") }} Objekt, welches die aufgetretene Bewegung beschreibt.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Initial specification.
+ +

Browserkompatibilität

+ +

{{ page("/en-US/docs/Web/API/DeviceMotionEvent","Browser_compatibility") }}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/window/ondevicemotion/index.html b/files/de/web/api/window/ondevicemotion/index.html deleted file mode 100644 index 0e39638929..0000000000 --- a/files/de/web/api/window/ondevicemotion/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Window.ondevicemotion -slug: Web/API/Window/ondevicemotion -tags: - - API - - Ausrichtung - - Beschleunigungssensor - - Bewegung - - Eigenschaft - - Firefox OS - - Geräteausrichtung -translation_of: Web/API/Window/ondevicemotion ---- -

{{ ApiRef() }}

- -

Zusammenfassung

- -

Ein Eventhandler für das {{ event("devicemotion")}} Event, welches an das Fenster gesendet wird.

- -

Syntax

- -
window.ondevicemotion = funcRef;
-
- -

Die Funktion funcRef ist eine Referenz für eine Funktion. Diese Funktion erhält ein {{ domxref("DeviceMotionEvent") }} Objekt, welches die aufgetretene Bewegung beschreibt.

- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Initial specification.
- -

Browserkompatibilität

- -

{{ page("/en-US/docs/Web/API/DeviceMotionEvent","Browser_compatibility") }}

- -

Siehe auch

- - diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 7465e846fa..36353e53fe 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1114,7 +1114,8 @@ /es/docs/Learn/CSS/First_steps/Como_funciona_CSS /es/docs/Learn/CSS/First_steps/How_CSS_works /es/docs/Learn/CSS/First_steps/Como_se_estructura_CSS /es/docs/Learn/CSS/First_steps/How_CSS_is_structured /es/docs/Learn/CSS/First_steps/Qué_es_CSS /es/docs/Learn/CSS/First_steps/What_is_CSS -/es/docs/Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento /es/docs/Learn/CSS/First_steps/Using_your_new_knowledge +/es/docs/Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento /es/docs/Learn/CSS/First_steps/Styling_a_biography_page +/es/docs/Learn/CSS/First_steps/Using_your_new_knowledge /es/docs/Learn/CSS/First_steps/Styling_a_biography_page /es/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps /es/docs/Learn/CSS/Introduction_to_CSS/Cascada_y_herencia /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /es/docs/Learn/CSS/Introduction_to_CSS/Combinaciones_y_selectores_multiples /en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 7cbcbe886f..9767ca6830 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -2099,7 +2099,7 @@ "editorUOC" ] }, - "Learn/CSS/First_steps/Using_your_new_knowledge": { + "Learn/CSS/First_steps/Styling_a_biography_page": { "modified": "2020-08-23T19:45:30.596Z", "contributors": [ "capitanzealot", diff --git a/files/es/learn/css/first_steps/styling_a_biography_page/index.html b/files/es/learn/css/first_steps/styling_a_biography_page/index.html new file mode 100644 index 0000000000..b5a95600bd --- /dev/null +++ b/files/es/learn/css/first_steps/styling_a_biography_page/index.html @@ -0,0 +1,101 @@ +--- +title: Usa tu nuevo conocimiento +slug: Learn/CSS/First_steps/Styling_a_biography_page +tags: + - Aprendizaje + - CSS + - Principiante +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +original_slug: Learn/CSS/First_steps/Using_your_new_knowledge +--- +

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

Con las cosas que has aprendido en las últimas lecciones, puedes darle formato a documentos de texto simple utilizando CSS para agregar tu propio estilo a ellos. Esta evaluación te da una posibilidad de hacer eso.

+ + + + + + + + + + + + +
Prerrequisitos:Antes de intentar esta evaluación, deberías haber trabajado a través del módulo de CSS básico, y también comprender HTML básico (estudia la Introducción a HTML).
Objetivo:Utilizar algún CSS y probar conocimiento recién adquirido.
+ +

Punto de partida

+ +

Puedes trabajar en el editor en vivo más abajo, o puedes descargar el punto de partida para trabajar con tu propio editor. Esta es una página HTML, con el inicio del CSS en el <head> del documento. Si prefieres, puedes mover este CSS a un archivo separado cuando crees el ejemplo en tu computador. Alternativamente, puedes usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.

+ +
+

Nota: Si te atascas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

+
+ +

Trabajando con CSS

+ +

Los siguientes ejemplos muestran una biografía, que ha sido estilizada usando CSS. Las propiedades CSS que se han utilizado son las siguientes - cada una enlaza a su página de propiedades en MDN, que te entregará más ejemplos de su uso:

+ + + +

Se ha usado una mezcla de selectores, elementos de estilo como <h1> y <h2>, y también una clase para el título del trabajo.

+ +

Usa CSS para cambiar el aspecto de esta biografía, cambiando los valores de las propiedades iniciales.

+ +
    +
  1. Coloca en rosado el nivel <h1>, usando el color CSS hotpink.
    2. +
  2. Da al encabezado un {{cssxref("border-bottom")}} de 10px con puntos (dotted), que use el color CSS purple.
    3. +
  3. Coloca en cursiva el <h2>.
    4. +
  4. Al ul utilizado para los detalles de contacto un  {{cssxref("background-color")}}  #eeeeee, y un {{cssxref("border")}} de 5px solid purple. Usa algo de {{cssxref("padding")}} para empujar el texto lejos del borde.
    5. +
  5. Cambia los enlaces a verde cuando pase el cursor sobre ellos.
    6. +
+ +

Deberías conseguir algo parecido a esta página:

+ +

Screenshot of how the example should look after completing the assessment.

+ +

Posteriormente intenta buscar algunas propiedades no mencionadas en esta página en la referencia de CSS de MDN y ¡arriésgate!.

+ +

Recuerda que no existen respuestas equivocadas acá - En esta etapa en tu aprendizaje puedes tener un poco de diversión.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

+ +

Evaluación o ayuda adicional

+ +

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

+ +
    +
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch.
    2. +
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: +
      +
    • Un título descriptivo como "Requiero evaluacion para Primeros pasos en CSS".
      • +
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • +
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • +
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • +
    +
    3. +
+ +

¿Qué sigue?

+ +

Felicitaciones por completar este primer modulo!. Deberías tener un buen entendimiento general de CSS, y ser capaz de comprender bastante de los que está sucediendo en una hoja de estilo. En el módulo siguiente, bloques de construccion CSS, revisaremos en profundidad algunas áreas clave.

+ +

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

En este módulo

+ +
    +
  1. ¿Qué es CSS?
    2. +
  2. Empezando con CSS
    3. +
  3. Cómo se estructura el CSS
    4. +
  4. Cómo funciona CSS
    5. +
  5. Usa tu nuevo conocimiento
    6. +
diff --git a/files/es/learn/css/first_steps/using_your_new_knowledge/index.html b/files/es/learn/css/first_steps/using_your_new_knowledge/index.html deleted file mode 100644 index 927a5798b8..0000000000 --- a/files/es/learn/css/first_steps/using_your_new_knowledge/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Usa tu nuevo conocimiento -slug: Learn/CSS/First_steps/Using_your_new_knowledge -tags: - - Aprendizaje - - CSS - - Principiante -translation_of: Learn/CSS/First_steps/Using_your_new_knowledge -original_slug: Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento ---- -

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

Con las cosas que has aprendido en las últimas lecciones, puedes darle formato a documentos de texto simple utilizando CSS para agregar tu propio estilo a ellos. Esta evaluación te da una posibilidad de hacer eso.

- - - - - - - - - - - - -
Prerrequisitos:Antes de intentar esta evaluación, deberías haber trabajado a través del módulo de CSS básico, y también comprender HTML básico (estudia la Introducción a HTML).
Objetivo:Utilizar algún CSS y probar conocimiento recién adquirido.
- -

Punto de partida

- -

Puedes trabajar en el editor en vivo más abajo, o puedes descargar el punto de partida para trabajar con tu propio editor. Esta es una página HTML, con el inicio del CSS en el <head> del documento. Si prefieres, puedes mover este CSS a un archivo separado cuando crees el ejemplo en tu computador. Alternativamente, puedes usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.

- -
-

Nota: Si te atascas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

-
- -

Trabajando con CSS

- -

Los siguientes ejemplos muestran una biografía, que ha sido estilizada usando CSS. Las propiedades CSS que se han utilizado son las siguientes - cada una enlaza a su página de propiedades en MDN, que te entregará más ejemplos de su uso:

- - - -

Se ha usado una mezcla de selectores, elementos de estilo como <h1> y <h2>, y también una clase para el título del trabajo.

- -

Usa CSS para cambiar el aspecto de esta biografía, cambiando los valores de las propiedades iniciales.

- -
    -
  1. Coloca en rosado el nivel <h1>, usando el color CSS hotpink.
    2. -
  2. Da al encabezado un {{cssxref("border-bottom")}} de 10px con puntos (dotted), que use el color CSS purple.
    3. -
  3. Coloca en cursiva el <h2>.
    4. -
  4. Al ul utilizado para los detalles de contacto un  {{cssxref("background-color")}}  #eeeeee, y un {{cssxref("border")}} de 5px solid purple. Usa algo de {{cssxref("padding")}} para empujar el texto lejos del borde.
    5. -
  5. Cambia los enlaces a verde cuando pase el cursor sobre ellos.
    6. -
- -

Deberías conseguir algo parecido a esta página:

- -

Screenshot of how the example should look after completing the assessment.

- -

Posteriormente intenta buscar algunas propiedades no mencionadas en esta página en la referencia de CSS de MDN y ¡arriésgate!.

- -

Recuerda que no existen respuestas equivocadas acá - En esta etapa en tu aprendizaje puedes tener un poco de diversión.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

- -

Evaluación o ayuda adicional

- -

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

- -
    -
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch.
    2. -
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: -
      -
    • Un título descriptivo como "Requiero evaluacion para Primeros pasos en CSS".
      • -
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • -
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • -
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • -
    -
    3. -
- -

¿Qué sigue?

- -

Felicitaciones por completar este primer modulo!. Deberías tener un buen entendimiento general de CSS, y ser capaz de comprender bastante de los que está sucediendo en una hoja de estilo. En el módulo siguiente, bloques de construccion CSS, revisaremos en profundidad algunas áreas clave.

- -

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

En este módulo

- -
    -
  1. ¿Qué es CSS?
    2. -
  2. Empezando con CSS
    3. -
  3. Cómo se estructura el CSS
    4. -
  4. Cómo funciona CSS
    5. -
  5. Usa tu nuevo conocimiento
    6. -
diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index a8bf44313e..8b9a1db89b 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -2997,6 +2997,7 @@ /fr/docs/Le_principe_de_fermeture_en_JavaScript:Résolution_d'identifiants,_contextes_d'exécution_et_visibilité_des_variables /fr/docs/Web/JavaScript/Closures /fr/docs/Le_principe_de_fermeture_en_JavaScript:Utilisation_des_fermetures /fr/docs/Web/JavaScript/Closures /fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS /fr/docs/Learn/CSS/First_steps/What_is_CSS +/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge /fr/docs/Learn/CSS/First_steps/Styling_a_biography_page /fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens /fr/docs/Learn/CSS/Styling_text/Styling_links /fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte /fr/docs/Learn/CSS/Styling_text/Fundamentals /fr/docs/Learn/Index /fr/docs/conflicting/Learn diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index 2f7310066a..fe0a8da655 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -3950,7 +3950,7 @@ "smeden-lod" ] }, - "Learn/CSS/First_steps/Using_your_new_knowledge": { + "Learn/CSS/First_steps/Styling_a_biography_page": { "modified": "2020-07-16T22:28:03.815Z", "contributors": [ "SphinxKnight", diff --git a/files/fr/learn/css/first_steps/styling_a_biography_page/index.md b/files/fr/learn/css/first_steps/styling_a_biography_page/index.md new file mode 100644 index 0000000000..808c1ee711 --- /dev/null +++ b/files/fr/learn/css/first_steps/styling_a_biography_page/index.md @@ -0,0 +1,100 @@ +--- +title: Mettre en œuvre vos connaissances +slug: Learn/CSS/First_steps/Styling_a_biography_page +tags: + - Apprendre + - CSS + - Débutant + - Playground +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +original_slug: Learn/CSS/First_steps/Using_your_new_knowledge +--- +{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} + +Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. + + + + + + + + + + + + +
Prérequis : + Avant de vous soumettre à cette évaluation, vous avez suivi le module + sur les bases de CSS ; vous maîtrisez par ailleurs les bases de HTML + (cf. Introduction à HTML). +
Objectif :Tester vos connaissances en mettant à l'œuvre CSS.
+ +## Point de départ + +Vous pouvez travailler dans l'éditeur ci-dessous ou [télécharger le point de départ](https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/) pour travailler en local sur votre machine, avec votre propre éditeur de code. Ce point de départ est une page HTML avec le CSS interne écrit dans la section ``. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/) pour travailler sur les tâches proposées. + +> **Note :** ne restez pas coincé, appelez à l'aide — voir la section [Evaluation et comment obtenir de l'aide](#evaluation) au bas de cette page. + +## Travailler avec CSS + +L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie stylée avec CSS. Les propriétés utilisées sont les suivantes — chacune renvoie vers sa page MDN pour plus d'exemples d'usages : + +- {{cssxref("font-family")}} +- {{cssxref("color")}} +- {{cssxref("border-bottom")}} +- {{cssxref("font-weight")}} +- {{cssxref("font-size")}} +- {{cssxref("text-decoration")}} + +J'ai utilisé un mélange de sélecteurs, d'éléments HTML comme `h1` et `h2` ; j'ai aussi créé une classe `job-title`. + +Utilisez CSS pour changer l'apparence de cette biographie en modifiant les valeurs des propriétés CSS utilisées : + +1. Affichez le titre de niveau 1 en `hotpink` ; +2. Donnez au titre un {{cssxref("border-bottom")}} de `10px dotted` de couleur `purple` ; +3. Affichez le titre de niveau 2 en italique ; +4. Colorez la `ul` des détails de contacts en {{cssxref("background-color")}} `#eeeeee`, avec un {{cssxref("border")}} de `5px solid purple`. Utilisez la propriété {{cssxref("padding")}} pour éloigner le contenu du bord. +5. Faites que les liens apparaissent en `green` lors d'un survol du curseur. + +Vous devriez obtenir un rendu qui ressemble à cela : + +![Screenshot of how the example should look after completing the assessment.](learn-css-basics-assessment.png) + +Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la [référence CSS sur MDN](/fr/docs/Web/CSS/Reference) ! + +À ce stade, il n'y a pas de réponse incorrecte — autorisez vous un peu de fantaisie. + +{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} + +## Evaluation ou compléments d'information + +Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide : + +1. Publiez votre code dans un éditeur en ligne tel [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). +2. Si vous êtes à l'aise en anglais : + + 1. Dans le [forum MDN Discourse](https://discourse.mozilla.org/c/mdn), écrivez un billet pour évaluation et/ou demande d'aide. Ajouter le tag "learning" à votre post pour que nous puissions le trouver plus facilement. Votre post devrait contenir : + + - Un titre parlant comme "Assessment wanted for CSS First Steps". + - Des détails sur ce que vous voudriez que l'on fasse — par exemple, ce que vous avez déjà essayé si vous êtes coincé et demandez de l'aide. + - Un lien vers l'exemple dans l'éditeur en ligne, sur lequel vous demandez une évaluation ou de l'aide : voilà une bonne pratique — il n'est pas commode d'aider quelqu'un coincé sur son code quand on ne peut pas voir ce code... + - Un lien vers cette page d'évaluation afin que nous puissions voir la question sur laquelle vous demandez de l'aide. + +3. Sinon, n'hésitez pas à contacter @MDNfr sur Twitter. + +## La suite ? + +Bravo, vous avez suivi ce cours jusqu'au bout. Avec votre connaissance de CSS, vous comprenez maintenant le fonctionnement d'une feuille de style. Dans le prochain cours, [construire des blocs CSS](/fr/docs/Apprendre/CSS/Building_blocks), nous approfondirons de nombreux points. + +{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Apprendre/CSS/Premiers_pas")}} + +## Dans ce cours + +1. [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) +2. [Commencer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [CSS, comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Mettez en œuvre vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md deleted file mode 100644 index c24d68d80b..0000000000 --- a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Mettre en œuvre vos connaissances -slug: Learn/CSS/First_steps/Using_your_new_knowledge -tags: - - Apprendre - - CSS - - Débutant - - Playground -translation_of: Learn/CSS/First_steps/Using_your_new_knowledge ---- -{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} - -Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. - - - - - - - - - - - - -
Prérequis : - Avant de vous soumettre à cette évaluation, vous avez suivi le module - sur les bases de CSS ; vous maîtrisez par ailleurs les bases de HTML - (cf. Introduction à HTML). -
Objectif :Tester vos connaissances en mettant à l'œuvre CSS.
- -## Point de départ - -Vous pouvez travailler dans l'éditeur ci-dessous ou [télécharger le point de départ](https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/) pour travailler en local sur votre machine, avec votre propre éditeur de code. Ce point de départ est une page HTML avec le CSS interne écrit dans la section ``. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/) pour travailler sur les tâches proposées. - -> **Note :** ne restez pas coincé, appelez à l'aide — voir la section [Evaluation et comment obtenir de l'aide](#evaluation) au bas de cette page. - -## Travailler avec CSS - -L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie stylée avec CSS. Les propriétés utilisées sont les suivantes — chacune renvoie vers sa page MDN pour plus d'exemples d'usages : - -- {{cssxref("font-family")}} -- {{cssxref("color")}} -- {{cssxref("border-bottom")}} -- {{cssxref("font-weight")}} -- {{cssxref("font-size")}} -- {{cssxref("text-decoration")}} - -J'ai utilisé un mélange de sélecteurs, d'éléments HTML comme `h1` et `h2` ; j'ai aussi créé une classe `job-title`. - -Utilisez CSS pour changer l'apparence de cette biographie en modifiant les valeurs des propriétés CSS utilisées : - -1. Affichez le titre de niveau 1 en `hotpink` ; -2. Donnez au titre un {{cssxref("border-bottom")}} de `10px dotted` de couleur `purple` ; -3. Affichez le titre de niveau 2 en italique ; -4. Colorez la `ul` des détails de contacts en {{cssxref("background-color")}} `#eeeeee`, avec un {{cssxref("border")}} de `5px solid purple`. Utilisez la propriété {{cssxref("padding")}} pour éloigner le contenu du bord. -5. Faites que les liens apparaissent en `green` lors d'un survol du curseur. - -Vous devriez obtenir un rendu qui ressemble à cela : - -![Screenshot of how the example should look after completing the assessment.](learn-css-basics-assessment.png) - -Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la [référence CSS sur MDN](/fr/docs/Web/CSS/Reference) ! - -À ce stade, il n'y a pas de réponse incorrecte — autorisez vous un peu de fantaisie. - -{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} - -## Evaluation ou compléments d'information - -Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide : - -1. Publiez votre code dans un éditeur en ligne tel [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). -2. Si vous êtes à l'aise en anglais : - - 1. Dans le [forum MDN Discourse](https://discourse.mozilla.org/c/mdn), écrivez un billet pour évaluation et/ou demande d'aide. Ajouter le tag "learning" à votre post pour que nous puissions le trouver plus facilement. Votre post devrait contenir : - - - Un titre parlant comme "Assessment wanted for CSS First Steps". - - Des détails sur ce que vous voudriez que l'on fasse — par exemple, ce que vous avez déjà essayé si vous êtes coincé et demandez de l'aide. - - Un lien vers l'exemple dans l'éditeur en ligne, sur lequel vous demandez une évaluation ou de l'aide : voilà une bonne pratique — il n'est pas commode d'aider quelqu'un coincé sur son code quand on ne peut pas voir ce code... - - Un lien vers cette page d'évaluation afin que nous puissions voir la question sur laquelle vous demandez de l'aide. - -3. Sinon, n'hésitez pas à contacter @MDNfr sur Twitter. - -## La suite ? - -Bravo, vous avez suivi ce cours jusqu'au bout. Avec votre connaissance de CSS, vous comprenez maintenant le fonctionnement d'une feuille de style. Dans le prochain cours, [construire des blocs CSS](/fr/docs/Apprendre/CSS/Building_blocks), nous approfondirons de nombreux points. - -{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Apprendre/CSS/Premiers_pas")}} - -## Dans ce cours - -1. [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) -2. [Commencer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) -3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) -4. [CSS, comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) -5. [Mettez en œuvre vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 2af45584f1..59f25a6bab 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -2633,6 +2633,7 @@ /ja/docs/JavaScript_技術概説 /ja/docs/Web/JavaScript/JavaScript_technologies_overview /ja/docs/Key-navigable_custom_DHTML_widgets /ja/docs/orphaned/Key-navigable_custom_DHTML_widgets /ja/docs/Learn/CSS/Building_blocks/セレクタ /ja/docs/Learn/CSS/Building_blocks/Selectors +/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge /ja/docs/Learn/CSS/First_steps/Styling_a_biography_page /ja/docs/Learn/CSS/Introduction_to_CSS /ja/docs/Learn/CSS/First_steps /ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors /ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors /ja/docs/Learn/CSS/Introduction_to_CSS/Box_model /ja/docs/Learn/CSS/Building_blocks/The_box_model @@ -3199,6 +3200,10 @@ /ja/docs/Web/API/MediaRecorder_API /ja/docs/Web/API/MediaStream_Recording_API /ja/docs/Web/API/MediaStream/onaddtrack /ja/docs/Web/API/MediaStream/addtrack_event /ja/docs/Web/API/MediaStreamConstraints /ja/docs/conflicting/Web/API/MediaDevices/getUserMedia +/ja/docs/Web/API/MediaStreamTrack/onended /ja/docs/Web/API/MediaStreamTrack/ended_event +/ja/docs/Web/API/MediaStreamTrack/onmute /ja/docs/conflicting/Web/API/MediaStreamTrack/mute_event +/ja/docs/Web/API/MediaStreamTrack/onoverconstrained /ja/docs/Web/API/MediaStreamTrack/overconstrained_event +/ja/docs/Web/API/MediaStreamTrack/onunmute /ja/docs/conflicting/Web/API/MediaStreamTrack/unmute_event /ja/docs/Web/API/MouseEvent/which /ja/docs/Web/API/UIEvent/which /ja/docs/Web/API/Navigator.getUserMedia /ja/docs/Web/API/Navigator/getUserMedia /ja/docs/Web/API/Navigator/Online_and_offline_events /ja/docs/conflicting/Web/API/Navigator/onLine @@ -3364,6 +3369,7 @@ /ja/docs/Web/API/Window/onblur /ja/docs/Web/API/GlobalEventHandlers/onblur /ja/docs/Web/API/Window/onchange /ja/docs/Web/API/GlobalEventHandlers/onchange /ja/docs/Web/API/Window/onclick /ja/docs/Web/API/GlobalEventHandlers/onclick +/ja/docs/Web/API/Window/ondevicemotion /ja/docs/conflicting/Web/API/Window/devicemotion_event /ja/docs/Web/API/Window/ondeviceproximity /ja/docs/orphaned/Web/API/Window/ondeviceproximity /ja/docs/Web/API/Window/onfocus /ja/docs/Web/API/GlobalEventHandlers/onfocus /ja/docs/Web/API/Window/ongamepadconnected /ja/docs/conflicting/Web/API/Window/gamepadconnected_event diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 7c0aa15437..3062576ebe 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -4231,7 +4231,7 @@ "snakada" ] }, - "Learn/CSS/First_steps/Using_your_new_knowledge": { + "Learn/CSS/First_steps/Styling_a_biography_page": { "modified": "2020-07-16T22:28:04.164Z", "contributors": [ "Uemmra3", @@ -18215,6 +18215,12 @@ "e53e04ac" ] }, + "Web/API/MediaStreamTrack/ended_event": { + "modified": "2019-03-18T21:45:14.196Z", + "contributors": [ + "e53e04ac" + ] + }, "Web/API/MediaStreamTrack/id": { "modified": "2020-10-15T22:00:11.011Z", "contributors": [ @@ -18247,31 +18253,12 @@ "e53e04ac" ] }, - "Web/API/MediaStreamTrack/onended": { - "modified": "2019-03-18T21:45:14.196Z", - "contributors": [ - "e53e04ac" - ] - }, - "Web/API/MediaStreamTrack/onmute": { - "modified": "2020-10-15T22:00:10.968Z", - "contributors": [ - "YujiSoftware", - "e53e04ac" - ] - }, - "Web/API/MediaStreamTrack/onoverconstrained": { + "Web/API/MediaStreamTrack/overconstrained_event": { "modified": "2019-03-18T21:45:17.038Z", "contributors": [ "e53e04ac" ] }, - "Web/API/MediaStreamTrack/onunmute": { - "modified": "2019-03-18T21:45:15.060Z", - "contributors": [ - "e53e04ac" - ] - }, "Web/API/MediaStreamTrack/readyState": { "modified": "2019-03-18T21:44:58.979Z", "contributors": [ @@ -24377,12 +24364,6 @@ "Potappo" ] }, - "Web/API/Window/ondevicemotion": { - "modified": "2020-10-15T22:28:07.002Z", - "contributors": [ - "mfuji09" - ] - }, "Web/API/Window/open": { "modified": "2020-10-25T23:26:28.860Z", "contributors": [ @@ -48327,6 +48308,19 @@ "Wind1808" ] }, + "conflicting/Web/API/MediaStreamTrack/mute_event": { + "modified": "2020-10-15T22:00:10.968Z", + "contributors": [ + "YujiSoftware", + "e53e04ac" + ] + }, + "conflicting/Web/API/MediaStreamTrack/unmute_event": { + "modified": "2019-03-18T21:45:15.060Z", + "contributors": [ + "e53e04ac" + ] + }, "conflicting/Web/API/Navigator/onLine": { "modified": "2019-03-23T23:53:08.504Z", "contributors": [ @@ -48429,6 +48423,12 @@ "YuichiNukiyama" ] }, + "conflicting/Web/API/Window/devicemotion_event": { + "modified": "2020-10-15T22:28:07.002Z", + "contributors": [ + "mfuji09" + ] + }, "conflicting/Web/API/Window/gamepadconnected_event": { "modified": "2020-10-15T22:12:53.034Z", "contributors": [ diff --git a/files/ja/conflicting/web/api/mediastreamtrack/mute_event/index.html b/files/ja/conflicting/web/api/mediastreamtrack/mute_event/index.html new file mode 100644 index 0000000000..42f6afd740 --- /dev/null +++ b/files/ja/conflicting/web/api/mediastreamtrack/mute_event/index.html @@ -0,0 +1,58 @@ +--- +title: MediaStreamTrack.onmute +slug: conflicting/Web/API/MediaStreamTrack/mute_event +translation_of: Web/API/MediaStreamTrack/onmute +original_slug: Web/API/MediaStreamTrack/onmute +--- +

{{ APIRef("Media Capture and Streams") }}

+ +

MediaStreamTrack.onmuteイベントハンドラは{{event("mute")}}イベントを受け取った時に呼び出されるプロパティです。このイベントは、トラックが一時的にデータを提供することができない時に発生します。

+ +

文法

+ +
track.onmute = function;
+
+ +

値

+ +

{{event("mute")}}イベントが発生した時の実行する処理の関数をEventHandlerとして設定します。このイベントハンドラーの関数は1つのパラメータ持ちます。このパラメータはイベントオブジェクトであり、単純なEventのオブジェクトです。

+ +

例

+ +

この例では、「ミュートされたスピーカー」絵文字を要素のコンテンツHTMLに設定するため、ミュートハンドラーが確立されています。

+ +
myTrack.onmute = function(evt) {
+  playStateIcon.innerHTML = "&#1F507;";
+};
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状況コメント
{{ SpecName('Media Capture', '#widl-MediaStreamTrack-onmute', 'MediaStreamTrack.onmute') }}{{ Spec2('Media Capture') }}初版
+ +

ブラウザ互換性

+ + + +

{{Compat("api.MediaStreamTrack.onmute")}}

+ +

関連項目

+ + diff --git a/files/ja/conflicting/web/api/mediastreamtrack/unmute_event/index.html b/files/ja/conflicting/web/api/mediastreamtrack/unmute_event/index.html new file mode 100644 index 0000000000..9735d8bf34 --- /dev/null +++ b/files/ja/conflicting/web/api/mediastreamtrack/unmute_event/index.html @@ -0,0 +1,54 @@ +--- +title: MediaStreamTrack.onunmute +slug: conflicting/Web/API/MediaStreamTrack/unmute_event +translation_of: Web/API/MediaStreamTrack/onunmute +original_slug: Web/API/MediaStreamTrack/onunmute +--- +

{{ APIRef("Media Capture and Streams") }}

+ +

MediaStreamTrack.onunmuteイベントハンドラは{{event("unmute")}}イベントを受け取った時に呼び出されるプロパティです。このイベントは、トラックが再びデータを送信できるようになった時に発生します。

+ +

文法

+ +
track.onunmute = function;
+
+ +

値

+ + + +

例

+ +
dc.onunmute = function(ev) { alert("unmute event detected!"); };
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状況コメント
{{ SpecName('Media Capture', '#widl-MediaStreamTrack-onunmute', 'MediaStreamTrack.onunmute') }}{{ Spec2('Media Capture') }}初版
+ +

ブラウザ互換性

+ +

{{Compat("api.MediaStreamTrack.onunmute")}}

+ +

関連項目

+ + diff --git a/files/ja/conflicting/web/api/window/devicemotion_event/index.html b/files/ja/conflicting/web/api/window/devicemotion_event/index.html new file mode 100644 index 0000000000..7c0b782d06 --- /dev/null +++ b/files/ja/conflicting/web/api/window/devicemotion_event/index.html @@ -0,0 +1,60 @@ +--- +title: Window.ondevicemotion +slug: conflicting/Web/API/Window/devicemotion_event +tags: + - API + - Device Orientation + - Event Handler + - Mobile + - Motion + - Orientation + - Property + - Reference + - イベントハンドラー + - プロパティ + - モバイル + - 向き + - 端末の向き +translation_of: Web/API/Window/ondevicemotion +original_slug: Web/API/Window/ondevicemotion +--- +
{{APIRef("Device Orientation Events")}}
+ +

Windows に対して送信される {{domxref("Window/devicemotion_event", "devicemotion")}} イベントのためのイベントハンドラーです。

+ +

構文

+ +
window.ondevicemotion = funcRef;
+ +

funcRef のところは関数への参照です。この関数は発生した動きを説明する {{DOMxRef("DeviceMotionEvent")}} オブジェクトを受け取ります。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Device Orientation")}}{{Spec2("Device Orientation")}}Initial definition.
+ +

ブラウザーの互換性

+ +

{{Compat("api.Window.ondevicemotion")}}

+ +

関連情報

+ + diff --git a/files/ja/learn/css/first_steps/styling_a_biography_page/index.html b/files/ja/learn/css/first_steps/styling_a_biography_page/index.html new file mode 100644 index 0000000000..b03174d271 --- /dev/null +++ b/files/ja/learn/css/first_steps/styling_a_biography_page/index.html @@ -0,0 +1,101 @@ +--- +title: 新しい知識を使う +slug: Learn/CSS/First_steps/Styling_a_biography_page +tags: + - Beginner + - CSS + - Learn + - Playground +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +original_slug: Learn/CSS/First_steps/Using_your_new_knowledge +--- +

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

先のいくつかのレッスンで、あなたは CSS を使ってシンプルなテキストドキュメントにスタイルを追加してフォーマットする方法を学びました。ここでは、それを実際に行ってみましょう。

+ + + + + + + + + + + + +
前提条件:基礎コンピューターリテラシー、基本的なソフトウェアのインストール、ファイル操作の基礎知識 HTML の基礎 (HTML の入門で学ぶ)、CSS の基礎(このモジュールの残り)
目的:いくつかの CSS を試し、知識レベルを確認します
+ +

さあ始めよう

+ +

下の Live エディタで試すこともできますし、我々の Github リポジトリからサンプルファイルをダウンロードして試してみることもできます。ここで使うサンプルはシンプルな一ページの HTML で、頭にはとりあえずシンプルな CSS が埋め込まれています。もしローカルで動かすとき HTML と CSS が一緒になっているのが嫌だったら別々のファイルに分割しても構いません。あるいは、CodePen や jsFiddle、Glitch といったオンラインエディタを使うこともできます。

+ +
+

注記: もし途中で詰まったら、私達に気兼ねなく相談してください！詳しくはこの記事の一番下にある「アセスメントとさらなるヘルプ」の部分を見てください。

+
+ +

CSS を少し試してみよう

+ +

下のサンプルは、CSS でスタイルされたプロフィールページの例です。ここで使われているプロパティは次の通りです。これらについてはそれぞれリンクから MDN の記事に飛べますので、プロパティの詳細な説明についてはそちらをご参照ください。

+ + + +

下のプロフィールページでは、いろんなセレクタを使ったり、h1要素や h2要素などの装飾要素を使ったりしただけでなく、職業を表す部分ではクラスを定義してデザインを設定しました。

+ +

プロパティの値をいろいろに変えて見た目がどう変わるか試してみましょう。

+ +
    +
  1. 見出し 1 の文字色をピンクに変えてみましょう。色の指定には hotpink を使うとよいでしょう。
    2. +
  2. 見出し 1 の下に太さ 10px の点線をつけてみましょう。そしてその色を purple にしてみましょう。
    3. +
  3. 見出し 2 の書体をイタリックに変えてみましょう。
    4. +
  4. 連絡先情報の部分で使われている ul 要素の {{cssxref("background-color")}} を #eeeeee にして、{{cssxref("border")}} を太さ 5px の紫の線に変えてみましょう。また、{{cssxref("padding")}} を指定してコンテンツと連絡先情報の部分にスペースが空くように設定しましょう。
    5. +
  5. リンクの部分にマウスが乗ったとき、リンクが green に変わるように設定しましょう。
    6. +
+ +

完成したら次の画像のようになるはずです。

+ +

+ +

それから、このページに書かれていない属性をみてみましょう。MDN の CSS リファレンス には冒険が待っています!

+ +

ここには間違った回答はないことを覚えていてください — ここではいろいろ試して楽しみながら学びましょう。

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

+ +

アセスメントとさらなるヘルプ

+ +

作ったものを見てほしいときや、作業に詰まってしまって質問をしたいとき：

+ +
    +
  1. あなたが作ったものを CodePen や jsFiddle、Glitch などのコード共有サービスに公開してください。
    2. +
  2. 添削の依頼あるいは訊きたいことを MDN Discourse forum Learning category に投稿してください。ここに投稿するときには次のことを忘れないようにしてください。 +
      +
    • タイトルは何についての質問か分かるように、「Assessment wanted for CSS First Steps」のようにしてください。
      • +
    • 添削や質問を依頼したいコードへのリンクを貼ってください。ソースコードを示してもらわないとこちらもどうサポートしたらよいかがわからないからです。
      • +
    • どの課題に取り組んでいるのか分かるように課題へのリンクを貼ってください。そうしていただけるとあなたがどこで躓いているのか知ることができます。
      • +
    +
    3. +
+ +

次のステップ

+ +

最初のモジュールを修了しました。おめでとうございます。あなたはもう CSS の基本的な部分は理解できたはずです。そして、スタイルシートの挙動が分かるようになったはずです。次のモジュール、CSS ブロック構築ではいくつかの重要な部分を深く見ていきましょう。

+ +

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

このモジュール内

+ +
    +
  1. What is CSS?
    2. +
  2. Getting started with CSS
    3. +
  3. How CSS is structured
    4. +
  4. How CSS works
    5. +
  5. Using your new knowledge
    6. +
diff --git a/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html b/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html deleted file mode 100644 index c1b3a1c889..0000000000 --- a/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: 新しい知識を使う -slug: Learn/CSS/First_steps/Using_your_new_knowledge -tags: - - Beginner - - CSS - - Learn - - Playground -translation_of: Learn/CSS/First_steps/Using_your_new_knowledge ---- -

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

先のいくつかのレッスンで、あなたは CSS を使ってシンプルなテキストドキュメントにスタイルを追加してフォーマットする方法を学びました。ここでは、それを実際に行ってみましょう。

- - - - - - - - - - - - -
前提条件:基礎コンピューターリテラシー、基本的なソフトウェアのインストール、ファイル操作の基礎知識 HTML の基礎 (HTML の入門で学ぶ)、CSS の基礎(このモジュールの残り)
目的:いくつかの CSS を試し、知識レベルを確認します
- -

さあ始めよう

- -

下の Live エディタで試すこともできますし、我々の Github リポジトリからサンプルファイルをダウンロードして試してみることもできます。ここで使うサンプルはシンプルな一ページの HTML で、頭にはとりあえずシンプルな CSS が埋め込まれています。もしローカルで動かすとき HTML と CSS が一緒になっているのが嫌だったら別々のファイルに分割しても構いません。あるいは、CodePen や jsFiddle、Glitch といったオンラインエディタを使うこともできます。

- -
-

注記: もし途中で詰まったら、私達に気兼ねなく相談してください！詳しくはこの記事の一番下にある「アセスメントとさらなるヘルプ」の部分を見てください。

-
- -

CSS を少し試してみよう

- -

下のサンプルは、CSS でスタイルされたプロフィールページの例です。ここで使われているプロパティは次の通りです。これらについてはそれぞれリンクから MDN の記事に飛べますので、プロパティの詳細な説明についてはそちらをご参照ください。

- - - -

下のプロフィールページでは、いろんなセレクタを使ったり、h1要素や h2要素などの装飾要素を使ったりしただけでなく、職業を表す部分ではクラスを定義してデザインを設定しました。

- -

プロパティの値をいろいろに変えて見た目がどう変わるか試してみましょう。

- -
    -
  1. 見出し 1 の文字色をピンクに変えてみましょう。色の指定には hotpink を使うとよいでしょう。
    2. -
  2. 見出し 1 の下に太さ 10px の点線をつけてみましょう。そしてその色を purple にしてみましょう。
    3. -
  3. 見出し 2 の書体をイタリックに変えてみましょう。
    4. -
  4. 連絡先情報の部分で使われている ul 要素の {{cssxref("background-color")}} を #eeeeee にして、{{cssxref("border")}} を太さ 5px の紫の線に変えてみましょう。また、{{cssxref("padding")}} を指定してコンテンツと連絡先情報の部分にスペースが空くように設定しましょう。
    5. -
  5. リンクの部分にマウスが乗ったとき、リンクが green に変わるように設定しましょう。
    6. -
- -

完成したら次の画像のようになるはずです。

- -

- -

それから、このページに書かれていない属性をみてみましょう。MDN の CSS リファレンス には冒険が待っています!

- -

ここには間違った回答はないことを覚えていてください — ここではいろいろ試して楽しみながら学びましょう。

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

- -

アセスメントとさらなるヘルプ

- -

作ったものを見てほしいときや、作業に詰まってしまって質問をしたいとき：

- -
    -
  1. あなたが作ったものを CodePen や jsFiddle、Glitch などのコード共有サービスに公開してください。
    2. -
  2. 添削の依頼あるいは訊きたいことを MDN Discourse forum Learning category に投稿してください。ここに投稿するときには次のことを忘れないようにしてください。 -
      -
    • タイトルは何についての質問か分かるように、「Assessment wanted for CSS First Steps」のようにしてください。
      • -
    • 添削や質問を依頼したいコードへのリンクを貼ってください。ソースコードを示してもらわないとこちらもどうサポートしたらよいかがわからないからです。
      • -
    • どの課題に取り組んでいるのか分かるように課題へのリンクを貼ってください。そうしていただけるとあなたがどこで躓いているのか知ることができます。
      • -
    -
    3. -
- -

次のステップ

- -

最初のモジュールを修了しました。おめでとうございます。あなたはもう CSS の基本的な部分は理解できたはずです。そして、スタイルシートの挙動が分かるようになったはずです。次のモジュール、CSS ブロック構築ではいくつかの重要な部分を深く見ていきましょう。

- -

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

このモジュール内

- -
    -
  1. What is CSS?
    2. -
  2. Getting started with CSS
    3. -
  3. How CSS is structured
    4. -
  4. How CSS works
    5. -
  5. Using your new knowledge
    6. -
diff --git a/files/ja/web/api/mediastreamtrack/ended_event/index.html b/files/ja/web/api/mediastreamtrack/ended_event/index.html new file mode 100644 index 0000000000..b5a1bb7a2a --- /dev/null +++ b/files/ja/web/api/mediastreamtrack/ended_event/index.html @@ -0,0 +1,58 @@ +--- +title: MediaStreamTrack.onended +slug: Web/API/MediaStreamTrack/ended_event +translation_of: Web/API/MediaStreamTrack/onended +original_slug: Web/API/MediaStreamTrack/onended +--- +

{{ APIRef("Media Capture and Streams") }}

+ +

MediaStreamTrack.onended イベントハンドラはendedイベントが発生した時に実行するEventHandlerの関数です。このイベントは、MediaStreamTrackオブジェクトのソースが、これ以上データを提供することがないか、ユーザーの操作によって許可が無効になったか、ソースデバイスが取り出されたか、リモートのピアがデータの送信を停止した時に発生します。

+ +

文法

+ +
MediaStreamTrack.onended = function;
+
+ +

値

+ +

{{event("ended")}}イベントが発生した時の実行する処理の関数を{{event("Event_handlers", "event handler")}}として設定します。このイベントハンドラーの関数は1つのパラメータ持ちます。このパラメータはイベントオブジェクトであり、単純な{{domxref("Event")}}のオブジェクトです。

+ +

例

+ +

この例では、endedイベントのイベントハンドラを設定しています。このイベントハンドラでは、トラックがアクティブでない状態を示すために画面上のアイコンを変更します。

+ +
track.onended = function(event) {
+  let statusElem = document.getElementById("status-icon");
+
+  statusElem.src = "/images/stopped-icon.png";
+}
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状況コメント
{{ SpecName('Media Capture', '#widl-MediaStreamTrack-onended', 'MediaStreamTrack.onended') }}{{ Spec2('Media Capture') }}初版
+ +

ブラウザ互換性

+ +

{{Compat("api.MediaStreamTrack.onended")}}

+ +

関連項目

+ + diff --git a/files/ja/web/api/mediastreamtrack/onended/index.html b/files/ja/web/api/mediastreamtrack/onended/index.html deleted file mode 100644 index b41beb67cb..0000000000 --- a/files/ja/web/api/mediastreamtrack/onended/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: MediaStreamTrack.onended -slug: Web/API/MediaStreamTrack/onended -translation_of: Web/API/MediaStreamTrack/onended ---- -

{{ APIRef("Media Capture and Streams") }}

- -

MediaStreamTrack.onended イベントハンドラはendedイベントが発生した時に実行するEventHandlerの関数です。このイベントは、MediaStreamTrackオブジェクトのソースが、これ以上データを提供することがないか、ユーザーの操作によって許可が無効になったか、ソースデバイスが取り出されたか、リモートのピアがデータの送信を停止した時に発生します。

- -

文法

- -
MediaStreamTrack.onended = function;
-
- -

値

- -

{{event("ended")}}イベントが発生した時の実行する処理の関数を{{event("Event_handlers", "event handler")}}として設定します。このイベントハンドラーの関数は1つのパラメータ持ちます。このパラメータはイベントオブジェクトであり、単純な{{domxref("Event")}}のオブジェクトです。

- -

例

- -

この例では、endedイベントのイベントハンドラを設定しています。このイベントハンドラでは、トラックがアクティブでない状態を示すために画面上のアイコンを変更します。

- -
track.onended = function(event) {
-  let statusElem = document.getElementById("status-icon");
-
-  statusElem.src = "/images/stopped-icon.png";
-}
-
- -

仕様

- - - - - - - - - - - - - - - - -
仕様状況コメント
{{ SpecName('Media Capture', '#widl-MediaStreamTrack-onended', 'MediaStreamTrack.onended') }}{{ Spec2('Media Capture') }}初版
- -

ブラウザ互換性

- -

{{Compat("api.MediaStreamTrack.onended")}}

- -

関連項目

- - diff --git a/files/ja/web/api/mediastreamtrack/onmute/index.html b/files/ja/web/api/mediastreamtrack/onmute/index.html deleted file mode 100644 index 0707c39193..0000000000 --- a/files/ja/web/api/mediastreamtrack/onmute/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: MediaStreamTrack.onmute -slug: Web/API/MediaStreamTrack/onmute -translation_of: Web/API/MediaStreamTrack/onmute ---- -

{{ APIRef("Media Capture and Streams") }}

- -

MediaStreamTrack.onmuteイベントハンドラは{{event("mute")}}イベントを受け取った時に呼び出されるプロパティです。このイベントは、トラックが一時的にデータを提供することができない時に発生します。

- -

文法

- -
track.onmute = function;
-
- -

値

- -

{{event("mute")}}イベントが発生した時の実行する処理の関数をEventHandlerとして設定します。このイベントハンドラーの関数は1つのパラメータ持ちます。このパラメータはイベントオブジェクトであり、単純なEventのオブジェクトです。

- -

例

- -

この例では、「ミュートされたスピーカー」絵文字を要素のコンテンツHTMLに設定するため、ミュートハンドラーが確立されています。

- -
myTrack.onmute = function(evt) {
-  playStateIcon.innerHTML = "&#1F507;";
-};
-
- -

仕様

- - - - - - - - - - - - - - - - -
仕様状況コメント
{{ SpecName('Media Capture', '#widl-MediaStreamTrack-onmute', 'MediaStreamTrack.onmute') }}{{ Spec2('Media Capture') }}初版
- -

ブラウザ互換性

- - - -

{{Compat("api.MediaStreamTrack.onmute")}}

- -

関連項目

- - diff --git a/files/ja/web/api/mediastreamtrack/onoverconstrained/index.html b/files/ja/web/api/mediastreamtrack/onoverconstrained/index.html deleted file mode 100644 index d6c1333cac..0000000000 --- a/files/ja/web/api/mediastreamtrack/onoverconstrained/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: MediaStreamTrack.onoverconstrained -slug: Web/API/MediaStreamTrack/onoverconstrained -translation_of: Web/API/MediaStreamTrack/onoverconstrained ---- -

{{ APIRef("Media Capture and Streams") }}

- -

MediaStreamTrack.onoverconstrainedイベントハンドラは、{{event("overconstrained")}}イベントを受け取った時に呼び出されるプロパティです。このイベントは、影響を受けた各トラック(複数のトラックが同一のソースを共有している時)で発生します。このイベントは、ユーザエージェントが与えられたソースに対して現在の制約を評価し、与えられた制約でソースを設定することができない時に発生します。 過制約のため、ユーザエージェントは影響をうけた各トラックをミュートにします。影響を受けたトラックは、現在のソースの有効な能力に配慮してアプリケーションが制約を調整するまでmutedの状態を維持します。

- -

 

- -

文法

- -
track.onoverconstrained = function;
-
- -

値

- - - -

例

- -
dc.onoverconstrained = function(ev) { alert("overconstrained event detected!"); };
-
- -

仕様

- - - - - - - - - - - - - - - - -
仕様状況コメント
{{ SpecName('Media Capture', '#widl-MediaStreamTrack-onoverconstrained', 'MediaStreamTrack.onoverconstrained') }}{{ Spec2('Media Capture') }}初版
- -

ブラウザ互換性

- -

{{Compat("api.MediaStreamTrack.onoverconstrained")}}

- -

関連項目

- - diff --git a/files/ja/web/api/mediastreamtrack/onunmute/index.html b/files/ja/web/api/mediastreamtrack/onunmute/index.html deleted file mode 100644 index 9b3e5b7d6d..0000000000 --- a/files/ja/web/api/mediastreamtrack/onunmute/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: MediaStreamTrack.onunmute -slug: Web/API/MediaStreamTrack/onunmute -translation_of: Web/API/MediaStreamTrack/onunmute ---- -

{{ APIRef("Media Capture and Streams") }}

- -

MediaStreamTrack.onunmuteイベントハンドラは{{event("unmute")}}イベントを受け取った時に呼び出されるプロパティです。このイベントは、トラックが再びデータを送信できるようになった時に発生します。

- -

文法

- -
track.onunmute = function;
-
- -

値

- - - -

例

- -
dc.onunmute = function(ev) { alert("unmute event detected!"); };
-
- -

仕様

- - - - - - - - - - - - - - - - -
仕様状況コメント
{{ SpecName('Media Capture', '#widl-MediaStreamTrack-onunmute', 'MediaStreamTrack.onunmute') }}{{ Spec2('Media Capture') }}初版
- -

ブラウザ互換性

- -

{{Compat("api.MediaStreamTrack.onunmute")}}

- -

関連項目

- - diff --git a/files/ja/web/api/mediastreamtrack/overconstrained_event/index.html b/files/ja/web/api/mediastreamtrack/overconstrained_event/index.html new file mode 100644 index 0000000000..e141ad3ac9 --- /dev/null +++ b/files/ja/web/api/mediastreamtrack/overconstrained_event/index.html @@ -0,0 +1,56 @@ +--- +title: MediaStreamTrack.onoverconstrained +slug: Web/API/MediaStreamTrack/overconstrained_event +translation_of: Web/API/MediaStreamTrack/onoverconstrained +original_slug: Web/API/MediaStreamTrack/onoverconstrained +--- +

{{ APIRef("Media Capture and Streams") }}

+ +

MediaStreamTrack.onoverconstrainedイベントハンドラは、{{event("overconstrained")}}イベントを受け取った時に呼び出されるプロパティです。このイベントは、影響を受けた各トラック(複数のトラックが同一のソースを共有している時)で発生します。このイベントは、ユーザエージェントが与えられたソースに対して現在の制約を評価し、与えられた制約でソースを設定することができない時に発生します。 過制約のため、ユーザエージェントは影響をうけた各トラックをミュートにします。影響を受けたトラックは、現在のソースの有効な能力に配慮してアプリケーションが制約を調整するまでmutedの状態を維持します。

+ +

 

+ +

文法

+ +
track.onoverconstrained = function;
+
+ +

値

+ + + +

例

+ +
dc.onoverconstrained = function(ev) { alert("overconstrained event detected!"); };
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状況コメント
{{ SpecName('Media Capture', '#widl-MediaStreamTrack-onoverconstrained', 'MediaStreamTrack.onoverconstrained') }}{{ Spec2('Media Capture') }}初版
+ +

ブラウザ互換性

+ +

{{Compat("api.MediaStreamTrack.onoverconstrained")}}

+ +

関連項目

+ + diff --git a/files/ja/web/api/window/ondevicemotion/index.html b/files/ja/web/api/window/ondevicemotion/index.html deleted file mode 100644 index aefd927e24..0000000000 --- a/files/ja/web/api/window/ondevicemotion/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Window.ondevicemotion -slug: Web/API/Window/ondevicemotion -tags: - - API - - Device Orientation - - Event Handler - - Mobile - - Motion - - Orientation - - Property - - Reference - - イベントハンドラー - - プロパティ - - モバイル - - 向き - - 端末の向き -translation_of: Web/API/Window/ondevicemotion ---- -
{{APIRef("Device Orientation Events")}}
- -

Windows に対して送信される {{domxref("Window/devicemotion_event", "devicemotion")}} イベントのためのイベントハンドラーです。

- -

構文

- -
window.ondevicemotion = funcRef;
- -

funcRef のところは関数への参照です。この関数は発生した動きを説明する {{DOMxRef("DeviceMotionEvent")}} オブジェクトを受け取ります。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("Device Orientation")}}{{Spec2("Device Orientation")}}Initial definition.
- -

ブラウザーの互換性

- -

{{Compat("api.Window.ondevicemotion")}}

- -

関連情報

- - diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index c4b68910cb..b1c41121da 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -286,6 +286,7 @@ /ko/docs/Learn/CSS/CSS_layout/위치잡기 /ko/docs/Learn/CSS/CSS_layout/Positioning /ko/docs/Learn/CSS/CSS_layout/이전_브라우저_지원 /ko/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers /ko/docs/Learn/CSS/CSS_layout/일반_흐름 /ko/docs/Learn/CSS/CSS_layout/Normal_Flow +/ko/docs/Learn/CSS/First_steps/Using_your_new_knowledge /ko/docs/Learn/CSS/First_steps/Styling_a_biography_page /ko/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps /ko/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors /ko/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index adbd504fa9..651d51c35f 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -1373,7 +1373,7 @@ "java2020007" ] }, - "Learn/CSS/First_steps/Using_your_new_knowledge": { + "Learn/CSS/First_steps/Styling_a_biography_page": { "modified": "2020-07-16T22:28:04.551Z", "contributors": [ "java2020007" diff --git a/files/ko/learn/css/first_steps/styling_a_biography_page/index.html b/files/ko/learn/css/first_steps/styling_a_biography_page/index.html new file mode 100644 index 0000000000..854d9a7665 --- /dev/null +++ b/files/ko/learn/css/first_steps/styling_a_biography_page/index.html @@ -0,0 +1,97 @@ +--- +title: 새로운 지식을 사용하기 +slug: Learn/CSS/First_steps/Styling_a_biography_page +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +original_slug: Learn/CSS/First_steps/Using_your_new_knowledge +--- +

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

지난 몇 단원에서 배운 내용을 통해 CSS 를 사용하여 간단한 텍스트 문서의 서식을 지정하여 자신만의 스타일을 추가 할 수 있다는 것을 알게 될 것입니다. 이 평가는 그 기회를 제공합니다.

+ + + + + + + + + + + + +
전제조건:이 평가를 시도하기 전에 나머지 CSS 기본 과목을 살펴보고 HTML 기본 사항 (HTML 소개 학습) 을 이해해야 합니다.
목적:CSS 를 가지고 놀면서 새로운 지식을 테스트하기
+ +

시작점

+ +

아래의 라이브 편집기에서 작업하거나 , 시작점을 다운로드 하여 자신의 편집기에서 작업할 수 있습니다. 이 페이지는 HTML 과 문서 head 의 시작점 CSS 가 포함된 단일 페이지 입니다. 원하는 경우 로컬 컴퓨터에서 예제를 만들 때, 이 CSS 를 별도의 파일로 옮길수 있습니다. 또는 CodePen, jsFiddle 또는 Glitch 와 같은 온라인 도구를 사용하여 작업을 수행하십시오.

+ +
+

참고: 문제가 발생하면, 도움을 요청하십시오 — 이 페이지 하단의 평가 또는 추가 도움말 섹션을 참조하십시오.

+
+ +

CSS 를 사용한 작업

+ +

다음 라이브 예는 CSS 를 사용하여 스타일이 지정된 전기(biography) 를 보여줍니다. 내가 사용한 CSS 속성은 다음과 같습니다 — 각 속성은 MDN 의 속성 페이지에 연결되어 더 많은 사용 예를 제공합니다.

+ + + +

나는 선택자, h1 및 h2 와 같은 스타일 요소를 혼합하여 사용했지만, 작업 제목 및 스타일을 위한 class 를 만들었습니다.

+ +

CSS 를 사용하여 내가 사용한 속성 값을 변경하여 이 전기(biography) 의 모양을 변경하십시오.

+ +
    +
  1. CSS color 키워드인 hotpink 를 사용하여 h1 제목을 분홍색으로 만듭니다.
    2. +
  2. CSS color 키워드 purple 을 사용하는 10px 점선 {{cssxref("border-bottom")}} 을 제목으로 지정하십시오.
    3. +
  3. h2 제목을 기울임 꼴로 만듭니다.
    4. +
  4. 연락처 세부 정보에 사용된 ul 에 {{cssxref("background-color")}} 를 #eeeeee 및 5px 의 단색 자주색 {{cssxref("border")}} 으로 만듭니다. {{cssxref("padding")}} 을 사용하여 콘텐츠를 테두리에서 밀어냅니다.
    5. +
  5. 마우스를 가리키면 green 으로 만듭니다.
    6. +
+ +

이 이미지와 비슷한 결과가 나옵니다.

+ +

Screenshot of how the example should look after completing the assessment.

+ +

그런 다음 MDN CSS 참조 에서 이 페이지에 언급되지 않은 일부 속성을 찾아보고 시도해 보십시오!

+ +

여기에 오답이 없다는 것을 기억하십시오 — 이 단계의 학습에서는 약간의 즐거움을 가질 수 있습니다.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

+ +

평가 또는 추가 도움

+ +

작업을 평가하고 싶거나 작업이 정체되어 도움을 요청하려는 경우:

+ +
    +
  1. 작업을 CodePen, jsFiddle 또는 Glitch 와 같은 온라인 공유 가능 편집기에 입력합니다.
    2. +
  2. MDN 토론 포럼 학습 카데고리 에 평가 및  도움을 요청하는 게시물을 작성 하십시오. 게시물에는 다음이 포함되어야 합니다: +
      +
    • "CSS 첫 단계에 대한 평가가 필요했습니다" 와 같은 설명적인 제목입니다.
      • +
    • 당신이 이미 시도한 내용 및 당신이 우리가 무엇을 하기를 원하는지에 대한 세부 사항 입니다. 예: 당신이 정체되어 있고 도움이 필요하거나 평가를 원하는지에 대한 세부사항들.
      • +
    • 온라인 공유 가능 편집기 (위의 1 단계에서 언급한) 에서 평가하거나 도움이 필요한 예에 대한 링크입니다. 이것은 좋은 습관입니다 — 코드가 보이지 않으면 코딩에 문제가 있는 사람을 돕는 것이 매우 어렵습니다.
      • +
    • 실제 작업 또는 평가 페이지에 대한 링크로 도움이 필요한 질문을 찾을 수 있습니다.
      • +
    +
    3. +
+ +

다음은 뭐죠?

+ +

첫 번째 강의를 완료한 것을 축하합니다. 이제 CSS 에 대해 잘 이해하고 스타일 시트에서 발생하는 많은 부분을 이해할 수 있어야 합니다. 다음 강의인 CSS building blocks 에서는 여러 가지 주요 영역을 자세히 살펴보겠습니다.

+ +

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

이번 강의에서는

+ +
    +
  1. CSS 란 무엇인가?
    2. +
  2. CSS 로 시작하기
    3. +
  3. CSS 의 구조
    4. +
  4. CSS 작동 방식
    5. +
  5. 새로운 지식을 사용하기
    6. +
diff --git a/files/ko/learn/css/first_steps/using_your_new_knowledge/index.html b/files/ko/learn/css/first_steps/using_your_new_knowledge/index.html deleted file mode 100644 index 6a1795419c..0000000000 --- a/files/ko/learn/css/first_steps/using_your_new_knowledge/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: 새로운 지식을 사용하기 -slug: Learn/CSS/First_steps/Using_your_new_knowledge -translation_of: Learn/CSS/First_steps/Using_your_new_knowledge ---- -

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

지난 몇 단원에서 배운 내용을 통해 CSS 를 사용하여 간단한 텍스트 문서의 서식을 지정하여 자신만의 스타일을 추가 할 수 있다는 것을 알게 될 것입니다. 이 평가는 그 기회를 제공합니다.

- - - - - - - - - - - - -
전제조건:이 평가를 시도하기 전에 나머지 CSS 기본 과목을 살펴보고 HTML 기본 사항 (HTML 소개 학습) 을 이해해야 합니다.
목적:CSS 를 가지고 놀면서 새로운 지식을 테스트하기
- -

시작점

- -

아래의 라이브 편집기에서 작업하거나 , 시작점을 다운로드 하여 자신의 편집기에서 작업할 수 있습니다. 이 페이지는 HTML 과 문서 head 의 시작점 CSS 가 포함된 단일 페이지 입니다. 원하는 경우 로컬 컴퓨터에서 예제를 만들 때, 이 CSS 를 별도의 파일로 옮길수 있습니다. 또는 CodePen, jsFiddle 또는 Glitch 와 같은 온라인 도구를 사용하여 작업을 수행하십시오.

- -
-

참고: 문제가 발생하면, 도움을 요청하십시오 — 이 페이지 하단의 평가 또는 추가 도움말 섹션을 참조하십시오.

-
- -

CSS 를 사용한 작업

- -

다음 라이브 예는 CSS 를 사용하여 스타일이 지정된 전기(biography) 를 보여줍니다. 내가 사용한 CSS 속성은 다음과 같습니다 — 각 속성은 MDN 의 속성 페이지에 연결되어 더 많은 사용 예를 제공합니다.

- - - -

나는 선택자, h1 및 h2 와 같은 스타일 요소를 혼합하여 사용했지만, 작업 제목 및 스타일을 위한 class 를 만들었습니다.

- -

CSS 를 사용하여 내가 사용한 속성 값을 변경하여 이 전기(biography) 의 모양을 변경하십시오.

- -
    -
  1. CSS color 키워드인 hotpink 를 사용하여 h1 제목을 분홍색으로 만듭니다.
    2. -
  2. CSS color 키워드 purple 을 사용하는 10px 점선 {{cssxref("border-bottom")}} 을 제목으로 지정하십시오.
    3. -
  3. h2 제목을 기울임 꼴로 만듭니다.
    4. -
  4. 연락처 세부 정보에 사용된 ul 에 {{cssxref("background-color")}} 를 #eeeeee 및 5px 의 단색 자주색 {{cssxref("border")}} 으로 만듭니다. {{cssxref("padding")}} 을 사용하여 콘텐츠를 테두리에서 밀어냅니다.
    5. -
  5. 마우스를 가리키면 green 으로 만듭니다.
    6. -
- -

이 이미지와 비슷한 결과가 나옵니다.

- -

Screenshot of how the example should look after completing the assessment.

- -

그런 다음 MDN CSS 참조 에서 이 페이지에 언급되지 않은 일부 속성을 찾아보고 시도해 보십시오!

- -

여기에 오답이 없다는 것을 기억하십시오 — 이 단계의 학습에서는 약간의 즐거움을 가질 수 있습니다.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

- -

평가 또는 추가 도움

- -

작업을 평가하고 싶거나 작업이 정체되어 도움을 요청하려는 경우:

- -
    -
  1. 작업을 CodePen, jsFiddle 또는 Glitch 와 같은 온라인 공유 가능 편집기에 입력합니다.
    2. -
  2. MDN 토론 포럼 학습 카데고리 에 평가 및  도움을 요청하는 게시물을 작성 하십시오. 게시물에는 다음이 포함되어야 합니다: -
      -
    • "CSS 첫 단계에 대한 평가가 필요했습니다" 와 같은 설명적인 제목입니다.
      • -
    • 당신이 이미 시도한 내용 및 당신이 우리가 무엇을 하기를 원하는지에 대한 세부 사항 입니다. 예: 당신이 정체되어 있고 도움이 필요하거나 평가를 원하는지에 대한 세부사항들.
      • -
    • 온라인 공유 가능 편집기 (위의 1 단계에서 언급한) 에서 평가하거나 도움이 필요한 예에 대한 링크입니다. 이것은 좋은 습관입니다 — 코드가 보이지 않으면 코딩에 문제가 있는 사람을 돕는 것이 매우 어렵습니다.
      • -
    • 실제 작업 또는 평가 페이지에 대한 링크로 도움이 필요한 질문을 찾을 수 있습니다.
      • -
    -
    3. -
- -

다음은 뭐죠?

- -

첫 번째 강의를 완료한 것을 축하합니다. 이제 CSS 에 대해 잘 이해하고 스타일 시트에서 발생하는 많은 부분을 이해할 수 있어야 합니다. 다음 강의인 CSS building blocks 에서는 여러 가지 주요 영역을 자세히 살펴보겠습니다.

- -

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

이번 강의에서는

- -
    -
  1. CSS 란 무엇인가?
    2. -
  2. CSS 로 시작하기
    3. -
  3. CSS 의 구조
    4. -
  4. CSS 작동 방식
    5. -
  5. 새로운 지식을 사용하기
    6. -
diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index e5c5f6508b..19211a793a 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -381,6 +381,7 @@ /pt-BR/docs/Learn/CSS/First_steps/Como_CSS_e_estruturado /pt-BR/docs/Learn/CSS/First_steps/How_CSS_is_structured /pt-BR/docs/Learn/CSS/First_steps/Iniciando /pt-BR/docs/Learn/CSS/First_steps/Getting_started /pt-BR/docs/Learn/CSS/First_steps/O_que_e_CSS /pt-BR/docs/Learn/CSS/First_steps/What_is_CSS +/pt-BR/docs/Learn/CSS/First_steps/Using_your_new_knowledge /pt-BR/docs/Learn/CSS/First_steps/Styling_a_biography_page /pt-BR/docs/Learn/CSS/Howto/CSS_Perguntas_Frequentes /pt-BR/docs/Learn/CSS/Howto/CSS_FAQ /pt-BR/docs/Learn/Common_questions/Como_a_internet_funciona /pt-BR/docs/Learn/Common_questions/How_does_the_Internet_work /pt-BR/docs/Learn/Common_questions/Como_configurar_um_servidor_de_testes_local /pt-BR/docs/Learn/Common_questions/set_up_a_local_testing_server diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index a16a54abbc..034ab18fb7 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -1372,7 +1372,7 @@ "cirogomes58" ] }, - "Learn/CSS/First_steps/Using_your_new_knowledge": { + "Learn/CSS/First_steps/Styling_a_biography_page": { "modified": "2020-07-16T22:28:04.939Z", "contributors": [ "LuisFreitas1" diff --git a/files/pt-br/learn/css/first_steps/styling_a_biography_page/index.html b/files/pt-br/learn/css/first_steps/styling_a_biography_page/index.html new file mode 100644 index 0000000000..ece978c757 --- /dev/null +++ b/files/pt-br/learn/css/first_steps/styling_a_biography_page/index.html @@ -0,0 +1,97 @@ +--- +title: Using your new knowledge +slug: Learn/CSS/First_steps/Styling_a_biography_page +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +original_slug: Learn/CSS/First_steps/Using_your_new_knowledge +--- +

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

Com o que você aprendeu nas últimas lições, você deve perceber que pode formatar simples documentos de texto utilizando CSS, implementado seu próprio estilo neles. Esta avaliação lhe dá a oportunidade de fazer exatamente isto.

+ + + + + + + + + + + + +
Pré-requisitos:Antes de tentar esta avaliação você deve ter passado pelo resto do módulo básico de CSS, além de também possuir uma compreensão básica de HTML (estude Introdução ao HTML).
Objetivo:Trabalhar um pouco de CSS e testar seus novos conhecimentos.
+ +

Ponto de partida

+ +

Você pode trabalhar com editor ao vivo abaixo, ou pode fazer o download do ponto de partida para trabalhar em seu próprio editor de texto. Esta é uma única página de HTML, além do ponto de partida no head do documento. Se preferir, você pode transferir este CSS para um arquivo separado quando criar o exemplo no seu computador. Ou ainda, você pode utilizar uma ferramenta online como por exemplo, o CodePen, jsFiddle, ou Glitch para realizar estas tarefas..

+ +
+

Nota: Se ficar emperrado,  nos procure por ajuda — veja a seção Assessment or further help no final da página.

+
+ +

Trabalhando com CSS

+ +

O seguite exemplo mostra uma biografia, o qual foi estilizado com CSS. As propriedades CSS que eu usei foram as mencionadas abaixo — cada uma está lincada a sua página de propriedades em MDN, a qual dará mais exemplos do uso dela.

+ + + +

Eu usei uma mistura de seletores, estilizando elementos como h1 e h2, mas também criando uma classe para o título da profissão e estilizando ela.

+ +

Use CSS para mudar como esta biografia aparece, alterando valores das propriedades que eu utilizei.

+ +
    +
  1. Faça o cabeçalho rosa, usando a chave de cor CSS hotpink.
    2. +
  2. Dê ao cabeçalho um pontilhado de tamanho 10px {{cssxref("border-bottom")}} e que utiliza a chave de cor CSS  purple.
    3. +
  3. Faça o cabeçalho nível 2 em itálico.
    4. +
  4. Dê ao ul usado para informações de contato uma {{cssxref("background-color")}} #eeeeee, e uma {{cssxref("border")}}  roxa sólida com de tamanho 5px. Implemente um {{cssxref("padding")}} para empurrar o conteúdo para longe da borda.
    5. +
  5. Torne os links verdes ao passar o mouse por cima deles.
    6. +
+ +

Você deve acabar com algo parecido com esta imagem.

+ +

Screenshot of how the example should look after completing the assessment.

+ +

Após isto, tente pesquisar algumas propriedades não mencionadas nesta página em MDN CSS referências e se aventure!

+ +

Lembre-se de que não há resosta errada aqui — neste momento de seu aprendizado, você pode se dar ao luxo de de se divertir um pouco.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

+ +

Assessment or further help

+ +

Se gostaria de ter seu trabalho avaliado, ou se ficou emperrado e gostaria de ajuda:

+ +
    +
  1. Coloque seu trabalho num editor de texto compartilhado online tal como o CodePen, jsFiddle, ou Glitch.
    2. +
  2. Escreva um post perguntando por avaliação e/ou ajuda em MDN Discourse forum Learning category. Seu post deve incluir: +
      +
    • Um título descritivo, tal como "Avaliação desejada para primeiros passos em CSS".
      • +
    • Detalhes do que você já tentou, e o que gostaria que  ós fizéssemos, p.e. se você está emperrado e precisa de ajuda, ou se deseja uma avalição.
      • +
    • Um link para o exemplo que você deseja ser avaliadao ou precisa de ajuda, em um editor online compartilhado (como mencionado no passo 1 acima). Esta é uma boa prática a se desenvolver — é muito difícil ajudar alguém com um problema de computação se não é possível ver o código dessa pessoa.
      • +
    • Um link para a atual págia de tarefa ou avaliaçãopara que possamos ver a questão que você está com dúvida.
      • +
    +
    3. +
+ +

O que vem a seguir?

+ +

Parabéns por terminar seu primeiro módulo. Agora você deve ter uma boa compreensão geral de CSS, e ser capaz de entender boa parte do que acontece numa folha de estilos. No próximo módulo, CSS building blocks, iremos dar uma olhada com mais profundidade em várias áreas chave.

+ +

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

Neste módulo

+ +
    +
  1. O que é CSS?
    2. +
  2. Começando com CSS
    3. +
  3. Como o CSS é estruturado
    4. +
  4. Como o CSS funciona
    5. +
  5. Utilizando seu novo conhecimento
    6. +
diff --git a/files/pt-br/learn/css/first_steps/using_your_new_knowledge/index.html b/files/pt-br/learn/css/first_steps/using_your_new_knowledge/index.html deleted file mode 100644 index 848524cba3..0000000000 --- a/files/pt-br/learn/css/first_steps/using_your_new_knowledge/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Using your new knowledge -slug: Learn/CSS/First_steps/Using_your_new_knowledge -translation_of: Learn/CSS/First_steps/Using_your_new_knowledge ---- -

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

Com o que você aprendeu nas últimas lições, você deve perceber que pode formatar simples documentos de texto utilizando CSS, implementado seu próprio estilo neles. Esta avaliação lhe dá a oportunidade de fazer exatamente isto.

- - - - - - - - - - - - -
Pré-requisitos:Antes de tentar esta avaliação você deve ter passado pelo resto do módulo básico de CSS, além de também possuir uma compreensão básica de HTML (estude Introdução ao HTML).
Objetivo:Trabalhar um pouco de CSS e testar seus novos conhecimentos.
- -

Ponto de partida

- -

Você pode trabalhar com editor ao vivo abaixo, ou pode fazer o download do ponto de partida para trabalhar em seu próprio editor de texto. Esta é uma única página de HTML, além do ponto de partida no head do documento. Se preferir, você pode transferir este CSS para um arquivo separado quando criar o exemplo no seu computador. Ou ainda, você pode utilizar uma ferramenta online como por exemplo, o CodePen, jsFiddle, ou Glitch para realizar estas tarefas..

- -
-

Nota: Se ficar emperrado,  nos procure por ajuda — veja a seção Assessment or further help no final da página.

-
- -

Trabalhando com CSS

- -

O seguite exemplo mostra uma biografia, o qual foi estilizado com CSS. As propriedades CSS que eu usei foram as mencionadas abaixo — cada uma está lincada a sua página de propriedades em MDN, a qual dará mais exemplos do uso dela.

- - - -

Eu usei uma mistura de seletores, estilizando elementos como h1 e h2, mas também criando uma classe para o título da profissão e estilizando ela.

- -

Use CSS para mudar como esta biografia aparece, alterando valores das propriedades que eu utilizei.

- -
    -
  1. Faça o cabeçalho rosa, usando a chave de cor CSS hotpink.
    2. -
  2. Dê ao cabeçalho um pontilhado de tamanho 10px {{cssxref("border-bottom")}} e que utiliza a chave de cor CSS  purple.
    3. -
  3. Faça o cabeçalho nível 2 em itálico.
    4. -
  4. Dê ao ul usado para informações de contato uma {{cssxref("background-color")}} #eeeeee, e uma {{cssxref("border")}}  roxa sólida com de tamanho 5px. Implemente um {{cssxref("padding")}} para empurrar o conteúdo para longe da borda.
    5. -
  5. Torne os links verdes ao passar o mouse por cima deles.
    6. -
- -

Você deve acabar com algo parecido com esta imagem.

- -

Screenshot of how the example should look after completing the assessment.

- -

Após isto, tente pesquisar algumas propriedades não mencionadas nesta página em MDN CSS referências e se aventure!

- -

Lembre-se de que não há resosta errada aqui — neste momento de seu aprendizado, você pode se dar ao luxo de de se divertir um pouco.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

- -

Assessment or further help

- -

Se gostaria de ter seu trabalho avaliado, ou se ficou emperrado e gostaria de ajuda:

- -
    -
  1. Coloque seu trabalho num editor de texto compartilhado online tal como o CodePen, jsFiddle, ou Glitch.
    2. -
  2. Escreva um post perguntando por avaliação e/ou ajuda em MDN Discourse forum Learning category. Seu post deve incluir: -
      -
    • Um título descritivo, tal como "Avaliação desejada para primeiros passos em CSS".
      • -
    • Detalhes do que você já tentou, e o que gostaria que  ós fizéssemos, p.e. se você está emperrado e precisa de ajuda, ou se deseja uma avalição.
      • -
    • Um link para o exemplo que você deseja ser avaliadao ou precisa de ajuda, em um editor online compartilhado (como mencionado no passo 1 acima). Esta é uma boa prática a se desenvolver — é muito difícil ajudar alguém com um problema de computação se não é possível ver o código dessa pessoa.
      • -
    • Um link para a atual págia de tarefa ou avaliaçãopara que possamos ver a questão que você está com dúvida.
      • -
    -
    3. -
- -

O que vem a seguir?

- -

Parabéns por terminar seu primeiro módulo. Agora você deve ter uma boa compreensão geral de CSS, e ser capaz de entender boa parte do que acontece numa folha de estilos. No próximo módulo, CSS building blocks, iremos dar uma olhada com mais profundidade em várias áreas chave.

- -

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

Neste módulo

- -
    -
  1. O que é CSS?
    2. -
  2. Começando com CSS
    3. -
  3. Como o CSS é estruturado
    4. -
  4. Como o CSS funciona
    5. -
  5. Utilizando seu novo conhecimento
    6. -
diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index 1c06359a39..dbf6990fb3 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -171,6 +171,7 @@ /ru/docs/Learn/CSS/CSS_layout/Навыки_позиционирования /ru/docs/Learn/CSS/CSS_layout/Position_skills /ru/docs/Learn/CSS/CSS_layout/Нормальный_поток /ru/docs/Learn/CSS/CSS_layout/Normal_Flow /ru/docs/Learn/CSS/CSS_layout/Отзывчивый_дизайн /ru/docs/Learn/CSS/CSS_layout/Responsive_Design +/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge /ru/docs/Learn/CSS/First_steps/Styling_a_biography_page /ru/docs/Learn/CSS/First_steps/Как_структурирован_CSS /ru/docs/Learn/CSS/First_steps/How_CSS_is_structured /ru/docs/Learn/CSS/First_steps/Что_такое_CSS /ru/docs/Learn/CSS/First_steps/What_is_CSS /ru/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps @@ -386,6 +387,7 @@ /ru/docs/Web/API/WebRTC_API/связь /ru/docs/Web/API/WebRTC_API/Connectivity /ru/docs/Web/API/Window/crypto /ru/docs/Web/API/crypto_property /ru/docs/Web/API/Window/mozAnimationStartTime /ru/docs/Web/API/Animation/startTime +/ru/docs/Web/API/Window/ondeviceorientation /ru/docs/conflicting/Web/API/Window/deviceorientation_event /ru/docs/Web/API/Window/ongamepadconnected /ru/docs/conflicting/Web/API/Window/gamepadconnected_event /ru/docs/Web/API/Window/ongamepaddisconnected /ru/docs/conflicting/Web/API/Window/gamepaddisconnected_event /ru/docs/Web/API/Window/performance /ru/docs/Web/API/performance_property diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index 1bae2b40bf..74e40ecc51 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -2226,7 +2226,7 @@ "Immdevrov" ] }, - "Learn/CSS/First_steps/Using_your_new_knowledge": { + "Learn/CSS/First_steps/Styling_a_biography_page": { "modified": "2020-12-03T17:31:51.841Z", "contributors": [ "RoPy73", @@ -11292,12 +11292,6 @@ "ShantyHoz" ] }, - "Web/API/Window/ondeviceorientation": { - "modified": "2019-03-23T22:29:46.961Z", - "contributors": [ - "timur-gilauri" - ] - }, "Web/API/Window/onpaint": { "modified": "2019-03-23T22:08:47.903Z", "contributors": [ @@ -24229,6 +24223,12 @@ "akhabibullina" ] }, + "conflicting/Web/API/Window/deviceorientation_event": { + "modified": "2019-03-23T22:29:46.961Z", + "contributors": [ + "timur-gilauri" + ] + }, "conflicting/Web/API/Window/gamepadconnected_event": { "modified": "2020-11-17T12:43:15.635Z", "contributors": [ diff --git a/files/ru/conflicting/web/api/window/deviceorientation_event/index.html b/files/ru/conflicting/web/api/window/deviceorientation_event/index.html new file mode 100644 index 0000000000..7ce1ddf2cf --- /dev/null +++ b/files/ru/conflicting/web/api/window/deviceorientation_event/index.html @@ -0,0 +1,39 @@ +--- +title: Window.ondeviceorientation +slug: conflicting/Web/API/Window/deviceorientation_event +tags: + - API + - Мобильные устройства + - Ориентация + - Ориентация устройства + - Свойства +translation_of: Web/API/Window/ondeviceorientation +original_slug: Web/API/Window/ondeviceorientation +--- +

{{ ApiRef() }}

+ +

Кратко

+ +

Обработчик события {{event('deviceorientation')}}, который содержит информацию об изменении относительной ориентации устройства.

+ +

Синтаксис

+ +
window.ondeviceorientation = function(event) { ... };
+window.addEventListener('deviceorientation', function(event) { ... });
+
+ +

Спецификации

+ +{{Specifications}} + +

Совместимость с браузерами

+ +

{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }}

+ +

Смотрите также

+ + diff --git a/files/ru/learn/css/first_steps/styling_a_biography_page/index.html b/files/ru/learn/css/first_steps/styling_a_biography_page/index.html new file mode 100644 index 0000000000..028424217d --- /dev/null +++ b/files/ru/learn/css/first_steps/styling_a_biography_page/index.html @@ -0,0 +1,105 @@ +--- +title: Использование ваших новых знаний +slug: Learn/CSS/First_steps/Styling_a_biography_page +tags: + - Beginner + - CSS + - Learn + - Playground + - Начинающий + - Обучение +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +original_slug: Learn/CSS/First_steps/Using_your_new_knowledge +--- +

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +
+
С учётом того что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам возможность сделать это.
+
+ + + + + + + + + + + + +
Необходимые знания:Перед тем как начать, вы должны разобраться в основах CSS и HTML (смотрите Введение в HTML).
Задача:Попрактиковать использование CSS с вашими новыми знаниями.
+ +

Перед началом

+ +

Вы можете писать код в редакторе ниже или скачать исходный код, чтобы работать в вашем собственном редакторе. Это страница с кодом HTML и CSS внутри него. Если вам так удобнее, вы можете переместить CSS в отдельный файл на вашем компьютере. Или вы можете использовать онлайн-редакторы, такие как CodePen, jsFiddle или Glitch.

+ +
+

Примечание: Если у вас не получается, попросите о помощи — читайте раздел {{anch("Помощь")}} с кодом ниже.

+
+ +

Работа с CSS

+ +

В следующем примере демонстрируется биография, стилизованная с помощью CSS. Каждое использованное мной свойство CSS — ссылка на соответствующую страницу MDN.

+ + + +

Я использовал разные селекторы, такие как h1 и h2, а также создал класс для названия профессии для его стилизации.

+ +

Измените значения свойств CSS, чтобы поменять внешний вид биографии.

+ +
    +
  1. Сделайте заголовок розовым, используя CSS-цвет hotpink.
    2. +
  2. Значение свойства заголовка {{cssxref("border-bottom")}} сделайте пунктирным (10px dotted) и добавьте цвет purple.
    3. +
  3. Примените к подзаголовку <h2> курсив.
    4. +
  4. Установите цвет #eeeeee для фона {{cssxref("background-color")}} маркированного списка с контактными данными и значение 5px solid purple для {{cssxref("border")}}. Используйте {{cssxref("padding")}}, чтобы отделить содержимое блока от границы.
    5. +
  5. Сделайте ссылки зелёными при наведении.
    6. +
+ +

У вас должно получиться примерно как-то так:

+ +

Screenshot of how the example should look after completing the assessment.

+ +

После этого попробуйте использовать селекторы, не указанные здесь, но описанные в Руководстве по CSS. Не бойтесь ошибок — практикуйтесь!

+ +

Помните: тут нет неверного решения — сейчас вы предоставлены сами себе; развлекайтесь!

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

+ +

Помощь

+ +

Если вы хотите, чтобы вашу работу оценили, или вы не справляетесь, и вам нужна помощь:

+ +
    +
  1. Загрузите ваш код на CodePen, jsFiddle или Glitch.
    2. +
  2. Напишите пост с просьбой о помощи и / или оценке на форуме MDN. Добавьте тег "learning" к вашему посту, чтобы нам легче было его найти. В вашем посте должны быть: +
      +
    • Заголовок с описанием наподобие "Assessment wanted for CSS First Steps".
      • +
    • Описание того, что вам нужно, — к примеру, что вы уже пробовали, что у вас не получается и вам нужна помощь.
      • +
    • Ссылка на ваш код в онлайн-редакторе.
      • +
    • Ссылка на страницу о помощи, чтобы мы смогли помочь вам с вашим вопросом.
      • +
    +
    3. +
+ +

Что дальше?

+ +

Поздравляем вас с завершением первого модуля! Теперь вы неплохо разбираетесь в CSS и можете разобраться в таблицах стилей. В следующем модуле, Как устроен CSS, мы глубже разберёмся в некоторых аспектах языка.

+ +

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

В этом модуле

+ +
    +
  1. Что такое CSS?
    2. +
  2. Начало работы с CSS
    3. +
  3. Как структурирован CSS
    4. +
  4. Как работает CSS
    5. +
diff --git a/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html b/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html deleted file mode 100644 index a330376ca0..0000000000 --- a/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Использование ваших новых знаний -slug: Learn/CSS/First_steps/Using_your_new_knowledge -tags: - - Beginner - - CSS - - Learn - - Playground - - Начинающий - - Обучение -translation_of: Learn/CSS/First_steps/Using_your_new_knowledge ---- -

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -
-
С учётом того что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам возможность сделать это.
-
- - - - - - - - - - - - -
Необходимые знания:Перед тем как начать, вы должны разобраться в основах CSS и HTML (смотрите Введение в HTML).
Задача:Попрактиковать использование CSS с вашими новыми знаниями.
- -

Перед началом

- -

Вы можете писать код в редакторе ниже или скачать исходный код, чтобы работать в вашем собственном редакторе. Это страница с кодом HTML и CSS внутри него. Если вам так удобнее, вы можете переместить CSS в отдельный файл на вашем компьютере. Или вы можете использовать онлайн-редакторы, такие как CodePen, jsFiddle или Glitch.

- -
-

Примечание: Если у вас не получается, попросите о помощи — читайте раздел {{anch("Помощь")}} с кодом ниже.

-
- -

Работа с CSS

- -

В следующем примере демонстрируется биография, стилизованная с помощью CSS. Каждое использованное мной свойство CSS — ссылка на соответствующую страницу MDN.

- - - -

Я использовал разные селекторы, такие как h1 и h2, а также создал класс для названия профессии для его стилизации.

- -

Измените значения свойств CSS, чтобы поменять внешний вид биографии.

- -
    -
  1. Сделайте заголовок розовым, используя CSS-цвет hotpink.
    2. -
  2. Значение свойства заголовка {{cssxref("border-bottom")}} сделайте пунктирным (10px dotted) и добавьте цвет purple.
    3. -
  3. Примените к подзаголовку <h2> курсив.
    4. -
  4. Установите цвет #eeeeee для фона {{cssxref("background-color")}} маркированного списка с контактными данными и значение 5px solid purple для {{cssxref("border")}}. Используйте {{cssxref("padding")}}, чтобы отделить содержимое блока от границы.
    5. -
  5. Сделайте ссылки зелёными при наведении.
    6. -
- -

У вас должно получиться примерно как-то так:

- -

Screenshot of how the example should look after completing the assessment.

- -

После этого попробуйте использовать селекторы, не указанные здесь, но описанные в Руководстве по CSS. Не бойтесь ошибок — практикуйтесь!

- -

Помните: тут нет неверного решения — сейчас вы предоставлены сами себе; развлекайтесь!

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

- -

Помощь

- -

Если вы хотите, чтобы вашу работу оценили, или вы не справляетесь, и вам нужна помощь:

- -
    -
  1. Загрузите ваш код на CodePen, jsFiddle или Glitch.
    2. -
  2. Напишите пост с просьбой о помощи и / или оценке на форуме MDN. Добавьте тег "learning" к вашему посту, чтобы нам легче было его найти. В вашем посте должны быть: -
      -
    • Заголовок с описанием наподобие "Assessment wanted for CSS First Steps".
      • -
    • Описание того, что вам нужно, — к примеру, что вы уже пробовали, что у вас не получается и вам нужна помощь.
      • -
    • Ссылка на ваш код в онлайн-редакторе.
      • -
    • Ссылка на страницу о помощи, чтобы мы смогли помочь вам с вашим вопросом.
      • -
    -
    3. -
- -

Что дальше?

- -

Поздравляем вас с завершением первого модуля! Теперь вы неплохо разбираетесь в CSS и можете разобраться в таблицах стилей. В следующем модуле, Как устроен CSS, мы глубже разберёмся в некоторых аспектах языка.

- -

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

В этом модуле

- -
    -
  1. Что такое CSS?
    2. -
  2. Начало работы с CSS
    3. -
  3. Как структурирован CSS
    4. -
  4. Как работает CSS
    5. -
diff --git a/files/ru/web/api/window/ondeviceorientation/index.html b/files/ru/web/api/window/ondeviceorientation/index.html deleted file mode 100644 index 97709fa1ad..0000000000 --- a/files/ru/web/api/window/ondeviceorientation/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Window.ondeviceorientation -slug: Web/API/Window/ondeviceorientation -tags: - - API - - Мобильные устройства - - Ориентация - - Ориентация устройства - - Свойства -translation_of: Web/API/Window/ondeviceorientation ---- -

{{ ApiRef() }}

- -

Кратко

- -

Обработчик события {{event('deviceorientation')}}, который содержит информацию об изменении относительной ориентации устройства.

- -

Синтаксис

- -
window.ondeviceorientation = function(event) { ... };
-window.addEventListener('deviceorientation', function(event) { ... });
-
- -

Спецификации

- -{{Specifications}} - -

Совместимость с браузерами

- -

{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }}

- -

Смотрите также

- - diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index aa184cbb38..5a4c050b16 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1038,6 +1038,7 @@ /zh-CN/docs/Learn/CSS/CSS_layout/定位 /zh-CN/docs/Learn/CSS/CSS_layout/Positioning /zh-CN/docs/Learn/CSS/CSS_layout/网格 /zh-CN/docs/Learn/CSS/CSS_layout/Grids /zh-CN/docs/Learn/CSS/First_steps/CSS如何运行 /zh-CN/docs/Learn/CSS/First_steps/How_CSS_works +/zh-CN/docs/Learn/CSS/First_steps/Using_your_new_knowledge /zh-CN/docs/Learn/CSS/First_steps/Styling_a_biography_page /zh-CN/docs/Learn/CSS/First_steps/开始 /zh-CN/docs/Learn/CSS/First_steps/Getting_started /zh-CN/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps /zh-CN/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors @@ -1617,6 +1618,9 @@ /zh-CN/docs/Web/API/Window/onappinstalled /zh-CN/docs/Web/API/Window/appinstalled_event /zh-CN/docs/Web/API/Window/onbeforeinstallprompt /zh-CN/docs/Web/API/Window/beforeinstallprompt_event /zh-CN/docs/Web/API/Window/onbeforeunload /zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload +/zh-CN/docs/Web/API/Window/ondevicemotion /zh-CN/docs/Web/API/Window/devicemotion_event +/zh-CN/docs/Web/API/Window/ondeviceorientation /zh-CN/docs/conflicting/Web/API/Window/deviceorientation_event +/zh-CN/docs/Web/API/Window/ondeviceorientationabsolute /zh-CN/docs/Web/API/Window/deviceorientationabsolute_event /zh-CN/docs/Web/API/Window/ongamepadconnected /zh-CN/docs/conflicting/Web/API/Window/gamepadconnected_event /zh-CN/docs/Web/API/Window/ongamepaddisconnected /zh-CN/docs/Web/API/Window/gamepaddisconnected_event /zh-CN/docs/Web/API/Window/onhashchange /zh-CN/docs/Web/API/WindowEventHandlers/onhashchange diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index a748dafa8d..54f83cc3f3 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -3051,7 +3051,7 @@ "xcxAscar" ] }, - "Learn/CSS/First_steps/Using_your_new_knowledge": { + "Learn/CSS/First_steps/Styling_a_biography_page": { "modified": "2020-07-16T22:28:05.597Z", "contributors": [ "dlnb526", @@ -22711,6 +22711,13 @@ "Jiang-Xuan" ] }, + "Web/API/Window/devicemotion_event": { + "modified": "2019-03-18T21:39:10.384Z", + "contributors": [ + "pinpinye", + "Mmzer" + ] + }, "Web/API/Window/deviceorientation_event": { "modified": "2019-04-11T18:37:50.677Z", "contributors": [ @@ -22719,6 +22726,12 @@ "laobubu" ] }, + "Web/API/Window/deviceorientationabsolute_event": { + "modified": "2020-10-15T22:09:12.548Z", + "contributors": [ + "webber007" + ] + }, "Web/API/Window/dialogArguments": { "modified": "2019-03-23T22:13:58.259Z", "contributors": [ @@ -23049,25 +23062,6 @@ "charlie" ] }, - "Web/API/Window/ondevicemotion": { - "modified": "2019-03-18T21:39:10.384Z", - "contributors": [ - "pinpinye", - "Mmzer" - ] - }, - "Web/API/Window/ondeviceorientation": { - "modified": "2019-03-18T21:38:06.143Z", - "contributors": [ - "Aaron_Zhung" - ] - }, - "Web/API/Window/ondeviceorientationabsolute": { - "modified": "2020-10-15T22:09:12.548Z", - "contributors": [ - "webber007" - ] - }, "Web/API/Window/ondragdrop": { "modified": "2020-06-28T00:52:25.247Z", "contributors": [ @@ -47247,6 +47241,12 @@ "ziyunfei" ] }, + "conflicting/Web/API/Window/deviceorientation_event": { + "modified": "2019-03-18T21:38:06.143Z", + "contributors": [ + "Aaron_Zhung" + ] + }, "conflicting/Web/API/Window/gamepadconnected_event": { "modified": "2020-10-15T22:22:28.465Z", "contributors": [ diff --git a/files/zh-cn/conflicting/web/api/window/deviceorientation_event/index.html b/files/zh-cn/conflicting/web/api/window/deviceorientation_event/index.html new file mode 100644 index 0000000000..7c74434f69 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/window/deviceorientation_event/index.html @@ -0,0 +1,48 @@ +--- +title: Window.ondeviceorientation +slug: conflicting/Web/API/Window/deviceorientation_event +translation_of: Web/API/Window/ondeviceorientation +original_slug: Web/API/Window/ondeviceorientation +--- +

{{ ApiRef() }}

+ +

简介

+ +

{{ event("deviceorientation") }}事件的事件处理程序，该事件包含了设备的相对旋转方向改变信息。

+ +

语法

+ +
window.ondeviceorientation = function(event) { ... };
+window.addEventListener('deviceorientation', function(event) { ... });
+
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Initial specification.
+ +

浏览器兼容性

+ +

{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }}

+ +

更多资料

+ + diff --git a/files/zh-cn/learn/css/first_steps/styling_a_biography_page/index.html b/files/zh-cn/learn/css/first_steps/styling_a_biography_page/index.html new file mode 100644 index 0000000000..971a78bc2f --- /dev/null +++ b/files/zh-cn/learn/css/first_steps/styling_a_biography_page/index.html @@ -0,0 +1,105 @@ +--- +title: 运用你的新知识 +slug: Learn/CSS/First_steps/Styling_a_biography_page +tags: + - CSS + - 新手 +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +original_slug: Learn/CSS/First_steps/Using_your_new_knowledge +--- +

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

通过在前几节课程中学到的知识，你应该学会了用CSS组织一个简单的文本文件，并且在其中添加自己的CSS样式。本节中你将实现这一功能。

+ + + + + + + + + + + + +
先决条件： +

基本熟悉使用计算机，基本工作环境的设置，基本的文件处理知识，基本的HTML知识（在HTML概述中学习）和CSS基础（查看本模块其他内容）

+
目标： +

尝试使用一些CSS的新玩法并检验新的知识

+
+ +

先决条件

+ +

你可以使用下面的实时编辑器，或者下载这个download the starting point在自己的编辑器中进行编辑。这是一个独立的HTML文件，在head中包含了初始CSS样式。你可以将这些CSS样式从HTML文件中移出，保存为另一个独立文件。你可以选择CodePen、jsFiddle或Glitch中的任意一个完成这些工作。

+ +
+

注意：如果遇到困难，你可以向我求助——参见本页下面的测评或请求帮助页面。

+
+ +

让我们来学一些CSS样式

+ +

接下来的实例是一个个人主页，我们用CSS设定它的样式。以下是我用到的一些CSS属性，通过这些链接，你可以打开相应的MDN页面了解更多。

+ + + +

我使用了许多不同的选择器（样式元素），如h1和h2，也为工作职务建立了一个类别。

+ +

尝试使用CSS更改这一页面的显示，试着修改已有属性的取值，删除一些规则，或添加新的样式。然后通过CSS 参考找到本文未提及的一些属性，尽管大胆尝试！

+ +

举例来说，你可以:

+ + + +

最终，你得到的页面将如下图所示：

+ +

Screenshot of how the example should look after completing the assessment.

+ +

记住这里没有错误的答案——在这个阶段你可以在学习中娱乐一下。

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

+ +

测评或请求帮助

+ +

如果你希望测试你的页面，或者你遇到困难想要求助，你可以：

+ +
    +
  1. 将你的文件提交到可网络共享的编辑器，如CodePen、jsFiddle或Glitch。
    2. +
  2. 在MDN论坛（MDN Discourse forum）发帖请求测评或帮助。发帖时添加“学习”的标签，这样我们能够更容易找到它。你的帖子应包括以下内容：
    3. +
+ + + +

接下来是什么？

+ +

恭喜你完成了第一个模块的学习。现在你应该对CSS有了一个大致的了解 并且能够了解在样式表中发生的大多数事情。在下一个模块CSS构建中，我们将对一些关键区域进行深入的学习。

+ +

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

本章目录

+ +
    +
  1. 什么是CSS？
    2. +
  2. CSS入门
    3. +
  3. CSS是如何构成的
    4. +
  4. CSS是如何工作的
    5. +
  5. 运用你所学的知识
    6. +
diff --git a/files/zh-cn/learn/css/first_steps/using_your_new_knowledge/index.html b/files/zh-cn/learn/css/first_steps/using_your_new_knowledge/index.html deleted file mode 100644 index 49b2fb8e88..0000000000 --- a/files/zh-cn/learn/css/first_steps/using_your_new_knowledge/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: 运用你的新知识 -slug: Learn/CSS/First_steps/Using_your_new_knowledge -tags: - - CSS - - 新手 -translation_of: Learn/CSS/First_steps/Using_your_new_knowledge ---- -

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

通过在前几节课程中学到的知识，你应该学会了用CSS组织一个简单的文本文件，并且在其中添加自己的CSS样式。本节中你将实现这一功能。

- - - - - - - - - - - - -
先决条件： -

基本熟悉使用计算机，基本工作环境的设置，基本的文件处理知识，基本的HTML知识（在HTML概述中学习）和CSS基础（查看本模块其他内容）

-
目标： -

尝试使用一些CSS的新玩法并检验新的知识

-
- -

先决条件

- -

你可以使用下面的实时编辑器，或者下载这个download the starting point在自己的编辑器中进行编辑。这是一个独立的HTML文件，在head中包含了初始CSS样式。你可以将这些CSS样式从HTML文件中移出，保存为另一个独立文件。你可以选择CodePen、jsFiddle或Glitch中的任意一个完成这些工作。

- -
-

注意：如果遇到困难，你可以向我求助——参见本页下面的测评或请求帮助页面。

-
- -

让我们来学一些CSS样式

- -

接下来的实例是一个个人主页，我们用CSS设定它的样式。以下是我用到的一些CSS属性，通过这些链接，你可以打开相应的MDN页面了解更多。

- - - -

我使用了许多不同的选择器（样式元素），如h1和h2，也为工作职务建立了一个类别。

- -

尝试使用CSS更改这一页面的显示，试着修改已有属性的取值，删除一些规则，或添加新的样式。然后通过CSS 参考找到本文未提及的一些属性，尽管大胆尝试！

- -

举例来说，你可以:

- - - -

最终，你得到的页面将如下图所示：

- -

Screenshot of how the example should look after completing the assessment.

- -

记住这里没有错误的答案——在这个阶段你可以在学习中娱乐一下。

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

- -

测评或请求帮助

- -

如果你希望测试你的页面，或者你遇到困难想要求助，你可以：

- -
    -
  1. 将你的文件提交到可网络共享的编辑器，如CodePen、jsFiddle或Glitch。
    2. -
  2. 在MDN论坛（MDN Discourse forum）发帖请求测评或帮助。发帖时添加“学习”的标签，这样我们能够更容易找到它。你的帖子应包括以下内容：
    3. -
- - - -

接下来是什么？

- -

恭喜你完成了第一个模块的学习。现在你应该对CSS有了一个大致的了解 并且能够了解在样式表中发生的大多数事情。在下一个模块CSS构建中，我们将对一些关键区域进行深入的学习。

- -

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

本章目录

- -
    -
  1. 什么是CSS？
    2. -
  2. CSS入门
    3. -
  3. CSS是如何构成的
    4. -
  4. CSS是如何工作的
    5. -
  5. 运用你所学的知识
    6. -
diff --git a/files/zh-cn/web/api/window/devicemotion_event/index.html b/files/zh-cn/web/api/window/devicemotion_event/index.html new file mode 100644 index 0000000000..121c863f85 --- /dev/null +++ b/files/zh-cn/web/api/window/devicemotion_event/index.html @@ -0,0 +1,58 @@ +--- +title: Window.ondevicemotion +slug: Web/API/Window/devicemotion_event +tags: + - API + - Device Orientation + - Firefox OS + - Mobile + - Motion + - 移动端设备 +translation_of: Web/API/Window/ondevicemotion +original_slug: Web/API/Window/ondevicemotion +--- +

{{ ApiRef() }}

+ +

摘要

+ +

一个发送到窗口的{{ event("devicemotion")}}事件处理程序。

+ +

语法

+ +
window.ondevicemotion = funcRef;
+
+ +

Where funcRef is a reference to a function. This function receives a {{ domxref("DeviceMotionEvent") }} object describing the motion that occurred.

+ +

这里的funcRef是一个函数的引用。这个函数接收一个{{ domxref("DeviceMotionEvent") }} 对象类型的参数描述发生的动作。

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Initial specification.
+ +

浏览器兼容

+ +

{{ page("/en-US/docs/Web/API/DeviceMotionEvent","Browser_compatibility") }}

+ +

参考

+ + diff --git a/files/zh-cn/web/api/window/deviceorientationabsolute_event/index.html b/files/zh-cn/web/api/window/deviceorientationabsolute_event/index.html new file mode 100644 index 0000000000..6f1e4f5fc7 --- /dev/null +++ b/files/zh-cn/web/api/window/deviceorientationabsolute_event/index.html @@ -0,0 +1,36 @@ +--- +title: Window.ondeviceorientationabsolute +slug: Web/API/Window/deviceorientationabsolute_event +translation_of: Web/API/Window/ondeviceorientationabsolute +original_slug: Web/API/Window/ondeviceorientationabsolute +--- +

{{ ApiRef() }}{{Non-standard_header}}

+ +

摘要

+ +

An event handler for the {{ event("deviceorientationabsolute") }} event containing information about an absolute device orientation change.

+ +

Syntax

+ +
window.ondeviceorientationabsolute = function(event) { ... };
+window.addEventListener('deviceorientationabsolute', function(event) { ... });
+
+ +

Specifications

+ +

This event handler is not currently part of any specification.

+ +

Browser compatibility

+ + + +

{{Compat("api.Window.ondeviceorientationabsolute")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/window/ondevicemotion/index.html b/files/zh-cn/web/api/window/ondevicemotion/index.html deleted file mode 100644 index 41cda848df..0000000000 --- a/files/zh-cn/web/api/window/ondevicemotion/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Window.ondevicemotion -slug: Web/API/Window/ondevicemotion -tags: - - API - - Device Orientation - - Firefox OS - - Mobile - - Motion - - 移动端设备 -translation_of: Web/API/Window/ondevicemotion ---- -

{{ ApiRef() }}

- -

摘要

- -

一个发送到窗口的{{ event("devicemotion")}}事件处理程序。

- -

语法

- -
window.ondevicemotion = funcRef;
-
- -

Where funcRef is a reference to a function. This function receives a {{ domxref("DeviceMotionEvent") }} object describing the motion that occurred.

- -

这里的funcRef是一个函数的引用。这个函数接收一个{{ domxref("DeviceMotionEvent") }} 对象类型的参数描述发生的动作。

- -

规范

- - - - - - - - - - - - - - - - -
规范状态备注
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Initial specification.
- -

浏览器兼容

- -

{{ page("/en-US/docs/Web/API/DeviceMotionEvent","Browser_compatibility") }}

- -

参考

- - diff --git a/files/zh-cn/web/api/window/ondeviceorientation/index.html b/files/zh-cn/web/api/window/ondeviceorientation/index.html deleted file mode 100644 index 672cc0aaa3..0000000000 --- a/files/zh-cn/web/api/window/ondeviceorientation/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Window.ondeviceorientation -slug: Web/API/Window/ondeviceorientation -translation_of: Web/API/Window/ondeviceorientation ---- -

{{ ApiRef() }}

- -

简介

- -

{{ event("deviceorientation") }}事件的事件处理程序，该事件包含了设备的相对旋转方向改变信息。

- -

语法

- -
window.ondeviceorientation = function(event) { ... };
-window.addEventListener('deviceorientation', function(event) { ... });
-
- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Initial specification.
- -

浏览器兼容性

- -

{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }}

- -

更多资料

- - diff --git a/files/zh-cn/web/api/window/ondeviceorientationabsolute/index.html b/files/zh-cn/web/api/window/ondeviceorientationabsolute/index.html deleted file mode 100644 index b595d9852c..0000000000 --- a/files/zh-cn/web/api/window/ondeviceorientationabsolute/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Window.ondeviceorientationabsolute -slug: Web/API/Window/ondeviceorientationabsolute -translation_of: Web/API/Window/ondeviceorientationabsolute ---- -

{{ ApiRef() }}{{Non-standard_header}}

- -

摘要

- -

An event handler for the {{ event("deviceorientationabsolute") }} event containing information about an absolute device orientation change.

- -

Syntax

- -
window.ondeviceorientationabsolute = function(event) { ... };
-window.addEventListener('deviceorientationabsolute', function(event) { ... });
-
- -

Specifications

- -

This event handler is not currently part of any specification.

- -

Browser compatibility

- - - -

{{Compat("api.Window.ondeviceorientationabsolute")}}

- -

See also

- - -- cgit v1.2.3-54-g00ecf