Add semicolon to inline CSS (#34737)
This commit is contained in:
Nathan Lakritz
The Coding Aviator
parent
57492772fe
commit
c31d1e2de9
@ -38,7 +38,7 @@ tests:
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2 style="color: red">CatPhotoApp</h2>
|
||||
<h2 style="color: red;">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: 使用CSS选择器设置样式元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">使用CSS，您可以使用数百种CSS <code>properties</code>来更改元素在页面上的显示方式。当您输入<code><h2 style="color: red">CatPhotoApp</h2></code> ，您使用<code>inline CSS</code> （代表<code>Cascading Style Sheets</code>对单个<code>h2</code>元素进行<code>Cascading Style Sheets</code> 。这是指定元素样式的一种方法，但有一种更好的方法来应用<code>CSS</code> 。在代码的顶部，创建一个<code>style</code>块，如下所示： <blockquote> <风格> <br> </样式> </blockquote>在该样式块中，您可以为所有<code>h2</code>元素创建<code>CSS selector</code> 。例如，如果您希望所有<code>h2</code>元素都是红色，则可以添加如下所示的样式规则： <blockquote> <风格> <br> h2 {color：red;} <br> </样式> </blockquote>请注意，在每个元素的样式规则周围同时打开和关闭花括号（ <code>{</code>和<code>}</code> ）非常重要。您还需要确保元素的样式定义位于开始和结束样式标记之间。最后，请务必在每个元素的样式规则的末尾添加分号。 </section>
|
||||
<section id="description">使用CSS，您可以使用数百种CSS <code>properties</code>来更改元素在页面上的显示方式。当您输入<code><h2 style="color: red;">CatPhotoApp</h2></code> ，您使用<code>inline CSS</code> （代表<code>Cascading Style Sheets</code>对单个<code>h2</code>元素进行<code>Cascading Style Sheets</code> 。这是指定元素样式的一种方法，但有一种更好的方法来应用<code>CSS</code> 。在代码的顶部，创建一个<code>style</code>块，如下所示： <blockquote> <风格> <br> </样式> </blockquote>在该样式块中，您可以为所有<code>h2</code>元素创建<code>CSS selector</code> 。例如，如果您希望所有<code>h2</code>元素都是红色，则可以添加如下所示的样式规则： <blockquote> <风格> <br> h2 {color：red;} <br> </样式> </blockquote>请注意，在每个元素的样式规则周围同时打开和关闭花括号（ <code>{</code>和<code>}</code> ）非常重要。您还需要确保元素的样式定义位于开始和结束样式标记之间。最后，请务必在每个元素的样式规则的末尾添加分号。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">删除<code>h2</code>元素的样式属性，而不是创建CSS <code>style</code>块。添加必要的CSS以将所有<code>h2</code>元素变为蓝色。 </section>
|
||||
@ -38,7 +38,7 @@ tests:
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2 style="color: red">CatPhotoApp</h2>
|
||||
<h2 style="color: red;">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ videoUrl: 'https://scrimba.com/c/cJKMBT2'
|
||||
## Description
|
||||
<section id='description'>
|
||||
With CSS, there are hundreds of CSS <code>properties</code> that you can use to change the way an element looks on your page.
|
||||
When you entered <code><h2 style="color: red">CatPhotoApp</h2></code>, you were styling that individual <code>h2</code> element with <code>inline CSS</code>, which stands for <code>Cascading Style Sheets</code>.
|
||||
When you entered <code><h2 style="color: red;">CatPhotoApp</h2></code>, you were styling that individual <code>h2</code> element with <code>inline CSS</code>, which stands for <code>Cascading Style Sheets</code>.
|
||||
That's one way to specify the style of an element, but there's a better way to apply <code>CSS</code>.
|
||||
At the top of your code, create a <code>style</code> block like this:
|
||||
<blockquote><style><br></style></blockquote>
|
||||
@ -48,7 +48,7 @@ tests:
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2 style="color: red">CatPhotoApp</h2>
|
||||
<h2 style="color: red;">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: Use seletores CSS para elementos de estilo
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Com o CSS, existem centenas de <code>properties</code> CSS que você pode usar para alterar a aparência de um elemento na sua página. Quando você digitou <code><h2 style="color: red">CatPhotoApp</h2></code> , você estava estilizando esse elemento <code>h2</code> individual com <code>inline CSS</code> , que significa <code>Cascading Style Sheets</code> . Essa é uma maneira de especificar o estilo de um elemento, mas há uma maneira melhor de aplicar <code>CSS</code> . Na parte superior do seu código, crie um bloco de <code>style</code> como este: <blockquote> <style> <br> </ style> </blockquote> Dentro desse bloco de estilo, você pode criar um <code>CSS selector</code> para todos os elementos <code>h2</code> . Por exemplo, se você quisesse que todos os elementos <code>h2</code> fossem vermelhos, você adicionaria uma regra de estilo semelhante a esta: <blockquote> <style> <br> h2 {cor: vermelho;} <br> </ style> </blockquote> Observe que é importante ter chaves de abertura e de fechamento ( <code>{</code> e <code>}</code> ) ao redor das regras de estilo de cada elemento. Você também precisa garantir que a definição de estilo do seu elemento esteja entre as tags de estilo de abertura e fechamento. Por fim, adicione um ponto-e-vírgula ao final de cada uma das regras de estilo de seu elemento. </section>
|
||||
<section id="description"> Com o CSS, existem centenas de <code>properties</code> CSS que você pode usar para alterar a aparência de um elemento na sua página. Quando você digitou <code><h2 style="color: red;">CatPhotoApp</h2></code> , você estava estilizando esse elemento <code>h2</code> individual com <code>inline CSS</code> , que significa <code>Cascading Style Sheets</code> . Essa é uma maneira de especificar o estilo de um elemento, mas há uma maneira melhor de aplicar <code>CSS</code> . Na parte superior do seu código, crie um bloco de <code>style</code> como este: <blockquote> <style> <br> </ style> </blockquote> Dentro desse bloco de estilo, você pode criar um <code>CSS selector</code> para todos os elementos <code>h2</code> . Por exemplo, se você quisesse que todos os elementos <code>h2</code> fossem vermelhos, você adicionaria uma regra de estilo semelhante a esta: <blockquote> <style> <br> h2 {cor: vermelho;} <br> </ style> </blockquote> Observe que é importante ter chaves de abertura e de fechamento ( <code>{</code> e <code>}</code> ) ao redor das regras de estilo de cada elemento. Você também precisa garantir que a definição de estilo do seu elemento esteja entre as tags de estilo de abertura e fechamento. Por fim, adicione um ponto-e-vírgula ao final de cada uma das regras de estilo de seu elemento. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Exclua o atributo style do seu elemento <code>h2</code> e, em vez disso, crie um bloco de <code>style</code> CSS. Adicione o CSS necessário para tornar todos os elementos <code>h2</code> azuis. </section>
|
||||
@ -38,7 +38,7 @@ tests:
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2 style="color: red">CatPhotoApp</h2>
|
||||
<h2 style="color: red;">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
@ -7,7 +7,8 @@ localeTitle: Используйте селекторы CSS для изменен
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В CSS есть сотни <code>properties</code> CSS, которые вы можете использовать, чтобы изменить способ поиска элемента на вашей странице. Когда вы ввели <code><h2 style="color: red">CatPhotoApp</h2></code> , вы стали стилизовать этот отдельный элемент <code>h2</code> со <code>inline CSS</code> , который обозначает <code>Cascading Style Sheets</code> . Это один из способов указать стиль элемента, но есть лучший способ применить <code>CSS</code> . В верхней части кода создайте блок <code>style</code> следующим образом: <blockquote> <style> <br> </ style> </blockquote> Внутри этого блока стиля вы можете создать <code>CSS selector</code> для всех элементов <code>h2</code> . Например, если вы хотите, чтобы все элементы <code>h2</code> были красными, вы можете добавить правило CSS, которое выглядит так: <blockquote> <style> <br> h2 {color: red;} <br> </ style> </blockquote> Обратите внимание, что важно иметь как открывающиеся, так и закрывающие фигурные скобки ( <code>{</code> и <code>}</code> ) вокруг правила CSS каждого селектора. Вы также должны убедиться, что правила CSS вашего селектора находится между открывающей и закрывающей фигурной скобкой. Наконец, обязательно добавьте точку с запятой в конец каждого из правил CSS вашего селектора. </section>
|
||||
|
||||
<section id="description"> В CSS есть сотни <code>properties</code> CSS, которые вы можете использовать, чтобы изменить способ поиска элемента на вашей странице. Когда вы ввели <code><h2 style="color: red;">CatPhotoApp</h2></code> , вы стали стилизовать этот отдельный элемент <code>h2</code> со <code>inline CSS</code> , который обозначает <code>Cascading Style Sheets</code> . Это один из способов указать стиль элемента, но есть лучший способ применить <code>CSS</code> . В верхней части кода создайте блок <code>style</code> следующим образом: <blockquote> <style> <br> </ style> </blockquote> Внутри этого блока стиля вы можете создать <code>CSS selector</code> для всех элементов <code>h2</code> . Например, если вы хотите, чтобы все элементы <code>h2</code> были красными, вы можете добавить правило CSS, которое выглядит так: <blockquote> <style> <br> h2 {color: red;} <br> </ style> </blockquote> Обратите внимание, что важно иметь как открывающиеся, так и закрывающие фигурные скобки ( <code>{</code> и <code>}</code> ) вокруг правила CSS каждого селектора. Вы также должны убедиться, что правила CSS вашего селектора находится между открывающей и закрывающей фигурной скобкой. Наконец, обязательно добавьте точку с запятой в конец каждого из правил CSS вашего селектора. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Удалите атрибут стиля элемента <code>h2</code> и вместо этого создайте блок <code>style</code> CSS. Добавьте необходимые правила CSS, чтобы все элементы <code>h2</code> стали синими. </section>
|
||||
@ -38,7 +39,7 @@ tests:
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2 style="color: red">CatPhotoApp</h2>
|
||||
<h2 style="color: red;">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: Usar los selectores CSS para dar estilo a los elementos
|
||||
---
|
||||
|
||||
## Descripción
|
||||
<section id="description"> Con CSS, hay cientos de <code>properties</code> CSS que puedes usar para cambiar la apariencia de un elemento en tu página. Cuando ingresaste <code><h2 style="color: red">CatPhotoApp</h2></code> , estabas dando estilo a ese elemento <code>h2</code> con <code>inline CSS</code> , que significa <code>Cascading Style Sheets</code> . Esa es una forma de especificar el estilo de un elemento, pero existe una mejor manera de aplicar <code>CSS</code> . En la parte superior de tu código, crea un bloque de <code>style</code> como este: <blockquote> <style> <br> </style> </blockquote> Dentro de ese bloque de estilo, puedes crear un <code>CSS selector</code> para todos los elementos <code>h2</code> . Por ejemplo, si deseas que todos los elementos <code>h2</code> sean rojos, debes agregar una regla de estilo como esta: <blockquote> <style> <br> h2 {color: red;} <br> </style> </blockquote> Ten en cuenta que es importante usar llaves de apertura y cierre ( <code>{</code> y <code>}</code> ) alrededor de las reglas de estilo de cada elemento. También debe asegurarse de que la definición de estilo de su elemento se encuentre entre las etiquetas de estilo de apertura y de cierre. Finalmente, asegúrese de agregar un punto y coma al final de cada una de las reglas de estilo de su elemento. </section>
|
||||
<section id="description"> Con CSS, hay cientos de <code>properties</code> CSS que puedes usar para cambiar la apariencia de un elemento en tu página. Cuando ingresaste <code><h2 style="color: red;">CatPhotoApp</h2></code> , estabas dando estilo a ese elemento <code>h2</code> con <code>inline CSS</code> , que significa <code>Cascading Style Sheets</code> . Esa es una forma de especificar el estilo de un elemento, pero existe una mejor manera de aplicar <code>CSS</code> . En la parte superior de tu código, crea un bloque de <code>style</code> como este: <blockquote> <style> <br> </style> </blockquote> Dentro de ese bloque de estilo, puedes crear un <code>CSS selector</code> para todos los elementos <code>h2</code> . Por ejemplo, si deseas que todos los elementos <code>h2</code> sean rojos, debes agregar una regla de estilo como esta: <blockquote> <style> <br> h2 {color: red;} <br> </style> </blockquote> Ten en cuenta que es importante usar llaves de apertura y cierre ( <code>{</code> y <code>}</code> ) alrededor de las reglas de estilo de cada elemento. También debe asegurarse de que la definición de estilo de su elemento se encuentre entre las etiquetas de estilo de apertura y de cierre. Finalmente, asegúrese de agregar un punto y coma al final de cada una de las reglas de estilo de su elemento. </section>
|
||||
|
||||
## Instrucciones
|
||||
<section id="instructions"> Borra el atributo de estilo del elemento <code>h2</code> y, en su lugar, crea un bloque de <code>style</code> CSS. Agrega el CSS necesario para dar a todos los elementos <code>h2</code> color azul. </section>
|
||||
@ -38,7 +38,7 @@ tests:
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2 style="color: red">CatPhotoApp</h2>
|
||||
<h2 style="color: red;">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user