
Turkish: 
Merhaba.
Benim adım Natalie.
Google Web Designer'da mühendisim.
Bu videoda CSS paneline göz atacağız;
işleyiş şeklini ve bu panelle neler
yapabileceğimizi öğreneceğiz.
Bir öğenin görünümünü veya
konumunu
ve yerleşimini Google Web Designer'da
düzenlediğinizde,
bu değişiklikler CSS olarak
ayarlanır.
Bu ayarlar araç tarafından
otomatik olarak oluşturulur.
Örneğin basit bir div çizip
Kod görünümüne bakarsam,
öğeyi burada, HTML'de görebilirim
ve CSS stil kuralı da CSS sınıf adı
kullanılarak
otomatik bir şekilde uygulanmış olur.
Daha sonra, örneğin Tasarım görünümünde
bir arka plan rengi belirlersem,
Kod görünümünde bu renk değişiminin
ilgili öğenin sınıfındaki
background-color CSS özelliği olarak
ayarlandığını görebiliriz.
Siz değişiklikler yapıp
öğelerinizi düzenledikçe
Google Web Designer hangi CSS'nin

Polish: 
Cześć, jestem Natalie
z zespołu Google Web Designera.
W tym filmie omówię panel CSS.
Pokażę, jak działa
i co można w nim zrobić.
Zmiany wyglądu,
pozycji lub układu elementu
wprowadzane w programie
Google Web Designer
są zapisywane jako kod CSS,
który narzędzie generuje automatycznie.
Jeśli na przykład
narysuję tutaj prostego diva,
w Widoku kodu będzie widać element HTML
z regułą CSS zastosowaną automatycznie
pod tą nazwą klasy CSS.
Jeśli w Widoku projektu
zmienimy kolor tła diva,
w Widoku kodu pojawi się
właściwość CSS
o nazwie „background-color”
w klasie elementu.
Kiedy podczas edytowania
wprowadza się różne zmiany,
Google Web Designer

Chinese: 
大家好
我叫Natalie
是Google Web Designer团队的一名工程师
在本视频中，我将简要介绍CSS面板
以及它的工作机制和用途
在Google Web Designer中
修改某个元素的外观、
或者位置和布局时
这款工具会自动
将这些更改生成CSS
例如，我画一个简单的div
进入代码视图
就会看到该元素以HTML形式显示在这里
还有通过CSS类名称
自动为它应用的CSS样式规则
假如我们在设计视图中为它设置了背景颜色
就会在代码视图中看到
这项颜色更改已变成此元素的类中的
background-color CSS属性
当您更改和修改元素
Google Web Designer会自动

Spanish: 
NATALIE: Hola
me llamo Natalie
y soy una de las ingenieras
que trabaja en Google Web Designer.
En este vídeo, vamos a
explicar en qué consiste el panel CSS
cómo funciona y cómo lo puedes usar.
Cuando editas el aspecto, la posición o
el diseño de un elemento
en Google Web Designer
los cambios son en código CSS
que la herramienta
genera automáticamente.
Así, si dibujo un div sencillo
y voy a la vista de código,
vemos este elemento en HTML
y la regla de estilo CSS
que se le ha aplicado automáticamente
mediante el nombre de clase CSS.
Si ahora en la vista de diseño le
asignamos un color de fondo, por ejemplo
en la vista de código vemos
este cambio de color definido como 
la propiedad CSS "background-color"
en la clase de este elemento.
Cuando haces cambios y editas elementos
Google Web Designer
elegirá automáticamente

Russian: 
Здравствуйте!
Меня зовут Натали.
Я специалист по Google Web Designer.
В этом видео я расскажу о панели CSS:
о том, как она работает
и для чего нужна.
Когда вы изменяете внешний вид элемента,
его положение
или макет в Google Web Designer,
это отражается в стилях CSS,
которые инструмент
создает автоматически.
Например, если я нарисую
простой элемент div
и перейду в режим просмотра кода,
то смогу найти в HTML-коде этот элемент
и правила стилей CSS,
которые автоматически
применились к нему
с помощью класса CSS.
Если в режиме просмотра макета
изменить цвет фона,
в режиме просмотра кода
этот цвет будет задан в свойстве CSS
класса этого элемента.
Когда вы изменяете элементы,
Google Web Designer автоматически

Japanese: 
Google Web Designer
エンジニアのナタリーです
この動画では CSSパネルの
機能と使い方を説明します
GWDで要素の外観、位置、
レイアウトを編集すると
最終的には変更後の
CSSが自動生成されます
たとえばシンプルなdivを作成して
コードを表示すると
HTMLで記述された要素と
CSSクラス名を使って自動的に適用された
CSSスタイルルールを確認できます
デザインビューに戻り たとえば
背景色を指定してからコードを表示すると
要素のクラスにCSSプロパティの
background-colorが追加されています
このように何か変更を加えると

Dutch: 
Hallo.
Mijn naam is Natalie
en ik ben een van de engineers
van Google Web Designer.
In deze video
kijken we naar het css-venster,
hoe het werkt en wat u ermee kunt doen.
Wanneer u voor een element
het uiterlijk,
de positie of opmaak bewerkt
in Google Web Designer,
worden die wijzigingen css
die de tool
automatisch genereert.
Wanneer ik een eenvoudige div teken
en we naar de codeweergave gaan,
zien we het element in de html
en de css-regel
die er automatisch op is toegepast
via de css-klassenaam.
Als we er in de ontwerpweergave
een achtergrondkleur aan geven,
zien we in de codeweergave
dat deze wijziging is ingesteld
als de css-eigenschap 'background-color'
in de klasse van dit element.
Terwijl u wijzigingen maakt
en elementen bewerkt,

Italian: 
Ciao
mi chiamo Natalie
e faccio parte del team di
ingegneri di Google Web Designer.
In questo video ti
mostrerò il riquadro CSS
come funziona e come può essere usato.
Quando modifichi l'aspetto, la posizione o
il layout di un elemento
in Google Web Designer
lo strumento genera automaticamente
il codice CSS corrispondente.
Quando disegno un div semplice
se passiamo alla Vista codice
vediamo l'elemento qui in HTML
e la regola dello stile CSS che è
stata applicata automaticamente
tramite il nome della classe CSS.
Se andiamo in Vista struttura
e selezioniamo un colore di sfondo
in Vista codice possiamo vedere
che questa modifica è stata impostata
come proprietà CSS background-color
nella classe di questo elemento.
Quando modifichi gli elementi
Google Web Designer prende

English: 
NATALIE: Hello
My name is Natalie
and I'm one of the engineers 
that works on Google Web Designer.
And in this video we're going
to take a look at the CSS panel
and how it works and what you can do with it.
So when you edit an element's appearance
or position and layout 
in Google Web Designer
those changes end up as CSS
which the tool automatically 
generates for you.
So for example when I draw a simple div
if we go to Code view we can
see the element here in the HTML
and the CSS style rule that was automatically
applied to it via the CSS class name.
And then if in Design view we for example
give it a background color
then we can see that in Code view
this color change was set as
the background-color CSS property
on this element's class.
So as you make changes and edit your elements
Google web designer will automatically

Korean: 
NATALIE: 안녕하세요
Natalie입니다
저는 Google Web Designer
엔지니어입니다
이번 동영상에서는 CSS 패널을
살펴보고, CSS 패널의
작동 방식과 패널에서 할 수 있는
작업에 대해 알아보겠습니다
Google Web Designer에서
요소의 모양이나 위치 및
레이아웃을 수정하면
Google Web Designer가
변경사항을 CSS에 자동으로
반영합니다
예를 들어, 단순한 div를 그리고
코드 보기로 이동해 보면
HTML에서 요소를 볼 수 있고
CSS 스타일 규칙이
CSS 클래스 이름을 통해 자동으로
적용된 것을 확인할 수 있습니다
디자인 보기에서
배경색을 지정한 다음
코드 보기에서 이를 확인해 보면
이 요소 클래스에서 색상 변경사항이
배경색 CSS 속성으로
설정되었음을 알 수 있습니다
요소를 변경 및 수정하면
Google Web Designer는
자동으로

German: 
Hallo!
Mein Name ist Nathalie
und ich bin Entwicklerin
im Google Web Designer-Team.
In diesem Video sehen wir uns
das CSS-Steuerfeld genauer an
und ich zeige Ihnen, wie es funktioniert
und was man damit tun kann.
Wenn Sie die Darstellung
oder die Position und das Layout
eines Elements
in Google Web Designer bearbeiten,
werden vom Tool automatisch
entsprechende CSS-Regeln erstellt.
Wenn ich zum Beispiel
ein einfaches div-Element zeichne
und dann zur Codeansicht wechsle,
sehen wir das Element hier im HTML-Code
und die CSS-Stilregel, die automatisch
über den CSS-Klassennamen
darauf angewendet wurde.
Und wenn ich in der Designansicht
eine Hintergrundfarbe festlege,
sehen wir in der Codeansicht,
dass diese Farbänderung
als CSS-Eigenschaft "background-color"
in der Klasse
dieses Elements definiert wurde.
Bei der Bearbeitung von Elementen
nimmt Ihnen Google Web Designer

