Getting started with CSS -------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------ A style sheet consists of style rules to tell the browser how to present a document. There are a lot Add a style rule to the method in your HTML document, but the simplest startup method is the use of HTML's style components. This element is placed in the head section of the document, contains the style rules of the web page. To note that the style element is a test style A good way to table, which has some shortcomings that should be considered before the user use this method. The advantages and disadvantages of different methods are discussed in the section of the HTML. The composition of each rule includes a selector - typically an HTML element, such as a body, p, or a style accepted by the selection. There are a lot of properties to define an element. Each property. With a value, the selector should be rendered. The style rule composition is as follows: Select {Property: Value} Single selector composite style declaration should be separated by a semicolon: Select {Property 1: Value 1; Properties 2 : Value 2} The following is a paragraph of the color and font size attribute defined by H1 and H2 elements:
CSS example </ title> <style type = "text / css"> h1 {font-size: x- Large; color: red} h2 {font-size: large; color: blue} </ style> </ head> The above style sheet tells the browser to use the increase, red font to display the first level title, with large, blue font Show the secondary title.</p>
<p>CSS structure and rules ----------------------------------------------------------------------------------------- -------------------------------- Basic syntax</p>
<p>Rule selectors Any HTML element can be a selector of CSS1. The selectif is merely an element that points to a special style. For example: p {text-indent: 3em} is P. A class selector single selection can have different Class (classes), thus allowing the same element to have different styles. For example, a web maker may wish to deserve its language, display code with different colors: code.html {color: # 191970} code.css {color: # 4b0082} The above example has established two classes, CSS and HTML for HTML's Code element. The Class property is a class for specifying elements in HTML, for example, each selector allows only one class. For example, code.html.proprietary is invalid. The statement of the class can also be related to the relevant elements: .note {font-size: small} In this example, class named Note can be used for any element. A good habit is when naming, according to their features rather than according to their appearance. The Note class in the above example can also be named SMALL, but if the web maker decided to change this type of style, it is no longer a small font, then this name is meaningless. The ID selector ID selector individually defines the ingredients of each element. This selector should be used as little as possible because he has certain limitations. Specify an ID selector to have an indicator "#" in front of the name. For example, the ID selector can be specified as follows: # svp94o {text-indent: 3em} This can refer to the ID attribute in the HTML: <p id = svp94o> text indentation 3EM </ P> associated selection association selection only It is a string composed of two or more single selectors separated by spaces. These selectors can specify general properties, and because of the laminated rules, their priority is larger than the single selection. For example, the following context selector p em {background: Yellow} is P EM. This value indicates that the emphasis text in the paragraph will be a yellow background; and the stressed text of the title is not affected. Declare an attribute A property is specified to the selector to use its style. Examples of attributes include color, boundaries, and fonts. The value of the value declaration is a specified attribute acceptance. For example, attribute colors can accept value RED. The combination is permissible in order to reduce the repetitive statement of the style sheet. For example, all the titles in the document can give the same declarations by combining: H1, H2, H3, H4, H5, H6 {Color: RED; Font-Family: Sans-Serif} Inheritance actually, all in the selectors The selectors of the set will inherit the attribute values specified by the outer selection, unless otherwise change. For example, a body defined color value is also applied to the text of the paragraph. Some situations are the value of the internal selectors do not inherit the surrounding selectors, but they are special in theory. For example, the upper boundary attribute does not inherit; intuition, a paragraph does not have the same top boundary value as the document Body. Note from the annotation style sheet is specified using the same agreement in C language programming. Examples of CSS1 annotations are as follows: / * Comments Cannot Be Nested * / Pseudo-Class and Pseudo Elements Pseudo-Class and Pseudo Elements are special classes and elements that can be automatically recognized by the CSS browser. Pseudo-class distinguishes different types of elements (eg, Visited Links) and Active Links describe the type of two positioning anchors). The pseudo element is part of the element, such as the first letter of the paragraph. Forms of pseudo-class or pseudo-element rules, such as selectors: pseudo-class {attribute: value} or selector: pseudo element {attribute: value} Pseudo-class and pseudo elements do not apply HTML Class properties to specify.</p>
<p>The general class can be used with pseudo-class and pseudo-elements, as follows: selectors. Category: Pseudo-class {attribute: value} or selectif. Category: Pseudo-Element {Property: Value} Positioning Anchor Pseudo-Camoufa Can Specify a Element Displays the connection (Visited Links) and Active Links in different ways. Positioning anchor elements can give pseudo-class LINK, Visited, or Active. An access connection can be defined as display of different colors, even different font size and styles. An interesting effect is to make the current (or "activation") connection in different colors, larger fonts. Then, when the accessed connection of the web page is reselected, it is displayed in different colors, smaller fonts. Examples of this style sheet are as follows: a: link {color: red} A: Active {color: blue; font-size: 125%} A: visited {color: green; font-size: 85%} The first pseudo element is usually In newspapers, such as Wall Street Journal, the first line of text will be displayed in crude printing and all capitalized. CSS1 includes this function as a pseudo element. The first line of pseudo elements can be used for any block-level elements (for example, P, H1, etc.). The following is an example of a first pseudo element: p: first-line {font-variant: Small-Caps; font-weight: bold} The first letter pseudo element first letter pseudo element is used to increase (DROP CAPS) and other effect. The first letter of text containing the specified value selector will be displayed in accordance with the specified value. A first letter pseudo element can be used for any block level element. For example: p: first-letter {font-size: 300%; float: left} is queued than the ordinary font. Multiple style sheets are used in the laminated order, and the style sheet needs to compete for the control of a particular selector. In these cases, the rules that will always have a style sheet can get control. The following features will determine the results of the pending style sheets. Important rules can be specified! Important specifically refers to it. A specifically referred to as an important style to keep the same weight with the opposite other. Similarly, when webmakers and readers specify important rules, the web producer rules will exceed readers. The following is an example of important statement: Body {Background: URL (bar.gif) White; Background-Repeat: Repeat-x! Important} Origin of Rules (Author's vs. reader's) As mentioned previously, web crew and Both readers have the ability to specify the style sheet. When the rules of the two have conflicts, the web producer rules will override the rules of the same weights of the reader. The style sheet for webcraft and readers beyond the browser's built-in style sheet. Web pages should be carefully used! Important rules because they will exceed any users! Important rules. For example, a user will require a large font or designated color due to visual relationships, and such users will be possible to declare the styles rules for! Important, because these styles are extremely important for user reading webpages. Any! The Important rule will transcend the general rules, so it is recommended that the web maker uses the general rules to ensure that users who need special styles need to read the web. Select rules: Calculation features are based on their feature levels, the style sheet can also surpass the style sheet with conflict, a higher-character style forever over a lower characteristic style. This is just a statistical game that calculates the specified number of selectors. The number of ID attributes in the statistical selection. The number of Class attributes in the statistical selection. The HTML marker format in the statistical selection. Finally, write three numbers according to the correct order, do not add a spark or comma to get a three digits. (Note that you need to convert the numbers into a larger number of three numbers.) The final digital list of the selectors can easily determine higher digital characteristics over lower numbers.</p>
<p>The following is a list of selectors classified by feature: # id1 {xxx} / * a = 1 b = 0 c = 0 -> characteristics = 100 * / ul ul li.red {xxx} / * a = 0 b = 1 c = 3 -> characteristics = 013 * / li.red {xxx} / * a = 0 b = 1 c = 1 -> characteristics = 011 * / li {xxx} / * a = 0 b = 0 C = 1 -> Features = 001 * / Features The order in order to facilitate use, when two rules have the same weight, take the next one. Syntax used for CSS attributes ----------------------------------------- ------------------------------------- <foo> Foo type value. Discussion of common types Unit chapter. Foo must have keywords appearing in the original text (although there is no case sensitive). The comma and slash must also appear. ABCA must exist, then B, then C, need to be in order. A | ba or B must exist . A || ba or b or both must exist, order casual. [Foo] use parentheses to classify together. Foo * foo is repeatedly used for zero or more times. Foo foo is reused one or more The number of times. Foo? Foo is optional. Foo {a, b} foo must have a minimum A times, up to b times.</p>
<p>Font attribute ------------------------------------------------ --------------------------------- Fonts: Font-Family: Types>],] * [<Tria Name> | <Various Ethnic>] Allowed Value: <Tony Name> Any font class can use <Variety> Serif (EG, TIMES) SANS- SERIF (EG, ZAPF-CHANCERY) CURSIVE (EG, ZAPF-CHANCERY) FANTASY (EG, WESTERN) MONOSPACE (EG, COURER) initial value: Decided by the browser to: all objects are compatible: is the font class can be used A designated font name or a kind of font class. Obviously, defining a specified font name will not be appropriate than defining a kind of font. The assignment of multiple races can be used, and if it is determined that a specified font assignment is assigned, there should be a kind of classic name to prevent the first choice does not exist. The examples of the font entities are as follows: P {font-family: "New Century Schoolbook", Times, Serif} Pay attention to the first two assignments Specify the type of font: New Century Schoolbook and Times. However, because both are both the serif font, the type of the font class is reserved, so that there is no two, but there is no other SERIF eligible font. Any letter name containing space must be taken with a single quotation or double quotation. The font entities can also be given by font attributes. -------------------------------------------------- ----------------------------- Font Stylistic Syarct: Font-Style: <Value> Allow Value: Normal | Italic | Oblique Initial Value: Normal is suitable for: All objects are compatible: is the font style attribute to define the displayed fonts in one of the three methods: Normal (ordinary), Italic (slope) or Oblique. The font style declaration example of the style sheet is as follows: h1 {font-style: oblique} p {font-style: Normal} ------------------------- -------------------------------------------------- --- Font Deformation Syntax: Font-Variant: <Value> Allow value: Normal | Small-Caps initial value: NORMAL Suitable for: All objects are backward compatible: It is the font deformation property determines the display of fonts Normal (ordinary ) Or Small-Caps (small uppercase letters). When all letters in the text are capitalized, small uppercase letters (value) will show slightly larger than lowercase letters. The later version of CSS will support additional deformation, such as shrinkage, expansion, lowercase digital, or other custom deformation. The definition of font deformation is as follows: span {font-variant: small-caps} --------------------------------- ----------------------------------------------- Fonts Syntax: Font-Weight: <value> Allow value: normal | bold | bolder | Lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 Initial value: Normal Applicable: All objects are compatible: It is a font and coarse property as a bold that explains the font. When other values are absolute, the Bolder and Lighter values grow relatively proportional. Note: Because not all fonts have nine effective bold display, some thickening will be combined under designation.</p>
<p>If the specified bold is invalid, select: 500 will be replaced by 400, but also 100-300 will be designated as the next finer bold, if any, otherwise, it is the next comparative plus The thickness 600-900 will be designated as the next thicker, if any, otherwise, the next finer bold some font bold definition example: h1 {font-weight: 800} p {font -Weight: Normal} --------------------------------------------- ----------------------------------- Font Size Size Size: Font-Size: <Absolute Size> <Relative Size> | <Length> | <percentage> Allow value: <absolute Size> XX-Small | X-Small | Small | Medium | Large | X-Large | XX-Large <Relative Size> Larger | Smaller <Length> <percentage > (in relation to parent element) initial value: Medium Suitable for: All objects are compatible: Yes the font size property is used as the size of the modification font display. The absolute length (the unit used in PT-pixels and in-inches) requires careful consideration of their weaknesses when they adapt to different browsing environments. For a user, the absolute length font is likely to be large, or very small. Some of the specified definitions are as follows: H1 {font-size: large} p {font-size: 12pt} li {font-size: 90%} sprong {font-size: larger} webmaster needs to know Microsoft Internet Explorer 3. x will incorrectly use the EM and EX unit as a pixel, which is likely to be unreadable to the text that uses these units. The browser will also incorrect the percentage value as the default font size relative to the selected part, not the font size of the superiors. This approach is dangerous like h1 {font-size: 200%}, which is dangerous, and its size will be considered twice the default font size of the first-class headline of IE, rather than twice the font size of the superiors. In this case, Body is usually considered superior elements and is likely to define a MEDIUM font size, however, the default font size of the first level header in IE may be considered XX-Large. Note that after these errors, web makers should be careful to use the percentage value when using the font size property, and the two units of EM and EX should be avoided. -------------------------------------------------- ------------------------------ Font Syntax: Font: <value> Allow value: [<font style> || <font Deformation> || <Font Body>]? <Font Size> [/ <Right>] <<<< Corporate> Initial Value: Undefined Applications: All objects are backward compatible: Yes font properties are used as different font properties Oblloid, especially high. For example, p {font: Italic Bold 12PT / 14PT Times, Serif} specifies that the paragraph is bold (bold) and Itract Times or Serif fonts, 12 o'clock size, high row.</p>
<p>Color and background properties ------------------------------------------------------------------------------------------------------------------------------------------------------------------ ---------------------------------- Color Syntax: Color: <Color> Initial Value: Applying by the browser All objects are compatible with: Yes Color Properties allow web makers to specify the color of an element. View units can know the description of color values. Examples of some color rules include: h1 {color: blue} h2 {color: # 000080} h3 {color: # 0c0} In order to avoid conflicts between the user's style sheet, background and Color properties should always be specified together. -------------------------------------------------- ------------------------------ Background Color Syntax: Background-Color: <Value> Allowed Value: <Color> | Transparent Transparent) initial value: Transparent (transparent) Applicable to: All objects are compatible down: No Background color properties set a background color of an element. For example: body {background-color: white} h1 {background-color: # 000080} In order to avoid conflicts between the user's style sheet, the background image should be specified when any background color is used. In most cases, Background-Image: None is suitable. Web producers can also use the slightly written background properties, usually better support than the background color attribute.</p>
<p>-------------------------------------------------- ----------------------------- Background Image: Background-Image: <value> Allow value: <Unified resource positioning URLS > | NONE (None) initial value: none (None) Applicable: All objects are compatible: No background image attribute sets the background image of an element. For example: body {background-image: URL (/IMAGES / FOO.GIF)} p {background-image: URL (http://www.htmlhelp.com/bg.png)} For those browsing without loading When defining the background image, you should also define a similar background color. Web pages can also use a slightly written background attribute, usually better support than background image properties.</p>
<p>-------------------------------------------------- ------------------------------ Background Repeat Syntiment: Background-Repeat: <value> Allow value: REPEAT | REAT-X | REPEAT-Y | NO-REAT initial value: REPEAT Suitable for: All objects are compatible: No Background Repeat Properties determine how a designated background image is repeated. When the value is REPEAT-X, the image is transversely repeated when the value is REPEAT-Y, and the image is repeated. For example: body {background: white url; background-repeat: repeat-x} In the above example, the image will only be tiled horizontally. Web pages can also use a slightly written background attribute, usually better support than background repeat attributes.</p>
<p>-------------------------------------------------- ----------------------------- Background Accessories Some Method: Background-attachment: <value> Allow value: scroll | fixed initial value: Scroll is suitable for: All objects are compatible down: No background attachment properties determine the specified background image is followed by scrolling, or it is considered to be fixed. For example, the following specified a fixed background image: body {background: white url (CANDYBAR.GIF); Background-attachment: fixed} webpage producer can also use a slightly written background attribute, usually better than background accessory properties support. -------------------------------------------------- ------------------------------ Background Position Syntiment: Background-Position: <value> Allow value: [<percentage> | < Length>] {1,2} | [TOP | Center | Bottom] || [LEFT | Center | Right] initial value: 0% 0% Suitable for: block level and replacement elements are compatible: No Image location properties give At the initial position of the designation background image. This attribute can only be applied to block-level elements and replacement elements. (Alternative elements only refer to some known original elements. HTML replacement elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) Arranging background location The easiest way is to use keywords: landscape keywords (Left, Center , Right) The longitudinal keyword (TOP, CENTER, BOTTOM) percentage and length can also be used as a position of arrangement background image. Percentage and element font size is related. Although the length of use is allowed, it is not recommended because they handle different displays a disadvantage of different display resolutions. When using a percentage or length, you need to first specify the lateral position, followed by a longitudinal position. A value, such as 20%, 65%, 20% of the left left up to 65% of the left, 5% of the left, 65% of the point of 65% from the left of the element. A value such as 5px 10px, the upper left corner of the specified image will be placed on the left 5 pixels of the element. If only the horizontal value is given, the value of the longitudinal position is 50%. The combination of length and percentage is permissible, negative value. For example, 10% -2cm is allowed. Although, percentage and length cannot be combined with a keyword. Keyword explanation as follows: top left = left top = 0% 0% TOP = TOP center = center top = 50% 0% Right Top = TOP Right = 100% 0% LEFT = Left center = center left = 0% 50% CENTER = Center center = 50% Right = Right Center = center Right = 100% 50% bottom LEFT = Left bottom = 0% 100% bottom = bottom center = center bottom = 50% 100% bottom right = right bottom = 100% 100% background image is considered to be fixed, the image of the oil painting is placed instead of the element. Web producers can also use a slightly written background attribute, usually better support than background location properties.</p>
<p>-------------------------------------------------- ------------------------------ Background grammar: Background: <value> Allow value: <background color> || <background diagram Icon> || <Background Repeat> || <Background Accessories> || <Background Location> Initial Value: Undefined Applications: All objects are compatible: No Background attribute is a more clear background - a slight written in the relationship property. The following is a statement of some background: body {background: white url (http://www.htmlhelp.com/foo.gif)} Blockquote {Background: # 7fffd4} P {Background: URL (./ Backgrounds / Pawn.png ) # f0f8ff fixed} Table {background: # 0c0 URL (Leaves.jpg) No-repeat bottom right} The initial value will be accepted when a value is not specified. For example, in the first three rules described above, the background position attribute will be set to 0% 0%. In order to avoid conflicts between the user's style sheet, the background and colors should be specified together. Text properties ------------------------------------------------ -------------------------------- Text Interval Stroni: Word-Spacing: <Value> Allow Value: Normal | <Length > Initial value: Normal is suitable for: All elements are compatible with: Yes, the text interval defines a number of intervals attached to the text. This value must conform to the length format, allowing the use of negative values. For example: p em {Word-spacing: 0.4em} p.Note {Word-spacing: -0.2em}</p>
<p>-------------------------------------------------- ------------------------------ Alphabet Space syntax: letter-spacing: <value> Allow value: Normal | <Length> Initial Value: Normal is suitable for: All elements are compatible: is the alphanumeric interval definition of the number of intervals between characters. This value must conform to the length format, allowing the use of negative values. A value set to zero will stop the adjustment of the text. For example: h1 {letter-spacing: 0.1em} p.Note {letter-spacing: -0.1em}</p>
<p>-------------------------------------------------- ------------------------------ Text Demoniography: Text-Decoration: <value> Allow value: None | [underline || Overline || Line-Through || BLINK] Initial value: NONE Suitable for: All elements are backward compatible: No text modifier properties allow for a text in five properties: Underline, overline Line-through, blink (flashing), or default. For example, using the following statements can make the connection no longer underline: A: Link, A: Visited, A: Active {text-decoration: none}</p>
<p>-------------------------------------------------- ------------------------------ Portrait Arrangement Syntiment: Vertical-Align: <Value> Allowed Value: Baseline | SUB | Super | Top | Text-Top | Middle | <percentage> initial value: baseline for: internal elements are compatible: No longitudinally arrangement properties can be used as a longitudinal position of an internal element, relative to its superior elements Or row relative to element. (An internal element is not a row before and back, for example, the EM, A, and IMG in HTML may be a percentage of high attributes with elements, it will increase on the superior baseline The specified number of elements baselines. Allow use of negative values. This value can also be a keyword. The following keywords will affect the position relative to the superiors: Baseline (baseline alignment of elements and superiors) Middle (longitudinal alignment element baseline plus the height of the above element "X" - half of the height of the letter "X" Middle Point) SUB (subscript) SUPER TEXT-TOP (alignment of element and superior elements) text-bottom (aligning the element and superior element font) affects the location of the element The keyword has TOP (aligning the highest elements up to the elements) Bottom (aligning the lowest element in the elements and rows) The longitudinal arrangement attribute is especially useful for arranging images. Here are some examples: img.middle {vertical-align: middle} img {vertical-align: 50%} .exponent {vertical-align: super} ----------------- -------------------------------------------------- ------------- Text-Transform: <value> Allow value: None | Capitalize | Uppercase | LowerCase initial value: NONE Applicable: All elements are compatible: Yes Text Conversion The property allows you to convert text through one of the four properties: Capitalize (the first letter of each word) Uppercase (let all letters of each word) LowerCase (all letters of each word lowercase) NONE Use the original value), for example: h1 {text-transform: Uppercase} h2 {text-transform: Capitalize} Text conversion attribute is only used to express some format requirements. This is not a very appropriate practice, for example, with text conversion to make the first letter of the name of some countries, and other letters lowercase.</p>
<p>-------------------------------------------------- ------------------------------ Text Arrangement Syntiment: Text-Align: <Value> Allowed Value: Left | Right | Center | Justify initial value: decided by the browser</p>
<p>Suitable for: block-level elements are compatible: Yes Text arrangement properties can be applied to block-level elements (P, H1, etc.) to make element text arrangement. The functionality of this property is similar to the HTML segment, the title, and part of the Align property. Here are some examples: h1 {text-align: center} p.newspaper {text-align: justify}</p>
<p>-------------------------------------------------- ------------------------------ Text Indenting Grammar: Text-Indent: <Value> Allow Value: <Length> | < Percentage> Initial value: 0 Suitable for: Block-level elements are compatible: Yes Text indent property can be applied to block-level elements (P, H1, et al.) To define the amount of indentation that the element can be accepted. . This value must be a length or a percentage. If the percentage is dependent on the width of the superiors. General text indentation is used for segment indentation: p {text-indent: 5em} -------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------- - Line-HEIGHT: <value> Allow value: Normal | <number> | <length> | <percentage> initial value: NORMAL Suitable for: All elements are compatible: Yes, high attributes can accept one control The value of the interval between the text baseline. When the value is a number, the line high is multiplied by the number of element font size. The percentage of the percentage is determined for the size of the element font. Negative values are not allowed. The row can also be generated by font attributes with font size. High attributes can be used for two-way distance: p {line-height: 200%} Microsoft Internet Explorer 3.x incorrectly uses the EM and EX unit as a pixel. This error is likely to make text unreadable, so webpage makers need to avoid this error that can happen everywhere; use percentage units often a good choice.</p>
<p>Frame properties --------------------------------------------- --------------------------------- on the upper boundary grammar: margin-top: <value> Allow value: <length> | <Percentage> | AUTO initial value: 0 Suitable for: All elements are compatible: No last boundary property uses a specified length or percentage value to set the upper boundary of the element. The percentage value references the width of the superiors. Allows the use of negative margins. For example, the following rules will eliminate the upper bounds of the file. Body {margin-top: 0} Note If the boundary is adjacent to the vertical direction (overlap), the maximum boundary value is used.</p>
<p>-------------------------------------------------- ------------------------------ Right Ground Syntax: Margin-Right: <Value> Allow Value: <Length> | <percentage > | AUTO initial value: 0 Suitable for: All elements are compatible with: No Right boundary property uses a specified length or percentage value to set the right boundary of the element. The percentage value references the width of the superiors. Allows the use of negative margins. For example: p.NARROW {margin-right: 50%} Note If the boundary is adjacent to the horizontal direction (overlap), other boundary values will not be changed.</p>
<p>-------------------------------------------------- ------------------------------ Next Edge Syntax: Margin-Bottom: <value> Allow value: <length> | <percentage > | AUTO initial value: 0 Suitable for: All elements are compatible with: No lower boundary attributes set the lower boundary of the elements with a specified length or percentage value. The percentage value references the width of the superiors. Allows the use of negative margins. For example: DT {margin-bottom: 3em} Note If the boundary is adjacent to the vertical direction (overlapping), the maximum boundary value will be used.</p>
<p>-------------------------------------------------- ----------------------------- Left Gralization: Margin-Left: <Value> Allow Value: <Length> | <percentage > | AUTO initial value: 0 Suitable for: All elements are compatible: No left boundary property uses a specified length or percentage value to set the left boundary of the element. The percentage value references the width of the superiors. Allows the use of negative margins. For example: address {margin-left: 50%} Note If the boundary is adjacent to the horizontal direction (overlapping), other boundary values will not be changed. -------------------------------------------------- ----------------------------- Border Grammar: Margin: <value> Allow value: [<Length> | <percentage> | Auto] {1,4} initial value: Undefined applicable to: All elements are compatible: No boundary property uses one to four values to set the boundary of the element, each value is length, percentage or automatic. The percentage value references the width of the superiors. Allows the use of negative margins. If the four values are given, they are applied to the upper, right, lower and left boundaries. If only one value is given, it is applied to all boundaries. If two or three values are given, the value omitted is equal to the edge. Border statements include the following examples: body {margin: 5em} / * All boundaries are set to 5EM * / P {margin: 2em 4em} / * upper and lower boundary to 2EM, left and right bords are 4em * / div {Margin: 1em 2EM 3EM 4EM} / * upper boundary is 1EM, the right boundary is 2 em, the lower boundary is 3EM, the left boundary is 4EM * / note If the boundary is adjacent to the vertical direction (overlap), the maximum boundary value will be used. The horizontal direction is not. Use boundary properties to set all boundaries at once; you can also choose to use the upper boundary, lower boundary, left boundaries, and right boundary properties.</p>
<p>-------------------------------------------------- ------------------------------ 上 补 白 语法: Padding-top: <value> Allow value: <length> | <percentage > Initial values: 0 Suitable for: All objects are compatible: No on the peripheral property describes how many intervals between the contents of the on-border and selectors. This value can be a length or percentage. The value of the percentage refers to the width of the superiors. No negative values cannot be used.</p>
<p>-------------------------------------------------- ------------------------------ Right 补 白 语法: Padding-Right: <value> Allow value: <length> | <percentage > Initial values: 0 Suitable for: All objects are compatible: No right to make up the white attribute describe how many intervals between the right bits and the selection content. This value can be a length or percentage. The value of the percentage refers to the width of the superiors. No negative values cannot be used.</p>
<p>-------------------------------------------------- ------------------------------ 补 补 白语: Padding-bottom: <value> Allow value: <length> | <percentage > Initial value: 0 Suitable for: All objects are compatible down: No lower fill white attributes describe how many intervals between the next border and the selection. This value can be a length or percentage. The value of the percentage refers to the width of the superiors. No negative values cannot be used.</p>
<p>-------------------------------------------------- ------------------------------ Left 白 语法: Padding-left: <value> Allow value: <length> | <percentage > Initial value: 0 Applicable to: All objects are compatible: No left biplings and white attributes describe how many intervals between the contents of the left box and selectors. This value can be a length or percentage. The value of the percentage refers to the width of the superiors. No negative values cannot be used. -------------------------------------------------- ------------------------------ 补 白 语法: Padding: <value> Allow value: [<Length> | <percentage] { 1, 4} At: 0 Applicable: All objects are compatible down: no supplement is a slight written in the white attributes is on the white, right fracture, lower fillers and left filling white properties. The filler of an element is the value of the interval between the contents of the borders and elements. You can give a value from one to four, each value can be length or percentage. The percentage value references the width of the superiors. No negative values cannot be used. If four values are given, they are applied to top, right, lower and left. If a value is given, it will be applied to each side. If two or three values are given, the value omitted is equal to the edge. For example, the following rules are set to 2 eM, and the right remedy is 4EM, and the white is 2 Em: block QUOTE {Padding: 2em 4em 5em}</p>
<p>-------------------------------------------------- ------------------------------ On the Border Width Syntax: Border-Top-Width: <Value> Allowed Value: Thin | Medium | Thick | <Length> Initial Value: Medium Suitable for: All objects are compatible down: No last border width properties are used to specify the width of the border on one element. The value can be one of the three keywords, and it is not affected by the size or length of the font, which can be used to achieve a proportional width. Negative values are not allowed. You can also use the attributes of the upper box, the width or border of the border.</p>
<p>-------------------------------------------------- ------------------------------ Right Box Width Syntax: Border-Right-Width: <Value> Allowed Value: Thin | Medium | Thick | <Length> Initial value: Medium Suitable for: All objects are compatible down: No Right Box Width Attributes Used to specify the width of the right frame of the element. The value can be one of the three keywords, and it is not affected by the size or length of the font, which can be used to achieve a proportional width. Negative values are not allowed. You can also use the properties of the right box, the width of the border or the border.</p>
<p>-------------------------------------------------- ------------------------------ Next Box Width Syntax: Border-Bottom-Width: <Value> Allow Value: Thin | Medium | Thick | <Length> Initial value: Medium Suitable for: All objects are compatible: No lower border width properties are used to specify the width of the lower frame of the element. The value can be one of the three keywords, and it is not affected by the size or length of the font, which can be used to achieve a proportional width. Negative values are not allowed. It is also possible to be slightly written in the bottom box, the width of the border or the border.</p>
<p>-------------------------------------------------- ----------------------------- Left Box Width Syntax: Border-Left-Width: <Value> Allowed Value: Thin | Medium | Thick | <Length> Initial Value: Medium Suitable for: All objects are compatible: No left Box width properties are used to specify the width of the left frame of the element. The value can be one of the three keywords, and it is not affected by the size or length of the font, which can be used to achieve a proportional width. Negative values are not allowed. You can also use the attribute of the left box, the width of the border, or the border. -------------------------------------------------- ----------------------------- Border Width Syntax: Border-Width: <Value> Allowed Value: [Thin | Medium | Thick | <Length>] {1, 4} Attachment: Undefined Suitable for: All objects are compatible: No Border Width attribute Use one to four values to set the boundary of the element, the value is a keyword or length. Negative length is not allowed. If four values are given, they are applied to the models of the upper, right, lower, and left boxes. If a value is given, it will be applied to each side. If two or three values are given, the value omitted is equal to the edge. This attribute is a slight written on the width of the upper frame, the width of the right frame, the lower frame width, and the left box width attribute. You can also use a slightly written border properties.</p>
<p>-------------------------------------------------- ------------------------------ Border color grammar: Border-color: <value> Allow value: <color> {1, 4} Initial Value: The value of color properties is suitable for: All objects are compatible down: No Border Color Property Sets the border color of an element. You can use one to four keywords. If four values are given, they are applied to the models of the upper, right, lower, and left boxes. If a value is given, it will be applied to each side. If two or three values are given, the value omitted is equal to the edge. You can also use a slightly written border properties.</p>
<p>-------------------------------------------------- ------------------------------ Border pattern syntax: Border-style: <value> Allow value: [NONE | DOTTED | DASHED | Solid | Double | Groove | Ridge | INSET | OUTSET] {1,4} Initial Value: NONE Suitable for: All objects are compatible down: No Box pattern properties are used to set a style of an elemental border. This property must be used to specify a visible border. You can use one to four keywords. If four values are given, they are applied to the models of the upper, right, lower, and left boxes. If a value is given, it will be applied to each side. If two or three values are given, the value omitted is equal to the edge. You can also use a slightly written border properties.</p>
<p>-------------------------------------------------- ------------------------------ on the border syntax: border-top: <value> Allow value: <upper border width> | | <Border Model> || <Color> Initial Value: Undefined Suitable for: All objects are compatible: No last border properties are a slightly written for setting the width, model, and color of one element. Note You can only give a border pattern. You can also use a slightly written border properties.</p>
<p>-------------------------------------------------- ----------------------------- Right Box Syntax: Border-Right: <Value> Allow Value: <Right Box Width> | | <Border Model> || <color> initial value: Undefined Applications: All objects are compatible: No Right Box Properties is a width, model, and color of the right frame to set an element. Note You can only give a border pattern. You can also use a slightly written border properties. -------------------------------------------------- ------------------------------ Next Brass Syntax: Border-Bottom: <value> Allow value: <lower Box Width> | | <Border Model> || <color> initial value: Undefined applications: All objects are compatible: No Next Box Properties are a width, model, and color of the lower side of an element. Note You can only give a border pattern. You can also use a slightly written border properties.</p>
<p>-------------------------------------------------- ----------------------------- 语语: border-left: <value> Allow value: <left box width> | | <Border Model> || <color> initial value: Undefined applications: All objects are compatible: No left frame properties are a width, model, and color of the left box of an element. Note You can only give a border pattern. You can also use a slightly written border properties.</p>
<p>-------------------------------------------------- ------------------------------ Border syntax: border: <value> Allow value: <Border width> || <R Border Model> || <color> initial value: Undefined applications: All objects are compatible: No Border attribute is a slightly written for setting up a width, model, and color of an elemental border. Examples of border declaration include: h2 {border: groove 3em} a: link {border: solid blue} a: visited {border: Thin Dotted # 800080} A: Active {border: thick double red} Border property can only set up four kinds Border; can only give the width and pattern of a set of borders. In order to give different values of the four borders of elements, web pages must use one or more properties such as: upper frame, right box, lower frame, left border, border color, border width, border type, on Border width, right frame width, lower border width, or left box width.</p>
<p>-------------------------------------------------- ------------------------------ Width syntax: width: <value> Allow value: <length> | <percentage> | Auto Initial value: Auto is suitable for: block-level and replacement elements to compatify: No Each block or replacement element can specify its width with a length or "auto" value. (Alternative elements only refer to some known original elements. HTML replacement elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value of the width attribute is "auto", which is the original width of the element ( Is the width of the element, such as the width of an image). Percentage references to the width of the superiors. Negative length values are not allowed. This property is used as a common length of some input elements, as if the Submit and RESET button: Input.Button {Width: 10em}</p>
<p>-------------------------------------------------- ------------------------------ High Syntax: Height: <value> Allow value: <Length> | Auto initial value: Auto Suitable for: block-level and replacement elements to compatify: No Each block or replacement element can be used to specify its height with a length or "auto" value. (Alternative elements refer to some elements known original size. HTML replacement elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value of the height attribute is "auto", which is the original height of this element ( It is the height of the elements, such as the height of an image). Negative length values are not allowed. As with the width properties, the height can be applied to the scale of the setting image: img.foo {width: 40px; Height: 40px} In most cases, we recommend webpage makers using image editing software to scale telescopic image Because the browser is impossible to telescopically telescopically, it is also because the use of this property is reduced image, which will cause the user to download an unnecessary huge file. Nonetheless, the telescopic image of the width and height is still useful for the user-defined style table for the choice of overcoming visual issues. -------------------------------------------------- ------------------------------ Floating syntax: float: <value> Allow value: left | Right | NONE initial value: None Suitable for: All elements are compatible: No Floating properties allow web makers to surround text around an element. This is the same as Align = Left and align = Right in HTML 3.2, but CSS1 allows all objects "floating" And not just like HTML 3.2, just allow image and table.</p>
<p>-------------------------------------------------- ------------------------------ Clear Syntax: CLEAR: <value> Allow value: None | Left | Right | BOTH initial value : NONE Suitable for: All elements are compatible: No Clear Properties Specifies whether an element is allowed to have elements to float next to it. The value of the LEFT moves the element below the floating element on the left; the same value Right moves below the floating element thereof. Others have the default none value, and the NONE value of the following None values of the floating elements of the moving element. This property is similar to the function of HTML 3.2 <br clean =left_right|All|NONE>, but it can be applied to all elements.</p>
<p>Classification properties ---------------------------------------------- -------------------------------- Display Syntax: Display: <value> Allow value: Block | Inline | List-Item | NONE initial value: Block Applicable: All objects are compatible: No Display Properties Allow one of the four values to define an element: Block (there will be wrap in front of the element) Inline (before the elements There will be no wrap) List-item (the same as Block, but adding a directory item) None (not shown), each element is typically given by the browser to the display form of HTML specifications. A default display. value. Display attributes may not be safe because it displays elements using additional inappropriate formats. Use the value None will close the display of the specified element and its sub-elements!</p>
<p>-------------------------------------------------- ------------------------------ White-Space: <Value> Allow value: Normal | pre | NOWRAP initial value : Normal Suitable for: block-level elements are compatible: It is blank attribute to determine how space within the element. This property is worth mentioning one of the following: Normal (fold into multiple spaces into one) pre (not folded Space) NOWRAP (not allowed, unless you encounter <br> tag) ------------------------------------------------------------------------------------------------------------------------ --------------------------------------------- directory style type syntax : List-style-type: <value> Allow value: disc | circle | Square | DECIMAL | LOWER-Roman | Upper-roman | Lower-alpha | Upper-alpha | NONE initial value: DISC Suitable for: with display value Directory item elements are compatible: is the type of directory style item property specifies the type of directory item tag, which is used when the directory style image value is None or when the image is selected. For example: li.square {list-style-type: Square} ul.plain {list-style-type: none} OL {List-style-type: Upper-alpha} / * Abcde etc. * / OL ol {list- Style-Type: Decimal} / * 1 2 3 4 5 etc. * / OL OL ol {list-style-type: lower-roman} / * i i i iii iv v etc. * /</p>
<p>-------------------------------------------------- ------------------------------ Directory style image syntax: List-style-image: <value> Allow value: <URL > | NONE initial value: NONE Applicable to: Directory item element with display values is compatible: Yes when the image load option is open, directory style image properties use which image to specify the directory item tag instead of directory style Type properties specified tags. For example: ul.check {list-style-image: URL (/LI-MARKERS/Checkmark.gif)} UL li.x {list-style-image: URL (X.PNG)}</p>
<p>-------------------------------------------------- ------------------------------ Directory Style Position Syntax: List-style-position: <value> Allow value: Inside | OUTSIDE Initial value: Outside is suitable for: directory item elements with display values to be compatible: is the directory style location attribute to take value in INSIDE or Outside, where Outside is the default. The entire property determines that the tag of the directory item should be placed there. If you use an InsIDE value, the wrap will move down to the mark instead of indentation. Applications are as follows: Outside Rendering: * list item 1second Line of List ItemInside Rendering: * List item 1second Line of List Item</p>
<p>-------------------------------------------------- ------------------------------ Directory Style Syarct: List-style: <value> Allow value: <directory style type> | | <Directory style location> || <URL> initial value: Undefined Suitable for directory item elements with display values, it is compatible: is the directory style property is a directory style type, directory style location, and directory style image properties Odd written. For example: li.square {list-style: Square inside} ul.plain {list-style: none} ul.check {list-style: url (/li-markers/checkmark.gif) Circle} OL {List-style: Upper-alpha} OL ol {list-style: lower-roman inside} CSS unit ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ------------------------------------------------ Length unit A length of the value by an optional positive number " " or negative "-", then one of the numbers, and the two letters indicated by the unit. Among the values of one length, there is no space, for example, 1.3 EM is not a valid value of a valid length, but 1.3em is effective. A unit declaration that does not require two letters for zero length. Whether it is a relative value or an absolute length, CSS1 supports. The relative value unit determines a length relative to another length attribute because it can better adapt to different media, so it is preferred. The following is an effective relative unit: EM (the height of the font of the element) EX (X-height, the height of the letter "x") PX (pixel, relative to the screen resolution) absolute length unit depending on the output medium, So inferior to relative units. The following is an effective absolute unit: in (inches, 1 inch = 2.54 cm) cm (cm, 1 cm = 10 mm) mm (m) PT (point, 1 point = 1/72 inches) PC (Pa, 1 Pa = 12 o'clock)</p>
<p>-------------------------------------------------- ----------------------------- Percentage unit a percentage value by an optional positive number " " or negative "-" Then a number, there is a percentage "%". There is no space among a percentage value. The percentage value is used to define each attribute relative to other values. The most often used percentage is the size of the font relative to the elements.</p>
<p>-------------------------------------------------- ------------------------------ Color unit color value is a keyword or a number of RGB format. Windows VGA (video image arrays) forming 16 keywords: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, and Yellow. RGB color can have four forms: #RRGGBB (eg, # 00cc00) #RGB (eg, # 0c0) RGB (x, x, x) x is an integer (eg, RGB (0, 204) between 0 and 255 0)) RGB (Y%, Y%, Y%) Y is an integer (e.g., RGB (0%, 80%, 0%)) of an integer (e.g., RGB (0%, 80%, 0%)), which specifies the same color. Douglas R. Jacobson has also developed a quick-study manual RGB Color Chart (61 KB). -------------------------------------------------- ----------------------------- Unified Resource Management URLS A URL value is: URL (foo), foo is a URL (Unified resource management, the address of the Internet). The URL can select single quotes (') or double quotation marks ("), and, before or after the URL can include spaces. In the URL, the bracket, comma, space, single quotes, or double quotes must avoid the backslash. Incomplete URLS is understood as the source code of the style sheet instead of the html source code. Note: Netscape Navigator 4.x will incorrectly understand the incomplete URLS as the associated HTML source code. Note that after this error, web page production The complete URLS should be used in a possible place. For example: body {background: body {background: URL (http://www.htmlhelp.com/stripe.gif)} body {background: URL (Stripe.gif)} Body {Background: URL ("stripe.gif")} Body {Background: URL (/ "uLalume /". PNG)} / * quotes in url escaped * / Add a style sheet to HTML - -------------------------------------------------- ----------------------------- There are many ways to add style sheets to HTML, each with their own advantages and disadvantages The new HTML element and attribute have been added to allow the style sheet to be more simple and easy to combine with the HTML document. Connect to an external style sheet embed a style sheet Enter a style table Inline style class attribute id attribute SPAN element DIV element About Certified note</p>
<p>-------------------------------------------------- ------------------------------ Connect to an external style table A external style sheet can be connected via HTML's LINK element HTML document: <link rel = stylesheet href = "style.css" type = "text / css" Media = Screen> <link rel = stylesheet href = "color-8b.css" type = "text / css" title = "8-bit color style" Media = "Screen, Print"> <link rel = "alternate style" href = "color-24b.css" type = "text / css" title = "24-bit color style" Media = "Screen, Print"> <link rel = stylesheet href = "AURAL.CSS" type = "text / css" Media = AURAL> <link> tag is a head section placed on the document. Optional Type properties are used to specify media types --Text / CSS is a stacked style sheet - allowing the browser to ignore the type table types they do not support. Configuring the server for the CSS file and sending Text / CSS as a Content-Type content is also a good noteworthy. The external style sheet cannot contain any html markers such as <head> or <style>. Style sheets are only consisting of style rules or declarations. A separate</p>
<p>P {margin: 2EM} The file can be used as an external style table. The <link> tag also has an optional Media property that specifies the media or media that the style sheet is accepted. The allowed value has a Screen (default), submitted to the computer screen; Print, output to the printer; Projection, submit to the projector; AURAL, speaker; BRAILLE, submit to convex tactile sensation equipment; TTY, electrical typewriting machine (use Fixed fonts); TV, TV, ALL, all output devices. Diverse media is specified by a list or value all of a comma. Netscape Navigator 4.x incorrectly ignores any connection or embedded style sheets that use the Media value outside of Screen values. For example, Media = "Screen, Projection" will make the style sheet to be ignored by Navigator 4.x, although the displayed device is the computer's screen. Navigator 4.x also ignores the style sheet that uses Media = All declaration. The REL property is used to define the relationship between the connection file and the HTML document. Rel = Stylesheet Specifies a fixed or preferred style and rel = "alternate styleteet" defines a interactive style. Fixed styles are always applied when the style sheet is activated. The lack of Title properties, as the first <link> tag in the example defines a fixed style. A preferred pattern will automatically be applied, just like the second <link> tag in the example. Rel = Stylesheet and a combination of Title properties Specify a preferred style. Web pages cannot specify more than one preferred style. Interactive style by rel = "alternate style" "pointed out. The third <link> tag in the example defines a interactive style, and the user can choose to replace the preferred style sheet. Note that now browsers generally lack the ability to select interactive style. Single style can also be given <link rel = stylesheet href = "basics.css" title = "limited"> <link rel = style = "limited" title = "contemporary"> <link REL = " Rel = styleSheet href = "forms.css" title = "contemporary"> In this example, three style sheets are combined into a "contemporary" style as a preferred style sheet is applied. To combine multiple styles to form a single pattern, you must use the same Title in each style sheet. An external style sheet is ideal when the style is applied to a lot of web pages. Web producers use an external style sheet to change the appearance of the entire website and only change a file. Similarly, most browsers save an external style sheet in the buffer, so that if the style sheet avoids the delay when the web page is displayed. Microsoft Internet Explorer 3 for Windows 95 / NT4 does not support the Body background image or color from the connected style sheet. If this error is considered, the web maker may provide additional structures including a background image or color, such as an embedded or continental pattern, or using the BACKGROUND attribute of the body element. -------------------------------------------------- ------------------------------</p>
<p>Embed a style table A style sheet can be embedded in the document using the style element: <style type = "text / css" Media = Screen> <! - body {background: URL (foo.gif) red; color: black} P EM {Background: Yellow; Color: Black} .note {margin-left: 5em; Margin-Right: 5em} -> </ style> style element is placed in the head section of the document. Must be used to specify the media type, the LINK element is the same. Similarly, Title and Media properties can also be specified in style. Older version of the browser does not recognize the style element, which will show its content as part of the body, so that these style sheets are visible to the user. To prevent this, the content of the Style element should contain an SGML annotation (<! - comment ->) inside, like the above example. The embedded style sheet can be used when a document has a unique style. If multiple documents use the same style table, then external style tables will be more applicable. -------------------------------------------------- ------------------------------ Enter a style sheet a style sheet can be entered using the CSS @Import declaration. This statement is used in a CSS file or the inside style element: <style type = "text / css" Media = "Screen, Projection"> <! - @ import url (http://www.htmlhelp.com/style. CSS); @ Import URL (/Stylesheets/Punk.css); DT {Background: Yellow; Color: Black} -> </ style> Note that other CSS rules should still include in the style element, but all @Import The statement must be placed in the start of the style sheet. Rules specified in the style table, they own the rules that are opposed in the input style table. For example, in an example, even an input style table contains DT {Background: Aqua}, definition terms will remain yellow background. The order of the input style sheet is important for how they laminated. In the above example, if the style sheet input by style.css is specified as red and the Punk.css style sheet specifies that the Strong element is displayed as yellow, then the back rule will win, and the Strong element will be displayed as yellow. The input style sheet is useful for the modular effect. For example, a website can classify a style sheet by using the selected selector. A Simple.css style sheet gives a common element like Body, P, H1, and H2. In addition, an extra.css style sheet gives less common elements like Code, BlockQuote, and DFN. A tables.css style sheet can be used to define rules for change elements. These three style sheets can be included in HTML when they need it. Three style sheets can also be combined via a LINK element.</p>
<p>-------------------------------------------------- ---------------------------- Inline style style can use the style attribute inline. The Style property can be applied to any BODY element (including Body itself), except for BaseFont, Param, and Script. This attribute regards any number of CSS declarations as its own value, and each declaration is separated by a semicolon. The following is an example: <p style = "Color: Red; font-family: 'new century schoolbook', serif"> This style is a red New Century SchoolBook word, if the font is available. </ P> Note that the New Century Schoolbook in Style is included in single quotes because the dual quotes are used as a style declaration. The inline style is more flexible than other methods. To use the inline style, you must use the Content-Style-Type HTTP header extension to make a separate style sheet language declaration for the entire document. Use the inline CSS web maker must use the Text / CSS as the Content-style-type http header, or in the HEAD section including the following tags: <meta http-equiv = "content-style-type" content = "text / css "Because it is mixed with the content that needs to be displayed, the inline style will lose the advantages of some style sheets. Similarly, the inline style accepts all media by default because there is no statement to specify a clear media for inline style. This approach should be used as little as possible, such as an individual case where a style is applied to all media to an element. If the style is applied to a single element, you can only use the ID attribute instead of the style property using the confirmation media. -------------------------------------------------- ---------------------------- Class property class attribute is used to specify the class that the element belongs to. For example, the style sheet can join the Punk and Warning class: .punk {color: life; background: # ff80c0} P.Warning {font-weight: bolder; color: red; background: white} These classes can use the class properties in HTML Quote: <h1 class = punk> Properties Extended </ h1> <p class = warning> Some property extensions have a negative edge effect, generated on support and unsupported browsers ... In this example, Punk Classs can be used for any body element because it does not have an HTML element association in the style sheet. In this case, the Warning class can only be used for P elements. A good habit is when naming, according to their features rather than according to their appearance. The Warning class in the above example can also be named RED, but if the web maker decided to change this type of style as another color, or if you want to define the AURAL (auditory) style for those who use the PC speaker, then this name is It has become meaningless. The class will be an effective way to apply the style to the same part of the HTML document. For example, this page uses a different style to CSS source code and HTML source code.</p>
<p>-------------------------------------------------- ---------------------------- ID attribute ID property is used to define a unique style of an element. A CSS rule, such as # wdg97 {font-size: larger} can be applied to HTML via ID attribute: <p id = wdg97> Welcome to Web Design Group and TV Water 168! </ P> Each ID attribute in the entire document The value must be unique. Its value must be a letter, literacy, or even characters starting with letters. Letters are limited to A-Z and A-Z. Note HTML 4.0 allows you to have an end in the ID attribute, but CSS1 does not allow a period in the ID selector. Also note that CSS1 allows Unicode characters 161-255 and ignores Unicode characters as a digital code, but HTML 4.0 does not allow these characters to be among an ID attribute value. When a style only needs to be applied once in any document, it is very suitable. The ID is compared to the style attribute that the id allows the specified media to be specified, and can also be applied to multiple documents (although each document is only once). -------------------------------------------------- ---------------------------- SPAN elements SPAN elements are added to HTML to allow webmakers to give pattern but do not have additional On a structural element of an HTML. SPAN is used as a selector in the style sheet, and it can also accept Style, Class, and ID properties. SPAN is an inline element, so it can be used as elements in HTML such as EM and Strong. The most important difference is that although EM and Strong have structural meaning, SPAN has no such meaning. Its existence is purely application style, so it doesn't work when it fails when the style sheet is invalid. Some span examples are as follows: <! W3C // DTD HTML 4.0 // en "> <html> <head> <title> span example </ title> <style type =" text / css " Media = "Screen, Print, Projection"> <! -. Firstwords {font-variant: Small-Caps} -> </ style> </ head> <body> <p> <span class = firstwords> The first FEW WORDS </ span> The front is a small number of words in the paragraph, which will be a small uppercase letter. Style can also be inline, such as changing the style of writing is <span style = "font-family: arial"> arial </ span>. </ P></p>
<p>-------------------------------------------------- ---------------------------- DIV element DIV element is functionally similar to the span element, the most important difference is DIV ("Division "," Part "is a block element element. The DIV can contain paragraphs, titles, tables or even other parts. This makes the Div to establish a class of different integration, such as chapters, summary or notes. For example: <div class = Note> <h1> division / part </ h1> <p> DIV element is defined in HTML 3.2, but only ALIGN property is compatible in HTML 3.2. HTML 4.0 adds Class, Style, and ID attributes in the property. </ P> <p> Because the DIV can contain other block levels, it is useful for large chapters for establishing documents, such as this note. </ P> <p> Requires the tag. </ P> </ div> -------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------- About the certified note to use the CSS style document Certified at the HTML3.2 (Wilbur) layer (in WDG website, translator's note). HTML3.2 does not explain the SPAN elements, nor to explain the Class, Style or ID properties, and also support Type and Media properties in the Link and Style elements. These related style elements and properties do not harmful to the unsupported browsers because they can be securely ignored. Documents use these elements and attributes can be authenticated to defend against HTML 4.0.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-43714.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="43714" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.036</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'TyPJP79cRKcAZcMyrBepezaxkIm6092u_2BLQDRS8NN84_2Fz6ABaYKBriwpgRPbIRi1oiSDdNLpNTvn_2BYilPL2Vwg_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
