Self-written Web Standard tutorials help you enter the world of Web standard design-Lecture 4 (CSS article 1)

Statement:This tutorial is based on a summary of some of my learning experience. I hope you can help me to improve and correct it. I also hope it will be convenient for beginners, not complete yet, but the author and source should be indicated during reprinting, And the link address of the original text should be appended. Thank you.

Preface: I am very busy a while ago. I am sorry for the final disconnection of the tutorial. I will finish the CSS tutorial in about a week. I hope it will be helpful to you! Thank you for your support!

Output:

Self-written Web Standard tutorial to help you enter Web The world of standard design-lecture 1

Self-written Web Standard tutorial to help you enter Web The world of standard design-Lecture 2

Self-written Web Standard tutorial to help you enter Web World of standard design-Lecture 3 (final part of HTML)

 

Last Review: Through the above three explanations, I will introduce you to some of the main knowledge of the HTML section.

 Thank you very much for your support. Thank you for your encouragement!

 

Overview:

1. CSSIntroduction

2. CSSCompiler

3. CSSDebugging tools

4. CSSNaming rules

5. A css color-removing Tool

6. CSSRelationship with ID, class, and Element

 

OK, begin! Right now!

 

First, let's briefly introduce CSS.:

CSS is a stacked style sheet. To put it bluntly, a webpage is dressed and decorated.So easy!

CSSCompiler:

I personally prefer dreamweavercs4. Of course you can also use Notepad, but I do not recommend that you use notepad. Creating a CSS file in Dreamweaver is very easy. I believe you will do it.

CSSDebugging tools:

In fact, Dreamweaver itself is a powerful CSS debugging tool. We will explain how to use it in the future. You can also go online to find the strategy. It is estimated that there will be a lot

Tip: Do not use design views to generateCodeDo not read similar tutorials. The code is still practically typed in from the keyboard.

Green Advertisement:Here we will introduce a new knowledge, that is, compatibility, which may be unfamiliar to everyone. Let's just get an impression first. For example: when you use software, you often need to divide the operating system, while when using web pages, you need to divide them into browsers. (If you don't understand this place, you can skip it)

Essential Web browsers for learning web standards:

(This is very important. I will focus on this in future tutorials.) Firefox is a browser that is closest to the Web standard. I hope you will install it.

FirefoxExtension:

To learn about Web Front-end design, you have to understand several Firefox plug-ins. First, let's talk about how to install the plug-in Firefox:

1. Open Firefox> Tools> Add component

2. Enter the name of the component you want to install, click search, find it, click Install, and restart firfox.

 

Components to be installed:

For beginners, installing a firebug plug-in is enough for use and debugging. After firebug is successfully installed, a bug icon will appear at the bottom of your browser.Click him or press F12 to start the firebug plug-in. I will explain how to use this plug-in later. If you can't wait, you can go online to find the strategy.

CSSNaming Convention (Download references):

1. Naming basis: the naming method is based on the block content of Your webpage. For example, if you want to write a block, this block contains an articleArticle, You can do this:

<Div id ="Article">Article content </div>

2. Naming method: Use a camel-style writing format. For example, you can name an article image like this: articlepic ..., The first word must be in lower case, and the start Letter of the second and subsequent words must be in upper case. Chinese names are prohibited.

A small CSS color-removing Tool(Download):

 

Drag the color pen above to the color area to automatically obtain the hexadecimal value and RGB value of the color, in web pages, we usually use hexadecimal values to represent a color.

CSSRelationship with ID, class, and element:

Let's look back at the ID and class attributes of HTML tags, because these two attributes perfectly combine HTML tags and CSS. If you still don't know much about these two attributes, you can look at them. Write by yourself Of We B Standard tutorial to help you Into We B The world of standard design-first Lecture .

 

Coming soon:

1.Three methods of embedding CSS in HTML

2. When CSS is disabled -- the importance of CSS

3. CSSInstance details

 

 

Today's tutorial is here. Goodbye tomorrow. Thank you!

QQ chat group: 71019430 (mostly cainiao, please forgive me !)