Thai: 
สวัสดีค่ะ
ฉันชื่อนาตาลี
เป็นวิศวกรที่ทำงาน
ในทีม Google Web Designer
วันนี้เราจะมาพูดถึงแผง CSS
รวมถึงวิธีการทำงานและประโยชน์ของแผงนี้
เวลาที่คุณแก้ไขรูปลักษณ์ขององค์ประกอบ
หรือตำแหน่งและการออกแบบ
ใน Google Web Designer
การเปลี่ยนแปลงจะกลายเป็นโค้ด CSS
ซึ่งโปรแกรมนี้จะสร้างให้คุณโดยอัตโนมัติ
เช่น เวลาฉันวาด div ง่ายๆ ขึ้นมา
ถ้าเราไปที่มุมมองโค้ด
ก็จะเห็นองค์ประกอบเป็น HTML ตรงนี้
และกฎสไตล์ CSS
ที่โปรแกรมนำมาใช้โดยอัตโนมัติ
ผ่านชื่อคลาส CSS
และสมมติว่าเรากำหนดสีพื้นหลัง
ในมุมมองการออกแบบ
เราจะเห็นในมุมมองโค้ดว่า
การเปลี่ยนสีนี้ตั้งค่าเป็นคุณสมบัติ CSS
background-color
ในคลาสขององค์ประกอบนี้
เมื่อคุณเปลี่ยนแปลงและแก้ไของค์ประกอบ
Google Web Designer จะตัดสินใจ

Portuguese: 
Olá!
Meu nome é Natalie
e sou engenheira do Google Web Designer.
Neste vídeo, 
vamos conhecer o painel "CSS",
saber para que serve e como ele funciona.
Ao editar o aspecto, a posição e o layout
de um elemento no Google Web Designer,
essas alterações gerarão um CSS,
criado automaticamente pela ferramenta.
Por exemplo, 
se você acessar a Visualização de código
ao desenhar um div simples,
verá o elemento em HTML
e a regra de estilo CSS
aplicada automaticamente
pelo nome da classe CSS.
E se você definir a cor do plano de fundo
na Visualização do design,
verá que essa alteração
na Visualização de código
foi definida como a propriedade
de CSS "background-color"
na classe do elemento.
Assim, 
quando você alterar e editar elementos,
o Google Web Designer

Chinese: 
大家好，我叫 Natalie
是 Google Web Designer 工程師
我會在本片中概略介紹 CSS 面板
以及它的運作方式和用途
在 GWD 編輯元素的外觀
位置和版面配置時
這項工具會自動將這些變更變成 CSS
比方說，我畫個簡單的 div
如果進入程式碼檢視
我們會看到該元素以 HTML 顯示在這裡
以及透過 CSS 類別名稱
自動套用上去的 CSS 樣式規則
假如我們在設計檢視為它設定背景色彩
就會在程式碼檢視中看到
這個顏色變更
已在這個元素的類別上
設成 background-color CSS 屬性
當你變更和編輯元素

French: 
Bonjour,
je m'appelle Natalie
et je suis ingénieur
Google Web Designer.
Je vais vous présenter le fonctionnement
du panneau CSS.
Lorsque vous modifiez un élément
dans Google Web Designer,
il génère automatiquement
du code CSS.
Traçons par ex. un élément div.
Dans la vue Code,
l'élément HTML apparaît
ainsi que la règle de style associée
via le nom de classe CSS.
Dans la vue Conception,
appliquons une couleur d'arrière-plan.
Dans la vue Code,
ce changement
est défini comme
propriété CSS "background-color"
pour la classe de l'élément.
Au fur et à mesure des modifications,
Google Web Designer

Turkish: 
oluşturulacağı ve nereye konacağı
ile ilgili pek çok kararı otomatik olarak
verir.
Bu çok kullanışlı olabilir,
ancak bazen daha fazla kontrol sahibi
olmak istersiniz.
Tabii ki istediğiniz zaman Kod görünümüne
gidebilirsiniz
ancak dosyanız büyüdükçe
doğru kuralları bulmak
epey zor olabilir.
İşte CSS paneli tam bu noktada
devreye girer.
CSS paneli bir CSS denetleyici ve
düzenleyici aracıdır.
Google Chrome'un Geliştirici aracı olan
Stiller paneli gibi bir araç
kullandıysanız,
buna çok benzer.
Herhangi bir anda CSS paneli
size ilgili öğeye uygulanan
tüm stil kurallarını, önceliği en yüksek
olandan
en düşüğe doğru sıralayarak gösterir.
En üstteki özeldir.
Bu aslında, stilin öğelere
uygulanabilmesi için
kullanılan satır içi stil bildirimidir.
Gerisi ise yalnızca stil kurallarıdır.
Bu stil kurallarını ister doğrudan
düzenlemek istiyor olun
ister CSS kurallarınızın hiyerarşisi
üzerinde daha hassas kontrole
sahip olmayı tercih ediyor olun,
CSS paneli çok işinize yarayabilir.

Chinese: 
在后台为您做出很多决定
包括该创建什么CSS以及CSS该放在哪里
这非常实用
但有时您想自己掌控这些设置
当然您随时都可以进入代码视图
但是当文件越来越大
就越难找出对应的规则了
这时CSS面板就派上用场了
CSS面板是CSS检查器和编辑器工具
如果使用过
Google Chrome开发者工具
中的“Styles”面板
就会发现两者很相似
CSS随时都会显示
应用到元素的所有样式规则
而且会按优先级从高到低排序
最上面这个很特别
因为它引用的是内嵌样式声明
也就是元素上的样式属性
其他的都是样式规则
无论是想要直接修改这些样式规则
还是想要更精细地控制
CSS规则的层次结构
CSS面板都能派上用场

German: 
automatisch viele Entscheidungen ab,
etwa welche CSS-Regel erstellt
und wo sie platziert wird.
Das kann sehr hilfreich sein,
aber manchmal möchten Sie vielleicht
einige Entscheidungen selbst treffen.
Natürlich können Sie
zur Codeansicht wechseln,
aber mit zunehmender Dateigröße
wird es schwierig,
die richtigen Regeln zu finden.
Hier kommt das CSS-Steuerfeld ins Spiel.
Es ist ein CSS-Prüf-
und -Bearbeitungstool.
Falls Sie
die Google Chrome-Entwicklertools
und das Steuerfeld "Stile" kennen,
wird Ihnen das hier vertraut vorkommen.
Im CSS-Steuerfeld finden Sie
alle Stilregeln, die für das Element gelten,
sortiert nach Priorität,
angefangen bei der höchsten.
Die Regel oben ist besonders.
Sie bezieht sich auf
die Inline-Style-Deklaration,
also die Stilattribute des Elements.
Die restlichen sind normale Stilregeln.
Ob Sie diese
Stilregeln nun direkt bearbeiten
oder die Hierarchie der CSS-Regeln
detailliert festlegen möchten,
das CSS-Steuerfeld hilft Ihnen dabei.

Italian: 
molte decisioni al posto tuo
riguardo a quale codice
CSS creare e a dove inserirlo.
Può essere molto efficace
ma potresti volere un maggiore controllo.
Puoi consultare la
Vista codice in ogni momento
ma più il tuo file diventa grande
più diventa difficile trovare
le regole che stai cercando.
È qui che entra in gioco il riquadro CSS.
Si tratta di uno strumento per
la modifica del codice CSS.
Se hai già usato strumenti
come il riquadro Stili degli
strumenti per sviluppatori di Chrome
si tratta di un concetto molto simile.
Il riquadro CSS ti mostra in ogni momento
tutte le le regole di stile
associate all'elemento
in ordine decrescente di precedenza.
La prima della lista è speciale.
Si tratta della dichiarazione
dello stile incorporato
che attribuisce uno stile all'elemento.
Le altre sono semplici regole di stile.
Sia che tu voglia
modificare queste regole di stile
sia che ti interessi un
maggiore controllo sulla
gerarchia delle regole CSS
il riquadro CSS può essere molto utile.

Portuguese: 
definirá ajustes
como o tipo e o lugar
onde o CSS deve ser criado.
Isso pode ser muito útil,
mas talvez você queira
ter um pouco mais de controle.
É possível acessar
a Visualização de código,
mas se o arquivo ficar maior,
pode ser bem difícil
procurar as regras certas.
Para isso criamos o painel "CSS".
Ele funciona como inspetor de CSS
e ferramenta de edição.
Se você já usou um recurso como
as Ferramentas do
Google Chrome para desenvolvedores,
o painel "Estilos", a ideia é a mesma.
O painel "CSS" mostrará a você
todas as regras de estilo para o elemento,
da maior à menor precedência.
A do topo é especial.
Isso se refere
à declaração de estilo in-line,
ou seja, aos atributos de estilo.
O restante são só regras de estilo.
Se você quiser editar
essas regras de estilo diretamente
ou controlar todos os detalhes
da hierarquia das suas regras CSS,
o painel "CSS" pode ser muito útil.

Japanese: 
GWDが自動で判断し
CSSを適切な位置に挿入してくれます
とても便利ですが
もう少し制御したい場合もあります
もちろん コードは直接編集できますが
ファイルが大きくなると
目的のルールを探すのも大変です
そこでCSSパネルです
CSSパネルは
インスペクタ兼編集ツールです
Chromeデベロッパーツールの
スタイルパネルとよく似ています
CSSパネルには
要素に適用されるスタイルルールが
優先度の高いものから
順に表示されます
一番上に表示されるのは
インラインスタイルの宣言
つまり要素のスタイル属性です
残りはスタイルルールです
スタイルルールを直接
編集したい場合や
CSSルールを階層化して
細かく管理したい場合は
CSSパネルが便利です

Spanish: 
el CSS que se crea y dónde colocarlo
el CSS que se crea y dónde colocarlo
lo cual es muy útil
pero a veces quieres un poco
más de control sobre estos aspectos.
Puedes ir a la vista de código
pero a medida que
el archivo se complica
es más difícil
localizar las reglas adecuadas
por lo que hay que usar el panel CSS.
El panel CSS es
una herramienta de edición y supervisión
parecida a las herramientas
de Google Chrome para desarrolladores.
El panel Estilos es la misma idea.
El panel CSS muestra en todo momento
todas las reglas
aplicables a ese elemento
por orden de mayor a menor prioridad.
El primero es especial.
Se refiere a
la declaración de estilo insertado
para que ese estilo
se atribuya a ese elemento.
El resto son solo reglas de estilo.
Así pues, si quieres editar
estas reglas de estilo directamente
o tener un control más preciso
de la jerarquía de reglas CSS
el panel CSS es muy útil.

