Home > Developer > Web Develop
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">5 <title>Relative style</title>6 <styletype= "Text/css">7 P{8 padding:13px 13px 13px 13px;9 margin:10px 40px 10px 40px;Ten } One </style> A </Head> - <Body> - <P>text, text, text, textual, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text text text text.</P> the </Body> - </HTML>box Model Code shorthand
Remember that margins (margin), padding (padding), and border (border) settings are set in a clockwise direction, up or down in four directions, in the box model: upper right bottom left .
Examples of specific applications in margin and padding are as follows:
margin:10px 15px 12px 14px;/* set to 10px, right set to 15px, lower set to 12px, left set to 14px*/
There are three abbreviations that are commonly used:
1. If the values of top, right, bottom, and left are the same, such as the following code:
margin:10px 10px 10px 10px;
can be abbreviated as:
margin:10px;
2. If the top and bottom values are the same, left and right values are the same, as in the following code:
margin:10px 20px 10px 20px;
can be abbreviated as:
margin:10px 20px;
3. If the values of left and right are the same, such as the following code:
margin:10px 20px 30px 20px;
can be abbreviated as:
margin:10px 20px 30px;
Note: The abbreviated method of padding and border is consistent with margin.
TaskTo try, change the margin and padding two values in the Code Editor to an abbreviated form.
The reference code is as follows:
p{
padding:13px;
margin:10px 40px;
}
Box Model size = border + margin + padding + size of contents in box
Definition order: Upper right Down left (clockwise)
Three values defined: 1 (UP) 2 (left and right) 3 (bottom)
Define two values: 1 (Up/Down) 2 (about) This order is up, right, down, left,,,, clockwise,, and then if there is shorthand, it is the corresponding shorthand,
For example, there is only one value, that is, if two values (representing, up and down are the same) if three values (representing the default last left and the given right are the same)
Second, the color value abbreviation1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">5 <title>Relative style</title>6 <styletype= "Text/css">7 P{8 Color:#336699;9 }Ten </style> One </Head> A <Body> - <P>text, text, text, textual, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text text text text.</P> - </Body> the </HTML>color value abbreviation
The CSS style of the color is also abbreviated, and if you set the color to 16, you can abbreviate it by half if the values are the same for each of the two digits.
Example 1:
P{color: #000000;}can be abbreviated as:
P{color: #000;}Example 2:
P{color: #336699;}can be abbreviated as:
P{color: #369;}
Try it out in the code editor and try the color shrink form
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">5 <title>Font abbreviations</title>6 <styletype= "Text/css">7 Body{8 Font-style:Italic;9 font-variant:Small-caps; Ten Font-weight:Bold; One font-size:12px; A Line-height:1.6em; - font-family:"Song Body", Sans-serif; - } the - </style> - </Head> - <Body> + <P>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and Abandoned browsers.</P> - <P>We must clear the mind of the past. Web Enlightenment have been achieved thanks to the tireless efforts of folk like the The website, WaSP, and the major browser creat Ors.</P> + <P>The CSS Zen Garden invites-relax and meditate on the important lessons of the Masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</P> A </Body> at </HTML> Font Abbreviations
The font CSS style code in the Web page also has his own abbreviation, the following is the code to set the font for the page:
body{ font-style:italic; Font-variant:small-caps; Font-weight:bold; font-size:12px; line-height:1.5em; font-family: "Song Body", Sans-serif;}So many lines of code can actually be abbreviated as a sentence:
body{ font:italic small-caps bold 12px/1.5em "song Body", Sans-serif;}Attention:
1, use this shorthand method you must specify at least the Font-size and Font-family properties, other properties (such as Font-weight, Font-style, Font-variant, Line-height) will automatically use the default value if not specified.
2, in the abbreviation font-size and line-height the middle to join "/" oblique carry.
In general, because the Chinese site, the English is still relatively small, so the following abbreviation code is more commonly used:
body{ font:12px/1.5em "song Body", Sans-serif;}Only font size, line spacing, Chinese fonts, English fonts are set.
Can explain the meaning of each.
body{
Font-style:italic; Set Font to Italic
Font-variant:small-caps; Case-sensitive, the browser displays the font of small caps
Font-weight:bold; Set Bold
font-size:12px; Font size is 12 pixels
Line-height:1.5em; Row spacing (row height) 1.5 row times
font-family: "Song Body", sans-serif;//set Chinese font to Arial, English font is Sans-serif}
body{
Font:italic small-caps Bold 12px/1.5em "song Body", Sans-serif;
}
The first three sequences have no effect, the last two are fixed and must have
Learn HTML (13) CSS code abbreviations from scratch and consume less bandwidth
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
