How to see what CSS styles a div is set

How do I see what CSS style the div is set to? Can be extended to understand what CSS styles are set for viewing any HTML tags. DIVCSS5 teaches you how to use Google Chrome to find a local div layout structure in a Web page and what CSS styles to set.

first, directly observe the DIV tag is set what style-TOP

Simple layout, we can directly from the browser to see the effect of the place to analyze what style is set.

Simple and intuitive analysis of what style diagram the div CSS layout uses

For example, you can roughly analyze the corresponding style, such as the use of background pictures, set the width of how much, set the CSS height, font size, text on the left, distance left how much.

The above analysis is only intuitive to see what the analysis of the approximate use of CSS style, but if you want to accurately analyze the layout of the CSS style exactly what to set, it must look at the corresponding CSS code.

The actual analysis can not be observed, it is necessary to see the div corresponding class or ID corresponding to the CSS selector style.

second, find the class or ID in the div corresponding style-TOP

To parse a corresponding Div CSS case

1. Tools: DIVCSS5 using Google Chrome for analytics

2. Find a place to analyze Div Layout what CSS-style processes to use

2-1: First open Web page

Opened Shanghai Cheng Kai Men's sexual function rehabilitation Treatment center

2-2: View Source code
The right mouse button in the blank of the page -"View the page source code

View Source code

The corresponding HTML source code will be opened automatically in the Google Chrome tab.

Corresponding Web page HTML source code

2-3: Find the corresponding to find the local div
You can use the shortcut key "ctrl+f" to find the div layout you want to find.

Find the corresponding content by comparing the contents of the original Web page and get the corresponding div layout structure information.

Find tips, use the browser to bring the Find tool, and then compare what you want to find Div content with the original normal access to the content, find a definite div layout structure.

Here to find the corresponding content div layout content code:

1. 1. <H2 class="Home"><a href="/" title="go to Shanghai premature ejaculation treatment Hospital"> DIVCSS5</a></h2>

From the above code can be obtained, need to analyze that layout using H2 tags for layout, while using class= "Home".

Remember the corresponding ID and class name, here is named "Home" by class, you can think of CSS must use ". home{...}" Selectors.

2-3: Open CSS Code
If the CSS is to use HTML to introduce external CSS files, it is necessary to open the corresponding page of the external CSS file, in order to find the CSS code in the corresponding ID or class name, so as to get the corresponding div layout using what CSS style.

Find link to introduce external CSS file code

Open CSS file: in Google browser directly click the link corresponding CSS file URL can be opened in Google Chrome css file.

Open the corresponding CSS file to view the corresponding CSS code

2-4: Find the corresponding CSS selector using the Find tool
Using Google Chrome Find tool, shortcut key "Ctrl+f" to open the Find tool, the HTML analysis of the ID or class named copy to find the input box to find, here is the use of "class=" home ", we know that class corresponding to the CSS is a half-width English lowercase period". Search for ". Home", named at the beginning of the selection symbol

Find two corresponding CSS styles

The CSS code corresponding to the div CSS layout is as follows:

1. 1. H2.home{height:24px;line-height:20px;font-size:14px;color: #000; text-indent:25px;
      Background:url (divcss5-left-li.gif) no-repeat 0 0}
   2. H2.home a{color: #000; Text-decoration:none}

The corresponding local setting CSS styles are:

2-4-1: corresponding to the H2 label set height of 24px, CSS up and down center text line height is 24px, the font size is 14px, the font color is black "#000", set the CSS indentation 25px, set the picture as the background does not repeat the uneven (can be seen from the Web page practice effect of the corresponding icon) ；

2-4-2: Sets the hyperlink text in the corresponding H2 label the font color is black "#000", the CSS is stripped of the hyperlink font underline.

The above is DIVCSS5 describes how to analyze a page somewhere in the local use of what the label layout, the corresponding set of CSS style, so that the analysis can help everyone at ordinary times to draw on others CSS layout, so that their own grasp of the div+css layout method skills.

How to see what CSS styles a div is set