English: 
make a lot of decisions for you under the hood
regarding what CSS to create
and where to put it
and this can be really powerful
but sometimes you want a
little bit more control than that.
Of course you can always go into Code view
but as your file gets larger
hunting for the right rules 
can be pretty difficult.
So this is where the CSS panel comes in
The CSS panel is a CSS inspector and
editor tool
and if you've ever used a tool
like Google Chrome's Developer tools 
the Styles panel
this is very similar
same idea.
And any given point
the CSS panel is showing you
all the style rules that apply to the element
in an order of precedence maximum
to lowest precedence.
The one at the top is special.
This actually refers to 
the inline style declaration
so the style attributes on
the element.
And the rest are just style rules.
And so whether you want to edit
these style rules directly
or whether you want to 
have more fine-grained control
over the hierarchy of your CSS rules
the CSS panel can be very helpful.

Korean: 
어떤 CSS를 생성하고
어디에 배치할지를
결정하고 대신 처리합니다
이는 매우 강력한 기능이지만
경우에 따라 더 세세하게
요소를 제어해야 할 수 있습니다
물론, 언제든지 코드 보기로
이동할 수 있지만
파일이 커지면
올바른 규칙을 찾기가
어려울 수 있습니다
바로 이때 CSS 패널이
유용하게 사용되는데요
CSS 패널은 CSS 검사기이자
편집기 도구로,
Google Chrome 개발자 도구의
스타일 패널과 같은 도구를
사용해 본 적이 있다면
매우 유사하게 느껴질 것입니다
같은 방식이죠
CSS 패널은 항상 요소에 적용된
모든 스타일 규칙을 표시하는데,
우선하는 규칙부터 낮은 규칙 순으로
표시됩니다
처음 표시되는 규칙은 특별한데요
이는 실제로 인라인
스타일 선언으로,
요소의 스타일 속성이 됩니다
나머지는 스타일 규칙입니다
이러한 스타일 규칙을 직접
수정하거나
CSS 규칙의 계층구조를
더 세부적으로
제어할 때
CSS 패널이 유용하게 사용됩니다.

Polish: 
automatycznie decyduje,
jaki kod CSS utworzyć
i gdzie go umieścić.
To może być bardzo przydatne,
ale czasem potrzeba
trochę więcej kontroli.
Można zawsze
przejść do Widoku kodu,
ale jeśli plik jest duży,
znalezienie reguł
może być trudne.
Można wtedy użyć panelu CSS.
Panel CSS to inspektor i edytor CSS.
Jeśli znasz 
na przykład panel „Styles”
w Narzędziach dla programistów
w Google Chrome,
to tutaj działa to podobnie.
W każdym momencie
panel CSS pokazuje
wszystkie reguły stylu
stosowane do elementu
w kolejności od nadrzędnej do podrzędnej.
Reguła na górze jest specjalna.
Odnosi się do deklaracji stylu 
elementu wbudowanego,
czyli do atrybutów stylu tego elementu.
Reszta to zwykłe reguły stylów.
Niezależnie od tego,
czy chcesz edytować reguły bezpośrednio
lub potrzebujesz
bardziej szczegółowej kontroli
nad ich hierarchią,
panel CSS może być bardzo przydatny.

French: 
décide automatiquement
quel code CSS créer et
choisit son emplacement.
Pour reprendre un peu le contrôle,
vous pouvez utiliser la vue Code.
Mais il peut être difficile
d'y trouver la règle
recherchée en fonction
de la taille du fichier.
Utilisez plutôt le panneau CSS.
Il contient un éditeur et un inspecteur CSS.
Si vous avez déjà utilisé
les outils pour
les développeurs Google Chrome,
le panneau "Styles"
vous semblera familier.
Ce panneau affiche toutes
les règles de style
qui s'appliquent à l'élément
par ordre de priorité.
L'élément tout en haut
est spécial, c'est une déclaration
de style intégré.
En dessous,
on trouve les règles de style.
Le panneau CSS
permet de modifier
directement ces règles de style
et de contrôler la hiérarchie
de vos règles CSS.

Chinese: 
GWD 會自動在檯面下
為你做出許多決定
包括該建立什麼 CSS
以及 CSS 該放在哪裡
這非常實用
但有時你想自己掌控這些設定
你隨時都可以進入程式碼檢視
但是當檔案越來越大
就越難找出你要的規則
這時 CSS 面板就派上用場了
CSS 面板是 CSS 檢查器和編輯工具
如果你使用過
Google Chrome 開發人員工具
樣式面板
會發現兩者很相似
CSS 面板隨時都會顯示
套用到元素的所有樣式規則
而且會按優先順序從最高排到最低
最上面這個很特別
因為它參照的是內嵌樣式宣告
也就是元素上的樣式屬性
其他的只是樣式規則
無論你要直接編輯這些樣式規則
或想要更精細地控制 CSS 規則的階層
CSS 面板都能派上用場

Dutch: 
neemt Google Web Designer
veel beslissingen voor u
over welke css er moet worden gemaakt
en waar die moet worden geplaatst.
Dit kan erg handig zijn,
maar soms wilt u meer controle.
U kunt altijd naar de codeweergave gaan,
maar als het bestand groter wordt,
kan het lastig zijn
om de juiste regels te vinden.
Daar is het css-venster voor.
Het is een inspectie-
en bewerkingstool voor css.
Als u ooit een tool heeft gebruikt
zoals het stijlvenster in de Hulpprogramma's
voor ontwikkelaars van Chrome,
lijkt dit er erg op.
Op elk moment laat het css-venster
u alle stijlregels voor het element zien
op volgorde van voorrang,
van hoog naar laag.
De bovenste is speciaal.
Dit verwijst
naar de inline stijldeclaratie,
dus de stijlkenmerken voor het element.
De rest zijn stijlregels.
Of u deze stijlregels
nu rechtstreeks wilt bewerken
of nauwkeurige controle wilt
over de hiërarchie van uw css-regels,
het css-venster kan erg handig zijn.

Russian: 
принимает множество решений,
выбирая за вас,
какие стили CSS создать
и где их применить.
Это очень полезная функция,
но иногда может понадобиться
более высокий уровень контроля.
Конечно, всегда есть
режим просмотра кода,
но в больших файлах
бывает довольно сложно
найти нужное правило.
Здесь может пригодиться панель CSS.
Панель CSS – это инструмент
проверки и редактирования CSS.
Она очень похожа
на панель стилей
в инструментах разработчика
в Google Chrome.
На этой панели отображаются
все правила стилей,
применяемые к выбранному элементу,
в порядке приоритета –
от большего к меньшему.
В верхнем блоке
можно задать внутренние стили –
атрибуты стилей элемента.
А в нижнем перечислены правила стилей.
Если вам нужно
изменить конкретное правило
или по-своему настроить
иерархию правил CSS,
это можно сделать на панели CSS.

Thai: 
หลายๆ อย่างให้คุณโดยอัตโนมัติในขั้นสูง
เกี่ยวกับ CSS ที่ควรสร้าง
และตำแหน่งที่จะนำไปวาง
ซึ่งอาจเป็นการทำงานที่มีประสิทธิภาพสูง
แต่บางครั้งคุณคงอยากควบคุมสิ่งต่างๆ เอง
คุณไปที่มุมมองโค้ดได้ทุกเมื่อ
แต่เมื่อไฟล์มีขนาดใหญ่ขึ้น
อาจค้นหากฎที่ต้องการได้ยาก
แผง CSS จึงเข้ามามีบทบาทในจุดนี้
แผง CSS คือเครื่องมือตรวจสอบและแก้ไข CSS
และถ้าคุณเคยใช้เครื่องมือ
อย่างเช่น แผงสไตล์ในเครื่องมือ
สำหรับนักพัฒนาซอฟต์แวร์ของ Google Chrome
แผง CSS นี้ก็มีลักษณะคล้ายกัน
แผง CSS จะแสดงกฎสไตล์ทั้งหมด
ที่ใช้กับองค์ประกอบอยู่เสมอ
โดยเรียงตามลำดับความสำคัญสูงสุด
ไปจนถึงลำดับความสำคัญต่ำสุด
อันที่อยู่ด้านบนมีความพิเศษ
โดยเป็นการประกาศสไตล์ในบรรทัด
หรือแอตทริบิวต์สไตล์ในองค์ประกอบ
ส่วนที่เหลือเป็นเพียงกฎสไตล์
ดังนั้นไม่ว่าคุณอยากแก้ไข
กฎสไตล์เหล่านี้โดยตรง
หรืออยากควบคุมลำดับชั้นของกฎ CSS
โดยละเอียดกว่านี้
แผง CSS ก็ช่วยคุณได้

German: 
Ich lösche jetzt dieses Element
und zeige Ihnen das
anhand eines Beispiels.
Ich möchte eine Schaltfläche erstellen
und dabei handelt es sich
um eine von mehreren Schaltflächen,
die ich in meinem Dokument
erstellen möchte.
Für alle möchte ich
dieselbe visuelle Sprache verwenden,
nehmen wir also an,
ich folge einer Art Leitfaden,
der eine Vorgabe
für alle Schaltflächen enthält.
Sagen wir, die Ecken
müssen abgerundet sein,
sie müssen schattiert sein usw.
Das möchte ich spiegeln
und eine Hierarchie von Stilen erstellen.
All das ist mit
dem CSS-Steuerfeld möglich,
ohne dass ich
in die Codeansicht wechseln muss.
Ich habe ein div-Element
in Form einer Schaltfläche gezeichnet
und ich möchte eine
allgemeine Schaltflächenklasse
mit allen Stilen erstellen, die für
alle Schaltflächen meiner Seite gelten.
Dazu klicke ich auf "Regel hinzufügen".
Ich nenne sie "baseButton".
Dann weise ich ihr ein paar
allgemeine Eigenschaften zu.

