X-Spaces Personal Spaces Div + CSS template is based on the construction technology, and modify the template actually modify the CSS property value. In the modified template, there are many terms, such as: CSS, HTML, DHTML, XHTML, etc., in this Tutorial you learn before we come to the CSS for a simple understanding.
1, CSS basic knowledge of application
Cascading Style Sheets CSS is short, the Chinese translation for "cascading style sheets", some people just translated as "style sheet." CSS for page layout and style as the design, so-called "new page" in, CSS no doubt is a very important part. CSS is based on the existing foundation to make up for deficiencies in pre-existing HTML specifications, but also allow more flexibility in page design.
Limited space here does not introduce all the CSS rules, just from your web writing to the more commonly used, are more likely to use the grammar part and used method to introduce it for you.
1. The basic terms
Component (element): that is, the basic syntax of HTML tags (tag).
Property (attribute): used to describe the properties of label features.
For example:
In, HR for the label, WIDTH for the property, while 80% of the value of the property shall be WIDTH.
Nature of the (property): used to describe the characteristics of components. HTML basic syntax is equivalent to the property.
Style (style): have one group or the nature of the array to describe the device characteristics.
Those who are (selector): apply the style element.
For example: H3 (COLOR: BLUE) in, H3 for the selection of persons, COLOR for the nature, BLUE properties of value for the COLOR.
2. The basic unit
Relative units and absolute units with two units of expression.
Relative units:
銆忋? Em: letter height relative to the scale factor.
銆忋? En: relative to the font size scale factor.
銆忋?%: Relative to the length of the unit (usually the current font size) the percentage of cases.
Absolute units:
銆庛? In: inches.
銆忋? Cm: cm.
銆忋? Mm: mm.
銆忋? Px: pixels (system default units).
銆忋? Pc: pica, movable type printing unit.
銆忋? Pt: image point.
Relativity: 1in = 6pc = 72pt = 2.54cm = 25.4mm
3. The color to use
Colors that a total of five ways.
銆庛? # RRGGBB:
In three 00 to FF hexadecimal value of 0 to 255, respectively, the decimal value of the red, green, and blue values.
銆忋? # RGB:
Brief notation, only three 0 to F hexadecimal values represent the red, green, and blue values. In fact, the browser will automatically be extended for six hexadecimal values, as will become 銆忋? # ABC # AABBCC 銆忋?. However, showing such a representation is not perfect.
銆嶳gb (R, G, B)銆?
To 0 to 255 decimal value of the red, green, and blue values to represent color.
銆嶳gb (R%, G%, B%)銆?
Red, green and blue values relative to each other in proportion to that color, such as 銆巖gb (60%, 100%, 75%)銆?
銆忋? Color_Name:
Directly to the color name that color, a total of 141 kinds of standard color name.
4.URL representation
CSS the URL that a total of five ways, and are a legal declaration, you can choose to use.
URL (http://yourweb/path/file_name)
URL (''http://yourweb/path/file_name'')
URL ("http://yourweb/path/file_name")
URL (''http://yourweb/path/file_name'')
URL ("http://yourweb/path/file_name")
With this basic knowledge and concepts, the next would come to introduce you to CSS and Div What is the relationship in the end.
Second, CSS and Div relationship
Div namely the so-called level, CSS style sheet is short, DIV is like a room of the structure, which is used to define how much space in our room, the general purpose of each room, and CSS, it's fitting, as detailed program. That is, our space is like a building, even with the rooms are the same style that DIV are the same, as long as we can set a different decoration options, then we can keep each room its own personality. The reason why this approach is that it enables the definition of a simple style, which simplifies the source code to facilitate the realization of a reference to the style! CSS DIV used to control the display of the form, location, etc. This has the advantage to be flexible, simple, easy to maintain.
With the above understanding, you should have a CSS for basic knowledge, then the next, we will start modifying the template into it!
Third, modify the template CSS
We X-Space comes with the "yellow Autumn" as a template for example be modified.
Step one: preparation
1. To open two browser windows, the first window to open blog home page, the second window open management platform for personal space back, and then select [templates] -> [select new template]
(Figure 1)
, And then select the "Yellow Autumn" click [submit] button
(Figure 2).
After submission, click on [Browse Template] -> [edit].
(Figure 3)
In the open [my template] page you can see [main page] [Index page] [contents page] [Style Sheet] the four options, point [style sheets] will be able to see the contents of the template's CSS, which we want to modify some.
(Figure 4)
2. Open Notepad, copy the contents of the CSS into. Purpose is very simple to the CSS to be a backup, problems arise if changes in the contents of the Notepad to recover.
3. Prepare a color table for color.
(Figure 5).
4. Collection you want to use as background or other icon image file.
(Figure 6)
Step two: the formal changes
1. Modify DIV tag
(1). Because the official template DIV setting is without the background needed to modify some of the DIV. In [my template] editor, select the [main page]
(Figure 7).
(2). And then find the lower-left corner [show source code], select the check box in front, this time we can see a long list of the DIV code
(Figure 8).
(3). Found "
"This line of code, in this line of code by adding the following two lines of code in front of
(Figure 9):
(4). And then all of the code of the last to join "
"And finally click [submit] button
(Figure 10).
2. Repeat the above steps, modify the "index page" and "content pages" of the DIV tag.
3. Figure 11 Figure 17 --- CSS code according to paragraph by paragraph description (including color green are all the Notes).
相关链接:
Professional VCD MP4 Deconde
Astronomy Wizard
WorldCup DVD To Mobile
Shuo-side by side with the day thinking up the computer "settle down"
Free mkv converter
AlltoDVD VOB to MPEG
Aoork DVDRipper Home
Top Telnet Servers
Youtube Video to VHS SHAREWARE
Professional MPEG4 Convert
Flv To 3gp Converter
Format Ts
Different TRUST model
Vob To Flv
Review Health And Nutrition
No comments:
Post a Comment