Merge pull request #22 from Mosamorphing/main

Updated the English translation of WTF CSS (Tutorial 1 - 7)
WTFAcademy · Mar 3, 2024 · d6415eb · d6415eb
2 parents fe5536f + 4b8fe6e
commit d6415eb
Show file tree

Hide file tree

Showing 60 changed files with 1,992 additions and 0 deletions.
diff --git a/Languages/en/01_HelloCSS/img/1-1.png b/Languages/en/01_HelloCSS/img/1-1.png
diff --git a/Languages/en/01_HelloCSS/img/1-2.png b/Languages/en/01_HelloCSS/img/1-2.png
diff --git a/Languages/en/01_HelloCSS/index.html b/Languages/en/01_HelloCSS/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>    
+    <head>
+        <title>This is the head</title>
+        <style type="text/css">
+            p {
+                color: blue;
+                text-align: center;
+            }
+
+            p strong {
+                color: green;
+                background-color: #d0f0f6;
+                padding: 10px;
+            }
+        </style>    
+    </head>
+    <body>
+        <p>Hello <strong>CSS！</strong></p>
+    </body>
+</html>
+
diff --git a/Languages/en/01_HelloCSS/readme.md b/Languages/en/01_HelloCSS/readme.md
@@ -0,0 +1,104 @@
+# WTF CSS minimalist tutorial: 1. Hello CSS
+
+WTF CSS tutorial to help newcomers get started with CSS quickly.
+
+**Twitter**: [@WTFAcademy_](https://twitter.com/WTFAcademy_) | [@0xAA_Science](https://twitter.com/0xAA_Science)
+
+**WTF Academy Community:** [Official website wtf.academy](https://wtf.academy) | [WTF Solidity Tutorial](https://github.com/AmazingAng/WTFSolidity) | [discord](https: //discord.gg/5akcruXrsk) | [WeChat group application](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
+
+All codes and tutorials are open source on github: [github.com/WTFAcademy/WTF-CSS](https://github.com/WTFAcademy/WTF-CSS)
+
+---
+
+In this lecture, we introduce the basics of CSS and write the first HTML+CSS program: Hello CSS.
+
+## What is CSS?
+
+CSS (**C**ascading **S**tyle **S**sheet, Cascading Style Sheet) is the code that adds styles to web pages. Simply put, HTML is responsible for the structure of the document, while CSS is responsible for the presentation style of the document. By using CSS, we can control the layout of the page, adjust the color and size of elements, add background images and borders, create animation effects, and more.
+
+The original intention of CSS was to solve the problem of separation of content and presentation. In early web design, HTML tags were used to define the structure and style of the document, which mixed the content and style of the document, resulting in redundant code and difficulty in maintenance. The emergence of CSS allows us to separate structure (HTML) and style (CSS), so that the content and presentation of web pages can be separated, which greatly improves the maintainability and readability of web pages.
+
+## CSS ruleset
+
+In CSS, style rules consist of two main parts: selectors, and a declaration block within a pair of curly braces.
+
+```css
+selector {
+     property: value;
+}
+```
+
+- **Selector**: used to specify which elements CSS rules apply to.
+- **Declaration block**: A set of CSS declarations enclosed in curly braces ({}). Each declaration consists of a property and a value. The property and value are separated by a colon (:). Each declaration A semicolon (;) is required at the end.
+
+For example:
+
+```css
+h1 {
+     color: blue;
+     font-size: 24px;
+}
+```
+
+This CSS rule will be applied to all h1 elements in the HTML document, making the text color of these h1 elements blue and the font size 24 pixels.
+
+## Hello CSS
+
+Next, we will write our first program that contains CSS: Hello CSS, showing how to use CSS in HTML documents. If you are not familiar with HTML, you can read [WTF HTML Minimalist Tutorial](https://github.com/WTFAcademy/WTF-HTML).
+
+```html
+<!DOCTYPE html>
+<html>
+     <head>
+         <title>This is the head</title>
+         <style type="text/css">
+             p {
+                 color: blue;
+                 text-align: center;
+             }
+    
+             p strong {
+                 color: green;
+                 background-color: #d0f0f6;
+                 padding: 10px;
+             }
+         </style>
+     </head>
+     <body>
+         <p>Hello <strong>CSS! </strong></p>
+     </body>
+</html>
+```
+
+![Hello CSS](./img/1-2.png)
+
+In Hello CSS, we use internal style sheets to embed CSS into HTML (usually in the `<head>` element):
+
+```html
+<style type="text/css">
+     ...
+</style>
+```
+
+We set the font color in all paragraph elements `<p>` to blue (`color`) and center them (`text-align`).
+
+```css
+p {
+     color: blue;
+     text-align: center;
+}
+```
+
+Moreover, we set the font color in the bold element `<strong>` in the paragraph element `<p>` to green (`color`), the background color to light blue (`background-color`), and set Padding is set to 10 pixels (`padding`).
+
+```css
+p strong {
+     color: green;
+     background-color: #d0f0f6;
+     padding: 10px;
+}
+```
+
+## Summary
+
+In this lecture we introduced what CSS is and wrote the first program containing CSS: Hello CSS. You can read [MDN CSS Basics](https://developer.mozilla.org/zh-CN/docs/Learn/CSS) to learn more details about CSS.
diff --git a/Languages/en/02_Syntax/index.html b/Languages/en/02_Syntax/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Syntax</title>
+
+  <style>
+    h1 {
+      color: green; font-size: 50px;
+    }
+  </style>
+
+  <link rel="stylesheet" href="styles.css">
+
+</head>
+<body>
+
+  <h1 style="color: red; font-size: 50px;">Hello CSS</h1> 
+
+</body>
+</html>
diff --git a/Languages/en/02_Syntax/readme.md b/Languages/en/02_Syntax/readme.md
@@ -0,0 +1,101 @@
+# WTF CSS minimalist tutorial: 2. CSS syntax
+
+WTF CSS tutorial to help newcomers get started with CSS quickly.
+
+**Twitter**: [@WTFAcademy_](https://twitter.com/WTFAcademy_) | [@0xAA_Science](https://twitter.com/0xAA_Science)
+
+**WTF Academy Community:** [Official website wtf.academy](https://wtf.academy) | [WTF Solidity Tutorial](https://github.com/AmazingAng/WTFSolidity) | [discord](https: //discord.gg/5akcruXrsk) | [WeChat group application](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
+
+All codes and tutorials are open source on github: [github.com/WTFAcademy/WTF-CSS](https://github.com/WTFAcademy/WTF-CSS)
+
+---
+
+In this lecture, we introduce CSS syntax and three ways to apply CSS in documents.
+
+## grammar
+
+CSS rule sets consist of selectors and declaration blocks, as shown in the following figure:
+
+![](./img/2-1.png) ![](./img/2-2.png)
+
+The selector points to the element you want to style.
+
+The declaration block starts with `{` and ends with `}`.
+
+A declaration block contains one or more declarations, separated by `;`.
+
+Each declaration contains a CSS property name and a value, separated by `:`.
+
+The code above means: the text color of all `<h1>` elements is red, and the text size is 50 pixels.
+
+## Introduction method
+
+We have three ways of using CSS in HTML:
+
+1. External style
+2. Internal style
+3. Inline styles
+
+### 1. External style
+
+External styles are the most commonly used CSS method. You can write CSS code in an external `.css` file:
+
+![](./img/2-3.png)
+
+In order to connect `styles.css` and `index.html`, you need to introduce this style file through the `<link>` tag in the `<head>` of the HTML document.
+
+```html
+<link rel="stylesheet" href="styles.css" />
+```
+
+![](./img/2-4.png)
+
+In the `<link>` tag, we use the attribute `rel` to let the browser know that a CSS document exists, and use the attribute `href` to specify the location of the CSS file.
+
+### 2. Internal style
+
+You can also write CSS code directly in the `<style>` tag of the HTML file. This style is called an internal style.
+
+![](./img/2-5.png)
+
+### 3. Inline styles
+
+If you only want to set the style for an element alone, you can use the `style` attribute in the tag of this element. Such styles are called inline styles.
+
+![](./img/2-6.png)
+
+The above three methods of introducing CSS can achieve the same effect, making the text color of the `<h1>` element in the page red and the text size 50 pixels. As shown below.
+![](./img/2-7.png)
+
+We most commonly use external styles, which can separate HTML from CSS and make it more concise.
+
+## Stacking order
+
+Conflicts occur when multiple styles are applied to the same element. CSS cascading rules determine how these conflicts are resolved. Specifically, the factors that determine the priority of style application are:
+
+1. Source: Author style sheet (style written by the developer) > User style sheet (style set by browser user) > Browser default style
+2. Selector priority: Inline style > ID selector > Class/pseudo-class/attribute selector > Element/pseudo-element selector
+3. Code order: In the case of the same priority, the styles that appear later will override the styles that appear first.
+4. `!important` rules: The style with `!important` added has the highest priority, unless other styles also add `!important`, in which case the above three rules are still followed.
+
+Let's look at an example. In this example, we set the text color of the `<h1>` element to blue, green, and red in the external, internal, and inline styles respectively. The effect produced at this time is as shown in the figure below.
+
+![](./img/2-8.png)
+
+![](./img/2-9.png)
+
+As you can see, the text color is red because the inline style has the highest priority.
+
+![](./img/2-10.png)
+
+If we remove the inline styles, the text will turn green (internal styles) because the internal styles are declared further back.
+
+![](./img/2-11.png)
+
+If we adjust the external style declaration to the internal style, the text turns blue (external style).
+
+![](./img/2-12.png)
+
+## Summary
+
+In this lecture, we know how to write CSS styles and the different ways to introduce them. Inline styles have the highest priority and will override external and internal styles as well as browser default styles.
diff --git a/Languages/en/02_Syntax/style.css b/Languages/en/02_Syntax/style.css
@@ -0,0 +1,5 @@
+h1 {
+  color: blue;
+  /*  */
+  font-size: 50px;
+}
diff --git a/Languages/en/03_Selectors/img/3-1.png b/Languages/en/03_Selectors/img/3-1.png
diff --git a/Languages/en/03_Selectors/img/3-10.png b/Languages/en/03_Selectors/img/3-10.png
diff --git a/Languages/en/03_Selectors/img/3-11.png b/Languages/en/03_Selectors/img/3-11.png
diff --git a/Languages/en/03_Selectors/img/3-12.png b/Languages/en/03_Selectors/img/3-12.png
diff --git a/Languages/en/03_Selectors/img/3-2.png b/Languages/en/03_Selectors/img/3-2.png
diff --git a/Languages/en/03_Selectors/img/3-3.png b/Languages/en/03_Selectors/img/3-3.png
diff --git a/Languages/en/03_Selectors/img/3-4.png b/Languages/en/03_Selectors/img/3-4.png
diff --git a/Languages/en/03_Selectors/img/3-5.png b/Languages/en/03_Selectors/img/3-5.png
diff --git a/Languages/en/03_Selectors/img/3-6.png b/Languages/en/03_Selectors/img/3-6.png
diff --git a/Languages/en/03_Selectors/img/3-7.png b/Languages/en/03_Selectors/img/3-7.png
diff --git a/Languages/en/03_Selectors/img/3-8.png b/Languages/en/03_Selectors/img/3-8.png
diff --git a/Languages/en/03_Selectors/img/3-9.png b/Languages/en/03_Selectors/img/3-9.png
diff --git a/Languages/en/03_Selectors/index.html b/Languages/en/03_Selectors/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+   <head>
+     <meta charset="UTF-8" />
+     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+     <title>Selectors</title>
+     <style>
+
+       p::first-line {
+         color: red;
+       }
+
+     </style>
+   </head>
+   <body>
+
+     <p>I am a p element I am a p element I am a p element I am a p element I am a p element I am a p element I am a p element I am a p element I am a p element I am a p element I am a p element I am p element i am p element i am p element i am p element i am p element i am p element i am p element i am p element i am p element i am p element i am p element i am p element i am p element i is a p element I am a p element I am a p element I am a p element I am a p element I am a p element I am a p element I am a p element I am a p element I am a p element I am a p element I am a p element I am p Element I am p element I am p element</p>
+
+   </body>
+</html>