Chinese: 
我先删除这个元素
然后逐步说明实际用法
假设我要创建一个按钮
而且
我可能要在文档中创建多个按钮
它只是其中之一
我希望它们都
采用相同的可视化语言
假设我要遵守的样式指南
明确规定了所有按钮的规范
例如全都要有圆角
还要加上阴影等等
我想以此为范本
创建一个样式层次结构
那么直接用CSS面板就能完成所有这些操作
完全不需要进入代码视图
我在这里画了一个按钮形状的div
接下来我想创建一个泛型按钮类
用于包含页面上所有按钮都应该应用的所有样式
那么就需要点击“添加规则”按钮
将它命名为baseButton
然后设置一些常用按钮属性

Japanese: 
この要素は削除して
具体的に使い方を説明します
まずボタンを1つ作成し
ドキュメント内で何度も複製できる
汎用ボタンを定義しましょう
全体の視覚表現を
統一したいので
従うべきスタイルガイドを決めて
ボタンの基本仕様にします
すべてのボタンは角を丸め
影を付けることにしましょう
汎用ボタンを複製して
スタイルを階層化する作業は
コードビューを使わなくても
CSSパネルで簡単にできます
ここにボタンの形の
divを描画しました
これにページの共通スタイルを適用して
汎用のボタンクラスを定義します
[+]をクリックして
ルールを追加します
名前は「baseButton」
これに汎用のボタン
プロパティを設定します

Spanish: 
Bien, ahora voy a eliminar este elemento
y veremos un caso práctico.
Supongamos que
quiero crear un botón
y además
usarlo como modelo para otros
que me gustaría crear en mi documento
y quiero que todos tengan
el mismo aspecto.
Imaginemos que
sigo una guía de estilo
en la que se indica
cómo deben ser los botones.
Todos deben tener
las esquinas redondeadas
sombreado, etc.
Así que quiero aplicar estos criterios
y crear una jerarquía de estilos.
Puedo hacerlo desde el panel CSS
sin necesidad de ir a la vista de código.
Aquí tengo un div en forma de botón
y quiero crear una clase de botón
genérica que incluya todos los estilos
que deben aplicarse a
todos los botones de mi página.
Hago clic en este botón Añadir regla
y la llamaré "baseButton".
Ahora le asignaré
algunas propiedades de botón

Italian: 
Ora cancello questo elemento
e vediamo insieme un caso di utilizzo.
Immagina che io voglia creare
un pulsante, ma che
nel mio documento
ce ne saranno essere anche altri
e vorrei che utilizzassero tutti
lo stesso linguaggio visivo
quindi immagina che io
debba rispettare una guida di stile
in cui è specificato che tutti i pulsanti
devono avere i bordi arrotondati
avere un'ombra e via dicendo.
Quindi vorrei rispettare la guida
e creare una gerarchia di stili.
Il riquadro CSS mi permette di farlo senza
dover mai passare alla Vista codice.
Qui ho un div a forma di pulsante
e vorrei creare una classe
generica che contenga tutti gli stili
da applicare a tutti
i pulsanti della mia pagina.
Faccio clic sul pulsante Aggiungi regola.
La chiamo "pulsanteBase"
e le attribuisco delle proprietà comuni.

Thai: 
ฉันจะลบองค์ประกอบนี้
แล้วสาธิตกรณีการใช้งานให้ดูกัน
สมมติว่าฉันอยากสร้างปุ่ม
โดยจะเป็น
หนึ่งในหลายๆ ปุ่ม
ที่ฉันต้องการสร้างขึ้นในเอกสาร
ฉันจะทำให้ปุ่มทั้งหมด
ใช้ภาษาภาพเดียวกัน
เช่น ฉันมีคำแนะนำสไตล์ที่ต้องทำตาม
โดยมีข้อกำหนดเฉพาะของปุ่มทั้งหมด
สมมติว่าทุกปุ่มต้องมีมุมโค้งมน
ต้องมีเงาและอื่นๆ
ฉันจะใช้การตั้งค่านี้
และสร้างลำดับชั้นของสไตล์
ซึ่งทำได้ในแผง CSS
โดยไม่ต้องไปที่มุมมองโค้ดเลย
ฉันวาด div เป็นรูปปุ่มไว้แล้วตรงนี้
และจะสร้างคลาสปุ่มทั่วไป
ซึ่งมีสไตล์ทั้งหมด
ที่ต้องใช้กับทุกปุ่มในหน้า
ฉันจะกดปุ่ม "เพิ่มกฎ" นี้
ตั้งชื่อว่า baseButton
มากำหนดคุณสมบัติทั่วไปของปุ่มกัน

Polish: 
Usunę ten element
i pokażę wszystko na przykładzie.
Powiedzmy, że chcę utworzyć przycisk,
a dodatkowo
będzie to jeden z wielu przycisków,
które chcę utworzyć w dokumencie.
Chcę, żeby wszystkie
miały podobny wygląd.
Załóżmy, że mam wytyczne stylistyczne,
które określają wygląd przycisków.
Wszystkie muszą mieć
zaokrąglone rogi,
cienie itd.
Chcę więc zachować z tym zgodność
i utworzyć hierarchię stylów.
Mogę to zrobić w panelu CSS
bez przechodzenia do Widoku kodu.
Mam tutaj diva w kształcie przycisku
i chcę utworzyć ogólną klasę przycisku
zawierającą wszystkie style
dla wszystkich przycisków na stronie.
Klikam więc przycisk Dodaj regułę.
Nazwę ją „baseButton”.
Dodam w niej
wspólne właściwości przycisków.

Russian: 
Я удалю этот элемент
и продемонстрирую
работу с панелью на примере.
Допустим, мне нужно создать
кнопку –
одну из нескольких
в документе.
Мне нужно, чтобы все кнопки
были одинаково оформлены.
Например, в соответствии с руководством
по оформлению элементов
у них должны быть
скругленные углы,
тени и так далее.
Мне нужно применить эти рекомендации
и создать иерархию стилей.
Это все можно сделать на панели CSS,
не используя режим просмотра кода.
Я нарисовала элемент div в форме кнопки,
и теперь мне нужно создать
общий класс со стилями,
которые будут применяться
ко всем кнопкам на странице.
Нажимаю кнопку "Добавить правило"
и называю его baseButton,
"Основная кнопка".
Теперь задаю общие свойства кнопок.

French: 
Prenons un exemple et
supprimons cet élément.
Nous allons créer un bouton,
et même plusieurs,
dans le document.
Ils auront tous le même
langage visuel.
Imaginons que certaines spécifications
doivent être respectées
pour chaque bouton
(coins arrondis, ombres, etc.)
Pour cela, créons
une hiérarchie de styles
à l'aide du panneau CSS
sans devoir passer par la vue Code.
Traçons un bouton (div).
Pour créer une classe générique
contenant tous les styles
à appliquer aux boutons de la page,
cliquons sur "Ajouter une règle".
Nommons l'élément "BoutonDeBase".
Attribuons-lui des propriétés courantes.

Portuguese: 
Vamos excluir este elemento
e ver como ele pode ser usado.
Digamos que eu queira criar um botão
e que ele será
um dos vários botões
que quero criar no meu documento.
Também quero que todos eles
exibam a mesma linguagem visual.
Posso seguir um guia de estilo
com uma especificação
para todos os botões.
Os cantos devem ser curvados,
com sombra e assim por diante.
Vou reproduzir isso e criar
uma herarquia de estilos.
Posso fazer tudo isso no painel "CSS",
sem acessar a Visualização de código.
Este é o desenho de um div
na forma de um botão.
Vou criar uma classe genérica
com todos os estilos a serem aplicados
aos botões na minha página.
Vou clicar no botão "Adicionar regra".
Vou chamá-la de "baseButton".
E definirei propriedades de botões comuns.

Korean: 
이 요소를 삭제하고
사례를 들어 설명드리겠습니다
버튼을 하나 만들어 보겠습니다
이 버튼 말고도
문서에서 버튼을 여러 개
만들 것입니다
그리고 모든 버튼이
시각적으로 통일되었으면 합니다
제가 따를 몇 가지
스타일 가이드가 있고
이 가이드가 전체 버튼의
사양을 나타낸다고 해 보겠습니다
모든 버튼은 모서리가 둥글고
음영 및 기타 효과가
있어야 한다고 해 보겠습니다
이를 미러링한 다음
계층구조를 만들 생각인데요
이 모든 작업을 코드 보기로
이동할 필요 없이
CSS 패널에서 수행할 수 있습니다
여기에 버튼 모양으로 그린
div가 있습니다
일반적인 버튼 클래스를 만듭니다
이 클래스는 페이지의
모든 버튼에 적용해야 할 스타일을
전부 포함하고 있습니다
규칙 추가 버튼을 클릭하고
이름을 baseButton으로
지정하겠습니다
일반적인 몇 가지
버튼 속성도 지정하겠습니다

