The CSS style formatting and page layout elements to achieve the main web page layout practicality and appreciation phase by binding to achieve a design effect.
- Font: div {font-family: "Microsoft Yahei";} set as your text font for Microsoft elegant black, here be careful not to set unusual fonts, because if the user's local computer if not installed font you set it It will display the browser's default font. (Because the user can see whether the font style you set depends on whether you set the fonts installed on the user's local computer.) Now generally prefer to set the page, "Microsoft elegant black", the following code: body {font-family: "Microsoft Yahei" ;} or body {font-family: "Microsoft yahei";} Note: The first method is better than the second method compatibility number. Of course if you want to use special fonts how to do? @ Font-face implemented by custom font css3 {font-family: dhnblog; src: url ( 'images / fzm.ttf');} / * * custom font type /
- Size, color: div.box {font-size: 14px ; color: # f90;} provided text page size is 14 pixels, and font color set to # f90; furthermore be divided into three color forms: a. rgb (255,255,255) b. English words c.16 band, such as # f90, with particular reference to css css core syntax and the basic concepts introduced in the relevant color presentation
- Bold: If you want to set bold text except h1-h6, or strong labels, can also css style font-weight: bold; bold text
- Italics: By css style font-style: italic; text italic function to achieve the same effect as in <em> </ em> tag, normal text font-weight: normal;
- Underline: text-decoration: underline; / * underline * /
- Strikeout: Taobao, Jingdong electricity supplier shopping sites common font strikeout by text-decoration: line-through; / * delete line * / same effect as <del> </ del>
- Indent: writing habits paragraph 2 before empty cells, through this text-indent: 2em; / * * first line indent / realize this particular style, which is 2em means 2 times the size of the text.
- Line spacing (line height): line-height / * line spacing (line height) attributes * /, the following code line-height: 2em; paragraph line spacing was set to achieve twice.
- Text spacing, letter-spacing: wherein the letter-spacing is / * word spacing, and word spacing word * / word-spacing is / letter-spacing * * /
- Alignment: the text block element may be provided by the text-align, 2 images side-aligned, centered, right and left display, etc.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS格式化排版</title> 6 <style type="text/css"> 7 div{ 8 font-family: "Microsoft Yahei";/*字体*/ 9 line-height: 2em;/*Line spacing * / 10 text-align = left : The justify ; / * 2 side alignment * / . 11 } 12 is div.box { 13 is font-size : 14px ; / * size of the text * / 14 Color : # F90 ; / * Font color * / 15 text-indent : 2em ; / * first line indent * / 16 } . 17 .box> span { 18 is font-weight: Bold ; / * text bold * / . 19 font-style : Italic ; / * italics * / 20 is text-Decoration : underline ; / * underlined * / 21 is text-Decoration : Line-through ; / * Remove line * / 22 } 23 is EM { 24 Letter-spacing : 10px ; / * word spacing, and word spacing word * / 25 word-spacing: 5px ; / * letter-spacing * / 26 is } 27 </ style > 28 </ head > 29 < body > 30 < div class = "Box" > should first know why learning, rather than blindly for learning to learn. Learn the most important thing is the attitude, the attitude and way determine the outcome. Need to fundamentally believe that learning is a worthwhile thing, ideologically correct will have the momentum to learn. < Span > Many examples show a different mentality will have different learning effect, to a healthy optimistic attitude to learning how to become a student are determined by their own. Decide the fate of behavior, some people learn in order to enrich themselves or find a job, we need to understand exactly why their own learning. </ Span > < del >The first thing to know is why you should learn, not blindly to learn. The most imdelortant thing to learn is attitude. Attitude and method determine the outcome. </del><em>You need to fundamentally think that learning is a worthwhile thing. Only when you are ideologically correct can you have the motivation to learn.</em></div> 31 </body> 32 </html>
CSS layout formatting achieve results through web design, learning box model to lay a solid foundation for the web design, it is the cornerstone of CSS layouts, the following summary box model concept, structure, size: In CSS, html tag element in general is divided into three different types: block elements, inline elements (also known as the line element) and inline block elements.
☆块状元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<li>、<dl>、<table>、<address>、<blockquote> 、<form>
☆内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
With massive elements within ☆: <img>, <input>
Summary: What is block-level elements? In html <div>, <p>, <h1>, <form>, <ul> and <li> is block-level elements. Setting display: block is a block-level element as a display element. As a {display: block;} inline element is to convert a block element such that the element having a bulk element characteristics.
Block element characteristics: 1, each of the block-level element start a new line, and the subsequent elements are also on a separate line. 2, height, width, line height, and a top margin and a bottom element can be set. 3, in the case where the width of the elements is not provided, is the (same width and the parent element) 100% of the parent container itself, unless a set width.
In html, <span>, <a>, <label>, <strong> and <em> is a typical inline elements (inline elements) (inline) elements. Of course, the code block elements can also display: inline element is set to the inline element. The div {display: inline;} div element is converting a bulk inline element, div element so that the element associated with the characteristics.
Inline element characteristics: 1, and the other elements on one row; 2, height, width, and top and bottom margins can not be set elements; 3, the width of the element is that it contains text or image width can not be changed.
Inline block elements (inline-block) is also have the characteristics of inline elements, the block elements, the code display: inline-block is the block element to inline element. (New CSS2.1), <img>, <input> tag is a tag that inline block.
inline-block element characteristics: 1, and the other elements on one row; 2, height, width, line height, and a top margin and a bottom element can be set.
Box model
Box model frame border: 2px solid red; complete wording: border-width: 2px; border-style: solid; border-color: red;
Note: 1, border-style (border style) have a common style: dashed (dotted line) | dotted (dotted line) | solid (solid line).
2, border-color color (border color) may be provided in a hexadecimal color, such as: border-color: # 888; // Do not forget the # foregoing.
3, border-width width (border width) can be set to: thin | medium | thick (but not very common), the most common or pixels (px).
div {border-bottom: 1pxsolidred; }
likewise possible to use other code to achieve the following three sides (upper, right, left) setting border:
border-Top: 1pxsolidred;
border-right: 1pxsolidred;
border-left: 1pxsolidred;
Appreciated that the width and height are not the same and the width and height of box model we usually call object width (width) and the defined high css (height), refers to the range filled with the contents.
It is therefore an element of the actual width (width of the box) = left border and left border + + left + right padding filler content width + + + right border right border.
The distance can be provided between the element and the frame content, called "fill." Filling can be divided into upper, right, down, left (clockwise). The following code:
div {padding: 20px10px15px30px;}
sequence must not be confused. Can be written separately from the above code:
div {
padding-Top: 20px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 30px;
}
if the upper, right, down, left filling are 10px; can write
div {padding: 10px;}
if the same as the vertical filling 10px, about the same as 20px, can write:
div {padding: 10px20px;}
The distance between the elements and other elements can be set with the border (margin). Boundary is divided into upper, right, down, left. The following code:
div {margin: 20px10px15px30px;}
may be written separately:
div {
margin-Top: 20px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 30px;
}
if left on the lower right boundaries are as 10px; could write:
div {margin: 10px;}
If the upper and lower boundaries the same as 10px, about the same as 20px, could write:
div {margin: 10px20px;}
to summarize: the difference between padding and margin of, padding in the sidebar , margin outside the border.