Home > Developer > JavaScript
Common css skills: continuous update and css skills
1. Remove the horizontal scroll bar
Demo:
<Body style = "overflow-y: visible; overflow-x: hidden">
Code parsing:
Normal vertical display, horizontal overflow hidden.
2. Background tile (Display)
Demo:
. Outer {width: 100%; background: url () no-repeat center top ;}
. Core {width: 1000px; margin: auto ;}
Code parsing:
Double div nesting, the outer div is set to in width, the no-repeat background is not repeated, the center background image is scaled in the middle, and the top is displayed from the top down; the inner div is set to a fixed width, margin automatically centers ].
3. position and z-index
Demo:
The layer is overwritten and cannot be displayed normally.
Problem Analysis:
Set the position and z-index of the div. Details: POSITION & Z-INDEX
4. Remove the dotted border of the hyperlink
Deme:
Click the hyperlink and a dotted border appears.
Code parsing:
IE browser: a {blr: expression (this. onFocus = this. blur ());}
FF Browser: a {outline: none;} or narrow down the scope: a: focus {outline: none;} note: the latter enables the left mouse button to press on the link, the outline of the dotted line will still be displayed during the period before release.
5. Add to Favorites (concise code)
Demo:
Add to favorites in the upper right corner
Code parsing:
<A href = "http://www.baidu.com/" onclick = "window. external. addFavorite (this. href, this. title); return false; "title = 'Baidu 'rel =" sidebar "> Add to favorites </a>
6. div application float overflow fatherdiv
Demo:
Fdiv does not set height, div application float, content Overflow
Solution:
Add Bdiv and apply clear: both clear float or set height for Fdiv.
7. CSS abbreviations
① Abbreviation of color
Demo:
# Ff00ee-> # f0e abbreviation Note: # f0f0fe-> # f0f0fe cannot be abbreviated
② Abbreviation of Unit
The value is 0 and can be left empty.
Demo:
Margin: 0px-> margin: 0
③ Abbreviation of margin and padding
Description rule, clockwise top right bottom left
Demo:
Margin-left: 15px; margin-right: 20px; margin-top: 30px; margin-buttom: 10px; -->
Margin: 30px 20px 10px 15px; Top = 30px, Right = 20px, Bottom = 10px, Left = 15px;
Margin: 30px; Top = right = Bottom = left = 30px;
Margin: 30px 20px; Top = Bottom = 30px; left = right = 20px;
Margin: 30px 10px 15px; Top = 30px; bottom = 10px; left = right = 15px;
Note: The upper right lower left Clockwise is not applicable here.
④ Abbreviation of border
Rule: border-width border-style border-color
Demo:
Div {border-width: 1px; border-style: solid; border-color: # f00;}/* border width border style border color */
-> Div {border: 1px solid # f00 ;}
Border-top, border-right, border-buttom, and border-left cannot be abbreviated, but can:
Div {border-width: 1px;/* The border width in four directions of the border is 1px */
Border-style: solid dashed double;/* Top border: solid; Bottom border: dashed; left border: double ;*/
Border-color: # f00 #000;/* the upper and lower border colors are: # f00; left and right border colors: #00 */
}
I. html tags
<Pre>... </pre> text format
<Div>... </div> column block container
Font size variation <font size =?> Words to enter </font>
Font color <font color = "..."> words you want to enter </font>
Font width <B> words to be entered </B>
Font skew <I> words you want to enter </I>
Underline the font <u> the words you want to enter </u>
<P align = "center"> content </p>
<P align = "left"> content </p>
<P align = "right"> content </p>
Font strikethrough <s> words </s>
Font Settings <font face = "font name"> words you want to enter </font>
Typewriter font <tt> words you want to enter </tt>
Superscript <sup> words you want to enter </sup>
Subscripts <sub> words to be input </sub>
Horizontal line Text to be entered in line feed <br> words to be entered
Hyperlink <a href = "link URL"> name of The Link location </a>
<A href = "mailto: enter email"> enter the words to be displayed here </a> web mail tag
Texture
Marquee (loop) <marquee behavior = scroll> words you want to enter </marquee>
External File Import format label
CSS external import format:
<Link rel = "stylesheet" type = "text/css" href = "/css.css"/>
Direct reference:
<Style type = "text/css">
<! --
Id {...}
-->
</Style>
Javascript-Load External. js independent files:
<Script type = "text/javascript" src = "/script. js"> </script>
Ii. CSS text attributes:
Color: #999999;/* text color */
Font-family:, sans-serif;/* text font */
Font-size: 9pt;/* text size */
Font-style: itelic;/* italic text * & #47 ...... remaining full text>
Css skills and knowledge
Css skills and skills
You can only learn from the root of your knowledge.
After you read "Cao Peng CSS video tutorial", you can complete the DIV + CSS structure. I am a person from the past and I spent 4 hours watching it, to watch and follow him
1) Why do I need a CSS style table?
Introduction:
The labels learned frequently in previous courses show more complex results on the webpage, with a single style.
CSS is used to change the style of labels on a webpage to make the webpage more colorful. It can attract more readers on the surface. CSS matches China's beautiful clothes
Style Sheets can differentiate the content and style to facilitate team development.
1. Basic syntax of the style table
1) the fundamental structure of the style table.
2) style rules and examples.
3) Introduce a style.
Ø lecture case: basic syntax of Style Sheets
2. Text attributes
Introduction:
First from the text of the fine, color, font to depict text attributes.
Exaggerate the benefits of using styles to complete the presentation of text in a huge color font
3. lecture class training
For form training of "request table", refer to "lecture contact case \ lecture training 1 ".
4. Background attributes
Introduction:
First from the text of the fine, color, font to depict text attributes.
Ø key points:
The basic usage of backcolor, background-image, and background-repeat attributes.
Note:
1) location where Background-repeat is used: When a small GIF image is used as a webpage configuration, you can use repeated results, either horizontally or vertically.
2) Another simple way of writing a style is to arrange all kinds of attributes together and separate them with spaces, as shown below:
Body {
Background: #999ff00
Url (../image/css_tutorials/background.jpg)
No-repeatfixed 40px 100px
}
Ø lecture case:
Background.html
Ø verification case:
Add case \ How to Use CSS to control webpage background. Html
5. Box attributes
Introduction:
First from the text of the fine, color, font to depict text attributes.
Ø key points:
1) Box format: a set of images placed on a webpage to clarify the boundaries, supplements, and meanings of frames planned in the Box form.
2) Border attributes and supplementary attributes are used to create a border style in multiple columns of a rare table.
3) use the border attribute to create the style of the output frame of the fine border.
Ø lecture case:
Introduce common style attributes one by one
Ø verification case:
6. Special style
Ø key points:
The method for creating a hyperlink without underline.
Ø lecture case:
Introduce common style attributes one by one \ none_underLineLinkCSS.html
Ø verification case:
7. Lecture Hall training 2
For the framework page of a similar online training tutorial, refer to "lecture case \ lecture training 2 ".
8. Create Image buttons
Ø key points:
How to Create Image buttons.
Ø lecture case:
Introduce common style attributes one by one \ registerCss2.html
Ø verification case:
9. Use of three types of styles
Ø key points:
The titles of other reference materials for the three types of styles can be different, for example, some are called "embedded (Inline style)", "external (embedded style)", and "internal (internal style) "style table.
Ø lecture case:
Three methods for using style sheets
Ø verification case:
10. Summary
What are common attributes of the box attribute? And identify and clarify its meaning?
What are hyperlink styles?
Embedded style table, in-row style... the remaining full text>
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