Dutch: 
Ik verwijder dit element
en bespreek een gebruiksvoorbeeld.
Stel dat ik een knop wil maken
en dat het ook nog eens
één van misschien meerdere knoppen is
die ik in mijn document wil maken.
Ik wil dat ze allemaal
dezelfde visuele taal hebben,
dus stel dat ik een stijlgids volg
met een specificatie voor alle knoppen.
Zeg dat ze
afgeronde hoeken moeten hebben,
en schaduw, enzovoort.
Ik wil dat weerspiegelen
en een hiërarchie van stijlen maken.
Dit kan ik allemaal in dit venster doen
zonder naar de codeweergave te gaan.
Ik heb hier een div getekend
in de vorm van een knop.
Ik wil een algemene knopklasse maken
met daarin alle stijlen
die moeten worden toegepast
op alle knoppen op mijn pagina.
Ik klik op de knop 'Regel toevoegen'.
Ik noem het de 'baseButton'.
Ik wijs er
wat algemene knopeigenschappen aan toe.

Chinese: 
我先刪除這個元素
然後逐步說明它的用途
假設我要建立按鈕
而且我在文件中建立的多個按鈕
可能會以此為範本
我希望它們都使用相同的視覺語言
假設我有一些要遵守的樣式指南
明白指出所有按鈕的規格
例如全都要有圓角
還要加上陰影等等
我想以此為範本並建立樣式階層
我不用進入程式碼檢視
就可以在 CSS 面板中完成所有操作
我在這裡畫了一個 div
是按鈕的形狀
我想建立通用按鈕類別
它會保存所有樣式
方便套用到頁面的所有按鈕
按一下 [新增規則] 按鈕
將它命名為 baseButton (基礎按鈕)
然後設定一些常用按鈕屬性

Turkish: 
Şimdi bu öğeyi silelim
ve bir kullanım örneğini adım adım
inceleyelim.
Bir düğme oluşturmak
istediğimi düşünelim.
Dahası, bu düğmeden
dokümanımda büyük olasılıkla
birden fazla
oluşturmak isteyeceğim.
Ayrıca hepsinin aynı görsel
ifadeye sahip olmasını istiyorum.
Örneğin, uygulamam gereken bir
stil kılavuzu olduğunu
ve bu kılavuzda tüm düğmeler için
bir belirtim bulunduğunu düşünelim.
Mesela hepsi yuvarlak köşeli olacak,
gölgeli olacak vb.
Bunu aynen almak
ve stil hiyerarşisi oluşturmak istiyorum.
Bunların hepsini, Kod görünümüne gitmeden
CSS panelinden yapabilirim.
Burada, düğme şeklinde çizilmiş
bir div öğem var.
Genel bir düğme sınıfı oluşturmak
istiyorum. Bu sınıf, sayfamdaki
tüm düğmelere uygulanacak stillerin
hepsini içerecek.
Kural ekle düğmesini tıklıyorum.
Buna baseButton adını verelim.
Bazı ortak düğme özellikleri de olsun.

English: 
So let me delete this element
and let's walk through a use case.
Let's say I'd
like to create a button
and what's more
it'll be one of potentially multiple buttons
that I'd like to create in my document
and I'd like them all to be
within the same visual language
so let's say I have
some style guide that I'm following
and it presents a specification for all the
buttons
let's say they all have 
to have rounded corners
and a shadow and so on.
And so I'd like to mirror that
and create a hierarchy of styles
and I can do all of this with the CSS panel
without ever having to go into Code view.
So I have a div drawn here
in the shape of a button
and I'd like to create a generic
button class which will hold all the
styles that should apply to all the
buttons on my page.
So I'm going to click this Add rule button.
Let me call it the
baseButton
And let's give it 
some common button properties.

Polish: 
Na przykład „box-shadow”.
Kolor czarny z przezroczystością.
Dodam też zaokrąglone rogi.
Widać, że panel CSS
automatycznie podpowiada mi
standardowe właściwości CSS.
Mogę między nimi przechodzić
klawiszami strzałek w górę i w dół.
Tutaj chcę dodać
„border-radius”.
Akceptuję klawiszem Tab
i wpisuję na przykład 20 pikseli.
Kursor powinien być wskaźnikiem,
a dla lepszego efektu
dodam też kolor tła.
Mam już standardowy szary przycisk.
Teraz utworzę dwa osobne przyciski.
Na przykład przyciski „OK” i „Usuń”.

Chinese: 
例如 box-shadow (區塊陰影)
將陰影設成半透明黑色
我想讓按鈕擁有圓角
你會看到 CSS 面板自動建議
標準 CSS 屬性
我可以利用上下鍵瀏覽這些屬性
選擇 border-radius (邊框半徑)
按 Tab 鍵接受，然後設為 20 像素
游標屬性設為 pointer
然後加上背景色彩
讓元素更加顯眼
一個通用灰色按紐就建好了
我現在要建立幾個特定功能按紐

Chinese: 
例如box-shadow
将阴影设成半透明黑色
我想让按钮采用圆角
这时可以看到CSS面板自动推荐了
标准的CSS属性
我可以利用上下键浏览这些属性
选择border-radius
按Tab键接受，然后设为20像素
光标属性始终设为指针
然后加上背景颜色
让元素更加显眼
一个通用灰色按纽就创建好了
接下来我要创建几个有具体功能的按纽
例如“确定”按钮和“删除”按钮

Turkish: 
Bir box-shadow özelliğim olabilir.
Bunun yarı saydam siyah
olmasını istiyorum.
Ayrıca yuvarlak köşelerinin olmasını
istiyorum.
CSS panelinin benim için CSS özelliklerini
otomatik olarak önerdiğini görebilirsiniz.
Aralarında dolaşmak için yukarı ve
aşağı tuşlarını kullanabilirim.
Bu örnekte border-radius'u kullanmak
istiyorum.
Kabul etmek için sekme tuşuna basabilirim
ve sonra 20 piksel diyebilirim.
İmleç her zaman işaretçi olmalı.
Şimdi de bir tür arka plan rengi
verelim.
Böylece, baktığımızda görebileceğimiz
bir şey olsun.
Genel bir gri düğme olsun.
Şimdi birkaç tane özel düğme tanımlayayım.
Mesela bir "Tamam" ve bir

French: 
Utilisons des effets d'ombres.
Il sera noir translucide.
Ses coins seront arrondis.
Le panneau CSS
propose automatiquement
des propriétés CSS standards.
Utilisons les flèches haut/bas
pour passer de l'une à l'autre.
Définissons un arrondi.
Appuyons sur "Tab" pour accepter,
et choisissons 20 pixels.
Le curseur sera
un pointeur.
Définissons une couleur
d'arrière-plan.
Choisissons le gris générique.
Définissons des boutons plus spécifiques,
des boutons "OK" et "Supprimer".

German: 
Ich lege für "box-shadow"
ein durchscheinendes Schwarz fest.
Die Ecken sollen abgerundet sein.
Sie sehen, dass mir
das CSS-Steuerfeld automatisch
CSS-Standardeigenschaften vorschlägt,
die ich anhand
der Pfeiltasten durchgehen kann.
In diesem Fall möchte ich "border-radius".
Dann drücke ich zum Auswählen
die Tabulatortaste und lege 20 Pixel fest.
Der Cursor sollte
immer ein Mauszeiger sein.
Dann lege ich noch
eine Hintergrundfarbe fest,
damit wir etwas haben,
das wir uns ansehen können.
Ich entscheide mich für Grau.
Jetzt definiere ich noch
ein paar spezifischere Schaltflächen,
z. B eine OK-Schaltfläche

Russian: 
Сначала создаю тень, box-shadow,
полупрозрачную черного цвета.
Затем добавляю скругленные углы.
Обратите внимание, что панель CSS
автоматически предлагает
стандартные свойства CSS,
между которым я могу переходить
с помощью стрелок вверх и вниз.
Мне нужно свойство border-radius.
Чтобы выбрать, нажимаю клавишу Tab,
и задаю значение в 20 пикселей.
Курсор всегда
должен быть в виде указателя.
И я задам для кнопки цвет фона
для наглядности.
Это будет серая общая кнопка.
Теперь создам пару специальных кнопок,
например кнопки "ОК"

Spanish: 
habituales, como "box-shadow"
que sea, no sé, negro traslúcido
y quiero que tenga
las esquinas redondeadas.
Como ves, el panel CSS
me sugiere automáticamente
algunas propiedades CSS estándar
que puedo alternar con las
teclas hacia arriba y hacia abajo.
Aquí quiero "border-radius".
Pulso el tabulador para
aceptar y luego especifico 20 píxeles.
El cursor tiene que ser un puntero.
Le asignamos un color de fondo
solo para que no esté en blanco.
O sea, un botón gris genérico.
Ahora, voy a definir
un par de botones más específicos
como Aceptar y Eliminar

English: 
I might have a
box-shadow
say I want it to be translucent black.
And let's say I'd like it 
to have rounded corners.
and you can see that 
the CSS panel automatically suggests
standard CSS properties for me
and I can use the up and down keys
to swipe through them.
In this case I want border-radius.
I can hit tab to accept and then
let's say 20 pixels.
The cursor should always be a pointer.
and let's give it
some kind of background color
just so we have something to look at
so just a generic gray button.
So now let me define a couple of more specific buttons
let's say I'd like to have an OK button

Thai: 
ฉันจะกำหนดให้มีเงากล่อง
สมมติว่าฉันจะให้เป็นสีดำแบบโปร่งแสง
และให้มีมุมโค้งมน
แล้วคุณจะเห็นว่าแผง CSS
แนะนำคุณสมบัติ CSS มาตรฐาน
ให้ฉันโดยอัตโนมัติ
ฉันใช้แป้นลูกศรขึ้นและลงเพื่อเลื่อนดูได้
ในกรณีนี้ฉันจะเลือกรัศมีเส้นขอบ
กด Tab เพื่อยอมรับ
และตั้งค่า 20 พิกเซล
เคอร์เซอร์ต้องเป็นตัวชี้เสมอ
คราวนี้มากำหนดสีพื้นหลังกัน
เพื่อให้มองเห็น
เป็นปุ่มสีเทาทั่วไป
คราวนี้มากำหนดปุ่มที่เจาะจงมากขึ้นกัน
สมมติว่าฉันอยากได้ปุ่ม "ตกลง"

