existTaught yourself to be a web designer? (Down)This article mentions how to improve the ability of web designers. In addition to viewing many different websites, more advanced knowledge and writing skills of HTML and CSS are also required.
Further reading:Taught yourself to be a web designer? Confessions of Non-Undergraduate Designers (Part 2)
I don’t know if you have read a lot of websites when you are just starting to learn, have the following situations occurred?
- There are a lot of images and blocks in the website, how do I know how much width to set in CSS?
- The font used on the website is very special, how do I know what font or size to set in CSS?
- The main color of the website is so beautiful! But how do I know the color code of CSS colors?
…and so on for the above questions
Through this article, in addition to sharing the basic knowledge of HTML and CSS, I also want to share 2 tools to allow you to find CSS style settings on web pages
1. What is CSS? What is HTML?
Before understanding the style settings of the website, we must first ensure that we have a basic understanding of web page grammar, just like we need to understand the ABC English letters before we want to understand English words
1. What is HTML?
HTML is mainly responsible for establishing the basic structure of web page presentation. It is mainly composed of HTML tags. Just like our human appearance is composed of various bones and organs, it also determines our appearance, such as the bones of humans and dogs. Different shapes and numbers, so we look different
The same is true for the facial features. We have a nose with two nostrils, a mouth with an upper lip and a lower lip… etc. HTML is also used to construct the basic outline of a website, such as page headers, content blocks, and image areas. block, footer
2. What is CSS?
CSS is mainly responsible for visual style settings. If you have played role-playing games, some games allow us to customize the appearance of characters when creating characters, such as height ratio, skin color, eye size, nose shape… and many more
CSS is designed to control the size, thickness, color, font, alignment and position of various components on the web page… and so on.
CSS also has a core function, which is to set repeated things only once. For example, all buttons on my website must use red background color and white text, then we will take onenamecalled in CSSclass
Then set which CSS properties it needs for this class, as well as the values of these properties, and then as long as the class is applied to each HTML tag, these HTML tags will have the same CSS style settings. Of course, if the CSS is modified , all tags that apply the same class will also be affected
3. A few questions about HTML and CSS
Q: Can CSS change the original HTML content of a website?
The answer is no! !Because CSS is only responsible for adjusting the appearance style, the original structure and content cannot be changed, just like we have only two eyes originally, and we can’t give birth to a third eye through makeup (don’t mention artificial makeup, that’s still fake eyes) unless you have plastic surgery
And plastic surgery, in the web page is to modify the structure and content of HTML
Q: Are you writing programs when you write HTML and CSS?
It’s not!No matter which programming language you write, it will help you calculate and produce results according to the formula you write, but HTML and CSS do not have the ability to calculate, so if you write “1+1=”, it will only be displayed on the web page” 1+1=”, HTML and CSS will not give you the answer of “2”
For a more comprehensive understanding, please refer to
HTML&CSS: How to optimize website design and construction
Second, CSSViewer plug-in recommendation (easy and fast)
CSSViewerIt is an extension of the Chrome browser and is a tool specially used to check the CSS style of web pages. Its advantage is that after installation, just click on the block to be viewed, and the detailed CSS style content can be displayed immediately. You can know, the style setting value of this webpage block!
1. Download/Install
Download link: Chrome Web Store
2. Enable CSSViewer
After installation, behind the URL bar, you will see the icon of CSSViewer. When you want to view the CSS style of the web page, click the icon again to open CSSViewer, and click again to close CSSViewer
3. How to use
After clicking the software icon, move the mouse cursor to the webpage, the software will automatically detect the CSS style setting of the block you specified, and display it
The advantage of CSSViewer is that it can easily assign elements to the screen and display the CSS style applied to it, but the disadvantage is that you cannot know how CSS is written.
E.g:
Is CSS specified directly on this HTML tag?
Or is it affected by CSS from other tags?
Is CSS specified directly on this HTML tag? Or is it affected by CSS from other tags?
This is very important for people who need to write or rewrite CSS styles, because they must find the true corresponding writing method of CSS, and the following is what web designers and web front-end engineers must use.Chrome Browser Developer Tools
3. Chrome browser developer tools (advanced tools)
Chrome Browser Developer ToolsIt is a tool that web developers must use. It is mainly built into the Chrome browser. As long as you are using the Chrome browser, move the mouse over an element (image, text, etc.), click the mouse Right click and select from the menu that opensan examination,The browser will open a screen like this
Don’t worry if you don’t look like me. After clicking the three dots icon in the upper right corner of the window, there will be options to change the presentation of the tool, as shown below
1. Introduction to developer tools
The developer tools have many functions, but here we mainly introduce two parts that web designers must use. The purple block on the left is the HTML of the web page, and the blue block on the right is the CSS style setting.
At this time, we can start to find the CSS settings of each element!
2. Find the CSS style that HTML is applied to
Because I just right-clicked on the website LOGO and used the check, the developer tools will automatically use a light blue background to mark the HTML location of my LOGO image. When the mouse cursor is moved to the HTML tag, the webpage screen will also be marked synchronously. , where you are choosing, you can now try it out on my page
After clicking on the HTML tag, the CSS block on the right will also display the CSS applied to the HTML tag.At this time, the sharp-eyed you may find that there are so many CSS settings applied, and some are repeatedly crossed out.
In a simple explanation, it is because HTML tags are written in a hierarchical relationship, just like the way the HTML on the left is presented, and the HTML needs to be spread out layer by layer, like an onion.
The outermost setting affects all HTML inwards. For example, if I set the background CSS to be red in the outermost HTML, as long as the tags below this layer of HTML will be affected, unless the HTML in this layer sets the background separately Color, it will be based on the innermost
You can also think of it as a concept of inheritance. When my grandpa is bald, my father and even me are very likely to be bald, because of genetic inheritance, unless I will be bald right now. The baldness gene is removed, otherwise my future children and grandchildren should be bald. The same is true for the hierarchical impact of HTML setting CSS. The more the outer layer, the greater the impact.
3. Set CSS to see the effect
existChrome Developer ToolsHTML and CSS and any other modifications made in the web page, you can immediately see the changes of the web page, and they will not be saved, so rearranging the web page will restore the original state.
Now take my website as an example, if I want to change the right side title text to red, I will point my mouse cursor to the title text, right click and selectviewI can find the HTML and CSS settings for the title
At this time, I will find where the CSS that actually controls the color of the title is written at the moment (the commonly used CSS properties I have arranged at the bottom), the word “last true” is as I said above, because of the hierarchical relationship, it is trapped A lot of CSS properties are used, usually the top CSS is the last CSS applied
As shown below, the purple line isclass namethe blue line controls the text colorCSS properties
At this time, you can try to modify the CSS value at the blue line (click directly with the mouse), as shown below
Then not every CSS value is set from the beginning, but you can also click on the blank block to add a new CSS property, and the page will have an immediate effect.
CSS common syntax lazy package below the article
4. How to simulate a mobile phone screen on a computer
Because of the popularity of smart phones, RWD web pages will look different on mobile phones. Is there any way to simulate it on the computer?
the answer is:some
The developer tools have a phone emulator, the enable button is in the upper left corner of the developer tools window
After clicking on it, the web page will appear as a simulator (the developer tools will be displayed on the right side of the window first), and you can choose different device sizes at the purple line!
This is mainly used to see if the mobile version has a running version, but some operations will inevitably be a little different from the mobile version, but it is very convenient!
Five, commonly used CSS syntax lazy package
Text CSS
font CSS
backView CSS
insideDistance CSS
Border CSS
| Attributes | describe |
|---|---|
| border | Shorthand property to set properties for four edges in one declaration. |
| border-style | Used to style all borders of an element, or for each side individually. |
| border-width | Shorthand property to set the width for all borders of the element, or for each side border individually. |
| border-color | Shorthand property to set the color of the visible part of all borders of the element, or set the color for each of the 4 sides. |
| border-bottom | Shorthand property for setting all properties of the lower border into one declaration. |
| border-left | Shorthand property to set all properties of the left border into one declaration. |
| border-right | Shorthand property for setting all properties of the right border into one declaration. |
| border-top | Shorthand property to set all properties of the top border into one declaration. |
Margin CSS
The above sources come fromW3C website
6. Conclusion
CSSViewer and Chrome’s Developer Tools have different advantages
If you just want to know the value currently set by the CSS of the web page, CSSViewer is very convenient and fast
But if you need to modify and write CSS, you must be able to use developer tools, so that there is a way to actually set CSS on the right HTML tags
If my instructions still can’t make you understand how to operate, here is one I recommend beforeUdemybeen onHexagon CollegeFree teaching course, the course mainly explains the operation and application of Chrome developer tools, the first chapter has related instructions, maybe watching the video will be more clear than the picture!
Click me to go to free teaching courses
In addition, if you want to know more about HTML and CSS, you may wish to refer to the following books!
HTML&CSS: How to optimize website design and construction
Further reading:
Taught yourself to be a web designer? Confessions of Non-Undergraduate Designers (Part 1)
What is UI and UX?A must-see when changing jobs in graphic design
If you like this article of mine, please pat the little hand below 5 times to give me support and encouragement!