Home > Developer > Web Develop
1 , <b></b> with the <strong></strong> What's the difference?
1) The <b> tag is an entity tag, and the character that surrounds it will be set to bold (bold), and the <strong> tag is a logical label, and its role is to strengthen the tone of the character, in general, The tone of the reinforcing character is achieved by turning the character into bold (bold). This strong can be completely defined as the emphasis effect of other styles.
2) Strong is the label for XHTML in web standards, meaning "emphasis"; B is html, meaning bold (bold).
2 , CSS judgment with ID , class and the label selector defines the priority of the style?
1) Three ways to coexist:!important > ID > Class > tag
2) When there are only two class or two IDs
<body>
<fieldset>
<legend> two-class time </legend>
<div class= "Classtest2" class= "Classtest" >classtest2 (yellow) first classtest (blue) </div>
<div class= "Classtest" class= "Classtest2" >classtest (blue) first classtest2 (yellow) </div>
</fieldset>
<fieldset>
<legend> two IDs at the time </legend>
<div id= "Idtest" id= "Idtest2" >idtest (green) first idtest2 (yellow green) after </div>
<div id= "Idtest2" id= "Idtest" >idtest2 (Yellow-green) first idtes (green) after </div>
</fieldset>
A priority result: when and only if there are two or more classes or IDs , the preceding precedence is high.
3) only when the tag div selector
<style type= "text/css" media= "screen" >
div {color:blue;}
div {color:red;}
</style>
<body>
<div> Blue style first, red style after </div>
</body>
Conclusion: The results are shown in red, indicating that when only the tag selector is present, the precedence of the style sheet defined later is higher .
CSS Introduction Mode Priority
1) External style sheet: Write the style rules directly in the *.css file and then *.html the page with the <link> tag introduction
2) Internal style sheet: (located inside the
3) Inline style: (inside HTML elements)
4) Import style sheet: <styletype= "text/css" > @import url ("Css/base.css"); </style>
Validation: External style sheet vs internal style sheet (define internal style sheet first, then introduce external style sheet definition file)
<TITLE>CSS style sheet Priority test </title>
<meta charset= "UTF-8"/>
<style type= "text/css" media= "screen" >
div {Color:green}
</style>
<link rel= "stylesheet" href= "Css/xiaoxuetu.css" type= "text/css" media= "screen" title= "no title" charset= "Utf-8"/ >
Draw Priority results: External style sheets > internal style Sheets
Validation: External style sheet vs internal style sheet (introduce an external style sheet definition file, and then define an internal style sheet)
<TITLE>CSS style sheet Priority test </title>
<meta charset= "UTF-8"/>
<link rel= "stylesheet" href= "Css/xiaoxuetu.css" type= "text/css" media= "screen" title= "no title" charset= "Utf-8"/ >
<style type= "text/css" media= "screen" >
div {color:green;}
</style>
Draw priority results: Internal style sheets > external style Sheets
From these two tests, it was found that the precedence of an external style sheet and an internal style sheet is related to the order in which they are introduced when the label's style is defined directly .
Validation: External style sheet vs inline style
<TITLE>CSS style sheet Priority test </title>
<meta charset= "UTF-8"/>
<link rel= "stylesheet" href= "Css/xiaoxuetu.css" type= "text/css" media= "screen" title= "no title" charset= "Utf-8"/ >
<body>
<div style= "color:red;" > External style sheet (blue) VS inline style (red) </div>
</body>
Draw priority results: inline style > external style sheet
Validation: inline style vs internal style sheet
<TITLE>CSS style sheet Priority test </title>
<meta charset= "UTF-8"/>
<style type= "text/css" media= "screen" >
div {Color:green}
</style>
<body>
<div style= "color:red;" > Internal style sheet (green) VS inline style (red) </div>
</body>
Draw priority results: inline style > internal style sheet
Conclusion : The internal style has the highest priority, and the precedence of the inner style sheet and the external style sheet depends on the order in which they are introduced and defined , that is, the previous introduction will overwrite it.
3 , List Display the values that illustrate their role.
Blocks appear as block type elements.
The default value of None. Displayed as an element type in the row.
Inline-block is displayed like an inline element, but its contents are displayed like a block type element.
List-item is displayed like a block type element, and a style list tag is added.
position values of:
*absolute generates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor.
*fixed (old IE not supported) generates an absolutely positioned element that is positioned relative to the browser window.
The *relative generates relatively positioned elements that are positioned relative to their normal positions.
* Static default value. No positioning, element appears in normal stream
* (ignore top, bottom, left, right Z-index declaration).
* Inherit specifies that the value of the position property be inherited from the parent element.
4 , CSS Background Settings
1) Background color (background-color), there are many ways to specify this color, the following methods have the same result.
2) Background map (background-image)
3) Background tile (background-repeat)
4) Background positioning (background-position)
The Background-position property is used to control the position of the background picture within the element. You actually specify the position of the upper-left corner of the picture relative to the upper-left corner of the element. The first number represents the x-axis (horizontal) position, and the second is the y-axis (vertical) position.
background-position:0 0; /* Example 1: Default value, upper-left corner of element */
background-position:75px 0; /* Example 2: Move the picture to the right */
Background-position: -75px 0; /* Example 3: Move the picture to the left */
Background-position:0 100px; /* Example 4: Move the picture down */
The Background-position property can be specified with other values , keywords , and percentages , especially if the element size is not set in pixels .
On the X-axis: * Left * Center * right
On the y axis: * Top * Center * Bottom
When you use percent positioning, you are actually aligning the position specified by the percentage of the background picture with the percentage position of the element . In other words, the percentage positioning is a change of the background map and the alignment point of the element . It is no longer like using pixels and keywords to position the upper- left corner of the element to align the base point when using the background map. For example the above example of background-position:100% 50%; is to align the 100% (right) of the background image with the 50% (center) of the element, which is the point of the 50% (center) of the 100%.
5) Background Attachment background-attachment
The Background-attachment property determines the state of the picture when the user scrolls the page. Three available properties are scroll (scrolling), fixed (pinned), and inherit (inherited). Inherit simply specifies that the element inherits the Background-attachment attribute of his parent element.
To understand Background-attachment correctly, you first need to understand how the page and viewport (view port) work together. The viewport (view port) is the part of the browser that displays the page (that is, the browser that removes the toolbar). The location of the viewport (view port) is fixed and does not change.
When you scroll down the page, the viewport (view port) is not moving, and the content of the page scrolls up. It looks like the viewport (view port) is scrolling below the page. If you set Background-attachment:scroll, the element background must also scroll as the element scrolls. In short, the background is tightly attached to the element. This is the Background-attachment default value.
(1) Use an example to more clearly describe the following:
Background-image:url (test-image.jpg);
background-position:0 0;
Background-repeat:no-repeat;
Background-attachment:scroll;
When you scroll down the page, the background scrolls up until it disappears.
But when the setting background-attachment is fixed, when the page scrolls down, the background stays in its original position (relative to the browser). That is, it does not scroll with elements.
(2) Use another example to describe the following:
Background-image:url (test-image.jpg);
Background-position:0 100%;
Background-repeat:no-repeat;
background-attachment:fixed;
As the picture begins outside the element, a portion of the picture is cut off.
5 , CSS style, the custom width of the input box is hidden from the section and the ellipsis is displayed.
. xx{
Display:block;
width:200px; /* Definition of Width */
Overflow:hidden; /* Out of the hidden parts */
White-space:nowrap; /* Prohibit line break */
Text-overflow:ellipsis; /* Out of the section with ... Implementation */
}
Text-overflow Property Specifies what happens when the text overflows the containing element.
Text-overflow:clip | ellipsis | String
Clip trim text.
Ellipsis displays the ellipsis to represent the trimmed text.
String uses the given string to represent the trimmed text.
6 , PNG , jpg , gif the difference between pictures
GIF features: Small size, has excellent compression effect, support animation, and support transparency , although this transparent without PNG as the gradient transparent and powerful.
JPG is the most common format of digital camera, features: Color restore good, can be in the case of the picture is not obvious distortion, greatly reduce the volume, so the volume is not very large, the disadvantage is not to support transparency .
PNG is the best picture for the Web ! The advantages of PNG: Clear, lossless compression, high compression ratio, can be graduated transparent , with almost all the advantages of GIF, the disadvantage is that the color is not as rich as JPG, the same picture volume is slightly larger than JPG. But PNG should be promoted in website design, it is recognized as the most suitable image format for the use of Web pages. Almost all of Google's site's image resources are in PNG format. A 8-bit PNG can completely replace GIF.
Another advantage of PNG is that successive approximation displays (progressive display): While transferring an image file, you can display the entire outline first, and then gradually display the details of the image, showing the low-resolution display image first, from Blur to clarity , and then gradually improve its resolution. This is a good user experience.
All aspects of comparison
Size comparison: Typically, Png≈jpg > GIF
Transparency: PNG > GIF > JPG
Color richness: JPG > PNG >gif
Degree of compatibility: gif≈jpg > PNG
Note that the transparency of PNG under IE6 is not displayed and has its corresponding hack method.
--css part of true fusion treasure face question
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