Dutch: 
Ik wil misschien een valschaduw,
bijvoorbeeld in transparant zwart.
En laten we zeggen
dat ik afgeronde hoeken wil.
U ziet dat het css-venster automatisch
standaard eigenschappen voorstelt.
Ik kan de pijl-omhoog en -omlaag gebruiken
om er doorheen te lopen.
Ik wil in dit geval 'border-radius'.
Ik druk op Tab om te accepteren.
Laten we 20 pixels doen.
De cursor moet altijd
een aanwijspijl zijn
en ik geef het een achtergrondkleur,
zodat we iets hebben om naar te kijken.
Een gewone grijze knop.
Ik definieer een paar specifiekere knoppen.
Laten we zeggen
dat ik een knop 'OK' wil

Italian: 
Potrei usare box-shadow
diciamo che vorrei fosse nero trasparente
e anche che
avesse i bordi arrotondati.
Come vedi il riquadro CSS mi suggerisce
le proprietà CSS standard automaticamente
e posso usare le frecce SU e
GIÙ per scorrere tra le opzioni.
Seleziono border-radius.
Posso premere il tasto TAB per
accettare e qui possiamo mettere 20 pixel.
Il cursore deve essere sempre un puntatore
e mettiamo un colore sullo sfondo
per avere qualcosa da guardare
diciamo un pulsante grigio.
Ora definisco alcuni pulsanti specifici
per esempio un pulsante OK

Japanese: 
box-shadowを追加して
半透明の黒にします
それから角を丸くしましょう
このように標準のCSS
プロパティが自動的に提案され
上下の矢印キーで
選択できます
border-radiusを選び
タブキーで確定します
半径は20ピクセル
でいいでしょう
カーソルはポインター
識別しやすいように
背景色も変えておきましょう
これでグレーの
汎用ボタンができました
では実際のボタンを
いくつか作ってみましょう

Portuguese: 
Aplicarei um caixa de sombra
em preto translúcido.
E definirei cantos arrendodados.
Veja que o painel "CSS"
sugere automaticamente
propriedades CSS padrão.
Escolha uma opção
usando as teclas para baixo e para cima.
Vou escolher o raio da borda.
Uso tecla a "Tab" 
para aceitar e escolho "20 pixels".
O cursor será "pointer".
Vou aplicar uma cor ao plano de fundo
para vermos uma imagem.
É só um botão genérico em cinza.
Vou definir outros botões específicos,
como "Ok" e "Excluir",

Korean: 
상자 음영을
반투명 검은색으로
적용하겠습니다
모서리를 둥글게 하려고 하는데
입력 시 CSS 패널이 자동으로
표준 CSS 속성을
제안하는 것을 확인할 수 있습니다
위 아래 키를 사용해
제안된 속성을 볼 수 있습니다
여기에서는 테두리 반경을
설정하겠습니다
탭을 눌러 수락한 다음
20픽셀로 지정하겠습니다
커서는 항상 포인터
모양으로 합니다
배경색을 그냥 두는 것보다
색상을 지정하는 것이
나을 것 같습니다
이렇게 일반적인
회색 버튼이 만들어졌습니다
이제 버튼을 두 개
더 정의해 보겠습니다
확인 버튼이랑

German: 
und eine zum Löschen.
Diese übernehmen den baseButton-Stil,
haben jedoch zusätzlich
noch weitere Details.
Ich wähle also
die beiden neuen div-Elemente aus
und klicke auf "Regel hinzufügen".
Dieses Mal möchte ich
keinen neuen Stil erstellen,
sondern unsere vorhandene
baseButton-Klasse anwenden.
Ich gebe also diesen Selektor ein
und alle Stile für diese Deklaration
werden automatisch eingefügt.
Jetzt kann ich
jede Schaltfläche einzeln gestalten
und nur die Stile ergänzen,
die auf die jeweilige Schaltfläche
angewendet werden sollen.
Also noch einmal auf "Regel hinzufügen".
Wir nennen sie "okButton".
Bei dieser Schaltfläche soll lediglich
der Hintergrund anders sein, nämlich grün.
Dasselbe mache ich
mit der Schaltfläche "Löschen",

Chinese: 
而且要沿用此baseButton样式
而且还要加上特定样式
选择这两个新的div
再次点击“添加规则”按钮
这次不是要创建新样式
而是要应用现有的baseButton类
输入这个选择器后
系统会自动提取该声明的所有样式
这样我就能逐一设置各个按钮的样式
直接在基本样式的基础上
再为该按钮应用所需样式即可
再次点击“添加规则”按钮
将它命名为okButton
这个按钮与通用按钮的唯一区别是
我要将它的背景设成绿色
“删除”按钮也如法炮制

Japanese: 
OKボタンと削除ボタンを
baseButtonスタイルを継承し
さらにスタイルを追加して作ります
新しい2つのdivを選択し
[+]をクリックしてルールを追加します
今回は新しいスタイルを作成するのではなく
baseButtonクラスを適用します
baseButtonと入力すると
宣言したすべてのスタイルが
読み込まれます
ここからはボタンごとに
追加のスタイルを適用していきます
汎用ボタンのスタイルをベースに
それぞれのボタンを作成できます
[+]をクリックし
名前をokButtonにします
このボタンは背景色を
緑色にしましょう
削除ボタンも
考え方は同じです

Spanish: 
que heredarán este estilo "baseButton"
pero también tendrán
otros estilos más específicos.
Así pues, selecciono los dos nuevos divs.
Hago clic
en el botón Añadir regla otra vez
y, ahora,
en lugar de crear otro estilo
quiero aplicar
la clase "baseButton" que ya tengo.
Basta con introducir el selector
para que se incluyan
todos los estilos de esa declaración.
Ahora puedo definir el estilo
de cada botón por separado
solo con los estilos que deben aplicarse
a cada uno de ellos
además de este estilo base.
Uso el botón Añadir regla otra vez.
A esta la llamaremos "okButton".
Lo único que quiero
que sea distinto en este botón
es el fondo, que será verde.
El botón Eliminar,
quiero que tenga el mismo aspecto

Thai: 
และปุ่ม "ลบ" โดยให้มี
สไตล์ baseButton เหมือนกัน
แต่เพิ่มสไตล์เฉพาะเข้าไปด้วย
ฉันจะเลือก div ใหม่ทั้ง 2 รายการนี้
คลิกปุ่ม "เพิ่มกฎ" อีกครั้ง
คราวนี้แทนที่จะสร้างสไตล์ใหม่
ฉันจะนำคลาส baseButton ที่มีอยู่มาใช้
โดยพิมพ์เครื่องมือเลือกลงไป
และระบบจะดึงสไตล์ทั้งหมด
ของการประกาศนั้นมาโดยอัตโนมัติ
คราวนี้ก็ตกแต่งสไตล์ของแต่ละปุ่มได้แล้ว
โดยเพิ่มสไตล์ที่ต้องการใช้
กับแต่ละปุ่มเข้าไปบนสไตล์พื้นฐานนี้
กดปุ่ม "เพิ่มกฎ" อีกครั้ง
คราวนี้ฉันจะตั้งชื่อว่า okButton
สิ่งเดียวที่จะแตกต่างออกไปในปุ่มนี้คือ
ฉันจะให้พื้นหลังเป็นสีเขียว
ปุ่ม "ลบ" ก็เหมือนกัน

Russian: 
и "Удалить". Эти кнопки
должны унаследовать стиль baseButton,
но кроме этого
у них должны быть собственные стили.
Выбираю оба элемента div
и снова нажимаю
кнопку "Добавить правило".
На этот раз мне нужно
не создать новый стиль,
а применить
существующий класс baseButton.
Ввожу его название,
и все соответствующие стили
автоматически подтягиваются.
Теперь я оформлю каждую кнопку отдельно
с помощью стилей,
которые будут применяться
только к этой кнопке
поверх основного стиля.
Снова нажимаю "Добавить правило"
и называю его okButton, "Кнопка "ОК".
У этой кнопки должен отличаться
только цвет фона – она будет зеленой.
Для кнопки "Удалить" делаю то же самое,

Chinese: 
例如 [確定] 按鈕和 [刪除] 按鈕
而且要承襲基礎按鈕樣式
而且還要加上特定樣式
選取這兩個新的 div
再次點擊 [新增規則] 按鈕
這次不是要建立新樣式
而是要套用現有的 baseButton 類別
輸入這個選取器後
系統會自動叫出該宣告的所有樣式
這樣我就能逐一設定各個按鈕的樣式
在基礎樣式上
只套用特定按鈕該使用的樣式
再次點擊 [新增規則] 按鈕
將它命名為 okButton (確認按鈕)
建立這個按鈕時的唯一差別是
我要將背景設成綠色
刪除按鈕也如法炮製

English: 
and a delete button and they should
inherit this baseButton style
but also have more specific styles on top of it.
So I'm going to select both of these new divs.
Click the Add rule button again.
and this time I would like to 
rather than creating a new style
I want to apply our
existing baseButton class.
I'm just going to type that selector in
and all the styles for that declaration 
will get automatically pulled in.
And now I can
just style each button one at a time
with just the styles that should apply
to that particular button 
on top of this base style.
So once again Add rule.
Let's call this one the okButton.
And the only thing that I want to be 
different about this button
is that I want the background to be green.
And then for the delete button same idea

