(来自Udacity学习过程：https://classroom.udacity.com/courses/ud001/lessons/6987421963/concepts/74229205900923）
CSS References
- Mozilla Developer Network - CSS Reference
- css-tricks.com - CSS Almanac
1. What Is CSS?
If you want to try removing the style from the Youtube homepage yourself, follow these instructions:
- Visit https://www.youtube.com/ or any other website of your choice.
- Right click anywhere on the page, and click "Inspect" (on Mac) or "Inspect Element" (Firefox)
- You'll see a panel showing HTML. Inside the
element, delete any line that hasrel="stylesheet". For example:
Congrats! You have just used Developer Tools! You will learn more about Dev tools later in this lesson.
2. 练习：CSS or HTML?
3. 练习： CSS Rulesets
Paragraph的颜色被编辑成了蓝色
4. 练习：CSS Syntax
5. Comments
6. Tag Selectors
在这里，p选择器是一个标签选择器
7. Attributes and Selectors
8. 练习：Using Selectors
因为选择器选择的是class 里有right的，所以1 和4 满足。
9. 练习： Using CSS References
CSS References
- Mozilla Developer Network - CSS Reference
- css-tricks.com - CSS Almanac
10. Developer Tools
11. Developer Tools on Different Browsers
- Internet Explorer 8
- Internet Explorer 9
- Internet Explorer 10
- Internet Explorer 11
Microsoft Edge
Microsoft Edge introduces great new improvements to the F12 developer tools seen in Internet Explorer. The new tools are built in TypeScript, and are always running, so no reloads are required. In addition, F12 developer tools documentation is now fully available on GitHub.
Just like Internet Explorer, to open developer tools in Microsoft Edge simply press F12.
To learn more, click here.
Safari
For any Mac users, Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize a website for peak performance and compatibility on both platforms. To learn more, click here.
To access Safari's Web Development Tools, enable the Develop menu in Safari’s Advanced preferences.
Once enabled, you can right-click on any page element and select Inspect Element to open Web Development Tools or use the shortcut Command + Option + i.
Opera
Fast, lean and powerful, Opera comes pre-packed with a fully-featured suite of developer tools. Named Opera Dragonfly, it is designed to make your job easier. To learn more, click here.
Launch Opera Dragonfly with the following keyboard shortcuts:
-
Command + Option + i(Mac) -
Ctrl + Shift + i(Windows/Linux).
Alternatively, you can target a specific element by right-clicking in the page and selecting Inspect Element.
12. Quiz: Using Developer Tools
Developer tools on different browsers
Did you know, every modern web browser includes its own set of developer tools?
If you didn't, that's okay. Developer tools aren't always the easiest thing to find in your browser. So, we've decided to help you out by creating this guide to developer tools!
Instructions
- Google Chrome
- Mozilla Firefox
- Internet Explorer
- Microsoft Edge
- Safari
- Opera
Google Chrome
The Chrome DevTools are a set of web authoring and debugging tools built into Google Chrome. Use the DevTools to iterate, debug and profile your site. To learn more, click here.
To open Chrome DevTools, either right-click on any page element and select Inspect or open the Chrome settings menu in the top-right corner of your browser window and select More Tools > Developer Tools. Alternatively, you can use the shortcuts:
-
Command + Option + i(Mac) -
Ctrl + Shift + i(Windows/Linux).
Mozilla Firefox
Firefox Developer Tools allow you to examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile. Also, you can download a version of of Firefox called Firefox Developer Edition that is tailored for developers, featuring the latest Firefox features and experimental developer tools. To learn more, click here.
To open Firefox Developer Tools, either right-click on any page element and select Inspect Element or open the Firefox settings menu in the top-right corner of your browser window and select Developer. Alternatively, you can use the shortcuts:
-
Command + Option + i(Mac) -
Ctrl + Shift + i(Windows/Linux).
Internet Explorer
If you use Internet Explorer, then you can access F12 developer tools by simply pressing F12. The features vary between versions, but starting at Internet Explorer 8 remain pretty consistent. Below, we've linked to documentation for each version, but if you've upgraded to Microsoft Edge, then check the next section.
- Internet Explorer 8
- Internet Explorer 9
- Internet Explorer 10
- Internet Explorer 11
Microsoft Edge
Microsoft Edge introduces great new improvements to the F12 developer tools seen in Internet Explorer. The new tools are built in TypeScript, and are always running, so no reloads are required. In addition, F12 developer tools documentation is now fully available on GitHub.
Just like Internet Explorer, to open developer tools in Microsoft Edge simply press F12.
To learn more, click here.
Safari
For any Mac users, Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize a website for peak performance and compatibility on both platforms. To learn more, click here.
To access Safari's Web Development Tools, enable the Develop menu in Safari’s Advanced preferences.
Once enabled, you can right-click on any page element and select Inspect Element to open Web Development Tools or use the shortcut Command + Option + i.
Opera
Fast, lean and powerful, Opera comes pre-packed with a fully-featured suite of developer tools. Named Opera Dragonfly, it is designed to make your job easier. To learn more, click here.
Launch Opera Dragonfly with the following keyboard shortcuts:
-
Command + Option + i(Mac) -
Ctrl + Shift + i(Windows/Linux).
Alternatively, you can target a specific element by right-clicking in the page and selecting Inspect Element.
12. Quiz: Using Developer Tools
13. CSS Units
Resources about CSS Units
- Mozilla Developer Network - CSS Length
- css-tricks.com - The Length of CSS
Image Credits
- 'Karakoram Highway' by [Marc van der Chijs (https://www.flickr.com/photos/chijs/) via Flickr, Creative Commons.
- 'Silhouette of Car with Driver' by Inkwina via Wikipedia, Creative Commons.
14. Units in CSS
15. CSS Colors
How Hexadecimal Works
- The Hexadecimal Numeral System
- Hex to RGB Convertor
Image Credits
- Photos by Markus Spiske via Raumrot, Creative Commons.
- 'A powerful light shining in the dark' by Zouavman Le Zouave via Wikipedia, Creative Commons.
0:最弱光值
255：最强光值
16. 练习：Identifying Colors
ff or f表示用了100%的光亮
References
- Named Colors and Hex Equivalents
- CSS Shorthand Properties
- CSS Shorthand Hexadecimal form