Portuguese: 
que herdarão o estilo "baseButton".
Mas também quero
outros estilos mais específicos.
Vou selecionar estes novos divs.
Clico em "Adicionar regra" outra vez
e, em vez de criar um novo estilo,
aplicarei nossa classe "baseButton".
Digito o seletor aqui,
e todos os estilos dessa declaração
serão incluídos automaticamente.
Posso estilizar cada botão de uma vez
usando apenas os estilos que serão
aplicados a esse botão específico
além desse estilo de base.
Uso novamente "Adicionar regra".
A chamarei de "okButton".
A única diferença desse botão
será o plano de fundo na cor verde.
Farei o mesmo para o botão "Excluir",

Korean: 
삭제 버튼을 만들 건데요
baseButton 스타일을 상속받아야
하고 구체적인 스타일도
추가해야 합니다
새로운 div 두 개를 선택하고
규칙 추가 버튼을 한 번 더 클릭합니다
이번에는 새 스타일을 만드는 대신
기존 baseButton 클래스를
적용하겠습니다
baseButton 클래스를 입력하면
해당 선언의 모든 스타일을
자동으로 가져옵니다
이제 버튼 하나씩
스타일을 지정할 수 있습니다
이제 해당 버튼에
기본 스타일 외에
적용할 스타일을 지정하는 거죠
다시 규칙을 추가하겠습니다
이번에는 okButton이라고 하겠습니다
이 버튼에서 유일하게
다르게 하고 싶은 점은
배경색입니다
녹색으로 하겠습니다
삭제 버튼도 마찬가지로,

Dutch: 
en een knop 'Verwijderen', en die moeten
de stijl 'baseButton' krijgen,
maar daarbovenop nog specifiekere stijlen.
Ik selecteer beide nieuwe divs.
Klik nogmaals op 'Regel toevoegen',
en in plaats van een nieuwe stijl maken,
wil ik de bestaande klasse
'baseButton' toepassen.
Ik typ die selector
en de stijlen voor die declaratie
worden automatisch opgehaald.
Nu kan ik elke knop afzonderlijk opmaken
met alleen de stijlen
die moeten worden toegepast
op die knop, bovenop de basisstijl.
Nog een keer 'Regel toevoegen'.
Ik noem deze 'okButton'.
Het enige wat verandert
aan deze knop,
is dat de achtergrond groen moet zijn.
Voor de verwijderknop hetzelfde idee,

Italian: 
e un pulsante Elimina. Entrambi
ereditano lo stile "pulsanteBase"
ma hanno anche stili più specifici.
Quindi seleziono entrambi questi div.
Faccio di nuovo clic su Aggiungi regola
ma questa volta invece
di creare un nuovo stile
vorrei applicare la classe
"pulsanteBase" esistente.
Basta che digiti il selettore
e tutti gli stili di quella dichiarazione
vengono applicati automaticamente.
Ora posso modificare ogni singolo pulsante
definendo lo stile che verrà applicato
a ognuno di essi,
al di là di questo stile di base.
Faccio nuovamente
clic su Aggiungi regola.
Chiamiamo questo stile "pulsanteOk"
L'unica cosa che vorrei cambiare
è che in questo caso lo sfondo sarà verde.
Per il pulsante Elimina vale lo stesso,

Polish: 
Powinny one zachować styl „baseButton”,
ale mieć też nałożone dodatkowe style.
Zaznaczam oba nowe divy
i klikam przycisk Dodaj regułę.
Tym razem zamiast tworzyć nowy styl,
chcę zastosować
istniejącą klasę „baseButton”.
Wpiszę ją więc
i automatycznie pojawią się
wszystkie style w tej deklaracji.
Teraz mogę zmienić styl
każdego przycisku z osobna
i wybrać tylko te style,
które mają działać
dla konkretnego przycisku,
uzupełniając styl podstawowy.
Klikam ponownie Dodaj regułę.
Nazwę ją „okButton”.
Przycisk powinien
różnić się tylko kolorem tła.
Chcę, żeby było zielone.
To samo z przyciskiem „Usuń”.

Turkish: 
"Sil" düğmem olmasını isteyebilirim.
Her ikisi de baseButton stilini
devralacak, ancak bunun üzerinde kendi
özel stilleri de olacak.
Bu iki yeni div öğesini seçiyorum.
Kural ekle düğmesini tekrar tıklıyorum
ve bu kez yeni bir stil oluşturmak yerine
mevcut baseButton sınıfımızı uygulamak
istiyorum.
Bunu seçiciye yazacağım
ve bu bildirim için tüm stiller
otomatik olarak alınacak.
Şimdi her düğmenin stilini ayrı ayrı
belirleyebilirim
ve bu stiller ilgili düğmede
temel stilin üzerine uygulanır.
Tekrar Kural ekle'yi seçiyoruz.
Buna okButton adını verelim.
Bu düğmede farklı olarak yalnızca
arka plan renginin yeşil olmasını
istiyorum.
Silme düğmesi için de aynı yaklaşımı
uygulayacağım

French: 
Ils héritent du style
"BoutonDeBase"
avec des styles plus spécifiques.
Sélectionnons ces deux div.
Cliquez sur "Ajouter une règle" à nouveau.
Et, plutôt que de créer un style,
appliquons la classe
"BoutonDeBase" existante.
Indiquons le sélecteur
et tous les styles associés
sont insérés.
Appliquons ensuite
un style à chaque bouton.
Les styles de ce bouton
sont appliqués en plus du style de base.
Cliquons encore sur "Ajouter une règle".
Nommons-le "Bouton_OK".
La seule différence avec ce bouton,
ce sera son fond vert.
De même pour le bouton "Supprimer",

Chinese: 
但背景要设成栗色
跟Chrome中的开发者工具一样
您也可以对CSS进行调试
方法是使用这些蓝色复选框
暂时关闭某些属性，就好像从未定义过一样
这个功能有助于
您在CSS规则系统很复杂时
查看元素未应用某个样式时的外观
假如取消选中绿色背景样式
就可以看到这个元素仅应用基本样式
以及其他位置属性时的样子
如果我想查看所有按纽
未应用border-radius时的外观
可以这样切换复选框
总结一 下，本视频介绍了CSS面板的用法
包括用它直接修改样式
以及创建可扩展的样式类系统
这一切都不需要进入代码视图
本教程到这里就结束了
谢谢观看

French: 
avec un fond bordeaux.
Comme avec les outils
pour les développeurs Chrome,
vous pouvez désactiver
certaines propriétés
à l'aide des cases bleues.
Avec un système
complexe de règles CSS,
vous pouvez voir à quoi ressemble
votre élément si vous supprimez
certains styles.
Décochons par exemple le fond vert.
Ne sont plus appliqués
que le style de base
et les propriétés de position.
Pour voir tous les boutons sans arrondi,
décochons cette case.
Nous pouvons la cocher à nouveau.
Pour résumer, le panneau CSS permet donc
de définir des styles
et de créer un système infini
de classes de style
sans ouvrir la vue Code.
Ce tutoriel est terminé.
Merci.

Spanish: 
pero con otro fondo,
por ejemplo, granate.
Como con las herramientas
de Chrome para desarrolladores
puedes depurar el código CSS
con estas casillas para desactivar
algunas propiedades temporalmente.
Esta función es útil cuando tienes
un sistema de reglas CSS complejo
y quieres ver
el aspecto que tendrá el elemento
sin algunos estilos asignados.
Si desmarco este verde de fondo
vemos este elemento como si
solo tuviera aplicados el estilo base
y las otras propiedades de posición.
Si quiero ver
todos los botones
sin la propiedad "border-radius"
por ejemplo, puedo desactivarla.
Así pues, hemos visto
cómo usar un panel CSS
no solo para editar estilos directamente
sino también para crear
un sistema de clases de estilos
que se puede extrapolar sin
tener que ir a la vista de código.
Aquí termina este tutorial.
Gracias por tu atención.

Japanese: 
背景色は栗色にしましょう
Chromeデベロッパーツールと同じ方法で
CSSをデバッグできます
青のチェックを外すと
そのプロパティを一時的にオフにできるので
CSSルールが複雑な場合に便利です
特定のスタイルを外すとどう見えるかを
簡単に確認できます
緑色の背景をオフにすると
汎用ボタンの色に戻りますが
位置などのプロパティは適用されたままです
他にもたとえば border-radiusの
オンとオフを切り替えたりできます
まとめましょう
CSSパネルを使うと
スタイルを直接編集できるだけでなく
コードビューを使わずに
スタイルクラスを階層化し拡張できます
この動画は以上です
ありがとうございました

Polish: 
Tylko kolor powinien być bordowy.
Tak jak w Narzędziach dla programistów,
kod CSS można tu debugować
za pomocą tych niebieskich pól,
które wyłączają tymczasowo
niektóre właściwości,
jakby nie były nigdy określone.
Może to być przydatne
w skomplikowanym kodzie CSS,
kiedy chce się sprawdzić,
jak dany element wyglądałby
bez jakiegoś stylu.
Odznaczę więc zielone tło.
Teraz widać ten element
tylko ze stylem podstawowym,
ale nadal działają
inne właściwości położenia.
Jeśli chciałabym zobaczyć przyciski
bez właściwości „border-radius”,
mogę ją włączyć lub wyłączyć.
Wiemy już, jak używać panelu CSS
nie tylko do bezpośredniego 
edytowania stylów,
ale też do tworzenia
rozszerzalnego systemu klas stylów,
Na dodatek
bez przechodzenia do Widoku kodu.
To wszystko.
Dziękuję za uwagę.

Dutch: 
maar de achtergrondkleur
wordt roodbruin.
Net als in de Hulpprogramma's voor ontwikkelaars
van Chrome kunt u css-fouten opsporen
door met deze blauwe vakjes
tijdelijk bepaalde eigenschappen
uit te schakelen
alsof ze niet zijn gedefinieerd.
Dat is handig
wanneer u een complex systeem
met css-regels heeft
en u wilt zien
hoe uw element eruitziet
zonder een bepaalde stijl.
Als ik de groene achtergrond uitschakel,
zien we dit element
alsof alleen de basisstijl
en de andere positie-eigenschappen
zijn toegepast.
Als ik naar al mijn knoppen wil kijken
zonder de 'border-radius',
kan ik dat in- en uitschakelen.
Kort samengevat: we hebben gezien
hoe we een css-venster kunnen gebruiken,
niet alleen om rechtstreeks
stijlen te bewerken,
maar ook om een uitbreidbaar
stijlklassesysteem te maken
zonder naar de codeweergave te gaan.
Dat was het voor deze tutorial.
Bedankt voor het kijken.

Korean: 
배경색만 적갈색으로 하겠습니다
Chrome 개발자 도구처럼
파란색 체크박스로
CSS를 디버그하여 특정 속성을
일시적으로 끌 수 있습니다
이러한 속성을 정의하지
않고도 가능합니다
이 기능은
CSS 규칙이 복잡하게
적용되어 있는데
특정 스타일을 제외하고
요소의 모양을 확인하려는
경우에 유용합니다
녹색 배경색을 선택 취소하면
기본 스타일과
기타 위치 속성만 적용된 요소를
확인할 수 있습니다
모든 버튼을 테두리 반경이
적용되지 않은
상태로 보려는 경우
해당 속성을 켜고 끌 수 있습니다
정리해 보면 지금까지
CSS 패널 사용 방법을 살펴보았습니다
스타일을 직접 수정하고
스타일 클래스의 확장 가능 시스템을
생성하는 방법을 알아보았습니다
코드 보기로 이동하지 않고도
작업을 수행할 수 있었죠
이것으로 가이드를 마치겠습니다
시청해주셔서 감사합니다

German: 
allerdings soll
der Hintergrund weinrot sein.
Wie bei den Chrome-Entwicklertools
kann man CSS-Fehler anhand
der blauen Kästchen beheben.
Damit lassen sich bestimmte Eigenschaften
vorübergehend deaktivieren.
Das ist bei einem komplexen System
von CSS-Regeln hilfreich,
um zu sehen,
wie das Element ohne
einen bestimmten Stil aussieht.
Wenn ich
den grünen Hintergrund deaktiviere,
werden nur der Basisstil
und die anderen
Positionseigenschaften angewendet.
Und wenn ich wissen möchte,
wie alles ohne "border-radius" aussieht,
kann ich die Eigenschaft
aktivieren und deaktivieren.
Wir haben also gesehen,
dass man mit dem CSS-Steuerfeld
nicht nur Stile direkt bearbeiten,
sondern auch ein umfassendes System
von Stilklassen erstellen kann,
und das ganz ohne Codeansicht.
Das wars von meiner Seite.
Danke fürs Zusehen!

Chinese: 
但背景要設成棗紅色
跟 Chrome 開發人員工具一樣
你也可以對 CSS 偵錯
方法是使用這些藍色核取方塊
暫時關閉某些屬性
當作沒有定義過一樣
這個功能最適合用於
複雜的 CSS 規則系統
這個功能最適合用於
複雜的 CSS 規則系統
方便您查看
元素未套用特定樣式時的外觀
假如我取消勾選綠色背景樣式
可以看到這個元素呈現基礎樣式
並套用了其他位置屬性
如果我想查看所有按紐
未套用邊框半徑時的外觀
可以這樣切換
總結一下
我們學到了 CSS 面板的用法
包括直接用它來編輯樣式
以及建立可擴充的樣式類別系統
而且完全不用進入程式碼檢視
以上就是本次的教學課程
謝謝觀看

Turkish: 
ancak arka plan rengi,
örneğin kahverengi olacak.
Chrome'un Geliştirici araçlarında olduğu
gibi CSS'nizde hata ayıklayabilirsiniz.
Bunun için mavi onay kutularını
kullanarak belirli özellikleri
sanki hiç tanımlanmamışlar gibi
geçici olarak kapatabilirsiniz.
CSS kurallarından oluşan karmaşık
bir sisteminiz varsa
ve belirli stil olmadan öğelerinizin
nasıl göründüğüne bakmak
isterseniz işinize yarayabilir.
Bu arka plan yeşil ayarının
işaretini kaldırırsam,
yalnızca temel stil ve ve diğer
konum özellikleri
uygulanmış olsa bile
bu öğeyi görebiliriz.
Tüm düğmelerimi, örneğin border-radius
olmadan görmek istersem
bunu açıp kapatabilirim.
Özetlersek, CSS panelini nasıl
kullanabileceğimizi,
stilleri yalnızca doğrudan
düzenleyerek değil
aynı zamanda genişletilebilir bir 
stil sınıfları sistemini nasıl
oluşturacağımızı ve tüm bunları
Kod görünümüne gitmeden yapmayı
öğrendik. Böylece eğiticiyi tamamladık.
İzlediğiniz için teşekkürler!

Italian: 
ma lo sfondo sarà granata.
Come negli strumenti per sviluppatori
di Chrome, puoi eseguire il debug del CSS
utilizzando queste caselle di controllo
blu per disattivare temporaneamente
certe proprietà, come se
non fossero mai state definite.
Questo può risultare utile in presenza
di un sistema di regole CSS complesso
se vuoi vedere l'aspetto di alcuni elementi
applicando solo alcuni stili, per
esempio qui deseleziono lo sfondo verde
e possiamo vedere questo
elemento unicamente con lo stile di base
e le altre proprietà di posizione.
Se volessi vedere i miei altri pulsanti
diciamo senza border-radius
posso attivare e disattivare la proprietà.
Riassumendo: abbiamo
visto come usare il riquadro CSS
non solo per
modificare gli stili
ma anche per creare
un sistema di classi di stili
senza dover mai andare nella Vista codice.
È tutto per questo tutorial.
Grazie per aver guardato!

Portuguese: 
mas definirei a cor bordô.
Como nas ferramentas para desenvolvedores
do Chrome, depure o CSS
com estas caixas de seleção azuis
para desativar temporariamente
certas propriedades
como se não tivessem sido definidas.
Isso pode ser útil
se houver um sistema complexo
de regras CSS e você quiser ver
a aparência dos seus elementos sem
determinado estilo.
Se eu desmarcar esse plano de fundo verde,
veremos o elemento
com somente o estilo de base
e as outras
propriedades de posição aplicadas.
Se eu quiser ver todos os meus botões
sem o raio da borda,
posso marcar e desmarcar a caixa.
Vimos como usar um painel "CSS",
não só para editar estilos diretamente,
mas criar 
um sistema amplo de classes,
sem acessar a Visualização de código.
Isso é tudo.
Obrigada por assistir!

Russian: 
только цвет фона будет бордовым.
Как и в инструментах разработчика Chrome,
здесь можно выполнять отладку CSS:
с помощью этих голубых флажков
временно отключать
определенные свойства так,
будто они никогда не задавались.
Это может пригодиться в сложных системах
правил CSS, когда нужно посмотреть,
как элемент выглядит
без определенного стиля.
Если я отключу зеленый фон,
то смогу посмотреть на этот элемент
только с основным стилем
и другими свойствами положения.
А чтобы посмотреть на все кнопки
без скругленных углов,
я могу включать и выключать их.
Итак, я показала,
как использовать панель CSS
для редактирования стилей,
и то, как с ее помощью создать
удобную систему классов,
не переходя в режим просмотра кода.
Это все.
Спасибо за внимание.

Thai: 
แต่สีพื้นหลังเป็นสีแดงเข้ม
คุณแก้ไขข้อบกพร่องของ CSS ได้เหมือนใน
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome
โดยใช้ช่องทำเครื่องหมายสีฟ้าเหล่านี้
เพื่อปิดคุณสมบัติบางอย่างชั่วคราว
ราวกับไม่ได้กำหนดค่าไว้
วิธีนี้จะเป็นประโยชน์เมื่อคุณมีระบบกฎ CSS
ที่ซับซ้อนและต้องการดูลักษณะขององค์ประกอบ
ที่ไม่มีสไตล์บางอย่าง
ดังนั้นถ้ายกเลิกการเลือกพื้นหลังสีเขียว
เราจะเห็นองค์ประกอบนี้ในสไตล์พื้นฐาน
และคุณสมบัติตำแหน่งอื่นๆ เท่านั้น
และถ้าฉันจะดูปุ่มทั้งหมด
แบบไม่มีรัศมีเส้นขอบ
ฉันก็เปิดหรือปิดค่านั้นได้
สรุปก็คือเราได้พูดถึงวิธีใช้แผง CSS
ไม่เพียงเพื่อแก้ไขสไตล์โดยตรง
แต่เพื่อสร้างระบบคลาสของสไตล์เพิ่มเติม
โดยไม่ต้องไปที่มุมมองโค้ดเลย
บทแนะนำนี้มีเพียงเท่านี้
ขอบคุณที่ติดตามชมค่ะ

English: 
but the background should be let's say maroon.
Much like in Chrome's developer
tools you can debug your CSS
by using these blue check boxes 
to temporarily turn off
certain properties 
as though they were never defined.
This can be
helpful when you have a complex system
of CSS rules and you want to see
what your element looks like without certain
style in play so if I uncheck this
background green
we can see this element 
as though only the base style
and the other position properties applied
and if I'd like to take a look
at all my buttons
say without the border-radius
I can toggle that on and off.
So to recap
we've seen how we can use a CSS panel
not only to directly edit styles
but how to create 
an extensible system of style classes
all without ever having to go
into Code view.
That's it for this tutorial.
Thanks for watching!
